diff --git a/src/plugins/imagery/components/Compass/Compass.vue b/src/plugins/imagery/components/Compass/Compass.vue
index 5a171a3929..de40fae2dd 100644
--- a/src/plugins/imagery/components/Compass/Compass.vue
+++ b/src/plugins/imagery/components/Compass/Compass.vue
@@ -30,6 +30,8 @@
         :heading="heading"
         :camera-azimuth="cameraAzimuth"
         :transformations="transformations"
+        :has-gimble="hasGimble"
+        :normalized-camera-azimuth="normalizedCameraAzimuth"
         :sun-heading="sunHeading"
     />
     <CompassRose
@@ -37,6 +39,8 @@
         :heading="heading"
         :camera-azimuth="cameraAzimuth"
         :transformations="transformations"
+        :has-gimble="hasGimble"
+        :normalized-camera-azimuth="normalizedCameraAzimuth"
         :sun-heading="sunHeading"
         :sized-image-dimensions="sizedImageDimensions"
     />
@@ -46,6 +50,7 @@
 <script>
 import CompassHUD from './CompassHUD.vue';
 import CompassRose from './CompassRose.vue';
+import { rotate } from './utils';
 
 export default {
     components: {
@@ -63,6 +68,15 @@ export default {
         }
     },
     computed: {
+        hasGimble() {
+            return this.cameraAzimuth !== undefined;
+        },
+        // compass ordinal orientation of camera
+        normalizedCameraAzimuth() {
+            return this.hasGimble
+                ? rotate(this.cameraAzimuth)
+                : rotate(this.heading, -this.transformations?.rotation ?? 0);
+        },
         // horizontal rotation from north in degrees
         heading() {
             return this.image.heading;
diff --git a/src/plugins/imagery/components/Compass/CompassHUD.vue b/src/plugins/imagery/components/Compass/CompassHUD.vue
index bf8c84f950..67f5a64c97 100644
--- a/src/plugins/imagery/components/Compass/CompassHUD.vue
+++ b/src/plugins/imagery/components/Compass/CompassHUD.vue
@@ -110,6 +110,14 @@ export default {
             type: Object,
             required: true
         },
+        hasGimble: {
+            type: Boolean,
+            required: true
+        },
+        normalizedCameraAzimuth: {
+            type: Number,
+            required: true
+        },
         sunHeading: {
             type: Number,
             default: undefined
@@ -138,10 +146,13 @@ export default {
                 left: `${ percentage * 100 }%`
             };
         },
+        cameraRotation() {
+            return this.transformations?.rotation;
+        },
         visibleRange() {
             return [
-                rotate(this.cameraAzimuth, -this.cameraAngleOfView / 2),
-                rotate(this.cameraAzimuth, this.cameraAngleOfView / 2)
+                rotate(this.normalizedCameraAzimuth, -this.cameraAngleOfView / 2),
+                rotate(this.normalizedCameraAzimuth, this.cameraAngleOfView / 2)
             ];
         }
     }
diff --git a/src/plugins/imagery/components/Compass/CompassRose.vue b/src/plugins/imagery/components/Compass/CompassRose.vue
index 3a756075c6..301297505a 100644
--- a/src/plugins/imagery/components/Compass/CompassRose.vue
+++ b/src/plugins/imagery/components/Compass/CompassRose.vue
@@ -275,6 +275,14 @@ export default {
             type: Object,
             required: true
         },
+        hasGimble: {
+            type: Boolean,
+            required: true
+        },
+        normalizedCameraAzimuth: {
+            type: Number,
+            required: true
+        },
         sunHeading: {
             type: Number,
             default: undefined
@@ -290,15 +298,6 @@ export default {
         };
     },
     computed: {
-        hasGimble() {
-            return this.cameraAzimuth !== undefined;
-        },
-        // compass ordinal orientation of camera
-        normalizedCameraAzimuth() {
-            return this.hasGimble
-                ? rotate(this.cameraAzimuth)
-                : rotate(this.heading, -this.transformations?.rotation ?? 0);
-        },
         camAngleAndPositionStyle() {
             const translateX = this.transformations?.translateX;
             const translateY = this.transformations?.translateY;