diff --git a/tests/Crosshairs.spec.ts b/tests/Crosshairs.spec.ts
new file mode 100644
index 000000000..c711177bc
--- /dev/null
+++ b/tests/Crosshairs.spec.ts
@@ -0,0 +1,104 @@
+import { Page, test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, initilizeMousePositionTracker, getMousePosition } from './utils/index.js';
+
+
+const rotateCrosshairs = async (page: Page, id: string, lineNumber: number) => {
+  const locator = await page.locator(id).locator('line').nth(lineNumber);
+  await locator.click({ force: true });
+  await locator.hover({ force: true });
+  const circleLocator = await page.locator(id).locator('circle').nth(1);
+  await circleLocator.hover({ force: true });
+  await page.mouse.down();
+  const position = await getMousePosition(page);
+  await page.mouse.move(position.x, position.y + 100);
+  await page.mouse.up();
+}
+
+const increaseSlabThickness = async (page: Page, id: string, lineNumber: number, axis: string) => {
+  const locator = await page.locator(id).locator('line').nth(lineNumber)
+  await locator.click({ force: true });
+  await locator.hover({ force: true });
+  const circleLocator = await page.locator(id).locator('rect').first();
+  await circleLocator.hover({ force: true });
+  await page.mouse.down();
+  const position = await getMousePosition(page);
+  switch (axis) {
+    case 'x':
+      await page.mouse.move(position.x + 100, position.y);
+      break;
+    case 'y':
+      await page.mouse.move(position.x, position.y + 100);
+      break;
+  }
+  await page.mouse.up();
+}
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.14519.5.2.1.1706.8374.643249677828306008300337414785';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+  await initilizeMousePositionTracker(page);
+});
+
+test.describe('Crosshairs Test', async () => {
+  test('should render the crosshairs correctly.', async ({ page }) => {
+    await page.getByTestId('Layout').click();
+    await page.locator('div').filter({ hasText: /^MPR$/ }).first().click();
+    await page.getByTestId('Crosshairs').click();
+
+    await checkForScreenshot(page, page, screenShotPaths.crosshairs.crosshairsRendered);
+  });
+
+  test('should allow the user to rotate the crosshairs', async ({ page }) => {
+    await page.getByTestId('Layout').click();
+    await page.locator('div').filter({ hasText: /^MPR$/ }).first().click();
+    await page.getByTestId('Crosshairs').click();
+
+    await rotateCrosshairs(page, '#svg-layer-mpr-axial', 3);
+    await rotateCrosshairs(page, '#svg-layer-mpr-sagittal', 0);
+    await rotateCrosshairs(page, '#svg-layer-mpr-coronal', 0);
+
+    await checkForScreenshot(page, page, screenShotPaths.crosshairs.crosshairsRotated);
+  });
+
+  test('should allow the user to adjust the slab thickness', async ({ page }) => {
+    await page.getByTestId('Layout').click();
+    await page.locator('div').filter({ hasText: /^MPR$/ }).first().click();
+    await page.getByTestId('Crosshairs').click();
+
+    await increaseSlabThickness(page, '#svg-layer-mpr-axial', 0, 'x');
+    await increaseSlabThickness(page, '#svg-layer-mpr-sagittal', 2, 'x');
+    await increaseSlabThickness(page, '#svg-layer-mpr-coronal', 0, 'y');
+
+    await checkForScreenshot(page, page, screenShotPaths.crosshairs.crosshairsSlabThickness);
+  });
+
+  test('should reset the crosshairs to the initial position when reset is clicked', async ({ page }) => {
+    await page.getByTestId('Layout').click();
+    await page.locator('div').filter({ hasText: /^MPR$/ }).first().click();
+    await page.getByTestId('Crosshairs').click();
+
+    await rotateCrosshairs(page, '#svg-layer-mpr-axial', 3);
+    await rotateCrosshairs(page, '#svg-layer-mpr-sagittal', 0);
+    await rotateCrosshairs(page, '#svg-layer-mpr-coronal', 0);
+
+    await page.getByTestId('MoreTools-split-button-primary').click();
+
+    await checkForScreenshot(page, page, screenShotPaths.crosshairs.crosshairsResetToolbar);
+  });
+
+  test('should reset the crosshairs when a new displayset is loaded', async ({ page }) => {
+    await page.getByTestId('Layout').click();
+    await page.locator('div').filter({ hasText: /^MPR$/ }).first().click();
+    await page.getByTestId('Crosshairs').click();
+
+    await rotateCrosshairs(page, '#svg-layer-mpr-axial', 0);
+    await rotateCrosshairs(page, '#svg-layer-mpr-sagittal', 0);
+    await rotateCrosshairs(page, '#svg-layer-mpr-coronal', 3);
+
+    await page.getByTestId('study-browser-thumbnail').nth(1).dblclick();
+
+    await checkForScreenshot(page, page, screenShotPaths.crosshairs.crosshairsNewDisplayset);
+  });
+
+});
diff --git a/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsNewDisplayset.png b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsNewDisplayset.png
new file mode 100644
index 000000000..aaf27b71d
Binary files /dev/null and b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsNewDisplayset.png differ
diff --git a/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsRendered.png b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsRendered.png
new file mode 100644
index 000000000..dd73614bd
Binary files /dev/null and b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsRendered.png differ
diff --git a/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsResetToolbar.png b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsResetToolbar.png
new file mode 100644
index 000000000..09ed89bb2
Binary files /dev/null and b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsResetToolbar.png differ
diff --git a/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsRotated.png b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsRotated.png
new file mode 100644
index 000000000..8952348f2
Binary files /dev/null and b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsRotated.png differ
diff --git a/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsSlabThickness.png b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsSlabThickness.png
new file mode 100644
index 000000000..85cf7fa72
Binary files /dev/null and b/tests/screenshots/chromium/Crosshairs.spec.ts/crosshairsSlabThickness.png differ
diff --git a/tests/utils/index.ts b/tests/utils/index.ts
index cea8ef009..a6e9aeb77 100644
--- a/tests/utils/index.ts
+++ b/tests/utils/index.ts
@@ -3,6 +3,7 @@ import { checkForScreenshot } from './checkForScreenshot';
 import { screenShotPaths } from './screenShotPaths';
 import { simulateClicksOnElement } from './simulateClicksOnElement';
 import { reduce3DViewportSize } from './reduce3DviewportSize';
+import { getMousePosition, initilizeMousePositionTracker } from './mouseUtils';
 
 
-export { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement, reduce3DViewportSize };
+export { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement, reduce3DViewportSize, getMousePosition, initilizeMousePositionTracker };
diff --git a/tests/utils/mouseUtils.ts b/tests/utils/mouseUtils.ts
new file mode 100644
index 000000000..c4c008b14
--- /dev/null
+++ b/tests/utils/mouseUtils.ts
@@ -0,0 +1,25 @@
+import { Page } from "@playwright/test";
+
+interface WindowWithMousePosition extends Window {
+  mouseX: number;
+  mouseY: number;
+}
+
+export const initilizeMousePositionTracker = async (page: Page) => {
+  const window = await page.evaluateHandle("window") as any;
+  await page.evaluate((window: WindowWithMousePosition) => {
+    window.mouseX = 0;
+    window.mouseY = 0;
+    window.addEventListener("mousemove", (event) => {
+      window.mouseX = event.clientX;
+      window.mouseY = event.clientY;
+    });
+  }, window);
+}
+
+export const getMousePosition = async (page: Page) => {
+  const window = await page.evaluateHandle("window") as any;
+  return await page.evaluate((window: WindowWithMousePosition) => {
+    return { x: window.mouseX, y: window.mouseY };
+  }, window);
+}
diff --git a/tests/utils/screenShotPaths.ts b/tests/utils/screenShotPaths.ts
index d759d9ada..063f9c851 100644
--- a/tests/utils/screenShotPaths.ts
+++ b/tests/utils/screenShotPaths.ts
@@ -79,6 +79,13 @@ const screenShotPaths = {
     rtPostHydration: 'rtPostHydration.png',
     rtPreHydration: 'rtPreHydration.png',
     rtJumpToStructure: 'rtJumpToStructure.png',
+  },
+  crosshairs: {
+    crosshairsRendered: 'crosshairsRendered.png',
+    crosshairsRotated: 'crosshairsRotated.png',
+    crosshairsSlabThickness: 'crosshairsSlabThickness.png',
+    crosshairsResetToolbar: 'crosshairsResetToolbar.png',
+    crosshairsNewDisplayset: 'crosshairsNewDisplayset.png',
   }
 };