diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
new file mode 100644
index 00000000..092da2ce
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="uk-card">
+    <div class="uk-card-body">
+      <div class="uk-card-media-top">
+        <div
+          class="view-image uk-padding-remove uk-height-1-1"
+        >
+          <img
+            id="thumbnail-stitched-image"
+            class="thumbnail-fit"
+            :src="thumbnailPath(scanData.name)"
+            onerror="this.src='/titleiconpink.svg';"
+            @click="requestViewer"
+          />
+        </div>
+      </div>
+      <h3 class="uk-card-title" style="text-align: center;">{{ scanData.name }}</h3>
+      <div class="button-container">
+      <div class="uk-button-group" style="width:100%">
+        <action-button
+        class="uk-width-1-2"
+        thing="smart_scan"
+        action="download_zip"
+        submit-label="Download All"
+        :can-terminate="false"
+        :submit-data="{ scan_name: scanData.name }"
+        :button-primary="true"
+        @response="downloadZipFile"
+        @error="modalError"
+        />
+        <EndpointButton
+          class="uk-width-1-2"
+          :buttonPrimary=true
+          :isDisabled=!scanData.stitch_available
+          :URL="downloadStitchFile( scanData.name )"
+          buttonLabel="Download JPEG"
+          />
+      </div>
+      <button
+        class="uk-button uk-button-default uk-width-1-1"
+        @click="deleteScan(scanData.name)"
+      >
+        Delete
+      </button>
+      <action-button
+        submit-label="Stitch Images"
+        thing="smart_scan"
+        action="stitch_scan"
+        v-if="scanData.can_stitch | (scanData.stitch_available & !scanData.dzi)"
+        :can-terminate="true"
+        :submit-data="{ scan_name: scanData.name }"
+        :button-primary="false"
+        :modal-progress="true"
+        @error="modalError"
+      />
+      <button
+        v-if="scanData.dzi" class="uk-button uk-button-default uk-width-1-1"
+        @click="requestViewer"
+      >
+      Show Stitched Scan
+      </button>
+      </div>
+      <div>
+      <ul>
+        <li>{{ scanData.number_of_images }} images</li>
+        <li>created: {{ formatDate(scanData.created) }}</li>
+        <li>modified: {{ formatDate(scanData.modified) }}</li>
+      </ul>
+        <li v-if="scanData.number_of_images<3" class="warning-msg">Not enough images to stitch</li>
+        <li v-else-if="!scanData.dzi & scanData.stitch_available" class="alert-msg">Interactive preview not available</li> 
+        <li v-else-if=!scanData.stitch_available class="alert-msg">High quality stitch not available</li>  
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import actionButton from "../../labThingsComponents/actionButton.vue";
+import EndpointButton from "../../labThingsComponents/endpointButton.vue";
+
+// Export main app
+export default {
+  name: "ScanCard",
+  components: { actionButton, EndpointButton },
+
+  props: {
+    scanData: {
+      type: Object,
+      required: true
+    },
+    scansUri: {
+      type: String,
+      required: true
+    }
+  },
+
+  methods: {
+    downloadStitchFile: function(name) {
+      return `${this.$store.getters.baseUri}/smart_scan/get_stitch/${name}`;
+    },
+    thumbnailPath(scan_name) {
+      return (
+        `${this.$store.getters.baseUri}/smart_scan/scans/stitched_thumbnail.jpg?scan_name=` +
+        scan_name
+      );
+    },
+    formatDate(timestamp) {
+      // Multiply by 1000 as JS uses ms not s
+      let d = new Date(timestamp*1000);
+      // Convert to a string in a very javascript way!
+      let yyyy = d.getFullYear();
+      let mm = d.getMonth() + 1;
+      let dd = d.getDate();
+      let HH = d
+        .getHours()
+        .toString()
+        .padStart(2, "0");
+      let MM = d
+        .getMinutes()
+        .toString()
+        .padStart(2, "0");
+      return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
+    },
+    requestViewer() {
+      // Notify parent that thumbnail was clicked
+      this.$emit('viewer-requested', this.scanData);
+    },
+    async deleteScan(name) {
+      try {
+        await this.modalConfirm(`Are you sure you want to delete ${name}?`);
+        await axios.delete(`${this.scansUri}/${name}`);
+        this.$emit('update-requested');
+        this.modalNotify(`Deleted ${name}`);
+      } catch (e) {
+        // if the confirmation was cancelled, it's rejected with null error
+        if (e) this.modalError(e);
+      }
+    },
+    async downloadZipFile(response) {
+      const scan_name = response.input.scan_name;
+      const filename = `${scan_name}_images.zip`;
+      const url = response.output.href;
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", filename);
+      console.log(link);
+      document.body.appendChild(link);
+      link.click();
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+ul {
+  display: inline-block;
+  text-align: center;
+  list-style-type:none;
+  margin: 5px 0px 10px 0px;
+}
+
+.warning-msg {
+  color: red;
+  text-align: center;
+  font-weight: bold;
+}
+
+.alert-msg{
+  color: orange;
+  text-align: center;
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 1abed3a0..d4434415 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -60,12 +60,12 @@
             <span class="material-symbols-outlined">fullscreen</span>
           </button>
           </h2>
-          <div v-if="selectedScanDZIAvailable" id="viewer_container" style="height: 80%;">
-          <OpenSeadragonViewer
-            id="openseadragon"
-            ref="openseadragon"
-            :src="selectedScanDZI"
-          />
+          <div v-if="selectedScanDZI" id="viewer_container" style="height: 80%;">
+            <OpenSeadragonViewer
+              id="openseadragon"
+              ref="openseadragon"
+              :src="selectedScanDZI"
+            />
           </div>
       </div>
     </div>
@@ -84,97 +84,30 @@
             There are no scans available to show.
           </p>
         </div>
-        <div v-for="item in scans" :key="item.id">
-          <div class="uk-card">
-            <div class="uk-card-body">
-              <div class="uk-card-media-top">
-                <div
-                  class="view-image uk-padding-remove uk-height-1-1"
-                >
-                  <img
-                    id="thumbnail-stitched-image"
-                    class="thumbnail-fit"
-                    :src="thumbnailPath(item.name)"
-                    onerror="this.src='/titleiconpink.svg';"
-                    @click="showScan(item)"
-                  />
-                </div>
-              </div>
-              <h3 class="uk-card-title" style="text-align: center;">{{ item.name }}</h3>
-              <div class="button-container">
-              <div class="uk-button-group" style="width:100%">
-                <action-button
-                class="uk-width-1-2"
-                thing="smart_scan"
-                action="download_zip"
-                submit-label="Download All"
-                :can-terminate="false"
-                :submit-data="{ scan_name: item.name }"
-                :button-primary="true"
-                @response="downloadZipFile"
-                @error="modalError"
-                />
-                <EndpointButton
-                  class="uk-width-1-2"
-                  :buttonPrimary=true
-                  :isDisabled=!item.stitch_available
-                  :URL="downloadStitchFile( item.name )"
-                  buttonLabel="Download JPEG"
-                  />
-              </div>
-              <button
-                class="uk-button uk-button-default uk-width-1-1"
-                @click="deleteScan(item.name)"
-              >
-                Delete
-              </button>
-              <action-button
-                submit-label="Stitch Images"
-                thing="smart_scan"
-                action="stitch_scan"
-                v-if="item.can_stitch | (item.stitch_available & !item.dzi)"
-                :can-terminate="true"
-                :submit-data="{ scan_name: item.name }"
-                :button-primary="false"
-                :modal-progress="true"
-                @error="modalError"
-              />
-              <button
-                v-if="item.dzi" class="uk-button uk-button-default uk-width-1-1"
-                @click="showScan(item)"
-              >
-              Show Stitched Scan
-              </button>
-              </div>
-              <div>
-              <ul>
-                <li>{{ item.number_of_images }} images</li>
-                <li>created: {{ formatDate(item.created) }}</li>
-                <li>modified: {{ formatDate(item.modified) }}</li>
-              </ul>
-                <li v-if="item.number_of_images<3" class="warning-msg">Not enough images to stitch</li>
-                <li v-else-if="!item.dzi & item.stitch_available" class="alert-msg">Interactive preview not available</li> 
-                <li v-else-if=!item.stitch_available class="alert-msg">High quality stitch not available</li>  
-              </div>
-          </div>
+        <div v-for="scanData in scans" :key="scanData.id">
+          <scan-card
+            :scan-data="scanData"
+            :scans-uri="scansUri"
+            @viewer-requested="showScan"
+            @update-requested="updateScans"
+          />
         </div>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
 import axios from "axios";
 import UIkit from "uikit";
 import actionButton from "../labThingsComponents/actionButton.vue";
+import scanCard from "./scanListComponents/scanCard.vue";
 import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
-import EndpointButton from "../labThingsComponents/endpointButton.vue";
 
 // Export main app
 export default {
   name: "ScanListContent",
-  components: { actionButton, OpenSeadragonViewer, EndpointButton },
+  components: { actionButton, OpenSeadragonViewer, scanCard },
 
   data: function() {
     return {
@@ -197,14 +130,11 @@ export default {
       return this.scans.length == 0;
     },
     selectedScanDZI() {
-      if (this.selectedScan && this.dzi!="") {
+      if (this.selectedScan && this.selectedScan.dzi!="") {
         return `${this.$store.getters.baseUri}/scans/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
       } else {
         return null;
       }
-    },
-    selectedScanDZIAvailable() {
-      return this.selectedScan && this.selectedScan.dzi;
     }
   },
 
@@ -251,15 +181,6 @@ export default {
   },
 
   methods: {
-    downloadStitchFile: function(name) {
-      return `${this.$store.getters.baseUri}/smart_scan/get_stitch/${name}`;
-    },
-    thumbnailPath(scan_name) {
-      return (
-        `${this.$store.getters.baseUri}/smart_scan/scans/stitched_thumbnail.jpg?scan_name=` +
-        scan_name
-      );
-    },
     visibilityChanged(isVisible) {
       if (isVisible) {
         this.updateScans();
@@ -287,34 +208,6 @@ export default {
         this.scans = [];
       }
     },
-    formatDate(timestamp) {
-      // Multiply by 1000 as JS uses ms not s
-      let d = new Date(timestamp*1000);
-      // Convert to a string in a very javascript way!
-      let yyyy = d.getFullYear();
-      let mm = d.getMonth() + 1;
-      let dd = d.getDate();
-      let HH = d
-        .getHours()
-        .toString()
-        .padStart(2, "0");
-      let MM = d
-        .getMinutes()
-        .toString()
-        .padStart(2, "0");
-      return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
-    },
-    async deleteScan(name) {
-      try {
-        await this.modalConfirm(`Are you sure you want to delete ${name}?`);
-        await axios.delete(`${this.scansUri}/${name}`);
-        await this.updateScans();
-        this.modalNotify(`Deleted ${name}`);
-      } catch (e) {
-        // if the confirmation was cancelled, it's rejected with null error
-        if (e) this.modalError(e);
-      }
-    },
     async deleteAllScans() {
       try {
         await this.modalConfirm(
@@ -329,17 +222,6 @@ export default {
         if (e) this.modalError(e);
       }
     },
-    async downloadZipFile(response) {
-      const scan_name = response.input.scan_name;
-      const filename = `${scan_name}_images.zip`;
-      const url = response.output.href;
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute("download", filename);
-      console.log(link);
-      document.body.appendChild(link);
-      link.click();
-    },
     showScan(scan) {
       if (scan.dzi){
         this.selectedScan = scan;
@@ -348,7 +230,7 @@ export default {
       else {
         this.modalError(`Scan not stitched for viewing in webapp, please download or stitch`)
       }
-    },
+    }
   }
 };
 </script>
@@ -365,23 +247,4 @@ export default {
   margin-bottom: 30px;
 }
 
-ul {
-  display: inline-block;
-  text-align: center;
-  list-style-type:none;
-  margin: 5px 0px 10px 0px;
-}
-
-.warning-msg {
-  color: red;
-  text-align: center;
-  font-weight: bold;
-}
-
-.alert-msg{
-  color: orange;
-  text-align: center;
-  font-weight: bold;
-}
-
 </style>
\ No newline at end of file