diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
index 33c06b052..285a15fb8 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles.ts
@@ -4,7 +4,8 @@ import { getInteractiveVariants, InteractiveVariation } from '@monkvision/common
 const BUTTON_SIZE = 60;
 const BUTTON_PADDING = 20;
 const BUTTON_BORDER_WIDTH = 2;
-export const PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH = BUTTON_SIZE + BUTTON_PADDING + BUTTON_BORDER_WIDTH;
+export const PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH =
+  BUTTON_SIZE + BUTTON_PADDING + BUTTON_BORDER_WIDTH;
 
 export const captureButtonForegroundColors = getInteractiveVariants(
   '#f3f3f3',
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.styles.ts
index dee2147dc..ecf1b2d66 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.styles.ts
@@ -1,5 +1,5 @@
 import { Styles } from '@monkvision/types';
-import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -27,7 +27,7 @@ export const styles: Styles = {
   },
   topLandscape: {
     __media: { landscape: true },
-    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+    right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
   },
   infoBtn: {
     position: 'absolute',
@@ -36,7 +36,7 @@ export const styles: Styles = {
   },
   infoBtnPortrait: {
     __media: { portrait: true },
-    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+    bottom: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5}px`,
   },
   svg: {
     width: '15%',
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.tsx
index ad8545091..72a7be8ff 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/PhotoCaptureHUDPreviewAddDamage1stShot.tsx
@@ -7,6 +7,7 @@ import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureMode } from '../../hooks';
 import { PhotoCaptureHUDCancelButton } from '../PhotoCaptureHUDCancelButton';
 import { crosshairSvg } from '../../../assets';
+import { usePhotoCaptureHUDPreviewAddDamage1stShotStyles } from './hooks';
 
 /**
  * Props of the PhotoCaptureHUDPreviewAddDamage1stShot component.
@@ -28,7 +29,7 @@ export function PhotoCaptureHUDPreviewAddDamage1stShot({
   const [showInfoPopup, setShowInfoPopup] = useState(true);
   const { t } = useTranslation();
   const primaryColor = usePhotoCaptureHUDButtonBackground();
-  const style = usePhotoCaptureHUDPreviewAddDamage1stShotStyle();
+  const style = usePhotoCaptureHUDPreviewAddDamage1stShotStyles();
 
   return (
     <div style={styles['container']}>
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/hook.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/hooks.ts
similarity index 82%
rename from packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/hook.ts
rename to packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/hooks.ts
index 0a85e30c9..1163dd6ec 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/hook.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage1stShot/hooks.ts
@@ -7,7 +7,7 @@ export interface PhotoCaptureHUDPreviewAddDamage1stShotStyle {
   infoBtn: CSSProperties;
 }
 
-export function usePhotoCaptureHUDPreviewAddDamage1stShotStyle(): PhotoCaptureHUDPreviewAddDamage1stShotStyle {
+export function usePhotoCaptureHUDPreviewAddDamage1stShotStyles(): PhotoCaptureHUDPreviewAddDamage1stShotStyle {
   const { responsive } = useResponsiveStyle();
 
   return {
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.styles.ts
index 344f7bbef..4f69c890a 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.styles.ts
@@ -1,5 +1,5 @@
 import { Styles } from '@monkvision/types';
-import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -27,7 +27,7 @@ export const styles: Styles = {
   },
   topLandscape: {
     __media: { landscape: true },
-    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+    right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
   },
   frameContainer: {
     position: 'absolute',
@@ -71,6 +71,6 @@ export const styles: Styles = {
   },
   infoCloseupPortrait: {
     __media: { portrait: true },
-    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+    bottom: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5}px`,
   },
 };
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.tsx
index 24f95c6dd..51d85c4b7 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/PhotoCaptureHUDPreviewAddDamage2ndShot.tsx
@@ -5,7 +5,7 @@ import { PhotoCaptureMode } from '../../hooks';
 import { styles } from './PhotoCaptureHUDPreviewAddDamage2ndShot.styles';
 import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureHUDCancelButton } from '../PhotoCaptureHUDCancelButton';
-import { usePhotoCaptureHUDPreviewAddDamage2ndShotStyle } from './hook';
+import { usePhotoCaptureHUDPreviewAddDamage2ndShotStyle } from './hooks';
 
 /**
  * Props of the PhotoCaptureHUDPreviewAddDamage2ndShot component.
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/hook.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/hooks.ts
similarity index 100%
rename from packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/hook.ts
rename to packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewAddDamage2ndShot/hooks.ts
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.styles.ts
index aec595c92..428bd1f2c 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.styles.ts
@@ -1,5 +1,5 @@
 import { Styles } from '@monkvision/types';
-import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -26,7 +26,7 @@ export const styles: Styles = {
   },
   topLandscape: {
     __media: { landscape: true },
-    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+    right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
   },
   overlay: {
     zIndex: '9',
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx
index 894c98cc6..0be423b87 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/PhotoCaptureHUDPreviewSight.tsx
@@ -3,7 +3,7 @@ import { SightOverlay } from '@monkvision/common-ui-web';
 import { SightSlider } from './SightSlider';
 import { styles } from './PhotoCaptureHUDPreviewSight.styles';
 import { AddDamageButton } from './AddDamageButton';
-import { usePhotoCaptureHUDSightPreviewStyle } from './hook';
+import { usePhotoCaptureHUDSightPreviewStyle } from './hooks';
 import { PhotoCaptureHUDCounter } from '../PhotoCaptureHUDCounter';
 import { PhotoCaptureMode } from '../../hooks';
 
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts
index c05ce1dda..0fec91cad 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.styles.ts
@@ -1,5 +1,5 @@
 import { Styles } from '@monkvision/types';
-import { PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH } from '../../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
+import { PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH } from '../../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles';
 
 export const styles: Styles = {
   container: {
@@ -16,12 +16,12 @@ export const styles: Styles = {
     maxWidth: '60vw',
     zIndex: '9',
     bottom: '0',
-    right: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 2}px`,
+    right: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2}px`,
     left: '0',
   },
   containerPortrait: {
     __media: { portrait: true },
-    bottom: `${PHOTOCAPTUREHUB_BUTTONS_BAR_WIDTH * 1.5}px`,
+    bottom: `${PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5}px`,
     right: '0',
     paddingRight: '45%',
   },
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.tsx
index 0b52841a5..38b1563c5 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/SightSlider.tsx
@@ -2,8 +2,8 @@ import { ImageStatus, Sight } from '@monkvision/types';
 import { RefObject, useEffect, useMemo, useRef } from 'react';
 import { useMonkState, useSightLabel } from '@monkvision/common';
 import { labels } from '@monkvision/sights';
-import { styles } from './SightSlider.styles';
 import { SightSliderButton } from './SightSliderButton';
+import { useSightSliderStyles } from './hooks';
 
 /**
  * Props of the SightSlider component.
@@ -78,6 +78,7 @@ export function SightSlider({
 }: SightSliderProps) {
   const items = useSightSliderItems(inspectionId, sights);
   const { label } = useSightLabel({ labels });
+  const { container } = useSightSliderStyles();
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -85,7 +86,7 @@ export function SightSlider({
   }, [selectedSight, sightsTaken]);
 
   return (
-    <div style={styles['container']} ref={ref}>
+    <div style={container} ref={ref}>
       {items.map(({ sight, status }) => (
         <SightSliderButton
           key={sight.id}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/hooks.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/hooks.ts
new file mode 100644
index 000000000..fc4c3cbbd
--- /dev/null
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/SightSlider/hooks.ts
@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { useResponsiveStyle } from '@monkvision/common';
+import { styles } from './SightSlider.styles';
+
+export interface SightsSliderHUDStyle {
+  container: CSSProperties;
+}
+
+export function useSightSliderStyles(): SightsSliderHUDStyle {
+  const { responsive } = useResponsiveStyle();
+
+  return {
+    container: {
+      ...styles['container'],
+      ...responsive(styles['containerPortrait']),
+    },
+  };
+}
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hooks.ts
similarity index 100%
rename from packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hook.ts
rename to packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDPreviewSight/hooks.ts