diff --git a/frontends/nextjs/package.json b/frontends/nextjs/package.json
index d805b4665..4118ca2e0 100644
--- a/frontends/nextjs/package.json
+++ b/frontends/nextjs/package.json
@@ -102,19 +102,24 @@
     "devDependencies": {
         "@eslint/js": "^9.39.2",
         "@playwright/test": "^1.57.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.1",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@vitejs/plugin-react-swc": "^4.2.2",
+        "@vitest/coverage-v8": "^4.0.16",
         "eslint": "^9.28.0",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^16.5.0",
+        "jsdom": "^27.3.0",
         "prisma": "^6.19.1",
         "sass": "^1.97.1",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.50.1",
-        "vite": "^7.3.0"
+        "vite": "^7.3.0",
+        "vitest": "^4.0.16"
     },
     "workspaces": {
         "packages": [
diff --git a/frontends/nextjs/src/hooks/useKV.test.ts b/frontends/nextjs/src/hooks/useKV.test.ts
index befcc3b69..7a3e567a7 100644
--- a/frontends/nextjs/src/hooks/useKV.test.ts
+++ b/frontends/nextjs/src/hooks/useKV.test.ts
@@ -1,12 +1,19 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { renderHook, act } from '@testing-library/react'
 import { useKV } from '@/hooks/useKV'
 
 describe('useKV', () => {
   beforeEach(() => {
-    // Clear any stored values before each test
-    const map = new Map()
-    localStorage.clear()
+    // Mock localStorage
+    const store: Record<string, string> = {}
+    vi.stubGlobal('localStorage', {
+      getItem: vi.fn((key: string) => store[key] ?? null),
+      setItem: vi.fn((key: string, value: string) => { store[key] = value }),
+      removeItem: vi.fn((key: string) => { delete store[key] }),
+      clear: vi.fn(() => { Object.keys(store).forEach(k => delete store[k]) }),
+      length: 0,
+      key: vi.fn(() => null),
+    })
   })
 
   it.each([
@@ -112,12 +119,12 @@ describe('useKV', () => {
   })
 
   it.each([
-    { initialValue: null, description: 'null value' },
-    { initialValue: false, description: 'false boolean' },
-    { initialValue: 0, description: 'zero number' },
-    { initialValue: '', description: 'empty string' },
-  ])('should handle falsy $description correctly', ({ initialValue }) => {
-    const { result } = renderHook(() => useKV('falsy_key', initialValue))
+    { initialValue: null, key: 'falsy_key_null', description: 'null value' },
+    { initialValue: false, key: 'falsy_key_false', description: 'false boolean' },
+    { initialValue: 0, key: 'falsy_key_zero', description: 'zero number' },
+    { initialValue: '', key: 'falsy_key_empty', description: 'empty string' },
+  ])('should handle falsy $description correctly', ({ initialValue, key }) => {
+    const { result } = renderHook(() => useKV(key, initialValue))
     const [value] = result.current
 
     expect(value).toBe(initialValue)
diff --git a/frontends/nextjs/src/tests/package-integration.test.ts b/frontends/nextjs/src/tests/package-integration.test.ts
index be2b72d57..1abfb56e6 100644
--- a/frontends/nextjs/src/tests/package-integration.test.ts
+++ b/frontends/nextjs/src/tests/package-integration.test.ts
@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest'
-import adminDialogMetadata from '../../packages/admin_dialog/seed/metadata.json'
-import dashboardMetadata from '../../packages/dashboard/seed/metadata.json'
-import dataTableMetadata from '../../packages/data_table/seed/metadata.json'
-import formBuilderMetadata from '../../packages/form_builder/seed/metadata.json'
-import navMenuMetadata from '../../packages/nav_menu/seed/metadata.json'
-import notificationCenterMetadata from '../../packages/notification_center/seed/metadata.json'
+import adminDialogMetadata from '../../../../packages/admin_dialog/seed/metadata.json'
+import dashboardMetadata from '../../../../packages/dashboard/seed/metadata.json'
+import dataTableMetadata from '../../../../packages/data_table/seed/metadata.json'
+import formBuilderMetadata from '../../../../packages/form_builder/seed/metadata.json'
+import navMenuMetadata from '../../../../packages/nav_menu/seed/metadata.json'
+import notificationCenterMetadata from '../../../../packages/notification_center/seed/metadata.json'
 
 const packages = [
   adminDialogMetadata,
diff --git a/frontends/nextjs/vitest.config.ts b/frontends/nextjs/vitest.config.ts
deleted file mode 120000
index db4818dbd..000000000
--- a/frontends/nextjs/vitest.config.ts
+++ /dev/null
@@ -1 +0,0 @@
-../../config/vitest.config.ts
\ No newline at end of file
diff --git a/frontends/nextjs/vitest.config.ts b/frontends/nextjs/vitest.config.ts
new file mode 100644
index 000000000..4e64f950a
--- /dev/null
+++ b/frontends/nextjs/vitest.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react-swc'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['src/**/*.test.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+})