diff --git a/webapp/src/components/genericComponents/actionLogDisplay.vue b/webapp/src/components/genericComponents/actionLogDisplay.vue
new file mode 100644
index 00000000..f805cf4e
--- /dev/null
+++ b/webapp/src/components/genericComponents/actionLogDisplay.vue
@@ -0,0 +1,61 @@
+<template>
+  <div ref="logContainer" class="log-container">
+    <div v-if="log">
+      <div v-for="(item, index) in log" :key="`log_entry_${index}`">
+        {{ item.message }}
+      </div>
+    </div>
+    <div v-if="taskStatus == 'error'" class="uk-alert uk-alert-danger">
+      The task failed due to an error. There may be more information in the log.
+    </div>
+    <div v-if="taskStatus == 'cancelled'" class="uk-alert uk-alert-warning">
+      The task was cancelled.
+    </div>
+    <div v-if="taskStatus == 'completed'" class="uk-alert uk-alert-success">
+      The task completed successfully.
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ActionLogDisplay",
+
+  props: {
+    taskStatus: {
+      type: String,
+      required: true
+    },
+    log: {
+      type: Array,
+      required: true
+    }
+  },
+
+  watch: {
+    log: function() {
+      this.scrollToBottom();
+    },
+    taskStatus: function() {
+      this.scrollToBottom();
+    }
+  },
+
+  methods: {
+    scrollToBottom() {
+      this.$nextTick(function() {
+        let viewer = this.$refs.logContainer;
+        viewer.scrollTop = viewer.scrollHeight;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.log-container {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+</style>
diff --git a/webapp/src/components/genericComponents/actionProgressBar.vue b/webapp/src/components/genericComponents/actionProgressBar.vue
new file mode 100644
index 00000000..ae2c838c
--- /dev/null
+++ b/webapp/src/components/genericComponents/actionProgressBar.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="progress uk-margin-small">
+    <div v-if="indeterminateProgressBar" class="indeterminate"></div>
+    <div v-else class="determinate" :style="barWidthFromProgress"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ActionProgressBar",
+
+  props: {
+    progress: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    taskStatus: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    barWidthFromProgress: function() {
+      var progress = this.progress <= 100 ? this.progress : 100;
+      var styleString = `width: ${progress}%`;
+      return styleString;
+    },
+    indeterminateProgressBar: function() {
+      if (this.taskStatus == "pending") return true;
+      if ((this.taskStatus == "running") & !this.progress) {
+        return true;
+      }
+      return false;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/theme.less";
+
+.progress {
+  position: relative;
+  height: 5px;
+  display: block;
+  width: 100%;
+  background-color: rgba(180, 180, 180, 0.15);
+  border-radius: 2px;
+  background-clip: padding-box;
+  margin: 0.5rem 0 1rem 0;
+  overflow: hidden;
+}
+
+.progress .determinate {
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  bottom: 0;
+  transition: width 0.3s linear;
+}
+
+.progress .indeterminate,
+.progress .determinate {
+  background-color: @global-primary-background;
+}
+
+.hook-inverse() {
+  .progress .indeterminate,
+  .progress .determinate {
+    background-color: @inverse-primary-muted-color;
+  }
+}
+
+.progress .indeterminate:before {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+    infinite;
+  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.progress .indeterminate:after {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
+    infinite;
+  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
+    infinite;
+  -webkit-animation-delay: 1.15s;
+  animation-delay: 1.15s;
+}
+
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+</style>
diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index 1c235982..8ebc1bf0 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -4,30 +4,7 @@
     class="uk-margin-remove uk-padding-remove"
   >
     <div v-if="taskStarted" ref="isPollingElement">
-      <div class="progress uk-margin-small">
-        <div
-          v-if="progress & (taskStatus == 'running')"
-          class="determinate"
-          :style="barWidthFromProgress"
-        ></div>
-        <div
-          v-else-if="taskStatus == 'cancelled'"
-          class="determinate"
-          :style="barWidthFromProgress"
-        ></div>
-        <div
-          v-else-if="taskStatus == 'completed'"
-          class="determinate"
-          style="width:100%"
-        ></div>
-        <div
-          v-else-if="taskStatus == 'error'"
-          class="determinate"
-          style="width:0%"
-        ></div>
-        <div v-else class="indeterminate"></div>
-      </div>
-
+      <action-progress-bar :progress="progress" :task-status="taskStatus" />
       <button
         v-if="canTerminate && taskRunning"
         type="button"
@@ -56,33 +33,18 @@
       class=""
       uk-modal="bg-close: false; esc-close: false; stack: true;"
     >
-      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+      <div
+        id="status-modal"
+        class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical"
+      >
         <h2>{{ submitLabel }}</h2>
-        <div id="log-container" ref="logContainer">
-          <div v-for="(item, index) in log" :key="`log_entry_${index}`">
-            {{ item.message }}
-          </div>
-          <div v-if="taskStatus == 'error'" class="uk-alert-danger">
-            The task failed due to an error. There may be more information in
-            the log.
-          </div>
-          <div v-if="taskStatus == 'cancelled'" class="uk-alert-warning">
-            The task was cancelled.
-          </div>
-          <div v-if="taskStatus == 'completed'" class="uk-alert-success">
-            The task completed successfully.
-          </div>
-        </div>
+        <action-log-display :log="log" :task-status="taskStatus" />
         <div id="progress-and-cancel-row">
           <div class="stretchy">
-            <div class="progress uk-margin-small">
-              <div v-if="indeterminateProgressBar" class="indeterminate"></div>
-              <div
-                v-else
-                class="determinate"
-                :style="barWidthFromProgress"
-              ></div>
-            </div>
+            <action-progress-bar
+              :progress="progress"
+              :task-status="taskStatus"
+            />
           </div>
 
           <button
@@ -110,9 +72,12 @@
 <script>
 import axios from "axios";
 import UIkit from "uikit";
+import actionProgressBar from "./actionProgressBar.vue";
+import ActionLogDisplay from "./actionLogDisplay.vue";
 
 export default {
   name: "TaskSubmitter",
+  components: { actionProgressBar, ActionLogDisplay },
 
   props: {
     submitUrl: {
@@ -177,27 +142,21 @@ export default {
     };
   },
 
-  computed: {
-    barWidthFromProgress: function() {
-      var progress = this.progress <= 100 ? this.progress : 100;
-      var styleString = `width: ${progress}%`;
-      return styleString;
-    },
-    indeterminateProgressBar: function() {
-      if (this.taskStatus == "pending") return true;
-      if ((this.taskStatus == "running") & !this.progress) {
-        return true;
-      }
-      return false;
-    }
-  },
-
   watch: {
-    log: function() {
-      this.$nextTick(function() {
-        let viewer = this.$refs.logContainer;
-        viewer.scrollTop = viewer.scrollHeight;
-      });
+    progress(newval) {
+      this.$emit("update:progress", newval);
+    },
+    taskStarted(newval) {
+      this.$emit("update:taskStarted", newval);
+    },
+    taskRunning(newval) {
+      this.$emit("update:taskRunning", newval);
+    },
+    log(newval) {
+      this.$emit("update:log", newval);
+    },
+    taskStatus(newval) {
+      this.$emit("update:taskStatus", newval);
     }
   },
 
@@ -235,7 +194,7 @@ export default {
             this.$emit("taskStarted");
             this.startPolling(
               task.id,
-              task.links.find(t => t.rel == self).href
+              task.links.find(t => t.rel == "self").href
             );
           }
         }
@@ -352,6 +311,7 @@ export default {
     },
 
     terminateTask: function() {
+      console.log(`deleting task at ${this.taskUrl}`);
       axios.delete(this.taskUrl);
     }
   }
@@ -361,13 +321,6 @@ export default {
 <style lang="less" scoped>
 @import "../../assets/less/theme.less";
 
-#log-container {
-  position: relative;
-  height: 6em;
-  overflow-y: auto;
-  overflow-x: auto;
-}
-
 #progress-and-cancel-row {
   display: flex;
   flex-flow: row wrap;
@@ -387,121 +340,8 @@ export default {
   margin-left: 5px;
   margin-right: 5px;
 }
-.progress {
-  position: relative;
-  height: 5px;
-  display: block;
-  width: 100%;
-  background-color: rgba(180, 180, 180, 0.15);
-  border-radius: 2px;
-  background-clip: padding-box;
-  margin: 0.5rem 0 1rem 0;
-  overflow: hidden;
-}
 
-.progress .determinate {
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  bottom: 0;
-  transition: width 0.3s linear;
-}
-
-.progress .indeterminate,
-.progress .determinate {
-  background-color: @global-primary-background;
-}
-
-.hook-inverse() {
-  .progress .indeterminate,
-  .progress .determinate {
-    background-color: @inverse-primary-muted-color;
-  }
-}
-
-.progress .indeterminate:before {
-  content: "";
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  will-change: left, right;
-  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
-    infinite;
-  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-}
-
-.progress .indeterminate:after {
-  content: "";
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  will-change: left, right;
-  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
-    infinite;
-  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
-    infinite;
-  -webkit-animation-delay: 1.15s;
-  animation-delay: 1.15s;
-}
-
-@-webkit-keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-@keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-@-webkit-keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
-@keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
+#status-modal .log-container {
+  height: 10em;
 }
 </style>
diff --git a/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue b/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
deleted file mode 100644
index 14c1eedb..00000000
--- a/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="uk-padding-small">
-    <div v-show="!backendOK" class="uk-alert-danger">
-      No scan back-end found.
-    </div>
-    <div v-show="backendOK">
-      <ul uk-accordion="multiple: true">
-        <li>
-          <a class="uk-accordion-title" href="#">Configure</a>
-            <div class="uk-accordion-content">
-                <div class="uk-margin">
-                  <propertyControl
-                    thing-name="smart_scan"
-                    property-name="max_range"
-                    label="Maximum Distance (steps)"
-                  />
-                  <div class="uk-margin">
-                    <propertyControl
-                      thing-name="smart_scan"
-                      property-name="autofocus_dz"
-                      label="Autofocus range (steps)"
-                    />
-                </div>
-                  <div class="uk-margin">
-                      <propertyControl
-                        thing-name="smart_scan"
-                        property-name="overlap"
-                        label="Image overlap (0-1)"
-                      />
-                  </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-        <div class="uk-margin">
-          <taskSubmitter
-          :submit-url="smartScanUri"
-          :submit-data="{ sample_check: true }"
-          submit-label="Start smart scan"
-          :can-terminate="true"
-          :modal-progress="true"
-          />
-        </div>
-        <div class="uk-margin">
-          <taskSubmitter
-          :submit-url="smartScanUri"
-          :submit-data="{ sample_check: false }"
-          submit-label="Start manual scan"
-          :can-terminate="true"
-          :modal-progress="true"
-          />
-        </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import taskSubmitter from "../../genericComponents/taskSubmitter";
-import propertyControl from "../../labThingsComponents/propertyControl.vue";
-
-export default {
-  components: {
-    taskSubmitter,
-    propertyControl
-  },
-
-  computed: {
-    backendOK() {
-      return this.thingAvailable("smart_scan");
-    },
-    smartScanUri() {
-      return this.thingActionUrl("smart_scan", "sample_scan");
-    }
-  },
-
-  methods: {
-    onScanError: function(error) {
-      this.scanRunning = false;
-      this.modalError(error);
-    }
-  }
-};
-</script>
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 53f3c3fa..de827dbd 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -1,8 +1,88 @@
 <template>
+  <div v-if="!backendOK" class="uk-alert-danger">
+    No scan back-end found.
+  </div>
   <!-- Grid managing tab content -->
-  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
-    <div class="control-component">
-      <paneSlideScan />
+  <div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component uk-padding-small">
+      <div v-show="!scanning">
+        <ul uk-accordion="multiple: true">
+          <li>
+            <a class="uk-accordion-title" href="#">Configure</a>
+            <div class="uk-accordion-content">
+              <div class="uk-margin">
+                <propertyControl
+                  thing-name="smart_scan"
+                  property-name="max_range"
+                  label="Maximum Distance (steps)"
+                />
+                <div class="uk-margin">
+                  <propertyControl
+                    thing-name="smart_scan"
+                    property-name="autofocus_dz"
+                    label="Autofocus range (steps)"
+                  />
+                </div>
+                <div class="uk-margin">
+                  <propertyControl
+                    thing-name="smart_scan"
+                    property-name="overlap"
+                    label="Image overlap (0-1)"
+                  />
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+        <div class="uk-margin">
+          <taskSubmitter
+            ref="smartScanTaskSubmitter"
+            :submit-url="smartScanUri"
+            submit-label="Start smart scan"
+            :can-terminate="true"
+            :submit-data="{ sample_check: true }"
+            @taskStarted="scanning = true"
+            @update:taskStatus="taskStatus = $event"
+            @update:progress="progress = $event"
+            @update:log="log = $event"
+          />
+        </div>
+        <div class="uk-margin">
+          <taskSubmitter
+            :submit-url="smartScanUri"
+            submit-label="Start manual scan"
+            :can-terminate="true"
+            :submit-data="{ sample_check: false }"
+            @update:taskStatus="taskStatus = $event"
+            @update:progress="progress = $event"
+            @update:log="log = $event"
+          />
+        </div>
+      </div>
+      <div v-show="scanning">
+        <action-log-display
+          id="log-display"
+          :log="log"
+          :task-status="taskStatus"
+        />
+        <action-progress-bar :progress="progress" :task-status="taskStatus" />
+        <button
+          v-if="cancellable"
+          type="button"
+          class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
+          @click="$refs.smartScanTaskSubmitter.terminateTask()"
+        >
+          Cancel
+        </button>
+        <button
+          v-if="!cancellable"
+          type="button"
+          class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
+          @click="scanning = false"
+        >
+          Close
+        </button>
+      </div>
     </div>
     <div class="view-component uk-width-expand">
       <streamDisplay />
@@ -11,15 +91,59 @@
 </template>
 
 <script>
-import paneSlideScan from "./slideScanComponents/paneSlideScan";
 import streamDisplay from "./streamContent.vue";
+import taskSubmitter from "../genericComponents/taskSubmitter";
+import propertyControl from "../labThingsComponents/propertyControl.vue";
+import actionLogDisplay from "../genericComponents/actionLogDisplay.vue";
+import actionProgressBar from "../genericComponents/actionProgressBar.vue";
 
 export default {
   name: "SlideScanContent",
 
   components: {
-    paneSlideScan,
-    streamDisplay
+    streamDisplay,
+    taskSubmitter,
+    propertyControl,
+    actionLogDisplay,
+    actionProgressBar
+  },
+
+  data() {
+    return {
+      lastScanName: null,
+      scanning: false,
+      taskStatus: "pending",
+      progress: null,
+      log: []
+    };
+  },
+
+  computed: {
+    backendOK() {
+      return this.thingAvailable("smart_scan");
+    },
+    smartScanUri() {
+      return this.thingActionUrl("smart_scan", "sample_scan");
+    },
+    cancellable() {
+      return (this.taskStatus == "running") | (this.taskStatus == "pending");
+    }
+  },
+
+  methods: {
+    onScanError: function(error) {
+      this.scanRunning = false;
+      this.modalError(error);
+    }
   }
 };
 </script>
+
+<style scoped>
+#log-display {
+  height: 20em;
+}
+.control-component {
+  width: 33%;
+}
+</style>