diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index 0aaf3af7..c27a8e55 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -4,7 +4,7 @@
     class="uk-grid uk-grid-divider uk-child-width-expand"
     uk-grid
   >
-    <div class="uk-width-large">
+    <div class="uk-width-xlarge">
       <h3>Camera to Stage Mapping</h3>
       <p>
         Camera-stage mapping allows the stage to move relative to the camera
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index 8c892057..05b551c1 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="CSMCalibrationSettings">
+  <div v-observe-visibility="visibilityChanged" id="CSMCalibrationSettings">
     <!--Show auto calibrate if default plugin is enabled-->
     <div v-if="'calibrate_xy' in actions" class="uk-margin-small">
       <action-button
@@ -26,6 +26,16 @@
     >
       Download Calibration Data
     </button>
+    <div v-if="this.csmMatrix!='undefined'" style="margin:10px;">
+    <details><summary>Calibration Details</summary>
+    <strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong>
+    <ul>
+    <li>Current CSM Matrix: <tt>{{ csmMatrix }}</tt></li>
+    <li>Pixels per motor step: {{ csmRatio }}</li>
+    <li>Full field of view: {{ csmFOV }} motor steps</li>
+    </ul>
+    </details>
+    </div>
   </div>
 </template>
 
@@ -47,6 +57,16 @@ export default {
       default: true
     }
   },
+  
+  data() {
+    return {
+      csmMatrix: "undefined",
+      csmResolution: "undefined",
+      csmRatio: "undefined"
+    };
+  },
+
+
 
   computed: {
     actions() {
@@ -60,6 +80,11 @@ export default {
   },
 
   methods: {
+    visibilityChanged(isVisible) {
+      if (isVisible) {
+        this.updateDisplayedCSM();
+      }
+    },
     getCalibrationData: async function() {
       try {
         let data = await this.readThingProperty(
@@ -80,9 +105,33 @@ export default {
         this.modalError(error); // Let mixin handle error
       }
     },
-
+    updateDisplayedCSM: async function() {
+      let csmMatrix = await this.readThingProperty(
+          "camera_stage_mapping",
+          "image_to_stage_displacement_matrix"
+        );
+      this.csmResolution = await this.readThingProperty(
+        "camera_stage_mapping",
+        "image_resolution"
+      );
+      let streamResolution = await this.readThingProperty(
+        "camera",
+        "stream_resolution"
+      );
+      csmMatrix[0][0] = Number(csmMatrix[0][0].toFixed(3));
+      csmMatrix[0][1] = Number(csmMatrix[0][1].toFixed(3));
+      csmMatrix[1][0] = Number(csmMatrix[1][0].toFixed(3));
+      csmMatrix[1][1] = Number(csmMatrix[1][1].toFixed(3));
+      this.csmMatrix = csmMatrix;
+      this.csmRatio = Number((Math.abs(csmMatrix[1][0]) + Math.abs(csmMatrix[0][1])) / 2).toFixed(3);
+      this.csmFOV = [
+        Number((streamResolution[0]**2 * this.csmRatio / this.csmResolution[1]).toFixed(0)),
+        Number((streamResolution[1]**2 * this.csmRatio / this.csmResolution[0]).toFixed(0)),
+      ]
+    },
     onRecalibrateResponse: function() {
       this.modalNotify("Finished stage-to-camera calibration.");
+      this.updateDisplayedCSM();
     }
   }
 };