diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d68e136c..11fb3bfc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -34,7 +34,8 @@
         "prettier": "^2.8.8",
         "typescript": "~5.0.4",
         "vite": "^4.3.9",
-        "vitest": "^0.32.0"
+        "vitest": "^0.32.0",
+        "vue-router-mock": "^1.0.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -5991,6 +5992,16 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-router-mock": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue-router-mock/-/vue-router-mock-1.0.0.tgz",
+      "integrity": "sha512-j65lh+jhEuEM7sWAz/eenNsEV0VrRXFreNxtIGgLApZkM2h7orImvHSLJ3LhbUa2sJnTtjuy8otSrvoTsdGVYw==",
+      "dev": true,
+      "peerDependencies": {
+        "vue": "^3.2.23",
+        "vue-router": "^4.0.12"
+      }
+    },
     "node_modules/vuetify": {
       "version": "3.3.13",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.13.tgz",
diff --git a/frontend/tests/components/HeaderDetailPage.spec.ts b/frontend/tests/components/HeaderDetailPage.spec.ts
index 00183a7e..ba583b2a 100644
--- a/frontend/tests/components/HeaderDetailPage.spec.ts
+++ b/frontend/tests/components/HeaderDetailPage.spec.ts
@@ -1,43 +1,62 @@
-import { beforeEach, describe, it, expect, vi } from 'vitest'
-import { useRouter } from 'vue-router'
+import { describe, expect, it, vi } from 'vitest'
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { RouterLinkStub, mount } from '@vue/test-utils'
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
+import { useGeneInfoStore } from '@/stores/geneInfo'
+import { before, beforeEach } from 'node:test'
 
-const makeWrapper = () => {
+let router;
+
+const makeWrapper = (geneData = {}) => {
   return mount(HeaderDetailPage, {
     shallow: true,
     global: {
       plugins: [
         createTestingPinia({
-          initialState: { searchTerm: '', genomeRelease: 'grch37' },
-          createSpy: vi.fn,
-        })
-      ]
+          initialState: { data: geneData },
+          createSpy: vi.fn(),
+        }),
+        router,
+      ],
     },
-  });
+  })
 }
 
-describe('HeaderDetailPage.vue', () => {
+describe('HeaderDetailPage', async () => {
+  const geneData = {
+    geneSymbol: 'BRCA1',
+    geneInfo: {
+      symbol: 'BRCA1',
+      name: 'Test Gene',
+      hgncId: '12345',
+      ensemblId: 'ENSG00000000000001',
+      entrezId: '12345',
+    },
+  }
 
   beforeEach(() => {
-    vi.resetAllMocks();
+    router = createRouter({
+      history: createWebHistory(),
+      routes: routes,
+    })
+
+    router.push = vi.fn()
+    await router.isReady()
   })
 
-  it('renders the logo and title', () => {
-    const wrapper = makeWrapper();
-    expect(wrapper.exists()).toBeTruthy();
+  it('renders the gene symbol', () => {
+    const wrapper = makeWrapper(geneData)
+    
     const logo = wrapper.find('#logo')
-    const title = wrapper.find('router-link')
     expect(logo.exists()).toBe(true)
-    expect(title.text()).toMatch('Explanation and Evaluation of Variants')
-  })
-
-  it('renders the navigation links', () => {
-    const wrapper = makeWrapper();
     const aboutLink = wrapper.find('v-btn[to="/about"]')
     const contactLink = wrapper.find('v-btn[to="/contact"]')
     expect(aboutLink.exists()).toBe(true)
     expect(contactLink.exists()).toBe(true)
   })
+  
+  it('redirects if gene data is null', () => {
+    const wrapper = makeWrapper()
+    expect(router.push).toHaveBeenCalledWith('/')
+  })
 })