diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
index 0d73ca72..50f5a93a 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
@@ -5,10 +5,19 @@
     </p>
     <p>If it is not in focus, click back and re-focus.</p>
     <template #below-stream>
+      <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
       <div class="action-button-container">
-        <CSMCalibrationSettings
-          :show-extra-settings="false"
-          @recalibrate-response="checkCalibrationState"
+        <action-button
+          :button-primary="true"
+          :can-terminate="true"
+          thing="camera_stage_mapping"
+          action="calibrate_xy"
+          :submit-label="'Auto-Calibrate Using Camera'"
+          @error="modalError"
+          @update:task-status="taskStatus = $event"
+          @update:log="log = $event"
+          @task-started="$emit('prevent-navigation', true)"
+          @finished="$emit('prevent-navigation', false)"
         />
       </div>
     </template>
@@ -16,18 +25,27 @@
 </template>
 
 <script>
+import actionButton from "@/components/labThingsComponents/actionButton.vue";
+import actionLogDisplay from "@/components/labThingsComponents/actionLogDisplay.vue";
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
-import CSMCalibrationSettings from "../../../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
 
 export default {
   name: "CSMMainCalibrationStep",
 
   components: {
+    actionButton,
+    actionLogDisplay,
     stepTemplateWithStream,
-    CSMCalibrationSettings,
   },
 
-  emits: ["awaiting-user"],
+  emits: ["prevent-navigation", "awaiting-user"],
+
+  data: function () {
+    return {
+      log: [],
+      taskStatus: "",
+    };
+  },
 
   mounted() {
     this.checkCalibrationState();
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index fb4e2a1e..93147ecf 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="CSMCalibrationSettings" ref="CSMCalibrationSettingsContainer" class="uk-width-large">
     <!--Show auto calibrate if default plugin is enabled-->
-    <div v-if="'calibrate_xy' in actions" class="uk-margin-small">
+    <div class="uk-margin-small">
       <action-button
         :button-primary="true"
         :can-terminate="true"
@@ -17,7 +17,6 @@
       />
     </div>
     <button
-      v-if="'last_calibration' in properties"
       v-show="showExtraSettings"
       type="button"
       class="uk-button uk-button-default uk-width-1-1"
@@ -88,15 +87,6 @@ export default {
     };
   },
 
-  computed: {
-    actions() {
-      return this.thingDescription("camera_stage_mapping").actions;
-    },
-    properties() {
-      return this.thingDescription("camera_stage_mapping").properties;
-    },
-  },
-
   mounted() {
     useIntersectionObserver(
       this.$refs.CSMCalibrationSettingsContainer,