diff --git a/src/layouts/customer-details/customer-details.spec.js b/src/layouts/customer-details/customer-details.spec.js
index 3d0843e10..2014f47d3 100644
--- a/src/layouts/customer-details/customer-details.spec.js
+++ b/src/layouts/customer-details/customer-details.spec.js
@@ -1 +1,58 @@
-test.todo("some test to be written in the future");
+// Components
+import customerDetails from "@/layouts/customer-details/customer-details.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper";
+
+jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
+    navigateToHeritageFunnel: jest.fn(),
+}));
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+describe("customer-details.vue", () => {
+    describe("navigation", () => {
+        test("if the back button is clicked, navigate back", async () => {
+            // Arrange
+            const { wrapper } = setupMocks();
+
+            // Act
+            await wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
+        });
+
+        test("if the continue button is clicked, navigate forward", async () => {
+            // Arrange
+            const { wrapper } = setupMocks();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(navigateToHeritage.navigateToHeritageFunnel).toHaveBeenCalled();
+        });
+    });
+});
+
+function setupMocks() {
+    const wrapper = shallowMount(
+        customerDetails,
+        getMountOptions({
+            router: {
+                navigate: jest.fn(),
+                navigate: jest.fn(),
+                navigateWithSaving: jest.fn(),
+                navigateWithoutSaving: jest.fn(),
+            },
+        })
+    );
+
+    return { wrapper };
+}
\ No newline at end of file
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 4377050e2..f3b039ee8 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -8,14 +8,14 @@
                 cmsWidgetName="FirstNameWidget"
                 v-model="firstName"
                 ref="firstName"
-                inputId="08497a2efd9a4a73a70360ab47b4838d"
+                customInputId="firstName"
                 validationRules="first-name-required" />
             <textboxQuestion
                 class="mb-4"
                 cmsWidgetName="LastNameWidget"
                 v-model="lastName"
                 ref="lastName"
-                inputId="0030e56a57e74a4ab92de7fb8e97fec5"
+                customInputId="lastName"
                 validationRules="last-name-required" />
             <textboxQuestion
                 class="mb-4"