diff --git a/.vscode/c_cpp_properties.json b/.vscode/c_cpp_properties.json
new file mode 100644
index 0000000..cea4d3f
--- /dev/null
+++ b/.vscode/c_cpp_properties.json
@@ -0,0 +1,18 @@
+{
+  "configurations": [
+    {
+      "name": "windows-gcc-x64",
+      "includePath": [
+        "${workspaceFolder}/**"
+      ],
+      "compilerPath": "gcc",
+      "cStandard": "${default}",
+      "cppStandard": "${default}",
+      "intelliSenseMode": "windows-gcc-x64",
+      "compilerArgs": [
+        ""
+      ]
+    }
+  ],
+  "version": 4
+}
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..b2bd4aa
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,24 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "C/C++ Runner: Debug Session",
+      "type": "cppdbg",
+      "request": "launch",
+      "args": [],
+      "stopAtEntry": false,
+      "externalConsole": true,
+      "cwd": "d:/sprint588/Github/ead-frontend/src/app/(user)/(auth)",
+      "program": "d:/sprint588/Github/ead-frontend/src/app/(user)/(auth)/build/Debug/outDebug",
+      "MIMode": "gdb",
+      "miDebuggerPath": "gdb",
+      "setupCommands": [
+        {
+          "description": "Enable pretty-printing for gdb",
+          "text": "-enable-pretty-printing",
+          "ignoreFailures": true
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..bb879da
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,59 @@
+{
+  "C_Cpp_Runner.cCompilerPath": "gcc",
+  "C_Cpp_Runner.cppCompilerPath": "g++",
+  "C_Cpp_Runner.debuggerPath": "gdb",
+  "C_Cpp_Runner.cStandard": "",
+  "C_Cpp_Runner.cppStandard": "",
+  "C_Cpp_Runner.msvcBatchPath": "C:/Program Files/Microsoft Visual Studio/VR_NR/Community/VC/Auxiliary/Build/vcvarsall.bat",
+  "C_Cpp_Runner.useMsvc": false,
+  "C_Cpp_Runner.warnings": [
+    "-Wall",
+    "-Wextra",
+    "-Wpedantic",
+    "-Wshadow",
+    "-Wformat=2",
+    "-Wcast-align",
+    "-Wconversion",
+    "-Wsign-conversion",
+    "-Wnull-dereference"
+  ],
+  "C_Cpp_Runner.msvcWarnings": [
+    "/W4",
+    "/permissive-",
+    "/w14242",
+    "/w14287",
+    "/w14296",
+    "/w14311",
+    "/w14826",
+    "/w44062",
+    "/w44242",
+    "/w14905",
+    "/w14906",
+    "/w14263",
+    "/w44265",
+    "/w14928"
+  ],
+  "C_Cpp_Runner.enableWarnings": true,
+  "C_Cpp_Runner.warningsAsError": false,
+  "C_Cpp_Runner.compilerArgs": [],
+  "C_Cpp_Runner.linkerArgs": [],
+  "C_Cpp_Runner.includePaths": [],
+  "C_Cpp_Runner.includeSearch": [
+    "*",
+    "**/*"
+  ],
+  "C_Cpp_Runner.excludeSearch": [
+    "**/build",
+    "**/build/**",
+    "**/.*",
+    "**/.*/**",
+    "**/.vscode",
+    "**/.vscode/**"
+  ],
+  "C_Cpp_Runner.useAddressSanitizer": false,
+  "C_Cpp_Runner.useUndefinedSanitizer": false,
+  "C_Cpp_Runner.useLeakSanitizer": false,
+  "C_Cpp_Runner.showCompilationTime": false,
+  "C_Cpp_Runner.useLinkTimeOptimization": false,
+  "C_Cpp_Runner.msvcSecureNoWarnings": false
+}
\ No newline at end of file
diff --git a/MOCK_CREDENTIALS.md b/MOCK_CREDENTIALS.md
new file mode 100644
index 0000000..3a31cfd
--- /dev/null
+++ b/MOCK_CREDENTIALS.md
@@ -0,0 +1,64 @@
+# Mock Login Credentials
+
+## Admin Account
+
+- **Email**: `admin@autocare.com`
+- **Password**: `admin123`
+- **Role**: Administrator
+- **Access**: Full system access, manage customers, employees, appointments, projects, services, and settings
+
+## Employee Accounts
+
+### Mike Johnson (Master Technician)
+
+- **Email**: `mike.johnson@autocare.com`
+- **Password**: `employee123`
+- **Role**: Employee
+- **Access**: View assigned appointments, projects, time logs, update progress
+
+### David Smith (Technician)
+
+- **Email**: `david.smith@autocare.com`
+- **Password**: `employee123`
+- **Role**: Employee
+- **Access**: View assigned appointments, projects, time logs, update progress
+
+### Robert Brown (Master Technician)
+
+- **Email**: `robert.brown@autocare.com`
+- **Password**: `employee123`
+- **Role**: Employee
+- **Access**: View assigned appointments, projects, time logs, update progress
+
+## Customer Accounts
+
+### James Wilson
+
+- **Email**: `james.wilson@email.com`
+- **Password**: `customer123`
+- **Role**: Customer
+- **Access**: Book appointments, create projects, manage vehicles, view dashboard
+
+### John Doe
+
+- **Email**: `john.doe@email.com`
+- **Password**: `customer123`
+- **Role**: Customer
+- **Access**: Book appointments, create projects, manage vehicles, view dashboard
+
+### Sarah Johnson
+
+- **Email**: `sarah.johnson@email.com`
+- **Password**: `customer123`
+- **Role**: Customer
+- **Access**: Book appointments, create projects, manage vehicles, view dashboard
+
+---
+
+## Quick Test Guide
+
+1. **Admin Login**: Use `admin@autocare.com` / `admin123` to access the admin portal
+2. **Employee Login**: Use `mike.johnson@autocare.com` / `employee123` to access employee portal
+3. **Customer Login**: Use `james.wilson@email.com` / `customer123` to access customer portal
+
+All passwords are simple for testing purposes. In production, these would be properly hashed and secured.
diff --git a/package-lock.json b/package-lock.json
index 3ed9679..ae67452 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,19 +8,23 @@
       "name": "eda-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.13.2",
+        "lucide-react": "^0.552.0",
         "next": "15.5.3",
         "react": "19.1.0",
-        "react-dom": "19.1.0"
+        "react-dom": "19.1.0",
+        "react-icons": "^5.5.0"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
-        "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "autoprefixer": "^10.4.21",
         "eslint": "^9",
         "eslint-config-next": "15.5.3",
-        "tailwindcss": "^4",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.17",
         "typescript": "^5"
       }
     },
@@ -681,17 +685,22 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
-      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "minipass": "^7.0.4"
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
       },
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=12"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
@@ -705,17 +714,6 @@
         "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -949,6 +947,17 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -972,282 +981,6 @@
         "tslib": "^2.8.0"
       }
     },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
-      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.4",
-        "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.5.1",
-        "lightningcss": "1.30.1",
-        "magic-string": "^0.30.18",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.13"
-      }
-    },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
-      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
-      },
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-x64": "4.1.13",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
-      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
-      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
-      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
-      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
-      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
-      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
-      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
-      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
-      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
-      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^1.4.5",
-        "@emnapi/runtime": "^1.4.5",
-        "@emnapi/wasi-threads": "^1.0.4",
-        "@napi-rs/wasm-runtime": "^0.2.12",
-        "@tybys/wasm-util": "^0.10.0",
-        "tslib": "^2.8.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
-      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
-      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
-      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.13",
-        "@tailwindcss/oxide": "4.1.13",
-        "postcss": "^8.4.41",
-        "tailwindcss": "4.1.13"
-      }
-    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -1907,6 +1640,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1923,6 +1669,34 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2117,6 +1891,50 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2143,6 +1961,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -2160,14 +1989,37 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.9.tgz",
+      "integrity": "sha512-hY/u2lxLrbecMEWSB0IpGzGyDyeoMFQhCvZd2jGFSE5I17Fh01sYUBPCJtkWERw7zrac9+cIghxm/ytJa2X8iA==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
@@ -2184,6 +2036,40 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.26.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.2.tgz",
+      "integrity": "sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.8.3",
+        "caniuse-lite": "^1.0.30001741",
+        "electron-to-chromium": "^1.5.218",
+        "node-releases": "^2.0.21",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -2207,7 +2093,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -2244,6 +2129,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001741",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",
@@ -2281,14 +2176,42 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chownr": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
     "node_modules/client-only": {
@@ -2342,6 +2265,28 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2364,6 +2309,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2493,16 +2451,39 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
       "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
-      "devOptional": true,
       "license": "Apache-2.0",
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -2520,7 +2501,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -2531,6 +2511,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.227",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.227.tgz",
+      "integrity": "sha512-ITxuoPfJu3lsNWUi2lBM2PaBPYgH3uqmxut5vmBxgYvyI4AlJ6P3Cai1O76mOrkJCBzq0IxWg/NtqOrpu/0gKA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2538,20 +2532,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.18.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
-      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -2625,7 +2605,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -2635,7 +2614,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -2673,7 +2651,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -2686,7 +2663,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -2729,6 +2705,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3293,6 +3279,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -3309,11 +3315,72 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3354,7 +3421,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -3379,7 +3445,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -3420,6 +3485,27 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -3433,6 +3519,32 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -3467,7 +3579,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3476,13 +3587,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -3546,7 +3650,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3559,7 +3662,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -3575,7 +3677,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -3697,6 +3798,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -3814,6 +3928,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
@@ -4076,17 +4200,23 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
       "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
-    "node_modules/js-tokens": {
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
@@ -4200,244 +4330,25 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
-      "dev": true,
-      "license": "MPL-2.0",
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "license": "MIT",
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">=14"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
+      "license": "MIT"
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -4475,21 +4386,26 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
+      "license": "ISC"
+    },
+    "node_modules/lucide-react": {
+      "version": "0.552.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.552.0.tgz",
+      "integrity": "sha512-g9WCjmfwqbexSnZE+2cl21PCfXOcqnGeWeMTNAOGEfpPbm/ZF4YIq77Z8qWrxbu660EKuLB4nSLggoKnCb+isw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4519,6 +4435,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4552,35 +4489,6 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4588,6 +4496,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -4709,6 +4629,33 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
+      "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4719,6 +4666,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -4900,6 +4857,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4940,6 +4904,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4959,6 +4940,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -4998,6 +4999,97 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5020,6 +5112,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5072,6 +5170,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5079,6 +5186,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5458,10 +5588,23 @@
         "side-channel-map": "^1.0.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/simple-swizzle": {
@@ -5504,6 +5647,70 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -5617,6 +5824,46 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -5663,6 +5910,29 @@
         }
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -5690,42 +5960,140 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
-      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
     },
-    "node_modules/tapable": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
-      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+    "node_modules/tailwindcss/node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=6"
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+      "engines": {
+        "node": ">=8.6.0"
       }
     },
-    "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+    "node_modules/tailwindcss/node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
+        "is-glob": "^4.0.1"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
       }
     },
     "node_modules/tinyglobby": {
@@ -5802,6 +6170,13 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -5987,6 +6362,37 @@
         "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -5997,6 +6403,13 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6112,14 +6525,112 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/yallist": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
       }
     },
     "node_modules/yocto-queue": {
diff --git a/package.json b/package.json
index 89b65e8..46d194d 100644
--- a/package.json
+++ b/package.json
@@ -3,25 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build --turbopack",
+    "dev": "node --max-old-space-size=4096 node_modules/next/dist/bin/next dev",
+    "build": "next build",
     "start": "next start",
     "lint": "eslint"
   },
   "dependencies": {
+    "axios": "^1.13.2",
+    "lucide-react": "^0.552.0",
+    "next": "15.5.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "next": "15.5.3"
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
deleted file mode 100644
index c7bcb4b..0000000
--- a/postcss.config.mjs
+++ /dev/null
@@ -1,5 +0,0 @@
-const config = {
-  plugins: ["@tailwindcss/postcss"],
-};
-
-export default config;
diff --git a/src/api/mockApiService.ts b/src/api/mockApiService.ts
new file mode 100644
index 0000000..6274424
--- /dev/null
+++ b/src/api/mockApiService.ts
@@ -0,0 +1,292 @@
+/**
+ * Mock API Service
+ * Simulates backend API calls with mock data
+ * Replace these with real API calls when backend is ready
+ */
+
+import {
+  mockCustomer,
+  mockVehicles,
+  mockAppointments,
+  mockProjects
+} from '@/data/mockData';
+import type { Customer, Vehicle, Appointment, Project, DashboardStats } from '@/types';
+
+// Simulate network delay
+const delay = (ms: number = 300) => new Promise(resolve => setTimeout(resolve, ms));
+
+// Base URL for real backend. Prefer NEXT_PUBLIC_API_BASE_URL when set. In
+// development, default to http://localhost:8080 so local backend is used
+// automatically. In production we keep an empty default which allows same-origin
+// calls to /api if desired.
+const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL || (process.env.NODE_ENV === 'development' ? 'http://localhost:8080' : '');
+
+async function callApi(path: string, options?: RequestInit) {
+  const base = API_BASE || '';
+  const token = typeof window !== 'undefined' ? localStorage.getItem('auth_token') : null;
+
+  const defaultHeaders: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+  if (token) {
+    defaultHeaders['Authorization'] = `Bearer ${token}`;
+  }
+
+  const res = await fetch(`${base}${path}`, {
+    headers: { ...defaultHeaders, ...(options?.headers as Record<string, string> || {}) },
+    ...options,
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`API error ${res.status}: ${text}`);
+  }
+
+  // Try parse JSON; if no body, return undefined
+  const text = await res.text();
+  try {
+    return text ? JSON.parse(text) : undefined;
+  } catch {
+    return text;
+  }
+}
+
+/**
+ * Customer Service
+ */
+export const customerService = {
+  async getProfile(): Promise<Customer> {
+    await delay();
+    return mockCustomer;
+  }
+  ,
+  async updateProfile(update: Partial<Customer>): Promise<Customer> {
+    await delay();
+    // shallow update the mock customer
+    Object.assign(mockCustomer, update);
+    return mockCustomer;
+  }
+};
+
+/**
+ * Vehicle Service
+ */
+export const vehicleService = {
+  async getCustomerVehicles(customerId: string): Promise<Vehicle[]> {
+    await delay();
+    return mockVehicles.filter(v => v.customerId === customerId);
+  },
+
+  async getVehicleById(vehicleId: string): Promise<Vehicle | undefined> {
+    await delay();
+    return mockVehicles.find(v => v.id === vehicleId);
+  }
+};
+
+/**
+ * Appointment Service (Pre-defined Services)
+ */
+export const appointmentService = {
+  async getCustomerAppointments(customerId: string): Promise<Appointment[]> {
+    // Always use backend API. This will throw if the backend is unreachable or
+    // returns a non-2xx response so the UI can surface the error instead of
+    // silently falling back to mock data.
+    const dtos = await callApi(`/api/appointments`);
+    if (!Array.isArray(dtos)) throw new Error('Invalid appointments response from server');
+    const raw = dtos as Array<Record<string, unknown>>;
+    const mapped = raw.map(mapDtoToAppointment);
+    const hasCustomer = raw.some(d => d['customerId'] !== undefined && d['customerId'] !== null && String(d['customerId']).length > 0);
+    return hasCustomer ? mapped.filter((a: Appointment) => a.customerId === customerId) : mapped;
+  },
+
+  async getUpcomingAppointments(customerId: string): Promise<Appointment[]> {
+    const dtos = await callApi(`/api/appointments`);
+    if (!Array.isArray(dtos)) throw new Error('Invalid appointments response from server');
+    const raw = dtos as Array<Record<string, unknown>>;
+    const mapped = raw.map(mapDtoToAppointment);
+    const hasCustomer = raw.some(d => d['customerId'] !== undefined && d['customerId'] !== null && String(d['customerId']).length > 0);
+    return hasCustomer ? mapped.filter((a: Appointment) => a.customerId === customerId && a.status === 'Upcoming') : mapped.filter((a: Appointment) => a.status === 'Upcoming');
+  },
+
+  async getCompletedAppointments(customerId: string): Promise<Appointment[]> {
+    const dtos = await callApi(`/api/appointments`);
+    if (!Array.isArray(dtos)) throw new Error('Invalid appointments response from server');
+    const raw = dtos as Array<Record<string, unknown>>;
+    const mapped = raw.map(mapDtoToAppointment);
+    const hasCustomer = raw.some(d => d['customerId'] !== undefined && d['customerId'] !== null && String(d['customerId']).length > 0);
+    return hasCustomer ? mapped.filter((a: Appointment) => a.customerId === customerId && a.status === 'Completed') : mapped.filter((a: Appointment) => a.status === 'Completed');
+  },
+
+  async getAppointmentById(appointmentId: string): Promise<Appointment | undefined> {
+    const dto = await callApi(`/api/appointments/${encodeURIComponent(appointmentId)}`);
+    return dto ? mapDtoToAppointment(dto as Record<string, unknown>) : undefined;
+  },
+
+  // Cancel appointment: try PATCH to update status to 'Cancelled' on backend, otherwise update mock in-memory data
+  async cancelAppointment(appointmentId: string): Promise<void> {
+    // Use GET -> modify -> PUT because backend doesn't expose PATCH
+    const existing = await callApi(`/api/appointments/${encodeURIComponent(appointmentId)}`);
+    if (!existing) throw new Error('Appointment not found');
+    const updated = { ...(existing as Record<string, unknown>), status: 'Cancelled' } as Record<string, unknown>;
+    await callApi(`/api/appointments/${encodeURIComponent(appointmentId)}`, {
+      method: 'PUT',
+      body: JSON.stringify(updated),
+    });
+  },
+
+  // Delete appointment: try DELETE on backend, otherwise remove from mock data
+  async deleteAppointment(appointmentId: string): Promise<void> {
+    await callApi(`/api/appointments/${encodeURIComponent(appointmentId)}`, { method: 'DELETE' });
+  },
+
+  // Create an appointment
+  async createAppointment(payload: Partial<Appointment>): Promise<Appointment> {
+    const dto = await callApi(`/api/appointments`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+    if (!dto) throw new Error('Invalid create response from server');
+    return mapDtoToAppointment(dto as Record<string, unknown>);
+  },
+
+  // Update appointment
+  async updateAppointment(appointmentId: string, payload: Partial<Appointment>): Promise<Appointment | undefined> {
+    const dto = await callApi(`/api/appointments/${encodeURIComponent(appointmentId)}`, {
+      method: 'PUT',
+      body: JSON.stringify(payload),
+    });
+    return dto ? mapDtoToAppointment(dto as Record<string, unknown>) : undefined;
+  }
+};
+
+// Helper: map backend AppointmentDTO to frontend Appointment shape
+function mapDtoToAppointment(dto: Record<string, unknown>): Appointment {
+  // dto fields: appointmentId, service, vehicleNo, date (ISO), startTime, endTime, status
+  const appointmentId = dto['appointmentId'] ?? dto['id'] ?? '';
+  const customerId = dto['customerId'] ?? dto['customer'] ?? '';
+  const vehicleNo = dto['vehicleNo'] ?? dto['vehicleNo'] ?? dto['vehicleNumber'] ?? '';
+  const service = dto['service'] ?? dto['serviceName'] ?? '';
+  const date = dto['date'] ?? dto['dateString'] ?? '';
+  const startTime = dto['startTime'] ?? '';
+  const endTime = dto['endTime'] ?? '';
+  const status = dto['status'] ?? 'Upcoming';
+
+  return {
+    id: String(appointmentId),
+    customerId: String(customerId),
+    vehicleId: '',
+    vehicleNumber: String(vehicleNo),
+    serviceName: String(service),
+    date: String(date),
+    time: startTime && endTime ? `${String(startTime)}-${String(endTime)}` : String(dto['time'] ?? ''),
+    status: String(status) as Appointment['status'],
+  };
+}
+
+/**
+ * Project Service (Custom Services)
+ */
+export const projectService = {
+  async getCustomerProjects(customerId: string): Promise<Project[]> {
+    const dtos = await callApi(`/api/projects`);
+    if (!Array.isArray(dtos)) throw new Error('Invalid projects response from server');
+    const raw = dtos as Array<Record<string, unknown>>;
+    return raw.map(mapDtoToProject);
+  },
+
+  async getOngoingProjects(customerId: string): Promise<Project[]> {
+    const dtos = await callApi(`/api/projects`);
+    if (!Array.isArray(dtos)) throw new Error('Invalid projects response from server');
+    const raw = dtos as Array<Record<string, unknown>>;
+    const mapped = raw.map(mapDtoToProject);
+    return mapped.filter((p: Project) => p.status === 'Ongoing');
+  },
+
+  async getCompletedProjects(customerId: string): Promise<Project[]> {
+    const dtos = await callApi(`/api/projects`);
+    if (!Array.isArray(dtos)) throw new Error('Invalid projects response from server');
+    const raw = dtos as Array<Record<string, unknown>>;
+    const mapped = raw.map(mapDtoToProject);
+    return mapped.filter((p: Project) => p.status === 'Completed');
+  },
+
+  async getProjectById(projectId: string): Promise<Project | undefined> {
+    const dto = await callApi(`/api/projects/${encodeURIComponent(projectId)}`);
+    return dto ? mapDtoToProject(dto as Record<string, unknown>) : undefined;
+  },
+
+  async createProject(payload: { name: string; description: string; startDate: string; status?: string; }): Promise<Project> {
+    const body = { ...payload, status: payload.status || 'PLANNED' };
+    const dto = await callApi(`/api/projects`, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+    if (!dto) throw new Error('Invalid project create response from server');
+    return mapDtoToProject(dto as Record<string, unknown>);
+  }
+};
+
+// Helper: map backend ProjectDTO to frontend Project shape
+function mapDtoToProject(dto: Record<string, unknown>): Project {
+  // dto fields: projectId, name, description, customerId, startDate, endDate, status (enum)
+  const projectId = dto['projectId'] ?? dto['id'] ?? '';
+  const customerId = dto['customerId'] ?? '';
+  const name = dto['name'] ?? '';
+  const description = dto['description'] ?? '';
+  const startDate = dto['startDate'] ?? '';
+  const endDate = dto['endDate'] ?? '';
+  const statusEnum = String(dto['status'] ?? '').toUpperCase();
+  // Map backend enum to UI status used across the app
+  const statusMap: Record<string, string> = {
+    'PLANNED': 'Ongoing',
+    'IN_PROGRESS': 'Ongoing',
+    'COMPLETED': 'Completed',
+    'CANCELLED': 'Cancelled',
+    'ON_HOLD': 'Ongoing'
+  };
+  const status = statusMap[statusEnum] || 'Ongoing';
+
+  return {
+    id: String(projectId),
+    customerId: String(customerId),
+    taskName: String(name),
+    description: String(description),
+    vehicleNumber: '',
+    vehicleType: '',
+    startDate: String(startDate),
+    endDate: String(endDate),
+    time: '',
+    status: status as Project['status'],
+  } as Project;
+}
+
+/**
+ * Dashboard Service
+ */
+export const dashboardService = {
+  async getDashboardStats(customerId: string): Promise<DashboardStats> {
+    await delay();
+    
+    const vehicles = mockVehicles.filter(v => v.customerId === customerId);
+    const upcomingAppointments = mockAppointments.filter(
+      a => a.customerId === customerId && a.status === 'Upcoming'
+    );
+    const completedAppointments = mockAppointments.filter(
+      a => a.customerId === customerId && a.status === 'Completed'
+    );
+    const ongoingProjects = mockProjects.filter(
+      p => p.customerId === customerId && p.status === 'Ongoing'
+    );
+    const completedProjects = mockProjects.filter(
+      p => p.customerId === customerId && p.status === 'Completed'
+    );
+
+    return {
+      totalVehicles: vehicles.length,
+      upcomingAppointments: upcomingAppointments.length,
+      ongoingProjects: ongoingProjects.length,
+      completedAppointments: completedAppointments.length,
+      completedProjects: completedProjects.length
+    };
+  }
+};
diff --git a/src/app/admin/appointments/[id]/page.tsx b/src/app/admin/appointments/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/admin/appointments/page.tsx b/src/app/admin/appointments/page.tsx
new file mode 100644
index 0000000..9e3ab55
--- /dev/null
+++ b/src/app/admin/appointments/page.tsx
@@ -0,0 +1,367 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Search, Calendar, Clock, User, CheckCircle, XCircle, UserPlus } from 'lucide-react';
+import type { Appointment } from '@/types';
+
+interface Employee {
+  id: string | number;
+  name: string;
+  position: string;
+  isAvailable: boolean;
+  currentAppointments: number;
+}
+
+export default function AdminAppointmentsPage() {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [employees, setEmployees] = useState<Employee[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [selectedAppointment, setSelectedAppointment] = useState<Appointment | null>(null);
+  const [selectedEmployee, setSelectedEmployee] = useState<string>('');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      // Import mock appointments
+      const { mockAppointments } = await import('@/data/mockData');
+      
+      // Mock employees with availability status
+      const mockEmployees: Employee[] = [
+        {
+          id: 1,
+          name: 'Mike Wilson',
+          position: 'Senior Technician',
+          isAvailable: true,
+          currentAppointments: 0,
+        },
+        {
+          id: 2,
+          name: 'Robert Martinez',
+          position: 'Technician',
+          isAvailable: true,
+          currentAppointments: 0,
+        },
+        {
+          id: 3,
+          name: 'David Smith',
+          position: 'Technician',
+          isAvailable: false,
+          currentAppointments: 2,
+        },
+        {
+          id: 4,
+          name: 'Carlos Rodriguez',
+          position: 'Master Technician',
+          isAvailable: true,
+          currentAppointments: 1,
+        },
+      ];
+
+      setAppointments(mockAppointments);
+      setEmployees(mockEmployees);
+      setLoading(false);
+    };
+
+    fetchData();
+  }, []);
+
+  const filteredAppointments = appointments.filter(appointment =>
+    appointment.serviceName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    appointment.vehicleNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    appointment.status.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getStatusBadge = (status: string) => {
+    const statusLower = status.toLowerCase();
+    switch (statusLower) {
+      case 'completed':
+        return 'bg-green-100 text-green-800';
+      case 'upcoming':
+        return 'bg-blue-100 text-blue-800';
+      case 'in progress':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'cancelled':
+        return 'bg-red-100 text-red-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const handleAssignClick = (appointment: Appointment) => {
+    setSelectedAppointment(appointment);
+    setSelectedEmployee(appointment.assignedEmployee || '');
+    setShowAssignModal(true);
+  };
+
+  const handleAssignEmployee = () => {
+    if (!selectedEmployee || !selectedAppointment) {
+      alert('Please select an employee');
+      return;
+    }
+
+    // Only update the appointment with assigned employee - NO automatic availability updates
+    setAppointments(appointments.map(apt =>
+      apt.id === selectedAppointment.id
+        ? { ...apt, assignedEmployee: selectedEmployee }
+        : apt
+    ));
+
+    alert(`Employee ${selectedEmployee} has been assigned successfully!`);
+
+    setShowAssignModal(false);
+    setSelectedAppointment(null);
+    setSelectedEmployee('');
+  };
+
+  const handleCloseModal = () => {
+    setShowAssignModal(false);
+    setSelectedAppointment(null);
+    setSelectedEmployee('');
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading appointments...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const availableEmployees = employees.filter(emp => emp.isAvailable);
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">Appointments Management</h1>
+        <p className="text-gray-600">View and assign employees to customer appointments</p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Total Appointments</div>
+          <div className="text-2xl font-bold text-gray-800">{appointments.length}</div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Upcoming</div>
+          <div className="text-2xl font-bold text-blue-600">
+            {appointments.filter(a => a.status === 'Upcoming').length}
+          </div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Completed</div>
+          <div className="text-2xl font-bold text-green-600">
+            {appointments.filter(a => a.status === 'Completed').length}
+          </div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Available Employees</div>
+          <div className="text-2xl font-bold text-purple-600">{availableEmployees.length}</div>
+        </div>
+      </div>
+
+      {/* Search Bar */}
+      <div className="mb-6 relative">
+        <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+        <input
+          type="text"
+          placeholder="Search by service, vehicle number, or status..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+      </div>
+
+      {/* Appointments Table */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Service
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Vehicle
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Date & Time
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Assigned Employee
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {filteredAppointments.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-6 py-12 text-center text-gray-500">
+                    No appointments found
+                  </td>
+                </tr>
+              ) : (
+                filteredAppointments.map((appointment) => (
+                  <tr key={appointment.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4">
+                      <div className="text-sm font-medium text-gray-900">
+                        {appointment.serviceName}
+                      </div>
+                      <div className="text-sm text-gray-500">ID: {appointment.id}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900">{appointment.vehicleNumber}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex flex-col gap-1">
+                        <div className="flex items-center gap-2 text-sm text-gray-900">
+                          <Calendar className="w-4 h-4 text-gray-400" />
+                          {appointment.date}
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-gray-600">
+                          <Clock className="w-4 h-4 text-gray-400" />
+                          {appointment.time}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      {appointment.assignedEmployee ? (
+                        <div className="flex items-center gap-2">
+                          <User className="w-4 h-4 text-blue-600" />
+                          <span className="text-sm text-gray-900">
+                            {appointment.assignedEmployee}
+                          </span>
+                        </div>
+                      ) : (
+                        <span className="text-sm text-gray-400 italic">Not assigned</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadge(appointment.status)}`}>
+                        {appointment.status}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <button
+                        onClick={() => handleAssignClick(appointment)}
+                        className="flex items-center gap-2 px-3 py-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                      >
+                        <UserPlus className="w-4 h-4" />
+                        {appointment.assignedEmployee ? 'Reassign' : 'Assign'}
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Assign Employee Modal */}
+      {showAssignModal && selectedAppointment && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4">
+            <div className="p-6">
+              <h2 className="text-2xl font-bold mb-4">Assign Employee</h2>
+
+              {/* Appointment Details */}
+              <div className="bg-gray-50 rounded-lg p-4 mb-6">
+                <h3 className="font-semibold text-gray-800 mb-2">Appointment Details</h3>
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  <div>
+                    <span className="text-gray-600">Service:</span>
+                    <span className="ml-2 font-medium">{selectedAppointment.serviceName}</span>
+                  </div>
+                  <div>
+                    <span className="text-gray-600">Vehicle:</span>
+                    <span className="ml-2 font-medium">{selectedAppointment.vehicleNumber}</span>
+                  </div>
+                  <div>
+                    <span className="text-gray-600">Date:</span>
+                    <span className="ml-2 font-medium">{selectedAppointment.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-gray-600">Time:</span>
+                    <span className="ml-2 font-medium">{selectedAppointment.time}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Employee Selection */}
+              <div className="mb-6">
+                <label className="block text-sm font-medium text-gray-700 mb-3">
+                  Select Available Employee
+                </label>
+                <div className="space-y-2 max-h-64 overflow-y-auto">
+                  {employees.map((employee) => (
+                    <div
+                      key={employee.id}
+                      onClick={() => employee.isAvailable && setSelectedEmployee(employee.name)}
+                      className={`p-4 border rounded-lg cursor-pointer transition-all ${
+                        selectedEmployee === employee.name
+                          ? 'border-blue-500 bg-blue-50'
+                          : employee.isAvailable
+                          ? 'border-gray-300 hover:border-blue-300 hover:bg-gray-50'
+                          : 'border-gray-200 bg-gray-100 cursor-not-allowed opacity-60'
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center text-white font-semibold">
+                            {employee.name.charAt(0)}
+                          </div>
+                          <div>
+                            <div className="font-medium text-gray-900">{employee.name}</div>
+                            <div className="text-sm text-gray-600">{employee.position}</div>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <div className="text-sm text-gray-600">
+                            Current: {employee.currentAppointments} appointments
+                          </div>
+                          {employee.isAvailable ? (
+                            <CheckCircle className="w-5 h-5 text-green-600" />
+                          ) : (
+                            <XCircle className="w-5 h-5 text-red-600" />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Modal Actions */}
+              <div className="flex justify-end gap-3">
+                <button
+                  onClick={handleCloseModal}
+                  className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleAssignEmployee}
+                  disabled={!selectedEmployee}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-blue-300 disabled:cursor-not-allowed"
+                >
+                  Assign Employee
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/admin/customers/page.tsx b/src/app/admin/customers/page.tsx
new file mode 100644
index 0000000..cd8688c
--- /dev/null
+++ b/src/app/admin/customers/page.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Search, Mail, Phone, Eye, Edit, Trash2 } from 'lucide-react';
+import type { Customer } from '@/types';
+
+export default function CustomersPage() {
+  const [customers, setCustomers] = useState<Customer[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate fetching customers from mockData
+    const fetchCustomers = async () => {
+      // Import mock data
+      const { mockCustomer } = await import('@/data/mockData');
+      // Create array of customers (in real app, this would come from API)
+      setCustomers([mockCustomer]);
+      setLoading(false);
+    };
+
+    fetchCustomers();
+  }, []);
+
+  const filteredCustomers = customers.filter(customer =>
+    customer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    customer.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    customer.phone.includes(searchTerm)
+  );
+
+  if (loading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading customers...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">Customers</h1>
+        <p className="text-gray-600">Manage all registered customers</p>
+      </div>
+
+      {/* Search Bar */}
+      <div className="mb-6 flex items-center gap-4">
+        <div className="flex-1 relative">
+          <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+          <input
+            type="text"
+            placeholder="Search by name, email, or phone..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+        </div>
+        <div className="text-sm text-gray-600">
+          Total: <span className="font-semibold">{filteredCustomers.length}</span> customers
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Customer
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Contact
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Address
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  NIC
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {filteredCustomers.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-6 py-12 text-center text-gray-500">
+                    No customers found
+                  </td>
+                </tr>
+              ) : (
+                filteredCustomers.map((customer) => (
+                  <tr key={customer.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
+                          {customer.name.charAt(0)}
+                        </div>
+                        <div className="ml-4">
+                          <div className="text-sm font-medium text-gray-900">{customer.name}</div>
+                          <div className="text-sm text-gray-500">ID: {customer.id}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex flex-col gap-1">
+                        <div className="flex items-center gap-2 text-sm text-gray-900">
+                          <Mail className="w-4 h-4 text-gray-400" />
+                          {customer.email}
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-gray-600">
+                          <Phone className="w-4 h-4 text-gray-400" />
+                          {customer.phone}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="text-sm text-gray-900 max-w-xs truncate">
+                        {customer.address}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-700">
+                        {customer.nic}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center gap-2">
+                        <button className="text-blue-600 hover:text-blue-900 p-1 hover:bg-blue-50 rounded transition-colors">
+                          <Eye className="w-4 h-4" />
+                        </button>
+                        <button className="text-green-600 hover:text-green-900 p-1 hover:bg-green-50 rounded transition-colors">
+                          <Edit className="w-4 h-4" />
+                        </button>
+                        <button className="text-red-600 hover:text-red-900 p-1 hover:bg-red-50 rounded transition-colors">
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      
+    </div>
+  );
+}
diff --git a/src/app/admin/dashboard/page.tsx b/src/app/admin/dashboard/page.tsx
new file mode 100644
index 0000000..11fb6b3
--- /dev/null
+++ b/src/app/admin/dashboard/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import React from 'react';
+
+export default function AdminDashboard() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-6">Admin Dashboard</h1>
+      
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-gray-600 text-sm font-medium mb-2">Total Customers</h3>
+          <p className="text-3xl font-bold text-blue-600">0</p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-gray-600 text-sm font-medium mb-2">Total Employees</h3>
+          <p className="text-3xl font-bold text-green-600">0</p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-gray-600 text-sm font-medium mb-2">Appointments</h3>
+          <p className="text-3xl font-bold text-orange-600">0</p>
+        </div>
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-gray-600 text-sm font-medium mb-2">Active Projects</h3>
+          <p className="text-3xl font-bold text-purple-600">0</p>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-semibold mb-4">Recent Activity</h2>
+        <p className="text-gray-500">No recent activity.</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/employees/[id]/page.tsx b/src/app/admin/employees/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/admin/employees/page.tsx b/src/app/admin/employees/page.tsx
new file mode 100644
index 0000000..a5ee870
--- /dev/null
+++ b/src/app/admin/employees/page.tsx
@@ -0,0 +1,654 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Search, Mail, Phone, Calendar, Eye, Edit, Trash2, Briefcase, Award } from 'lucide-react';
+import { api } from '@/lib/apiClient';
+
+interface Employee {
+  id: string | number;
+  name: string;
+  email: string;
+  phone: string;
+  employeeId: string;
+  position: string;
+  department: string;
+  joinedDate: string;
+  specialization: string[];
+  completedServices: number;
+  status: 'active' | 'on-leave' | 'inactive';
+}
+
+export default function EmployeesPage() {
+  const [employees, setEmployees] = useState<Employee[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showViewModal, setShowViewModal] = useState(false);
+  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    phoneNumber: '',
+    specialization: '',
+    position: '',
+    department: '',
+    status: 'active' as 'active' | 'on-leave' | 'inactive',
+  });
+
+  useEffect(() => {
+    // Simulate fetching employees
+    const fetchEmployees = async () => {
+      // Mock data
+      const mockEmployees: Employee[] = [
+        {
+          id: 1,
+          name: 'Mike Wilson',
+          email: 'mike.wilson@automobile.com',
+          phone: '+1 234-567-9001',
+          employeeId: 'EMP-2024-001',
+          position: 'Senior Technician',
+          department: 'Service Department',
+          joinedDate: '2022-03-15',
+          specialization: ['Engine Repair', 'Brake Systems', 'Electrical'],
+          completedServices: 156,
+          status: 'active',
+        },
+        {
+          id: 2,
+          name: 'Robert Martinez',
+          email: 'robert.m@automobile.com',
+          phone: '+1 234-567-9002',
+          employeeId: 'EMP-2024-002',
+          position: 'Technician',
+          department: 'Service Department',
+          joinedDate: '2023-01-20',
+          specialization: ['Tire Service', 'Oil Change', 'Diagnostics'],
+          completedServices: 98,
+          status: 'active',
+        },
+        {
+          id: 3,
+          name: 'Jennifer Lee',
+          email: 'jennifer.l@automobile.com',
+          phone: '+1 234-567-9003',
+          employeeId: 'EMP-2024-003',
+          position: 'Service Advisor',
+          department: 'Customer Service',
+          joinedDate: '2023-06-10',
+          specialization: ['Customer Relations', 'Service Scheduling'],
+          completedServices: 210,
+          status: 'active',
+        },
+        {
+          id: 4,
+          name: 'Carlos Rodriguez',
+          email: 'carlos.r@automobile.com',
+          phone: '+1 234-567-9004',
+          employeeId: 'EMP-2024-004',
+          position: 'Master Technician',
+          department: 'Service Department',
+          joinedDate: '2021-09-05',
+          specialization: ['Transmission', 'Engine', 'Suspension'],
+          completedServices: 245,
+          status: 'active',
+        },
+        {
+          id: 5,
+          name: 'Amanda Taylor',
+          email: 'amanda.t@automobile.com',
+          phone: '+1 234-567-9005',
+          employeeId: 'EMP-2024-005',
+          position: 'Technician',
+          department: 'Service Department',
+          joinedDate: '2023-11-15',
+          specialization: ['Paint & Body', 'Detailing'],
+          completedServices: 42,
+          status: 'on-leave',
+        },
+      ];
+
+      setEmployees(mockEmployees);
+      setLoading(false);
+    };
+
+    fetchEmployees();
+  }, []);
+
+  const filteredEmployees = employees.filter(employee =>
+    employee.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    employee.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    employee.employeeId.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    employee.position.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'active':
+        return 'bg-green-100 text-green-800';
+      case 'on-leave':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'inactive':
+        return 'bg-gray-100 text-gray-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const handleViewEmployee = (employee: Employee) => {
+    setSelectedEmployee(employee);
+    setShowViewModal(true);
+  };
+
+  const handleEditEmployee = (employee: Employee) => {
+    setSelectedEmployee(employee);
+    const [first, ...rest] = employee.name.split(' ');
+    setFormData({
+      firstName: first || '',
+      lastName: rest.join(' ') || '',
+      email: employee.email,
+      password: '',
+      phoneNumber: employee.phone,
+      specialization: employee.specialization.join(', '),
+      position: employee.position,
+      department: employee.department,
+      status: employee.status,
+    });
+    setShowEditModal(true);
+  };
+
+  const handleDeleteEmployee = (id: string | number) => {
+    if (confirm('Are you sure you want to delete this employee?')) {
+      setEmployees(employees.filter(emp => emp.id !== id));
+    }
+  };
+
+  const handleCloseModal = () => {
+    setShowAddModal(false);
+    setShowEditModal(false);
+    setSelectedEmployee(null);
+    setFormData({
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      phoneNumber: '',
+      specialization: '',
+      position: '',
+      department: '',
+      status: 'active',
+    });
+  };
+
+  const handleSaveEmployee = async () => {
+    if (!formData.firstName || !formData.lastName || !formData.email) {
+      alert('Please fill in all required fields');
+      return;
+    }
+
+    if (showAddModal) {
+      if (!formData.password || formData.password.length < 6) {
+        alert('Password must be at least 6 characters long');
+        return;
+      }
+
+      try {
+        // Send required and optional fields to backend
+        const requestData: any = {
+          firstName: formData.firstName,
+          lastName: formData.lastName,
+          email: formData.email,
+          password: formData.password,
+        };
+        
+        // Add optional fields if provided
+        if (formData.phoneNumber) {
+          requestData.phoneNumber = formData.phoneNumber;
+        }
+        if (formData.specialization) {
+          requestData.specialization = formData.specialization;
+        }
+        
+        const newEmployee = await api.post('/admin/employees', requestData);
+        
+        // Add to local state with all fields
+        setEmployees([...employees, {
+          id: newEmployee.id || Date.now(),
+          name: `${formData.firstName} ${formData.lastName}`,
+          email: formData.email,
+          phone: formData.phoneNumber || '',
+          employeeId: newEmployee.employeeId || `EMP-2024-${String(employees.length + 1).padStart(3, '0')}`,
+          position: formData.position || 'Technician',
+          department: formData.department || 'Service Department',
+          joinedDate: new Date().toISOString().split('T')[0],
+          specialization: formData.specialization ? formData.specialization.split(',').map(s => s.trim()) : [],
+          completedServices: 0,
+          status: formData.status,
+        }]);
+        
+        alert('Employee created successfully!');
+      } catch (error: any) {
+        alert(error.response?.data?.message || error.message || 'Failed to create employee');
+        return;
+      }
+    } else if (showEditModal && selectedEmployee) {
+      // Update only frontend state for editing (frontend-only fields)
+      setEmployees(employees.map(emp =>
+        emp.id === selectedEmployee.id
+          ? { ...emp, name: `${formData.firstName} ${formData.lastName}`, email: formData.email, phone: formData.phoneNumber, position: formData.position, department: formData.department, status: formData.status }
+          : emp
+      ));
+      alert('Employee updated successfully!');
+    }
+
+    handleCloseModal();
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading employees...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">Employees</h1>
+        <p className="text-gray-600">Manage all registered employees</p>
+      </div>
+
+      {/* Search Bar */}
+      <div className="mb-6 flex items-center gap-4">
+        <div className="flex-1 relative">
+          <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+          <input
+            type="text"
+            placeholder="Search by name, email, employee ID, or position..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+        </div>
+        <div className="text-sm text-gray-600">
+          Total: <span className="font-semibold">{filteredEmployees.length}</span> employees
+        </div>
+      </div>
+
+      {/* Add Employee Button */}
+      <div className="mb-6 flex justify-end">
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          <span className="text-xl">+</span>
+          Add Employee
+        </button>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Employee
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Position
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Services
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {filteredEmployees.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-6 py-12 text-center text-gray-500">
+                    No employees found
+                  </td>
+                </tr>
+              ) : (
+                filteredEmployees.map((employee) => (
+                  <tr key={employee.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center text-white font-semibold">
+                          {employee.name.charAt(0)}
+                        </div>
+                        <div className="ml-4">
+                          <div className="text-sm font-medium text-gray-900">{employee.name}</div>
+                          <div className="text-sm text-gray-500">{employee.employeeId}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center gap-2">
+                        <Briefcase className="w-4 h-4 text-gray-400" />
+                        <div>
+                          <div className="text-sm font-medium text-gray-900">{employee.position}</div>
+                          <div className="text-sm text-gray-500">{employee.department}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center gap-2">
+                        <Award className="w-4 h-4 text-yellow-500" />
+                        <span className="text-sm font-semibold text-gray-900">
+                          {employee.completedServices}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadge(employee.status)}`}>
+                        {employee.status}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center gap-2">
+                        <button 
+                          onClick={() => handleViewEmployee(employee)}
+                          className="text-blue-600 hover:text-blue-900 p-1 hover:bg-blue-50 rounded transition-colors"
+                        >
+                          <Eye className="w-4 h-4" />
+                        </button>
+                        <button 
+                          onClick={() => handleEditEmployee(employee)}
+                          className="text-green-600 hover:text-green-900 p-1 hover:bg-green-50 rounded transition-colors"
+                        >
+                          <Edit className="w-4 h-4" />
+                        </button>
+                        <button 
+                          onClick={() => handleDeleteEmployee(employee.id)}
+                          className="text-red-600 hover:text-red-900 p-1 hover:bg-red-50 rounded transition-colors"
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Add/Edit Employee Modal */}
+      {(showAddModal || showEditModal) && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+            <div className="p-6">
+              <h2 className="text-2xl font-bold mb-6">
+                {showAddModal ? 'Add New Employee' : 'Edit Employee'}
+              </h2>
+
+              <div className="space-y-4">
+                {/* First Name */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    First Name *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.firstName}
+                    onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Enter first name"
+                  />
+                </div>
+
+                {/* Last Name */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Last Name *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.lastName}
+                    onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Enter last name"
+                  />
+                </div>
+
+                {/* Email */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Email *
+                  </label>
+                  <input
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="employee@automobile.com"
+                  />
+                </div>
+
+                {/* Password - Only show when adding */}
+                {showAddModal && (
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Password *
+                    </label>
+                    <input
+                      type="password"
+                      value={formData.password}
+                      onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="Minimum 6 characters"
+                      minLength={6}
+                    />
+                  </div>
+                )}
+
+                {/* Phone Number - Optional */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Phone Number (Optional)
+                  </label>
+                  <input
+                    type="tel"
+                    value={formData.phoneNumber}
+                    onChange={(e) => setFormData({ ...formData, phoneNumber: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="+1 234-567-8900"
+                  />
+                </div>
+
+                {/* Specialization - Optional */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Specialization (Optional)
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.specialization}
+                    onChange={(e) => setFormData({ ...formData, specialization: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="e.g., Engine Repair, Brake Systems"
+                  />
+                  <p className="mt-1 text-xs text-gray-500">Separate multiple specializations with commas</p>
+                </div>
+
+                {/* Position - Frontend only, optional */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Position (Frontend Only)
+                  </label>
+                  <select
+                    value={formData.position}
+                    onChange={(e) => setFormData({ ...formData, position: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value="">Select position</option>
+                    <option value="Master Technician">Master Technician</option>
+                    <option value="Senior Technician">Senior Technician</option>
+                    <option value="Technician">Technician</option>
+                    <option value="Service Advisor">Service Advisor</option>
+                    <option value="Parts Specialist">Parts Specialist</option>
+                  </select>
+                </div>
+
+                {/* Department - Frontend only, optional */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Department (Frontend Only)
+                  </label>
+                  <select
+                    value={formData.department}
+                    onChange={(e) => setFormData({ ...formData, department: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value="">Select department</option>
+                    <option value="Service Department">Service Department</option>
+                    <option value="Customer Service">Customer Service</option>
+                    <option value="Parts Department">Parts Department</option>
+                    <option value="Management">Management</option>
+                  </select>
+                </div>
+
+                {/* Status - Frontend only */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Status (Frontend Only)
+                  </label>
+                  <select
+                    value={formData.status}
+                    onChange={(e) => setFormData({ ...formData, status: e.target.value as 'active' | 'on-leave' | 'inactive' })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value="active">Active</option>
+                    <option value="on-leave">On Leave</option>
+                    <option value="inactive">Inactive</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Modal Actions */}
+              <div className="mt-6 flex justify-end gap-3">
+                <button
+                  onClick={handleCloseModal}
+                  className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleSaveEmployee}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  {showAddModal ? 'Add Employee' : 'Save Changes'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* View Employee Modal */}
+      {showViewModal && selectedEmployee && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-bold">Employee Details</h2>
+                <button
+                  onClick={() => setShowViewModal(false)}
+                  className="text-gray-400 hover:text-gray-600"
+                >
+                  ✕
+                </button>
+              </div>
+
+              <div className="space-y-4">
+                <div className="flex items-center gap-4 mb-6">
+                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center text-white text-2xl font-semibold">
+                    {selectedEmployee.name.charAt(0)}
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-semibold">{selectedEmployee.name}</h3>
+                    <p className="text-gray-500">{selectedEmployee.employeeId}</p>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-sm text-gray-500">Email</label>
+                    <p className="font-medium">{selectedEmployee.email}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Phone</label>
+                    <p className="font-medium">{selectedEmployee.phone}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Position</label>
+                    <p className="font-medium">{selectedEmployee.position}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Department</label>
+                    <p className="font-medium">{selectedEmployee.department}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Joined Date</label>
+                    <p className="font-medium">
+                      {new Date(selectedEmployee.joinedDate).toLocaleDateString()}
+                    </p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Completed Services</label>
+                    <p className="font-medium">{selectedEmployee.completedServices}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Status</label>
+                    <span className={`inline-block px-3 py-1 text-xs font-semibold rounded-full ${getStatusBadge(selectedEmployee.status)}`}>
+                      {selectedEmployee.status}
+                    </span>
+                  </div>
+                </div>
+
+                <div>
+                  <label className="text-sm text-gray-500 block mb-2">Specializations</label>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedEmployee.specialization.map((skill, index) => (
+                      <span
+                        key={index}
+                        className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium"
+                      >
+                        {skill}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-6 flex justify-end">
+                <button
+                  onClick={() => setShowViewModal(false)}
+                  className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
new file mode 100644
index 0000000..9d91f5b
--- /dev/null
+++ b/src/app/admin/layout.tsx
@@ -0,0 +1,5 @@
+import AdminLayout from '@/components/layout/AdminLayout';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
diff --git a/src/app/admin/projects/[id]/page.tsx b/src/app/admin/projects/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/admin/projects/page.tsx b/src/app/admin/projects/page.tsx
new file mode 100644
index 0000000..da3410e
--- /dev/null
+++ b/src/app/admin/projects/page.tsx
@@ -0,0 +1,401 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Search, Calendar, Clock, User, CheckCircle, XCircle, UserPlus, DollarSign, FileText } from 'lucide-react';
+import type { Project } from '@/types';
+
+interface Employee {
+  id: string | number;
+  name: string;
+  position: string;
+  isAvailable: boolean;
+  currentProjects: number;
+}
+
+export default function AdminProjectsPage() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [employees, setEmployees] = useState<Employee[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
+  const [selectedEmployee, setSelectedEmployee] = useState<string>('');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      // Import mock projects
+      const { mockProjects } = await import('@/data/mockData');
+      
+      // Mock employees with availability status
+      const mockEmployees: Employee[] = [
+        {
+          id: 1,
+          name: 'Robert Brown',
+          position: 'Master Technician',
+          isAvailable: true,
+          currentProjects: 1,
+        },
+        {
+          id: 2,
+          name: 'James Miller',
+          position: 'Senior Technician',
+          isAvailable: true,
+          currentProjects: 1,
+        },
+        {
+          id: 3,
+          name: 'David Smith',
+          position: 'Technician',
+          isAvailable: false,
+          currentProjects: 3,
+        },
+        {
+          id: 4,
+          name: 'Carlos Rodriguez',
+          position: 'Master Technician',
+          isAvailable: true,
+          currentProjects: 0,
+        },
+      ];
+
+      setProjects(mockProjects);
+      setEmployees(mockEmployees);
+      setLoading(false);
+    };
+
+    fetchData();
+  }, []);
+
+  const filteredProjects = projects.filter(project =>
+    project.taskName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    project.vehicleNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    project.status.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getStatusBadge = (status: string) => {
+    const statusLower = status.toLowerCase();
+    switch (statusLower) {
+      case 'completed':
+        return 'bg-green-100 text-green-800';
+      case 'ongoing':
+        return 'bg-blue-100 text-blue-800';
+      case 'pending':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'cancelled':
+        return 'bg-red-100 text-red-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const handleAssignClick = (project: Project) => {
+    setSelectedProject(project);
+    setSelectedEmployee(project.assignedEmployee || '');
+    setShowAssignModal(true);
+  };
+
+  const handleAssignEmployee = () => {
+    if (!selectedEmployee || !selectedProject) {
+      alert('Please select an employee');
+      return;
+    }
+
+    // Only update the project with assigned employee - NO automatic availability updates
+    setProjects(projects.map(proj =>
+      proj.id === selectedProject.id
+        ? { ...proj, assignedEmployee: selectedEmployee }
+        : proj
+    ));
+
+    alert(`Employee ${selectedEmployee} has been assigned successfully!`);
+
+    setShowAssignModal(false);
+    setSelectedProject(null);
+    setSelectedEmployee('');
+  };
+
+  const handleCloseModal = () => {
+    setShowAssignModal(false);
+    setSelectedProject(null);
+    setSelectedEmployee('');
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading projects...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const availableEmployees = employees.filter(emp => emp.isAvailable);
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">Projects Management</h1>
+        <p className="text-gray-600">View and assign employees to customer projects</p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Total Projects</div>
+          <div className="text-2xl font-bold text-gray-800">{projects.length}</div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Pending</div>
+          <div className="text-2xl font-bold text-yellow-600">
+            {projects.filter(p => p.status === 'Pending').length}
+          </div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Ongoing</div>
+          <div className="text-2xl font-bold text-blue-600">
+            {projects.filter(p => p.status === 'Ongoing').length}
+          </div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Completed</div>
+          <div className="text-2xl font-bold text-green-600">
+            {projects.filter(p => p.status === 'Completed').length}
+          </div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Available Employees</div>
+          <div className="text-2xl font-bold text-purple-600">{availableEmployees.length}</div>
+        </div>
+      </div>
+
+      {/* Search Bar */}
+      <div className="mb-6 relative">
+        <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+        <input
+          type="text"
+          placeholder="Search by task name, vehicle number, or status..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+      </div>
+
+      {/* Projects Table */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Project
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Vehicle
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Start Date
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Cost
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Assigned Employee
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {filteredProjects.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-6 py-12 text-center text-gray-500">
+                    No projects found
+                  </td>
+                </tr>
+              ) : (
+                filteredProjects.map((project) => (
+                  <tr key={project.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4">
+                      <div className="text-sm font-medium text-gray-900">
+                        {project.taskName}
+                      </div>
+                      <div className="text-sm text-gray-500">{project.description}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900">{project.vehicleNumber}</div>
+                      <div className="text-sm text-gray-500">{project.vehicleType}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center gap-2 text-sm text-gray-900">
+                        <Calendar className="w-4 h-4 text-gray-400" />
+                        {project.startDate}
+                      </div>
+                      {project.completedDate && (
+                        <div className="text-sm text-gray-500 mt-1">
+                          Completed: {project.completedDate}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      {project.estimatedCost && (
+                        <div className="flex items-center gap-2 text-sm font-semibold text-green-600">
+                          <DollarSign className="w-4 h-4" />
+                          {project.estimatedCost}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      {project.assignedEmployee ? (
+                        <div className="flex items-center gap-2">
+                          <User className="w-4 h-4 text-blue-600" />
+                          <span className="text-sm text-gray-900">
+                            {project.assignedEmployee}
+                          </span>
+                        </div>
+                      ) : (
+                        <span className="text-sm text-gray-400 italic">Not assigned</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadge(project.status)}`}>
+                        {project.status}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <button
+                        onClick={() => handleAssignClick(project)}
+                        className="flex items-center gap-2 px-3 py-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                      >
+                        <UserPlus className="w-4 h-4" />
+                        {project.assignedEmployee ? 'Reassign' : 'Assign'}
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Assign Employee Modal */}
+      {showAssignModal && selectedProject && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+            <div className="p-6">
+              <h2 className="text-2xl font-bold mb-4">Assign Employee to Project</h2>
+
+              {/* Project Details */}
+              <div className="bg-gray-50 rounded-lg p-4 mb-6">
+                <h3 className="font-semibold text-gray-800 mb-3">Project Details</h3>
+                <div className="space-y-2 text-sm">
+                  <div className="flex items-start gap-2">
+                    <FileText className="w-4 h-4 text-gray-500 mt-0.5" />
+                    <div>
+                      <span className="text-gray-600">Task:</span>
+                      <span className="ml-2 font-medium">{selectedProject.taskName}</span>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="text-gray-600 ml-6">Description:</span>
+                    <span className="ml-2 text-gray-700">{selectedProject.description}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-gray-600 ml-6">Vehicle:</span>
+                    <span className="ml-2 font-medium">{selectedProject.vehicleNumber} ({selectedProject.vehicleType})</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Calendar className="w-4 h-4 text-gray-500" />
+                    <span className="text-gray-600">Start Date:</span>
+                    <span className="ml-2 font-medium">{selectedProject.startDate}</span>
+                  </div>
+                  {selectedProject.estimatedCost && (
+                    <div className="flex items-center gap-2">
+                      <DollarSign className="w-4 h-4 text-green-500" />
+                      <span className="text-gray-600">Estimated Cost:</span>
+                      <span className="ml-2 font-medium text-green-600">${selectedProject.estimatedCost}</span>
+                    </div>
+                  )}
+                  {selectedProject.notes && (
+                    <div className="flex items-start gap-2 mt-2 p-2 bg-yellow-50 rounded">
+                      <span className="text-gray-600">Notes:</span>
+                      <span className="ml-2 text-gray-700">{selectedProject.notes}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Employee Selection */}
+              <div className="mb-6">
+                <label className="block text-sm font-medium text-gray-700 mb-3">
+                  Select Available Employee
+                </label>
+                <div className="space-y-2 max-h-64 overflow-y-auto">
+                  {employees.map((employee) => (
+                    <div
+                      key={employee.id}
+                      onClick={() => employee.isAvailable && setSelectedEmployee(employee.name)}
+                      className={`p-4 border rounded-lg cursor-pointer transition-all ${
+                        selectedEmployee === employee.name
+                          ? 'border-blue-500 bg-blue-50'
+                          : employee.isAvailable
+                          ? 'border-gray-300 hover:border-blue-300 hover:bg-gray-50'
+                          : 'border-gray-200 bg-gray-100 cursor-not-allowed opacity-60'
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center text-white font-semibold">
+                            {employee.name.charAt(0)}
+                          </div>
+                          <div>
+                            <div className="font-medium text-gray-900">{employee.name}</div>
+                            <div className="text-sm text-gray-600">{employee.position}</div>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <div className="text-sm text-gray-600">
+                            Current: {employee.currentProjects} projects
+                          </div>
+                          {employee.isAvailable ? (
+                            <CheckCircle className="w-5 h-5 text-green-600" />
+                          ) : (
+                            <XCircle className="w-5 h-5 text-red-600" />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Modal Actions */}
+              <div className="flex justify-end gap-3">
+                <button
+                  onClick={handleCloseModal}
+                  className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleAssignEmployee}
+                  disabled={!selectedEmployee}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-blue-300 disabled:cursor-not-allowed"
+                >
+                  Assign Employee
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/admin/services/page.tsx b/src/app/admin/services/page.tsx
new file mode 100644
index 0000000..b1aff38
--- /dev/null
+++ b/src/app/admin/services/page.tsx
@@ -0,0 +1,584 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Search, Plus, Edit, Trash2, DollarSign, Clock, Wrench, X } from 'lucide-react';
+
+interface Service {
+  id: string;
+  name: string;
+  description: string;
+  duration: string;
+  price: number;
+  category: string;
+  isActive: boolean;
+}
+
+export default function AdminServicesPage() {
+  const [services, setServices] = useState<Service[]>([
+    {
+      id: 'SRV001',
+      name: 'Oil Change',
+      description: 'Complete oil and filter change service',
+      duration: '30 minutes',
+      price: 50,
+      category: 'Maintenance',
+      isActive: true,
+    },
+    {
+      id: 'SRV002',
+      name: 'Brake Inspection',
+      description: 'Full brake system inspection and adjustment',
+      duration: '45 minutes',
+      price: 75,
+      category: 'Safety',
+      isActive: true,
+    },
+    {
+      id: 'SRV003',
+      name: 'Tire Rotation',
+      description: 'Rotate all tires and check alignment',
+      duration: '30 minutes',
+      price: 40,
+      category: 'Maintenance',
+      isActive: true,
+    },
+    {
+      id: 'SRV004',
+      name: 'Engine Diagnostics',
+      description: 'Computer diagnostics and error code reading',
+      duration: '1 hour',
+      price: 100,
+      category: 'Diagnostics',
+      isActive: true,
+    },
+    {
+      id: 'SRV005',
+      name: 'Air Conditioning Service',
+      description: 'AC system check and refrigerant refill',
+      duration: '1.5 hours',
+      price: 120,
+      category: 'Comfort',
+      isActive: true,
+    },
+    {
+      id: 'SRV006',
+      name: 'Battery Replacement',
+      description: 'Battery testing and replacement service',
+      duration: '20 minutes',
+      price: 150,
+      category: 'Electrical',
+      isActive: false,
+    },
+  ]);
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [selectedService, setSelectedService] = useState<Service | null>(null);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    duration: '',
+    price: '',
+    category: '',
+    isActive: true,
+  });
+
+  const categories = ['Maintenance', 'Safety', 'Diagnostics', 'Comfort', 'Electrical', 'Custom'];
+
+  const filteredServices = services.filter(service =>
+    service.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    service.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    service.description.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleAddService = () => {
+    if (!formData.name || !formData.price || !formData.duration || !formData.category) {
+      alert('Please fill in all required fields');
+      return;
+    }
+
+    const newService: Service = {
+      id: `SRV${String(services.length + 1).padStart(3, '0')}`,
+      name: formData.name,
+      description: formData.description,
+      duration: formData.duration,
+      price: parseFloat(formData.price),
+      category: formData.category,
+      isActive: formData.isActive,
+    };
+
+    setServices([...services, newService]);
+    setShowAddModal(false);
+    resetForm();
+    alert('Service added successfully!');
+  };
+
+  const handleEditClick = (service: Service) => {
+    setSelectedService(service);
+    setFormData({
+      name: service.name,
+      description: service.description,
+      duration: service.duration,
+      price: service.price.toString(),
+      category: service.category,
+      isActive: service.isActive,
+    });
+    setShowEditModal(true);
+  };
+
+  const handleUpdateService = () => {
+    if (!formData.name || !formData.price || !formData.duration || !formData.category) {
+      alert('Please fill in all required fields');
+      return;
+    }
+
+    setServices(services.map(service =>
+      service.id === selectedService?.id
+        ? {
+            ...service,
+            name: formData.name,
+            description: formData.description,
+            duration: formData.duration,
+            price: parseFloat(formData.price),
+            category: formData.category,
+            isActive: formData.isActive,
+          }
+        : service
+    ));
+
+    setShowEditModal(false);
+    setSelectedService(null);
+    resetForm();
+    alert('Service updated successfully!');
+  };
+
+  const handleDeleteService = (serviceId: string) => {
+    if (confirm('Are you sure you want to delete this service?')) {
+      setServices(services.filter(service => service.id !== serviceId));
+      alert('Service deleted successfully!');
+    }
+  };
+
+  const toggleServiceStatus = (serviceId: string) => {
+    setServices(services.map(service =>
+      service.id === serviceId
+        ? { ...service, isActive: !service.isActive }
+        : service
+    ));
+  };
+
+  const resetForm = () => {
+    setFormData({
+      name: '',
+      description: '',
+      duration: '',
+      price: '',
+      category: '',
+      isActive: true,
+    });
+  };
+
+  const handleCloseModal = () => {
+    setShowAddModal(false);
+    setShowEditModal(false);
+    setSelectedService(null);
+    resetForm();
+  };
+
+  const activeServices = services.filter(s => s.isActive).length;
+  const inactiveServices = services.filter(s => !s.isActive).length;
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">Services Management</h1>
+        <p className="text-gray-600">Manage available services and their pricing</p>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Total Services</div>
+          <div className="text-2xl font-bold text-gray-800">{services.length}</div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Active Services</div>
+          <div className="text-2xl font-bold text-green-600">{activeServices}</div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Inactive Services</div>
+          <div className="text-2xl font-bold text-red-600">{inactiveServices}</div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-4">
+          <div className="text-sm text-gray-600 mb-1">Categories</div>
+          <div className="text-2xl font-bold text-blue-600">{categories.length}</div>
+        </div>
+      </div>
+
+      {/* Search and Add Button */}
+      <div className="flex flex-col md:flex-row gap-4 mb-6">
+        <div className="flex-1 relative">
+          <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+          <input
+            type="text"
+            placeholder="Search services by name, category, or description..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+        </div>
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          <Plus className="w-5 h-5" />
+          Add Service
+        </button>
+      </div>
+
+      {/* Services Table */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Service Name
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Category
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Duration
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Price
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {filteredServices.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-6 py-12 text-center text-gray-500">
+                    No services found
+                  </td>
+                </tr>
+              ) : (
+                filteredServices.map((service) => (
+                  <tr key={service.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
+                          <Wrench className="w-5 h-5 text-blue-600" />
+                        </div>
+                        <div>
+                          <div className="text-sm font-medium text-gray-900">{service.name}</div>
+                          <div className="text-sm text-gray-500">{service.description}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
+                        {service.category}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center gap-2 text-sm text-gray-900">
+                        <Clock className="w-4 h-4 text-gray-400" />
+                        {service.duration}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center gap-1 text-sm font-semibold text-green-600">
+                        <DollarSign className="w-4 h-4" />
+                        {service.price}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <button
+                        onClick={() => toggleServiceStatus(service.id)}
+                        className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                          service.isActive
+                            ? 'bg-green-100 text-green-800 hover:bg-green-200'
+                            : 'bg-red-100 text-red-800 hover:bg-red-200'
+                        } transition-colors cursor-pointer`}
+                      >
+                        {service.isActive ? 'Active' : 'Inactive'}
+                      </button>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => handleEditClick(service)}
+                          className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                          title="Edit"
+                        >
+                          <Edit className="w-4 h-4" />
+                        </button>
+                        <button
+                          onClick={() => handleDeleteService(service.id)}
+                          className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                          title="Delete"
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Add Service Modal */}
+      {showAddModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-bold">Add New Service</h2>
+                <button onClick={handleCloseModal} className="text-gray-400 hover:text-gray-600">
+                  <X className="w-6 h-6" />
+                </button>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Service Name *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="e.g., Oil Change"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Description
+                  </label>
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    rows={3}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Brief description of the service"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Duration *
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.duration}
+                      onChange={(e) => setFormData({ ...formData, duration: e.target.value })}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="e.g., 30 minutes"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Price ($) *
+                    </label>
+                    <input
+                      type="number"
+                      value={formData.price}
+                      onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="0.00"
+                      min="0"
+                      step="0.01"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Category *
+                  </label>
+                  <select
+                    value={formData.category}
+                    onChange={(e) => setFormData({ ...formData, category: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value="">Select Category</option>
+                    {categories.map((cat) => (
+                      <option key={cat} value={cat}>
+                        {cat}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="isActive"
+                    checked={formData.isActive}
+                    onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
+                    className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                  />
+                  <label htmlFor="isActive" className="text-sm text-gray-700">
+                    Service is active
+                  </label>
+                </div>
+              </div>
+
+              <div className="flex justify-end gap-3 mt-6">
+                <button
+                  onClick={handleCloseModal}
+                  className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleAddService}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Add Service
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Service Modal */}
+      {showEditModal && selectedService && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-bold">Edit Service</h2>
+                <button onClick={handleCloseModal} className="text-gray-400 hover:text-gray-600">
+                  <X className="w-6 h-6" />
+                </button>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Service Name *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="e.g., Oil Change"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Description
+                  </label>
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    rows={3}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Brief description of the service"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Duration *
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.duration}
+                      onChange={(e) => setFormData({ ...formData, duration: e.target.value })}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="e.g., 30 minutes"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Price ($) *
+                    </label>
+                    <input
+                      type="number"
+                      value={formData.price}
+                      onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="0.00"
+                      min="0"
+                      step="0.01"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Category *
+                  </label>
+                  <select
+                    value={formData.category}
+                    onChange={(e) => setFormData({ ...formData, category: e.target.value })}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value="">Select Category</option>
+                    {categories.map((cat) => (
+                      <option key={cat} value={cat}>
+                        {cat}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="isActiveEdit"
+                    checked={formData.isActive}
+                    onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
+                    className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                  />
+                  <label htmlFor="isActiveEdit" className="text-sm text-gray-700">
+                    Service is active
+                  </label>
+                </div>
+              </div>
+
+              <div className="flex justify-end gap-3 mt-6">
+                <button
+                  onClick={handleCloseModal}
+                  className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleUpdateService}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Update Service
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
new file mode 100644
index 0000000..4c90aa2
--- /dev/null
+++ b/src/app/admin/settings/page.tsx
@@ -0,0 +1,537 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Save, Bell, Shield, Mail, Globe, Clock, Building, DollarSign } from 'lucide-react';
+
+export default function AdminSettingsPage() {
+  const [settings, setSettings] = useState({
+    // Business Information
+    businessName: 'AutoCare Service Center',
+    businessEmail: 'info@autocare.com',
+    businessPhone: '+1 (555) 123-4567',
+    businessAddress: '123 Main Street, Springfield, USA',
+    taxRate: '8.5',
+    currency: 'USD',
+
+    // Operating Hours
+    weekdayOpen: '08:00',
+    weekdayClose: '18:00',
+    weekendOpen: '09:00',
+    weekendClose: '17:00',
+    
+    // Appointment Settings
+    appointmentDuration: '60',
+    bufferTime: '15',
+    advanceBookingDays: '30',
+    cancellationHours: '24',
+
+    // Notification Settings
+    emailNotifications: true,
+    smsNotifications: false,
+    appointmentReminders: true,
+    statusUpdates: true,
+    promotionalEmails: false,
+
+    // System Settings
+    autoAssignEmployees: false,
+    allowCustomerCancellation: true,
+    requireApproval: true,
+    maintenanceMode: false,
+  });
+
+  const [activeTab, setActiveTab] = useState<'business' | 'hours' | 'appointments' | 'notifications' | 'system'>('business');
+  const [hasChanges, setHasChanges] = useState(false);
+
+  const handleInputChange = (field: string, value: string | boolean | number) => {
+    setSettings({ ...settings, [field]: value });
+    setHasChanges(true);
+  };
+
+  const handleSave = () => {
+    // Save settings logic would go here
+    console.log('Saving settings:', settings);
+    alert('Settings saved successfully!');
+    setHasChanges(false);
+  };
+
+  const handleReset = () => {
+    if (confirm('Are you sure you want to reset all settings to defaults?')) {
+      // Reset logic would go here
+      alert('Settings reset to defaults');
+      setHasChanges(false);
+    }
+  };
+
+  const tabs = [
+    { id: 'business', label: 'Business Info', icon: Building },
+    { id: 'hours', label: 'Operating Hours', icon: Clock },
+    { id: 'appointments', label: 'Appointments', icon: Globe },
+    { id: 'notifications', label: 'Notifications', icon: Bell },
+    { id: 'system', label: 'System', icon: Shield },
+  ];
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">System Settings</h1>
+        <p className="text-gray-600">Configure system preferences and business settings</p>
+      </div>
+
+      {/* Save Banner */}
+      {hasChanges && (
+        <div className="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
+              <Save className="w-5 h-5 text-yellow-600" />
+            </div>
+            <div>
+              <div className="font-semibold text-yellow-800">Unsaved Changes</div>
+              <div className="text-sm text-yellow-700">You have unsaved changes. Don't forget to save!</div>
+            </div>
+          </div>
+          <button
+            onClick={handleSave}
+            className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors"
+          >
+            Save Now
+          </button>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <div className="bg-white rounded-lg shadow mb-6">
+        <div className="border-b border-gray-200">
+          <div className="flex overflow-x-auto">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id as any)}
+                  className={`flex items-center gap-2 px-6 py-4 font-medium border-b-2 transition-colors whitespace-nowrap ${
+                    activeTab === tab.id
+                      ? 'border-blue-600 text-blue-600'
+                      : 'border-transparent text-gray-600 hover:text-gray-800'
+                  }`}
+                >
+                  <Icon className="w-5 h-5" />
+                  {tab.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="p-6">
+          {/* Business Information Tab */}
+          {activeTab === 'business' && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Building className="w-5 h-5 text-blue-600" />
+                  Business Information
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Business Name
+                    </label>
+                    <input
+                      type="text"
+                      value={settings.businessName}
+                      onChange={(e) => handleInputChange('businessName', e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Business Email
+                    </label>
+                    <input
+                      type="email"
+                      value={settings.businessEmail}
+                      onChange={(e) => handleInputChange('businessEmail', e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Business Phone
+                    </label>
+                    <input
+                      type="tel"
+                      value={settings.businessPhone}
+                      onChange={(e) => handleInputChange('businessPhone', e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Currency
+                    </label>
+                    <select
+                      value={settings.currency}
+                      onChange={(e) => handleInputChange('currency', e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    >
+                      <option value="USD">USD - US Dollar</option>
+                      <option value="EUR">EUR - Euro</option>
+                      <option value="GBP">GBP - British Pound</option>
+                      <option value="CAD">CAD - Canadian Dollar</option>
+                    </select>
+                  </div>
+
+                  <div className="md:col-span-2">
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Business Address
+                    </label>
+                    <textarea
+                      value={settings.businessAddress}
+                      onChange={(e) => handleInputChange('businessAddress', e.target.value)}
+                      rows={3}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Tax Rate (%)
+                    </label>
+                    <input
+                      type="number"
+                      value={settings.taxRate}
+                      onChange={(e) => handleInputChange('taxRate', e.target.value)}
+                      step="0.1"
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Operating Hours Tab */}
+          {activeTab === 'hours' && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Clock className="w-5 h-5 text-blue-600" />
+                  Operating Hours
+                </h3>
+                <div className="space-y-6">
+                  <div>
+                    <h4 className="font-medium text-gray-800 mb-3">Weekdays (Mon - Fri)</h4>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Opening Time
+                        </label>
+                        <input
+                          type="time"
+                          value={settings.weekdayOpen}
+                          onChange={(e) => handleInputChange('weekdayOpen', e.target.value)}
+                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Closing Time
+                        </label>
+                        <input
+                          type="time"
+                          value={settings.weekdayClose}
+                          onChange={(e) => handleInputChange('weekdayClose', e.target.value)}
+                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h4 className="font-medium text-gray-800 mb-3">Weekend (Sat - Sun)</h4>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Opening Time
+                        </label>
+                        <input
+                          type="time"
+                          value={settings.weekendOpen}
+                          onChange={(e) => handleInputChange('weekendOpen', e.target.value)}
+                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Closing Time
+                        </label>
+                        <input
+                          type="time"
+                          value={settings.weekendClose}
+                          onChange={(e) => handleInputChange('weekendClose', e.target.value)}
+                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Appointments Tab */}
+          {activeTab === 'appointments' && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Globe className="w-5 h-5 text-blue-600" />
+                  Appointment Settings
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Default Appointment Duration (minutes)
+                    </label>
+                    <input
+                      type="number"
+                      value={settings.appointmentDuration}
+                      onChange={(e) => handleInputChange('appointmentDuration', e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Buffer Time Between Appointments (minutes)
+                    </label>
+                    <input
+                      type="number"
+                      value={settings.bufferTime}
+                      onChange={(e) => handleInputChange('bufferTime', e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Advance Booking Period (days)
+                    </label>
+                    <input
+                      type="number"
+                      value={settings.advanceBookingDays}
+                      onChange={(e) => handleInputChange('advanceBookingDays', e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Cancellation Notice Period (hours)
+                    </label>
+                    <input
+                      type="number"
+                      value={settings.cancellationHours}
+                      onChange={(e) => handleInputChange('cancellationHours', e.target.value)}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Notifications Tab */}
+          {activeTab === 'notifications' && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Bell className="w-5 h-5 text-blue-600" />
+                  Notification Preferences
+                </h3>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                    <div>
+                      <div className="font-medium text-gray-800">Email Notifications</div>
+                      <div className="text-sm text-gray-600">Receive notifications via email</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.emailNotifications}
+                        onChange={(e) => handleInputChange('emailNotifications', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                    <div>
+                      <div className="font-medium text-gray-800">SMS Notifications</div>
+                      <div className="text-sm text-gray-600">Receive notifications via SMS</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.smsNotifications}
+                        onChange={(e) => handleInputChange('smsNotifications', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                    <div>
+                      <div className="font-medium text-gray-800">Appointment Reminders</div>
+                      <div className="text-sm text-gray-600">Send reminders before appointments</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.appointmentReminders}
+                        onChange={(e) => handleInputChange('appointmentReminders', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                    <div>
+                      <div className="font-medium text-gray-800">Status Updates</div>
+                      <div className="text-sm text-gray-600">Notify about appointment/project status changes</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.statusUpdates}
+                        onChange={(e) => handleInputChange('statusUpdates', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                    <div>
+                      <div className="font-medium text-gray-800">Promotional Emails</div>
+                      <div className="text-sm text-gray-600">Send promotional and marketing emails</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.promotionalEmails}
+                        onChange={(e) => handleInputChange('promotionalEmails', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* System Tab */}
+          {activeTab === 'system' && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Shield className="w-5 h-5 text-blue-600" />
+                  System Settings
+                </h3>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                    <div>
+                      <div className="font-medium text-gray-800">Auto-Assign Employees</div>
+                      <div className="text-sm text-gray-600">Automatically assign available employees to new appointments</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.autoAssignEmployees}
+                        onChange={(e) => handleInputChange('autoAssignEmployees', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                    <div>
+                      <div className="font-medium text-gray-800">Allow Customer Cancellation</div>
+                      <div className="text-sm text-gray-600">Customers can cancel their own appointments</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.allowCustomerCancellation}
+                        onChange={(e) => handleInputChange('allowCustomerCancellation', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                    <div>
+                      <div className="font-medium text-gray-800">Require Admin Approval</div>
+                      <div className="text-sm text-gray-600">New appointments require admin approval before confirmation</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.requireApproval}
+                        onChange={(e) => handleInputChange('requireApproval', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                  </div>
+
+                  <div className="flex items-center justify-between p-4 bg-red-50 border border-red-200 rounded-lg">
+                    <div>
+                      <div className="font-medium text-red-800">Maintenance Mode</div>
+                      <div className="text-sm text-red-600">System will be unavailable to customers</div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={settings.maintenanceMode}
+                        onChange={(e) => handleInputChange('maintenanceMode', e.target.checked)}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex justify-end gap-3">
+        <button
+          onClick={handleReset}
+          className="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+        >
+          Reset to Defaults
+        </button>
+        <button
+          onClick={handleSave}
+          className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          <Save className="w-5 h-5" />
+          Save Settings
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/auth/forgot-password/page.tsx b/src/app/auth/forgot-password/page.tsx
new file mode 100644
index 0000000..22d669a
--- /dev/null
+++ b/src/app/auth/forgot-password/page.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Mail, Lock, KeyRound, ArrowLeft, Loader2 } from 'lucide-react';
+import { sendOtp, verifyOtp, resetPassword } from '@/lib/passwordApi';
+
+type Step = 'email' | 'otp' | 'password';
+
+export default function ForgotPasswordPage() {
+  const router = useRouter();
+  const [step, setStep] = useState<Step>('email');
+  const [email, setEmail] = useState('');
+  const [otp, setOtp] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+
+  const handleSendOtp = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccessMessage('');
+
+    if (!email) {
+      setError('Please enter your email address');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await sendOtp(email);
+      setSuccessMessage(response.message);
+      setStep('otp');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerifyOtp = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccessMessage('');
+
+    if (!otp || otp.length !== 6) {
+      setError('Please enter a valid 6-digit OTP');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await verifyOtp(email, otp);
+      setSuccessMessage(response.message);
+      setStep('password');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResetPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccessMessage('');
+
+    if (!newPassword || newPassword.length < 6) {
+      setError('Password must be at least 6 characters long');
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await resetPassword(email, otp, newPassword);
+      setSuccessMessage(response.message);
+      
+      // Redirect to login after 2 seconds
+      setTimeout(() => {
+        router.push('/auth/login');
+      }, 2000);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResendOtp = async () => {
+    setError('');
+    setSuccessMessage('');
+    
+    try {
+      setLoading(true);
+      const response = await sendOtp(email);
+      setSuccessMessage('OTP resent successfully!');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white">
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-lg shadow-lg p-8">
+          {/* Back to Login Link */}
+          <button
+            onClick={() => router.push('/auth/login')}
+            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6 text-sm"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Login
+          </button>
+
+          {/* Header */}
+          <div className="text-center mb-6">
+            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <KeyRound className="w-8 h-8 text-gray-900" />
+            </div>
+            <h1 className="text-4xl font-bold mb-2">
+              {step === 'email' && 'FORGOT PASSWORD'}
+              {step === 'otp' && 'VERIFY OTP'}
+              {step === 'password' && 'RESET PASSWORD'}
+            </h1>
+            <p className="text-gray-600 text-sm">
+              {step === 'email' && 'Enter your email to receive a 6-digit OTP code'}
+              {step === 'otp' && 'Enter the verification code sent to your email'}
+              {step === 'password' && 'Create a new password for your account'}
+            </p>
+          </div>
+          {/* Error Message */}
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-800 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* Success Message */}
+          {successMessage && (
+            <div className="mb-4 p-3 bg-green-50 border border-green-200 text-green-800 rounded-lg text-sm">
+              {successMessage}
+            </div>
+          )}
+
+          {/* Step 1: Email Input */}
+          {step === 'email' && (
+            <form onSubmit={handleSendOtp} className="space-y-6">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                  Email Address
+                </label>
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Mail className="h-5 w-5 text-gray-400" />
+                  </div>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="you@example.com"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Sending OTP...
+                  </>
+                ) : (
+                  'Send OTP'
+                )}
+              </button>
+            </form>
+          )}
+
+          {/* Step 2: OTP Verification */}
+          {step === 'otp' && (
+            <form onSubmit={handleVerifyOtp} className="space-y-6">
+              <div>
+                <label htmlFor="otp" className="block text-sm font-medium text-gray-700 mb-2">
+                  Enter OTP
+                </label>
+                <input
+                  id="otp"
+                  name="otp"
+                  type="text"
+                  maxLength={6}
+                  required
+                  value={otp}
+                  onChange={(e) => setOtp(e.target.value.replace(/\D/g, ''))}
+                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-center text-2xl tracking-widest font-semibold"
+                  placeholder="000000"
+                />
+                <p className="mt-2 text-xs text-gray-500">
+                  OTP sent to: <span className="font-medium">{email}</span>
+                </p>
+              </div>
+
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => setStep('email')}
+                  className="flex-1 py-2.5 px-4 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                >
+                  Change Email
+                </button>
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="flex-1 flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  {loading ? (
+                    <>
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                      Verifying...
+                    </>
+                  ) : (
+                    'Verify OTP'
+                  )}
+                </button>
+              </div>
+
+              <div className="text-center">
+                <button
+                  type="button"
+                  onClick={handleResendOtp}
+                  disabled={loading}
+                  className="text-sm text-blue-600 hover:text-blue-800 font-medium disabled:opacity-50"
+                >
+                  Resend OTP
+                </button>
+              </div>
+            </form>
+          )}
+
+          {/* Step 3: New Password */}
+          {step === 'password' && (
+            <form onSubmit={handleResetPassword} className="space-y-6">
+              <div>
+                <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-2">
+                  New Password
+                </label>
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Lock className="h-5 w-5 text-gray-400" />
+                  </div>
+                  <input
+                    id="newPassword"
+                    name="newPassword"
+                    type="password"
+                    required
+                    value={newPassword}
+                    onChange={(e) => setNewPassword(e.target.value)}
+                    className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Enter new password (min 6 characters)"
+                    minLength={6}
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-2">
+                  Confirm Password
+                </label>
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Lock className="h-5 w-5 text-gray-400" />
+                  </div>
+                  <input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    required
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Confirm your new password"
+                    minLength={6}
+                  />
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Resetting Password...
+                  </>
+                ) : (
+                  'Reset Password'
+                )}
+              </button>
+            </form>
+          )}
+
+          {/* Back to Login */}
+          <div className="mt-6 text-center">
+            <Link
+              href="/auth/login"
+              className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 font-medium"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Back to Login
+            </Link>
+          </div>
+        </div>
+
+        {/* Footer Info */}
+        <p className="text-center text-xs text-blue-100">
+          {step === 'email' && 'Enter your registered email to receive a 6-digit OTP code'}
+          {step === 'otp' && "Didn't receive the code? Check your spam folder or click Resend OTP"}
+          {step === 'password' && 'Make sure your new password is at least 6 characters long'}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/auth/layout.tsx b/src/app/auth/layout.tsx
new file mode 100644
index 0000000..2489b0f
--- /dev/null
+++ b/src/app/auth/layout.tsx
@@ -0,0 +1,13 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      <div className="container mx-auto px-4 py-8">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
new file mode 100644
index 0000000..5bbda63
--- /dev/null
+++ b/src/app/auth/login/page.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from 'react';
+import { useAuth } from '@/app/context/AuthContext';
+
+const LoginPage = () => {
+  const { login, loading: authLoading } = useAuth();
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    const formData = new FormData(e.target);
+    const email = formData.get('email') as string;
+    const password = formData.get('password') as string;
+    
+    try {
+      await login(email, password);
+    } catch (err: any) {
+      setError(err.message || 'Invalid email or password');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white">
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-lg shadow-lg p-8">
+          <h1 className="text-4xl font-bold mb-2 text-center">LOGIN</h1>
+          <p className="text-gray-600 text-sm mb-6 text-center">
+            If you have an account with us, please log in.
+          </p>
+
+          {/* Error Message */}
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+
+          <input
+            type="email"
+            name="email"
+            placeholder="Email Address"
+            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-800"
+            required
+          />
+
+          <input
+            type="password"
+            name="password"
+            placeholder="Password"
+            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-800"
+            required
+          />
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-gray-900 text-white font-semibold py-2 rounded-full hover:bg-gray-800 transition disabled:bg-gray-400 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Signing in...' : 'SIGN IN'}
+          </button>
+        </form>
+
+          <p className="text-sm text-gray-600 mt-6 text-center">
+            Don't have an account?{" "}
+            <a href="/auth/signup" className="font-semibold text-blue-600 hover:underline">
+              Create an account
+            </a>
+          </p>
+          <p className="text-sm text-gray-600 text-center mt-2">
+            <a href="/auth/forgot-password" className="font-semibold text-blue-600 hover:underline">
+              Forgot your password?
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/src/app/auth/password-reset/[token]/page.tsx b/src/app/auth/password-reset/[token]/page.tsx
new file mode 100644
index 0000000..af4555f
--- /dev/null
+++ b/src/app/auth/password-reset/[token]/page.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter, useParams, useSearchParams } from "next/navigation";
+import { authNotifications } from "@/lib/notificationService";
+
+const TokenResetPage = () => {
+  // Get token from URL parameter
+  const params = useParams();
+  const token = params.token as string;
+  const searchParams = useSearchParams();
+  
+  // Check if request is coming from admin
+  const isAdminRequest = searchParams.get('from') === 'admin';
+  
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const router = useRouter();
+
+  // Set isMounted to true after component mounts (prevents hydration issues)
+  useEffect(() => {
+    setIsMounted(true);
+    console.log("Token from URL:", token);
+  }, [token]);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError("");
+
+    // Validate passwords
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters long.");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/auth/reset-password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ token, password }),
+      });
+
+      const data = await response.json();
+      
+      if (data.success) {
+        setIsSuccess(true);
+        authNotifications.passwordResetSuccess();
+        
+        // Redirect to login after 3 seconds
+        setTimeout(() => {
+          router.push('/login');
+        }, 3000);
+      } else {
+        setError(data.error || 'Failed to reset password');
+      }
+    } catch (error) {
+      console.error('Error resetting password:', error);
+      setError('An error occurred. Please try again later.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white">
+      <div className="w-full max-w-sm text-center">
+        <h1 className="text-3xl font-bold mb-2 whitespace-nowrap ml-[-30px]">
+          RESET YOUR PASSWORD
+        </h1>
+        
+        {!isMounted ? (
+          <div className="animate-pulse h-40 flex items-center justify-center">
+            <div className="w-12 h-12 border-4 border-gray-300 border-t-gray-900 rounded-full animate-spin"></div>
+          </div>
+        ) : isSuccess ? (
+          <div className="bg-green-50 border border-green-200 p-4 rounded-md mb-4">
+            <p className="text-green-800 mb-2">Password reset successful!</p>
+            <p className="text-sm text-gray-600">
+              Your password has been updated. You will be redirected to the login page in a few seconds.
+            </p>
+            <Link 
+              href={isAdminRequest ? "/admin/adminlogin" : "/login"} 
+              className={`mt-4 inline-block ${
+                isAdminRequest ? 'text-orange-600 hover:text-orange-700' : 'text-blue-600'
+              } hover:underline`}
+            >
+              Go to {isAdminRequest ? 'admin login' : 'login'} now
+            </Link>
+          </div>
+        ) : (
+          <>
+            <p className="text-gray-600 text-sm mb-6">Enter your new password.</p>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <input
+                type="password"
+                placeholder="New Password"
+                className={`w-3/4 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
+                  isAdminRequest ? 'focus:ring-orange-500' : 'focus:ring-gray-800'
+                }`}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                disabled={isLoading}
+              />
+
+              <input
+                type="password"
+                placeholder="Confirm New Password"
+                className={`w-3/4 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
+                  isAdminRequest ? 'focus:ring-orange-500' : 'focus:ring-gray-800'
+                }`}
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+                disabled={isLoading}
+              />
+
+              {error && <p className="text-red-500 text-sm">{error}</p>}
+
+              <button
+                type="submit"
+                className={`w-3/4 ${
+                  isAdminRequest 
+                    ? 'bg-orange-500 hover:bg-orange-600' 
+                    : 'bg-gray-900 hover:bg-gray-800'
+                } text-white font-semibold py-2 rounded-full transition ${
+                  isLoading ? 'opacity-70 cursor-not-allowed' : ''
+                }`}
+                disabled={isLoading}
+              >
+                {isLoading ? "UPDATING..." : "RESET PASSWORD"}
+              </button>
+            </form>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TokenResetPage;
diff --git a/src/app/auth/password-reset/page.tsx b/src/app/auth/password-reset/page.tsx
new file mode 100644
index 0000000..5998b41
--- /dev/null
+++ b/src/app/auth/password-reset/page.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { authNotifications } from "@/lib/notificationService";
+
+const RequestResetPage = () => {
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/auth/request-reset', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+      
+      if (data.success) {
+        setIsSubmitted(true);
+        authNotifications.passwordResetSent();
+      } else {
+        throw new Error(data.error || 'Failed to request password reset');
+      }
+    } catch (error) {
+      console.log('Error requesting password reset:', error);
+      authNotifications.loginError('Failed to request password reset. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white">
+      <div className="w-full max-w-sm text-center">
+        <h1 className="text-3xl font-bold mb-2 whitespace-nowrap ml-[-30px]">
+          FORGOT YOUR PASSWORD?
+        </h1>
+        <p className="text-gray-600 text-sm mb-6">
+          Enter your email address to receive a password reset link.
+        </p>
+
+        {isSubmitted ? (
+          <div className="bg-green-50 border border-green-200 p-4 rounded-md mb-4">
+            <p className="text-green-800 mb-2">Password reset email sent!</p>
+            <p className="text-sm text-gray-600">
+              If your email exists in our system, you will receive a password reset link shortly.
+              Please check your inbox and spam folder.
+            </p>
+            <Link href="/login" className="mt-4 inline-block text-blue-600 hover:underline">
+              Return to login
+            </Link>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <input
+              type="email"
+              placeholder="Email Address"
+              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-800"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+
+            <button
+              type="submit"
+              className={`w-full bg-gray-900 text-white font-semibold py-2 rounded-full hover:bg-gray-800 transition ${
+                isLoading ? 'opacity-70 cursor-not-allowed' : ''
+              }`}
+              disabled={isLoading}
+            >
+              {isLoading ? 'SENDING...' : 'SEND RESET LINK'}
+            </button>
+            
+            <p className="text-sm text-gray-600 mt-4">
+              Remember your password?{" "}
+              <Link href="/login" className="font-semibold hover:underline">
+                Back to login
+              </Link>
+            </p>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RequestResetPage;
diff --git a/src/app/auth/request-reset/page.tsx b/src/app/auth/request-reset/page.tsx
new file mode 100644
index 0000000..e4dd14a
--- /dev/null
+++ b/src/app/auth/request-reset/page.tsx
@@ -0,0 +1,134 @@
+
+"use client";
+
+import React, { useState, useEffect, Suspense } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { authNotifications } from "@/lib/notificationService";
+
+const RequestResetContent = () => {
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const searchParams = useSearchParams();
+  
+  // Check if request is coming from admin login page
+  const isAdminRequest = searchParams.get('from') === 'admin';
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/auth/request-reset', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+      
+      if (data.success) {
+        setIsSubmitted(true);
+        authNotifications.passwordResetSent();
+      } else {
+        throw new Error(data.error || 'Failed to request password reset');
+      }
+    } catch (error) {
+      console.error('Error requesting password reset:', error);
+      authNotifications.loginError('Failed to request password reset. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white">
+      <div className="w-full max-w-sm text-center">
+        <h1 className="text-3xl font-bold mb-2 whitespace-nowrap ml-[-30px]">
+          FORGOT YOUR PASSWORD?
+        </h1>
+        <p className="text-gray-600 text-sm mb-6">
+          Enter your email address to receive a password reset link.
+        </p>
+
+        {isSubmitted ? (
+          <div className="bg-green-50 border border-green-200 p-4 rounded-md mb-4">
+            <p className="text-green-800 mb-2">Password reset email sent!</p>
+            <p className="text-sm text-gray-600">
+              If your email exists in our system, you will receive a password reset link shortly.
+              Please check your inbox and spam folder.
+            </p>
+            <Link 
+              href={isAdminRequest ? "/admin/adminlogin" : "/login"} 
+              className={`mt-4 inline-block ${
+                isAdminRequest ? 'text-orange-600 hover:text-orange-700' : 'text-blue-600'
+              } hover:underline`}
+            >
+              Return to {isAdminRequest ? 'admin login' : 'login'}
+            </Link>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <input
+              type="email"
+              placeholder="Email Address"
+              className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
+                isAdminRequest ? 'focus:ring-orange-500' : 'focus:ring-gray-800'
+              }`}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+
+            <button
+              type="submit"
+              className={`w-full ${
+                isAdminRequest 
+                  ? 'bg-orange-500 hover:bg-orange-600' 
+                  : 'bg-gray-900 hover:bg-gray-800'
+              } text-white font-semibold py-2 rounded-full transition ${
+                isLoading ? 'opacity-70 cursor-not-allowed' : ''
+              }`}
+              disabled={isLoading}
+            >
+              {isLoading ? 'SENDING...' : 'SEND RESET LINK'}
+            </button>
+            
+            <p className="text-sm text-gray-600 mt-4">
+              Remember your password?{" "}
+              <Link 
+                href={isAdminRequest ? "/admin/adminlogin" : "/login"} 
+                className={`font-semibold hover:underline ${
+                  isAdminRequest ? 'text-orange-600' : 'text-gray-900'
+                }`}
+              >
+                Back to {isAdminRequest ? 'admin login' : 'login'}
+              </Link>
+            </p>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const RequestResetPage = () => {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <div className="text-center">
+          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-gray-300 border-r-transparent"></div>
+          <p className="mt-2 text-gray-600">Loading...</p>
+        </div>
+      </div>
+    }>
+      <RequestResetContent />
+    </Suspense>
+  );
+};
+
+export default RequestResetPage;
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
new file mode 100644
index 0000000..7405a4e
--- /dev/null
+++ b/src/app/auth/signup/page.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { useAuth } from "@/app/context/AuthContext";
+
+const SignupPage = () => {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  
+  const { signup } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+    
+    try {
+      await signup({
+        firstName,
+        lastName,
+        email,
+        password,
+        phoneNumber
+      });
+    } catch (err: any) {
+      console.error("Signup error:", err);
+      setError(err.message || "An error occurred during signup");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white">
+      <div className="w-full max-w-lg text-center">
+        <h1
+          className="text-3xl font-bold mb-2"
+          style={{ fontFamily: "Arial, sans-serif" }}
+        >
+          CREATE AN ACCOUNT
+        </h1>
+        <p className="text-gray-600 text-xs mb-6">
+          Enter your information below to proceed. If you already have an
+          account, please log in instead.
+        </p>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 text-red-700 rounded-md text-sm">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="flex space-x-4">
+            <input
+              type="text"
+              placeholder="First Name"
+              className="w-1/2 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-800"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              disabled={isLoading}
+              required
+            />
+            <input
+              type="text"
+              placeholder="Last Name"
+              className="w-1/2 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-800"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              disabled={isLoading}
+              required
+            />
+          </div>
+
+          <input
+            type="email"
+            placeholder="Email"
+            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-800"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={isLoading}
+            required
+          />
+
+          <input
+            type="tel"
+            placeholder="Phone Number"
+            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-800"
+            value={phoneNumber}
+            onChange={(e) => setPhoneNumber(e.target.value)}
+            disabled={isLoading}
+            required
+          />
+
+          <input
+            type="password"
+            placeholder="Password"
+            className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-800"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            disabled={isLoading}
+            required
+            minLength={6}
+          />
+
+          <button
+            type="submit"
+            className={`w-full ${isLoading ? 'bg-gray-500' : 'bg-gray-900'} text-white font-semibold py-2 rounded-full hover:bg-gray-800 transition`}
+            disabled={isLoading}
+          >
+            {isLoading ? "CREATING ACCOUNT..." : "CREATE AN ACCOUNT"}
+          </button>
+        </form>
+
+        <p className="text-sm text-gray-600 mt-4">
+          Already have an account?{" "}
+          <a href="/auth/login" className="font-semibold hover:underline">
+            Login
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPage;
diff --git a/src/app/context/AuthContext.tsx b/src/app/context/AuthContext.tsx
new file mode 100644
index 0000000..7fc2095
--- /dev/null
+++ b/src/app/context/AuthContext.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { AuthContextType, User, SignupRequest } from '@/types/auth.types';
+import { loginUser, signupUser, logoutUser } from '@/lib/authApi';
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const TOKEN_KEY = 'auth_token';
+const USER_KEY = 'auth_user';
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const router = useRouter();
+
+  useEffect(() => {
+    const storedToken = localStorage.getItem(TOKEN_KEY);
+    const storedUser = localStorage.getItem(USER_KEY);
+
+    if (storedToken && storedUser) {
+      setToken(storedToken);
+      setUser(JSON.parse(storedUser));
+    }
+    setLoading(false);
+  }, []);
+
+  const login = async (email: string, password: string): Promise<void> => {
+    try {
+      setLoading(true);
+      const response = await loginUser({ email, password });
+      
+      const userData: User = {
+        id: email,
+        email: response.email,
+        role: response.role as 'CUSTOMER' | 'EMPLOYEE' | 'ADMIN',
+      };
+
+      localStorage.setItem(TOKEN_KEY, response.token);
+      localStorage.setItem(USER_KEY, JSON.stringify(userData));
+      
+      setToken(response.token);
+      setUser(userData);
+
+      if (response.role === 'ADMIN') {
+        router.push('/admin/dashboard');
+      } else if (response.role === 'EMPLOYEE') {
+        router.push('/employee/dashboard');
+      } else {
+        router.push('/customer/dashboard');
+      }
+    } catch (error) {
+      console.error('Login error:', error);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const signup = async (data: SignupRequest): Promise<void> => {
+    try {
+      setLoading(true);
+      const response = await signupUser(data);
+      
+      const userData: User = {
+        id: response.email,
+        email: response.email,
+        firstName: data.firstName,
+        lastName: data.lastName,
+        name: `${data.firstName} ${data.lastName}`,
+        role: response.role as 'CUSTOMER' | 'EMPLOYEE' | 'ADMIN',
+        phoneNumber: data.phoneNumber,
+      };
+
+      localStorage.setItem(TOKEN_KEY, response.token);
+      localStorage.setItem(USER_KEY, JSON.stringify(userData));
+      
+      setToken(response.token);
+      setUser(userData);
+
+      router.push('/customer/dashboard');
+    } catch (error) {
+      console.error('Signup error:', error);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const logout = async (): Promise<void> => {
+    try {
+      if (token) {
+        await logoutUser(token);
+      }
+    } catch (error) {
+      console.error('Logout error:', error);
+    } finally {
+      localStorage.removeItem(TOKEN_KEY);
+      localStorage.removeItem(USER_KEY);
+      setToken(null);
+      setUser(null);
+      router.push('/auth/login');
+    }
+  };
+
+  const value: AuthContextType = {
+    user,
+    token,
+    login,
+    signup,
+    logout,
+    loading,
+    isAuthenticated: !!token && !!user,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
\ No newline at end of file
diff --git a/src/app/context/NotificationContext.tsx b/src/app/context/NotificationContext.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/appointments/[id]/page.tsx b/src/app/customer/appointments/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/appointments/[id]/progress/page.tsx b/src/app/customer/appointments/[id]/progress/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/appointments/new/page.tsx b/src/app/customer/appointments/new/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/appointments/page.tsx b/src/app/customer/appointments/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/dashboard/page.tsx b/src/app/customer/dashboard/page.tsx
new file mode 100644
index 0000000..2de583a
--- /dev/null
+++ b/src/app/customer/dashboard/page.tsx
@@ -0,0 +1,263 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Car, Calendar, Briefcase, Clock, MapPin, DollarSign, User } from 'lucide-react';
+import { useAuth } from '@/app/context/AuthContext';
+import { appointmentService } from '@/lib/api/appointmentService';
+import { projectService } from '@/lib/api/projectService';
+import type { Appointment, Project, DashboardStats } from '@/types';
+
+export default function CustomerDashboard() {
+  const { user } = useAuth();
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [upcomingAppointments, setUpcomingAppointments] = useState<Appointment[]>([]);
+  const [ongoingProjects, setOngoingProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadDashboardData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.id]);
+
+  const loadDashboardData = async () => {
+    try {
+      setLoading(true);
+      const customerId = user?.id || '';
+
+      // Fetch all relevant data in parallel
+      const [allAppointments, allProjects] = await Promise.all([
+        customerId ? appointmentService.getCustomerAppointments(customerId) : appointmentService.getAllAppointments(),
+        customerId ? projectService.getCustomerProjects(customerId) : projectService.getAllProjects()
+      ]);
+
+      // Derive dashboard stats and sections
+      const upcoming = allAppointments.filter(a => String(a.status).toLowerCase() === 'upcoming');
+      const ongoing = allProjects.filter(p => String(p.status).toLowerCase() === 'ongoing');
+
+      setUpcomingAppointments(upcoming);
+      setOngoingProjects(ongoing);
+
+      const computedStats: DashboardStats = {
+        totalVehicles: 0,
+        upcomingAppointments: upcoming.length,
+        ongoingProjects: ongoing.length,
+        completedAppointments: allAppointments.filter(a => String(a.status).toLowerCase() === 'completed').length,
+        completedProjects: allProjects.filter(p => String(p.status).toLowerCase() === 'completed').length,
+      };
+      setStats(computedStats);
+    } catch (error) {
+      console.error('Failed to load dashboard data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
+  const getStatusBadge = (status: string) => {
+    const statusLower = status.toLowerCase();
+    switch (statusLower) {
+      case 'completed':
+        return 'bg-green-100 text-green-800';
+      case 'upcoming':
+        return 'bg-blue-100 text-blue-800';
+      case 'ongoing':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'cancelled':
+        return 'bg-red-100 text-red-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">Welcome back, {user?.name || user?.email || 'Customer'}!</h1>
+        <p className="text-gray-600">Here's what's happening with your vehicles and services</p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600 mb-1">My Vehicles</p>
+              <p className="text-3xl font-bold text-gray-800">{stats?.totalVehicles || 0}</p>
+            </div>
+            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
+              <Car className="w-6 h-6 text-blue-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600 mb-1">Upcoming Appointments</p>
+              <p className="text-3xl font-bold text-yellow-600">{stats?.upcomingAppointments || 0}</p>
+            </div>
+            <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
+              <Calendar className="w-6 h-6 text-yellow-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600 mb-1">Ongoing Projects</p>
+              <p className="text-3xl font-bold text-green-600">{stats?.ongoingProjects || 0}</p>
+            </div>
+            <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
+              <Briefcase className="w-6 h-6 text-green-600" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Upcoming Appointments Section */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-bold">Upcoming Appointments</h2>
+          <a href="/customer/my-appointments" className="text-blue-600 hover:text-blue-800 text-sm font-medium">
+            View All →
+          </a>
+        </div>
+        
+        {upcomingAppointments.length === 0 ? (
+          <div className="bg-white rounded-lg shadow p-8 text-center">
+            <Calendar className="w-12 h-12 text-gray-400 mx-auto mb-3" />
+            <p className="text-gray-600">No upcoming appointments</p>
+            <a href="/customer/appointments" className="inline-block mt-3 text-blue-600 hover:text-blue-800 font-medium">
+              Book an Appointment
+            </a>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {upcomingAppointments.slice(0, 4).map((appointment) => (
+              <div key={appointment.id} className="bg-white rounded-lg shadow hover:shadow-md transition-shadow">
+                <div className="p-6">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-gray-800 mb-1">
+                        {appointment.serviceName}
+                      </h3>
+                      <p className="text-sm text-gray-600 flex items-center gap-2">
+                        <Car className="w-4 h-4" />
+                        {appointment.vehicleNumber}
+                      </p>
+                    </div>
+                    <span className={`px-3 py-1 text-xs font-semibold rounded-full ${getStatusBadge(appointment.status)}`}>
+                      {appointment.status}
+                    </span>
+                  </div>
+                  
+                  <div className="space-y-2 text-sm text-gray-600">
+                    <div className="flex items-center gap-2">
+                      <Calendar className="w-4 h-4 text-gray-400" />
+                      <span>{formatDate(appointment.date)}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Clock className="w-4 h-4 text-gray-400" />
+                      <span>{appointment.time}</span>
+                    </div>
+                    {appointment.assignedEmployee && (
+                      <div className="flex items-center gap-2">
+                        <User className="w-4 h-4 text-gray-400" />
+                        <span>{appointment.assignedEmployee}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+      </div>
+
+      {/* Ongoing Projects Section */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-bold">Ongoing Projects</h2>
+          <a href="/customer/my-projects" className="text-blue-600 hover:text-blue-800 text-sm font-medium">
+            View All →
+          </a>
+        </div>
+        
+        {ongoingProjects.length === 0 ? (
+          <div className="bg-white rounded-lg shadow p-8 text-center">
+            <Briefcase className="w-12 h-12 text-gray-400 mx-auto mb-3" />
+            <p className="text-gray-600">No ongoing projects</p>
+            <a href="/customer/projects" className="inline-block mt-3 text-blue-600 hover:text-blue-800 font-medium">
+              Create a Project
+            </a>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {ongoingProjects.slice(0, 4).map((project) => (
+              <div key={project.id} className="bg-white rounded-lg shadow hover:shadow-md transition-shadow">
+                <div className="p-6">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-gray-800 mb-1">
+                        {project.taskName}
+                      </h3>
+                      <p className="text-sm text-gray-500 mb-2">{project.description}</p>
+                      <p className="text-sm text-gray-600 flex items-center gap-2">
+                        <Car className="w-4 h-4" />
+                        {project.vehicleNumber} - {project.vehicleType}
+                      </p>
+                    </div>
+                    <span className={`px-3 py-1 text-xs font-semibold rounded-full ${getStatusBadge(project.status)}`}>
+                      {project.status}
+                    </span>
+                  </div>
+                  
+                  <div className="space-y-2 text-sm text-gray-600">
+                    <div className="flex items-center gap-2">
+                      <Calendar className="w-4 h-4 text-gray-400" />
+                      <span>Started: {formatDate(project.startDate)}</span>
+                    </div>
+                    {project.assignedEmployee && (
+                      <div className="flex items-center gap-2">
+                        <User className="w-4 h-4 text-gray-400" />
+                        <span>{project.assignedEmployee}</span>
+                      </div>
+                    )}
+                    {project.estimatedCost && (
+                      <div className="flex items-center gap-2">
+                        <DollarSign className="w-4 h-4 text-green-500" />
+                        <span className="font-semibold text-green-600">${project.estimatedCost}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/customer/layout.tsx b/src/app/customer/layout.tsx
new file mode 100644
index 0000000..a2318bd
--- /dev/null
+++ b/src/app/customer/layout.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import CustomerSidebar from "@/components/layout/CustomerSidebar";
+import UserProfileCard from "@/components/layout/UserProfileCard";
+
+export default function CustomerLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-gray-50 flex">
+      <CustomerSidebar />
+      
+      {/* Main Content Area */}
+      <div className="flex-1 ml-64">
+        {/* Top Bar with User Profile - Sticky */}
+        <div className="sticky top-0 z-10 bg-white shadow-sm border-b border-gray-200">
+          <div className="px-6 py-4 flex justify-end">
+            <UserProfileCard useCurrentUser={true} />
+          </div>
+        </div>
+        
+        {/* Page Content */}
+        <div className="p-6">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/customer/my-appointments/book/page.tsx b/src/app/customer/my-appointments/book/page.tsx
new file mode 100644
index 0000000..ba58f1a
--- /dev/null
+++ b/src/app/customer/my-appointments/book/page.tsx
@@ -0,0 +1,388 @@
+"use client";
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Calendar, Clock, Car, ArrowLeft, Check } from 'lucide-react';
+import { appointmentService } from '@/lib/api/appointmentService';
+
+export default function BookAppointmentPage() {
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const [selectedService, setSelectedService] = useState('');
+  const [selectedVehicle, setSelectedVehicle] = useState('');
+  const [selectedDate, setSelectedDate] = useState('');
+  const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
+
+  // Mock data
+  const services = [
+    { id: 'SRV001', name: 'Oil Change', duration: '30 min', price: 50 },
+    { id: 'SRV002', name: 'Brake Inspection', duration: '45 min', price: 75 },
+    { id: 'SRV003', name: 'Tire Rotation', duration: '30 min', price: 40 },
+    { id: 'SRV004', name: 'Engine Diagnostics', duration: '1 hour', price: 100 },
+    { id: 'SRV005', name: 'Air Conditioning Service', duration: '1.5 hours', price: 120 },
+    { id: 'SRV006', name: 'Battery Replacement', duration: '20 min', price: 150 },
+  ];
+
+  const vehicles = [
+    { id: 'VEH001', number: 'ABC-2345', make: 'Toyota', model: 'Camry', year: 2020 },
+    { id: 'VEH002', number: 'CBB-5475', make: 'Honda', model: 'Civic', year: 2019 },
+    { id: 'VEH003', number: 'XYZ-7890', make: 'Ford', model: 'F-150', year: 2021 },
+  ];
+
+  // Generate next 14 days
+  const generateDates = () => {
+    const dates = [];
+    const today = new Date();
+    for (let i = 1; i <= 14; i++) {
+      const date = new Date(today);
+      date.setDate(today.getDate() + i);
+      dates.push(date);
+    }
+    return dates;
+  };
+
+  const dates = generateDates();
+
+  // Time slots
+  const timeSlots = [
+    '09:00 AM', '09:30 AM', '10:00 AM', '10:30 AM', '11:00 AM', '11:30 AM',
+    '12:00 PM', '12:30 PM', '01:00 PM', '01:30 PM', '02:00 PM', '02:30 PM',
+    '03:00 PM', '03:30 PM', '04:00 PM', '04:30 PM', '05:00 PM', '05:30 PM'
+  ];
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', { 
+      weekday: 'short', 
+      month: 'short', 
+      day: 'numeric'
+    });
+  };
+
+  const formatFullDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', { 
+      weekday: 'long', 
+      month: 'long', 
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
+  const parseTimeTo24 = (time12: string) => {
+    // expects format like '09:30 AM'
+    const [time, modifier] = time12.split(' ');
+  const [h, m] = time.split(':').map(Number);
+  let hours = h;
+  const mins = m;
+    if (modifier === 'PM' && hours !== 12) hours += 12;
+    if (modifier === 'AM' && hours === 12) hours = 0;
+    return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
+  };
+
+  const addMinutes = (time24: string, mins: number) => {
+    const [h, m] = time24.split(':').map(Number);
+    const dt = new Date();
+    dt.setHours(h);
+    dt.setMinutes(m + mins);
+    return `${String(dt.getHours()).padStart(2, '0')}:${String(dt.getMinutes()).padStart(2, '0')}`;
+  };
+
+
+
+  const handleBookAppointment = async () => {
+    // Build payload matching backend AppointmentDTO
+    if (!selectedService || !selectedVehicle || !selectedDate || !selectedTimeSlot) {
+      window.alert('Please complete the booking form');
+      return;
+    }
+
+    const serviceObj = services.find(s => s.id === selectedService);
+    const vehicleObj = vehicles.find(v => v.id === selectedVehicle);
+
+
+
+    const start24 = parseTimeTo24(selectedTimeSlot);
+    const end24 = addMinutes(start24, 30); // assume 30 min slot
+
+    const payload = {
+      service: serviceObj?.name || selectedService,
+      vehicleNo: vehicleObj?.number || selectedVehicle,
+      date: selectedDate,
+      startTime: start24,
+      endTime: end24,
+      status: 'UPCOMING'
+    };
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore Sending backend AppointmentDTO shape
+      await appointmentService.createAppointment(payload as any);
+      window.alert('Appointment booked successfully!');
+      router.push('/customer/my-appointments');
+    } catch (err) {
+      console.error('Booking failed', err);
+      window.alert('Failed to book appointment');
+    }
+  };
+
+  const canProceed = () => {
+    if (step === 1) return selectedService && selectedVehicle;
+    if (step === 2) return selectedDate;
+    if (step === 3) return selectedTimeSlot;
+    return false;
+  };
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-6">
+        <button
+          onClick={() => step === 1 ? router.back() : setStep(step - 1)}
+          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          Back
+        </button>
+        <h1 className="text-2xl font-bold mb-2">Book an Appointment</h1>
+        <p className="text-gray-600">Schedule a service for your vehicle</p>
+      </div>
+
+      {/* Progress Steps */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between max-w-2xl mx-auto">
+          {[1, 2, 3].map((num) => (
+            <div key={num} className="flex items-center flex-1">
+              <div className="flex flex-col items-center flex-1">
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center font-semibold ${
+                    step >= num
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-200 text-gray-600'
+                  }`}
+                >
+                  {step > num ? <Check className="w-5 h-5" /> : num}
+                </div>
+                <span className="text-xs mt-2 text-gray-600">
+                  {num === 1 && 'Service & Vehicle'}
+                  {num === 2 && 'Select Date'}
+                  {num === 3 && 'Select Time'}
+                </span>
+              </div>
+              {num < 3 && (
+                <div
+                  className={`h-1 flex-1 ${
+                    step > num ? 'bg-blue-600' : 'bg-gray-200'
+                  }`}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Step 1: Service & Vehicle Selection */}
+      {step === 1 && (
+        <div className="space-y-8">
+          {/* Service Selection */}
+          <div>
+            <h2 className="text-xl font-semibold mb-4">Select a Service</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {services.map((service) => (
+                <div
+                  key={service.id}
+                  onClick={() => setSelectedService(service.id)}
+                  className={`p-4 border-2 rounded-lg cursor-pointer transition-all ${
+                    selectedService === service.id
+                      ? 'border-blue-600 bg-blue-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <h3 className="font-semibold text-gray-900">{service.name}</h3>
+                      <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
+                        <span className="flex items-center gap-1">
+                          <Clock className="w-4 h-4" />
+                          {service.duration}
+                        </span>
+                        <span className="font-semibold text-green-600">${service.price}</span>
+                      </div>
+                    </div>
+                    {selectedService === service.id && (
+                      <Check className="w-5 h-5 text-blue-600" />
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Vehicle Selection */}
+          <div>
+            <h2 className="text-xl font-semibold mb-4">Select a Vehicle</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {vehicles.map((vehicle) => (
+                <div
+                  key={vehicle.id}
+                  onClick={() => setSelectedVehicle(vehicle.id)}
+                  className={`p-4 border-2 rounded-lg cursor-pointer transition-all ${
+                    selectedVehicle === vehicle.id
+                      ? 'border-blue-600 bg-blue-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center">
+                        <Car className="w-6 h-6 text-gray-600" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-gray-900">{vehicle.number}</h3>
+                        <p className="text-sm text-gray-600">
+                          {vehicle.make} {vehicle.model} {vehicle.year}
+                        </p>
+                      </div>
+                    </div>
+                    {selectedVehicle === vehicle.id && (
+                      <Check className="w-5 h-5 text-blue-600" />
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Step 2: Date Selection */}
+      {step === 2 && (
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Select a Date</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
+            {dates.map((date, index) => {
+              const dateStr = date.toISOString().split('T')[0];
+              return (
+                <div
+                  key={index}
+                  onClick={() => setSelectedDate(dateStr)}
+                  className={`p-4 border-2 rounded-lg cursor-pointer text-center transition-all ${
+                    selectedDate === dateStr
+                      ? 'border-blue-600 bg-blue-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="flex flex-col items-center">
+                    <Calendar className={`w-6 h-6 mb-2 ${selectedDate === dateStr ? 'text-blue-600' : 'text-gray-400'}`} />
+                    <div className={`text-sm font-semibold ${selectedDate === dateStr ? 'text-blue-600' : 'text-gray-900'}`}>
+                      {formatDate(date)}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          {selectedDate && (
+            <div className="mt-4 p-4 bg-blue-50 rounded-lg">
+              <p className="text-sm text-blue-800">
+                Selected: <span className="font-semibold">{formatFullDate(new Date(selectedDate))}</span>
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Step 3: Time Slot Selection */}
+      {step === 3 && (
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Select a Time Slot</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+            {timeSlots.map((slot) => (
+              <div
+                key={slot}
+                onClick={() => setSelectedTimeSlot(slot)}
+                className={`p-4 border-2 rounded-lg cursor-pointer text-center transition-all ${
+                  selectedTimeSlot === slot
+                    ? 'border-blue-600 bg-blue-50'
+                    : 'border-gray-200 hover:border-gray-300'
+                }`}
+              >
+                <div className="flex flex-col items-center">
+                  <Clock className={`w-5 h-5 mb-2 ${selectedTimeSlot === slot ? 'text-blue-600' : 'text-gray-400'}`} />
+                  <div className={`text-sm font-semibold ${selectedTimeSlot === slot ? 'text-blue-600' : 'text-gray-900'}`}>
+                    {slot}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          {selectedTimeSlot && (
+            <div className="mt-4 p-4 bg-blue-50 rounded-lg">
+              <p className="text-sm text-blue-800">
+                Selected Time: <span className="font-semibold">{selectedTimeSlot}</span>
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Navigation Buttons */}
+      <div className="mt-8 flex justify-between">
+        <button
+          onClick={() => step === 1 ? router.back() : setStep(step - 1)}
+          className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+        >
+          {step === 1 ? 'Cancel' : 'Previous'}
+        </button>
+        {step < 3 ? (
+          <button
+            onClick={() => setStep(step + 1)}
+            disabled={!canProceed()}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
+          >
+            Next
+          </button>
+        ) : (
+          <button
+            onClick={handleBookAppointment}
+            disabled={!canProceed()}
+            className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
+          >
+            Confirm Booking
+          </button>
+        )}
+      </div>
+
+      {/* Summary (shown on all steps) */}
+      {(selectedService || selectedVehicle || selectedDate || selectedTimeSlot) && (
+        <div className="mt-8 p-6 bg-gray-50 rounded-lg">
+          <h3 className="font-semibold text-gray-900 mb-3">Booking Summary</h3>
+          <div className="space-y-2 text-sm">
+            {selectedService && (
+              <div className="flex justify-between">
+                <span className="text-gray-600">Service:</span>
+                <span className="font-medium">{services.find(s => s.id === selectedService)?.name}</span>
+              </div>
+            )}
+            {selectedVehicle && (
+              <div className="flex justify-between">
+                <span className="text-gray-600">Vehicle:</span>
+                <span className="font-medium">{vehicles.find(v => v.id === selectedVehicle)?.number}</span>
+              </div>
+            )}
+            {selectedDate && (
+              <div className="flex justify-between">
+                <span className="text-gray-600">Date:</span>
+                <span className="font-medium">{formatFullDate(new Date(selectedDate))}</span>
+              </div>
+            )}
+            {selectedTimeSlot && (
+              <div className="flex justify-between">
+                <span className="text-gray-600">Time:</span>
+                <span className="font-medium">{selectedTimeSlot}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/customer/my-appointments/page.tsx b/src/app/customer/my-appointments/page.tsx
new file mode 100644
index 0000000..6b8e942
--- /dev/null
+++ b/src/app/customer/my-appointments/page.tsx
@@ -0,0 +1,336 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Calendar, Clock, Car, CheckCircle, XCircle, Plus, Eye } from 'lucide-react';
+import { appointmentService } from '@/lib/api/appointmentService';
+import type { Appointment } from '@/lib/api/appointmentService';
+
+export default function MyAppointments() {
+  const router = useRouter();
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<'all' | 'upcoming' | 'completed' | 'cancelled'>('all');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadAppointments();
+  }, []);
+
+  const loadAppointments = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const apts = await appointmentService.getAllAppointments();
+      setAppointments(apts);
+    } catch (error) {
+      console.error('Failed to load appointments:', error);
+      setError('Failed to load appointments');
+      setAppointments([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { 
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
+  const getStatusBadge = (status: string) => {
+    const statusLower = status.toLowerCase();
+    switch (statusLower) {
+      case 'completed':
+        return 'bg-green-100 text-green-800';
+      case 'upcoming':
+        return 'bg-blue-100 text-blue-800';
+      case 'in progress':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'cancelled':
+        return 'bg-red-100 text-red-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const filteredAppointments = appointments.filter(apt => {
+    if (activeTab === 'all') return true;
+    if (activeTab === 'upcoming') return apt.status.toLowerCase() === 'upcoming';
+    if (activeTab === 'completed') return apt.status.toLowerCase() === 'completed';
+    if (activeTab === 'cancelled') return apt.status.toLowerCase() === 'cancelled';
+    return true;
+  });
+
+  const upcomingCount = appointments.filter(a => a.status.toLowerCase() === 'upcoming').length;
+  const completedCount = appointments.filter(a => a.status.toLowerCase() === 'completed').length;
+  const cancelledCount = appointments.filter(a => a.status.toLowerCase() === 'cancelled').length;
+
+  // Cancel an appointment — behaves the same as Delete (permanent removal)
+  const handleCancel = async (appointmentId: string) => {
+    const confirmed = window.confirm('Are you sure you want to cancel this appointment? This action will remove the appointment.');
+    if (!confirmed) return;
+
+    if (!appointmentId) {
+      console.error('Attempted to cancel appointment with empty id');
+      window.alert('Unable to cancel appointment: invalid id');
+      return;
+    }
+
+    try {
+      await appointmentService.deleteAppointment(appointmentId);
+      // Remove the appointment row from UI
+      setAppointments(prev => prev.filter(a => a.id !== appointmentId));
+      window.alert('Appointment cancelled');
+    } catch (err: unknown) {
+      console.error('Cancel (delete) failed:', err);
+      const msg = err instanceof Error ? err.message : String(err);
+      window.alert('Failed to cancel appointment: ' + (msg || 'Unknown error'));
+    }
+  };
+
+  // Delete a completed appointment (only available in Completed tab)
+  const handleDelete = async (appointmentId: string) => {
+    const confirmed = window.confirm('Delete this completed appointment? This action cannot be undone.');
+    if (!confirmed) return;
+
+    if (!appointmentId) {
+      console.error('Attempted to delete appointment with empty id');
+      window.alert('Unable to delete appointment: invalid id');
+      return;
+    }
+
+    try {
+      await appointmentService.deleteAppointment(appointmentId);
+      setAppointments(prev => prev.filter(a => a.id !== appointmentId));
+      window.alert('Appointment deleted');
+    } catch (err: unknown) {
+      console.error('Delete failed:', err);
+      const msg = err instanceof Error ? err.message : String(err);
+      window.alert('Failed to delete appointment: ' + (msg || 'Unknown error'));
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading appointments...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold mb-2">My Appointments</h1>
+            <p className="text-gray-600">View and manage your service appointments</p>
+          </div>
+          <button
+            onClick={() => router.push('/customer/my-appointments/book')}
+            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
+          >
+            <Plus className="w-5 h-5" />
+            Book Appointment
+          </button>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600 mb-1">Upcoming</p>
+              <p className="text-3xl font-bold text-blue-600">{upcomingCount}</p>
+            </div>
+            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
+              <Calendar className="w-6 h-6 text-blue-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600 mb-1">Completed</p>
+              <p className="text-3xl font-bold text-green-600">{completedCount}</p>
+            </div>
+            <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
+              <CheckCircle className="w-6 h-6 text-green-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600 mb-1">Cancelled</p>
+              <p className="text-3xl font-bold text-red-600">{cancelledCount}</p>
+            </div>
+            <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
+              <XCircle className="w-6 h-6 text-red-600" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="bg-white rounded-lg shadow mb-6">
+        <div className="border-b border-gray-200">
+          <div className="flex overflow-x-auto">
+            <button
+              onClick={() => setActiveTab('all')}
+              className={`px-6 py-4 font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === 'all'
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-600 hover:text-gray-800'
+              }`}
+            >
+              All ({appointments.length})
+            </button>
+            <button
+              onClick={() => setActiveTab('upcoming')}
+              className={`px-6 py-4 font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === 'upcoming'
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-600 hover:text-gray-800'
+              }`}
+            >
+              Upcoming ({upcomingCount})
+            </button>
+            <button
+              onClick={() => setActiveTab('completed')}
+              className={`px-6 py-4 font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === 'completed'
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-600 hover:text-gray-800'
+              }`}
+            >
+              Completed ({completedCount})
+            </button>
+            <button
+              onClick={() => setActiveTab('cancelled')}
+              className={`px-6 py-4 font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === 'cancelled'
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-600 hover:text-gray-800'
+              }`}
+            >
+              Cancelled ({cancelledCount})
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Appointments List */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Service
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Vehicle
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Date & Time
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {filteredAppointments.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-6 py-12 text-center text-gray-500">
+                    {activeTab === 'all' && 'No appointments found'}
+                    {activeTab === 'upcoming' && 'No upcoming appointments'}
+                    {activeTab === 'completed' && 'No completed appointments'}
+                    {activeTab === 'cancelled' && 'No cancelled appointments'}
+                  </td>
+                </tr>
+              ) : (
+                filteredAppointments.map((appointment) => (
+                  <tr key={appointment.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4">
+                      <div className="text-sm font-medium text-gray-900">
+                        {appointment.serviceName}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="flex items-center gap-2 text-sm text-gray-900">
+                        <Car className="w-4 h-4 text-gray-400" />
+                        {appointment.vehicleNumber}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="text-sm text-gray-900">
+                        <div className="flex items-center gap-2">
+                          <Calendar className="w-4 h-4 text-gray-400" />
+                          {formatDate(appointment.date)}
+                        </div>
+                        <div className="flex items-center gap-2 mt-1 text-gray-600">
+                          <Clock className="w-4 h-4 text-gray-400" />
+                          {appointment.time}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadge(appointment.status)}`}>
+                        {appointment.status}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium flex items-center gap-4">
+                      <button
+                        onClick={() => alert('View appointment details')}
+                        className="text-blue-600 hover:text-blue-900 flex items-center gap-1"
+                      >
+                        <Eye className="w-4 h-4" />
+                        View
+                      </button>
+
+                      {/* Show Cancel button for non-completed/non-cancelled appointments */}
+                      {appointment.status.toLowerCase() !== 'completed' && appointment.status.toLowerCase() !== 'cancelled' && (
+                        <button
+                          onClick={() => handleCancel(appointment.id)}
+                          className="text-red-600 hover:text-red-900 flex items-center gap-1"
+                        >
+                          Cancel
+                        </button>
+                      )}
+
+                      {/* Show Delete only when viewing the Completed tab */}
+                      {activeTab === 'completed' && appointment.status.toLowerCase() === 'completed' && (
+                        <button
+                          onClick={() => handleDelete(appointment.id)}
+                          className="text-red-600 hover:text-red-900 flex items-center gap-1"
+                        >
+                          Delete
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/customer/my-projects/page.tsx b/src/app/customer/my-projects/page.tsx
new file mode 100644
index 0000000..74b2b4b
--- /dev/null
+++ b/src/app/customer/my-projects/page.tsx
@@ -0,0 +1,265 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { projectService, customerService } from '@/api/mockApiService';
+import type { Project, Customer } from '@/types';
+
+export default function Projects() {
+  const [customer, setCustomer] = useState<Customer | null>(null);
+  const [ongoingProjects, setOngoingProjects] = useState<Project[]>([]);
+  const [completedProjects, setCompletedProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAllCompleted, setShowAllCompleted] = useState(false);
+  const [showNewForm, setShowNewForm] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newDescription, setNewDescription] = useState('');
+  const [newVehicleModel, setNewVehicleModel] = useState('');
+  const [newStartDate, setNewStartDate] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    loadProjects();
+  }, []);
+
+  const loadProjects = async () => {
+    try {
+      setLoading(true);
+      const customerData = await customerService.getProfile();
+      setCustomer(customerData);
+
+      const [ongoing, completed] = await Promise.all([
+        projectService.getOngoingProjects(customerData.id),
+        projectService.getCompletedProjects(customerData.id)
+      ]);
+
+      setOngoingProjects(ongoing);
+      setCompletedProjects(completed);
+    } catch (error) {
+      console.error('Failed to load projects:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // helper to derive vehicle model from description if stored as 'Vehicle Model: <value>'
+  const getVehicleModel = (p: Project) => {
+    const desc = (p as any)?.description as string | undefined;
+    if (!desc) return '';
+    const m = desc.match(/Vehicle Model:\s*(.+)/i);
+    return m ? m[1].trim() : '';
+  };
+
+  const handleCreateProject = async () => {
+    if (!newName || !newDescription || !newVehicleModel || !newStartDate) {
+      window.alert('Please fill in all fields');
+      return;
+    }
+    try {
+      setSubmitting(true);
+      const combinedDescription = `${newDescription}\n\nVehicle Model: ${newVehicleModel}`;
+      await projectService.createProject({
+        name: newName,
+        description: combinedDescription,
+        startDate: newStartDate,
+        status: 'PLANNED',
+      });
+      // reset and refresh
+      setNewName('');
+      setNewDescription('');
+      setNewVehicleModel('');
+      setNewStartDate('');
+      setShowNewForm(false);
+      await loadProjects();
+      window.alert('Project created');
+    } catch (err) {
+      console.error('Failed to create project', err);
+      window.alert('Failed to create project');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { 
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading projects...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <p className="text-gray-700 text-sm md:text-base">Hello,</p>
+      <h2 className="text-base md:text-lg font-bold mb-6 lg:text-xl">Hi {customer?.name}</h2>
+
+          {/* Stats */}
+          <div className="flex md:grid md:grid-cols-2 gap-6 mb-8 overflow-x-auto scrollbar-hide py-2 -my-2">
+            <div className="bg-white rounded-lg shadow-md p-4 md:p-5 text-center min-w-[160px] md:min-w-0 flex-shrink-0">
+              <p className="text-2xl md:text-3xl font-bold text-green-500">{completedProjects.length}</p>
+              <p className="text-sm md:text-base text-gray-600 mt-1">Completed</p>
+            </div>
+            <div className="bg-white rounded-lg shadow-md p-4 md:p-5 text-center min-w-[160px] md:min-w-0 flex-shrink-0">
+              <p className="text-2xl md:text-3xl font-bold text-yellow-500">{ongoingProjects.length}</p>
+              <p className="text-sm md:text-base text-gray-600 mt-1">Ongoing</p>
+            </div>
+          </div>
+
+          {/* Ongoing Projects */}
+          <div className="flex justify-between items-center mb-3">
+            <h3 className="text-lg md:text-xl font-bold">Ongoing Projects</h3>
+            <button
+              onClick={() => setShowNewForm(v => !v)}
+              className="bg-orange-400 hover:bg-orange-500 text-white px-3 md:px-4 py-2 rounded-lg text-sm md:text-base font-medium transition-colors"
+            >
+              {showNewForm ? 'Close' : '+ New'}
+            </button>
+          </div>
+
+          {showNewForm && (
+            <div className="bg-white rounded-lg shadow-md p-4 md:p-5 mb-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="flex flex-col">
+                  <label className="text-sm text-gray-600 mb-1">Project Name</label>
+                  <input
+                    type="text"
+                    className="border rounded px-3 py-2"
+                    value={newName}
+                    onChange={e => setNewName(e.target.value)}
+                    placeholder="Enter project name"
+                  />
+                </div>
+                <div className="flex flex-col">
+                  <label className="text-sm text-gray-600 mb-1">Vehicle Model</label>
+                  <input
+                    type="text"
+                    className="border rounded px-3 py-2"
+                    value={newVehicleModel}
+                    onChange={e => setNewVehicleModel(e.target.value)}
+                    placeholder="e.g., Toyota Camry 2020"
+                  />
+                </div>
+                <div className="flex flex-col md:col-span-2">
+                  <label className="text-sm text-gray-600 mb-1">Project Description</label>
+                  <textarea
+                    className="border rounded px-3 py-2 min-h-[120px]"
+                    value={newDescription}
+                    onChange={e => setNewDescription(e.target.value)}
+                    placeholder="Describe what kind of project you want"
+                  />
+                </div>
+                <div className="flex flex-col">
+                  <label className="text-sm text-gray-600 mb-1">Start Date</label>
+                  <input
+                    type="date"
+                    className="border rounded px-3 py-2"
+                    value={newStartDate}
+                    onChange={e => setNewStartDate(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="mt-4 flex gap-3">
+                <button
+                  onClick={handleCreateProject}
+                  disabled={submitting}
+                  className="bg-green-600 hover:bg-green-700 disabled:opacity-60 text-white px-4 py-2 rounded"
+                >
+                  {submitting ? 'Creating...' : 'Create Project'}
+                </button>
+                <button
+                  onClick={() => setShowNewForm(false)}
+                  className="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          )}
+
+          {ongoingProjects.length === 0 ? (
+            <div className="bg-gray-100 rounded-lg p-3 md:p-4 mb-6 text-center text-gray-500 text-sm md:text-base">
+              No ongoing projects
+            </div>
+          ) : (
+            <div className="overflow-x-auto bg-white rounded-lg shadow-md mb-8">
+            <table className="w-full text-left text-sm md:text-base">
+              <thead className="bg-gray-100 text-gray-700">
+                <tr>
+                  <th className="p-4 font-semibold">ID</th>
+                  <th className="p-4 font-semibold">Task</th>
+                  <th className="p-4 font-semibold">Vehicle Model</th>
+                  <th className="p-4 font-semibold">Date</th>
+                  <th className="p-4 font-semibold">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {ongoingProjects.map((project) => (
+                  <tr key={project.id} className="border-t hover:bg-gray-50 transition-colors">
+                    <td className="p-3 md:p-4">{project.id}</td>
+                    <td className="p-3 md:p-4">{project.taskName}</td>
+                    <td className="p-3 md:p-4">{getVehicleModel(project)}</td>
+                    <td className="p-3 md:p-4">{formatDate(project.startDate)}</td>
+                    <td className="p-3 md:p-4 text-orange-500 font-semibold">{project.status}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+          {/* Completed Projects */}
+          <h3 className="text-lg font-bold mb-3 lg:text-xl ">Completed Projects</h3>
+          {completedProjects.length === 0 ? (
+            <div className="bg-gray-100 rounded-lg p-4 text-center text-gray-500 text-base">
+              No completed projects yet
+            </div>
+          ) : (
+            <>
+              <div className="overflow-x-auto bg-white rounded-lg shadow-md mb-8">
+                <table className="w-full text-left text-base">
+                  <thead className="bg-gray-100 text-gray-700">
+                    <tr>
+                      <th className="p-4 font-semibold">ID</th>
+                      <th className="p-4 font-semibold">Task</th>
+                      <th className="p-4 font-semibold">Vehicle Model</th>
+                      <th className="p-4 font-semibold">Date</th>
+                      <th className="p-4 font-semibold">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(showAllCompleted ? completedProjects : completedProjects.slice(0, 5)).map((project) => (
+                      <tr key={project.id} className="border-t hover:bg-gray-50 transition-colors">
+                        <td className="p-4">{project.id}</td>
+                        <td className="p-4">{project.taskName}</td>
+                        <td className="p-4">{getVehicleModel(project)}</td>
+                        <td className="p-4">{formatDate(project.startDate)}</td>
+                        <td className="p-4 text-green-600 font-semibold">{project.status}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {completedProjects.length > 5 && (
+                <button
+                  onClick={() => setShowAllCompleted(!showAllCompleted)}
+                  className="mt-3 text-blue-600 hover:text-blue-800 text-sm md:text-base font-medium transition-colors"
+                >
+                  {showAllCompleted ? 'Show less...' : `Show more... (${completedProjects.length - 5} more)`}
+                </button>
+              )}
+            </>
+          )}
+    </>
+  );
+}
diff --git a/src/app/customer/notifications/page.tsx b/src/app/customer/notifications/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/profile/page.tsx b/src/app/customer/profile/page.tsx
new file mode 100644
index 0000000..4b7d4b7
--- /dev/null
+++ b/src/app/customer/profile/page.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import ProfileClient from "../../../components/profile/ProfileClient";
+
+
+
+export default function ProfilePage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Profile</h2>
+      </div>
+
+      <ProfileClient />
+    </div>
+  );
+}
diff --git a/src/app/customer/projects/[id]/page.tsx b/src/app/customer/projects/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/projects/page.tsx b/src/app/customer/projects/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/services/[id]/page.tsx b/src/app/customer/services/[id]/page.tsx
new file mode 100644
index 0000000..55ca286
--- /dev/null
+++ b/src/app/customer/services/[id]/page.tsx
@@ -0,0 +1,251 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { serviceApi, ServiceResponse } from '@/lib/api/services';
+
+interface ServiceDetail extends Omit<ServiceResponse, 'price' | 'category'> {
+  category: string;
+  price: string;
+  duration: string;
+}
+
+export default function ServiceDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [service, setService] = useState<ServiceDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchServiceDetails = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const id = params.id as string;
+        console.log('🔄 Fetching service details for ID:', id);
+        const data = await serviceApi.getServiceById(id);
+        
+        // Transform the data
+        const transformedService: ServiceDetail = {
+          ...data,
+          category: typeof data.category === 'object' && data.category !== null 
+            ? (data.category as any).name 
+            : data.category || 'Service',
+          price: typeof data.price === 'number' 
+            ? `${data.currency || 'LKR'} ${data.price.toFixed(2)}` 
+            : String(data.price),
+          duration: data.duration || `${data.durationInHours || 1} hours`,
+        };
+        
+        setService(transformedService);
+        console.log('✅ Service details loaded:', transformedService);
+      } catch (err) {
+        console.error('❌ Failed to fetch service details:', err);
+        setError('Unable to load service details');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (params.id) {
+      fetchServiceDetails();
+    }
+  }, [params.id]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading service details...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !service) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="text-red-500 text-6xl mb-4">⚠️</div>
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">Service Not Found</h2>
+          <p className="text-gray-600 mb-6">{error || 'The requested service could not be found.'}</p>
+          <button
+            onClick={() => router.push('/services')}
+            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            Back to Services
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
+              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+              </svg>
+            </div>
+            <h1 className="text-xl font-bold text-gray-900">AutoService Hub</h1>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Back Button */}
+        <button
+          onClick={() => router.push('/services')}
+          className="flex items-center gap-2 text-blue-600 hover:text-blue-700 mb-6 transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
+          </svg>
+          <span className="font-medium">Back to Catalog</span>
+        </button>
+
+        {/* Service Card */}
+        <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200">
+          {/* Service Title */}
+          <div className="px-8 pt-8 pb-4">
+            <h2 className="text-3xl font-bold text-gray-900 mb-2">
+              {service.name}
+            </h2>
+            <p className="text-gray-600 text-lg leading-relaxed">
+              {service.description}
+            </p>
+          </div>
+
+          {/* Service Image */}
+          <div className="px-8 pb-6">
+            <div className="relative h-96 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-xl overflow-hidden">
+              {service.imageUrl ? (
+                <Image
+                  src={service.imageUrl}
+                  alt={service.name}
+                  fill
+                  className="object-cover"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center">
+                  <svg className="w-32 h-32 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                  </svg>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Service Overview Section */}
+          <div className="px-8 pb-8">
+            <h3 className="text-xl font-bold text-gray-900 mb-6">Service Overview</h3>
+            
+            <div className="bg-gray-50 rounded-xl p-6 mb-6">
+              <p className="text-gray-700 leading-relaxed mb-6">
+                Our {service.name} service utilizes advanced tools and expert technical inspection to prevent any underlying issues affecting your vehicle's performance. 
+                This includes comprehensive diagnostics, performance monitoring, and a thorough inspection of all critical components. 
+                We provide a detailed report of our findings and recommend necessary repairs or maintenance, ensuring your vehicle runs smoothly and efficiently.
+                This service is crucial for maintaining vehicle health and preventing major breakdowns.
+              </p>
+
+              {/* Service Details Grid */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Category */}
+                <div className="flex items-start gap-3">
+                  <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clipRule="evenodd" />
+                      <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500 mb-1">Category:</p>
+                    <p className="font-semibold text-gray-900">{service.category}</p>
+                  </div>
+                </div>
+
+                {/* Price */}
+                <div className="flex items-start gap-3">
+                  <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500 mb-1">Price:</p>
+                    <p className="text-2xl font-bold text-blue-600">{service.price}</p>
+                  </div>
+                </div>
+
+                {/* Duration */}
+                <div className="flex items-start gap-3">
+                  <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-5 h-5 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500 mb-1">Duration:</p>
+                    <p className="font-semibold text-gray-900">{service.duration}</p>
+                  </div>
+                </div>
+
+                {/* Status */}
+                <div className="flex items-start gap-3">
+                  <div className="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-5 h-5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500 mb-1">Status:</p>
+                    <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold ${
+                      service.status === 'ACTIVE' 
+                        ? 'bg-green-100 text-green-800' 
+                        : 'bg-gray-100 text-gray-800'
+                    }`}>
+                      {service.status || 'ACTIVE'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Action Button */}
+            <button className="w-full md:w-auto px-8 py-4 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
+              Book This Service
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="bg-white border-t mt-16">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
+          <div className="flex items-center justify-center gap-3 mb-4">
+            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+              <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+              </svg>
+            </div>
+            <h3 className="text-lg font-bold text-gray-900">AutoService Hub</h3>
+          </div>
+          <p className="text-sm text-gray-500 mb-2">© 2025 AutoService Hub. All rights reserved.</p>
+          <div className="flex justify-center gap-6 text-sm text-blue-600">
+            <button className="hover:text-blue-700">Privacy Policy</button>
+            <button className="hover:text-blue-700">Terms of Service</button>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/app/customer/services/page.tsx b/src/app/customer/services/page.tsx
new file mode 100644
index 0000000..156c6cd
--- /dev/null
+++ b/src/app/customer/services/page.tsx
@@ -0,0 +1,526 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import { serviceApi, ServiceResponse } from '@/lib/api/services';
+
+// Use the interface from API but extend it for frontend display
+interface VehicleService extends Omit<ServiceResponse, 'price' | 'category'> {
+  price: string | number;
+  category: string; // Always string after transformation
+}
+
+const vehicleServices: VehicleService[] = [
+  {
+    id: '1',
+    name: 'Oil Change & Filter Replacement',
+    description: 'Complete oil change service with premium synthetic or conventional oil. Includes oil filter replacement and fluid level check.',
+    price: '$49.99',
+    duration: '30 mins',
+    imageUrl: 'https://images.unsplash.com/photo-1632823469412-20e3dd1c7a84?w=500&h=300&fit=crop',
+    category: 'Maintenance',
+    popular: true,
+    features: ['Premium oil options', 'Oil filter replacement', 'Multi-point inspection', 'Fluid top-off'],
+  },
+  {
+    id: '2',
+    name: 'Brake Inspection & Service',
+    description: 'Comprehensive brake system inspection including pads, rotors, calipers, and brake fluid. Replacement services available.',
+    price: '$89.99',
+    duration: '1 hour',
+    imageUrl: 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=500&h=300&fit=crop',
+    category: 'Safety',
+    popular: true,
+    features: ['Brake pad inspection', 'Rotor measurement', 'Brake fluid check', 'Test drive included'],
+  },
+  {
+    id: '3',
+    name: 'Tire Rotation & Balance',
+    description: 'Professional tire rotation and balancing to ensure even wear and optimal performance. Extends tire life significantly.',
+    price: '$59.99',
+    duration: '45 mins',
+    imageUrl: 'https://images.unsplash.com/photo-1619642751034-765dfdf7c58e?w=500&h=300&fit=crop',
+    category: 'Maintenance',
+    features: ['4-wheel rotation', 'Wheel balancing', 'Tire pressure check', 'Visual inspection'],
+  },
+  {
+    id: '4',
+    name: 'Engine Diagnostics',
+    description: 'Advanced computer diagnostics to identify engine issues. Comprehensive scan of all vehicle systems with detailed report.',
+    price: '$79.99',
+    duration: '1 hour',
+    imageUrl: 'https://images.unsplash.com/photo-1615906655593-ad0386982a0f?w=500&h=300&fit=crop',
+    category: 'Diagnostics',
+    popular: true,
+    features: ['Full system scan', 'Error code reading', 'Detailed report', 'Expert consultation'],
+  },
+  {
+    id: '5',
+    name: 'Air Conditioning Service',
+    description: 'Complete AC system inspection, refrigerant recharge, and performance check. Stay cool all summer long.',
+    price: '$129.99',
+    duration: '1.5 hours',
+    imageUrl: 'https://images.unsplash.com/photo-1625047509248-ec889cbff17f?w=500&h=300&fit=crop',
+    category: 'Climate Control',
+    features: ['AC system inspection', 'Refrigerant recharge', 'Leak detection', 'Performance test'],
+  },
+  {
+    id: '6',
+    name: 'Battery Test & Replacement',
+    description: 'Complete battery testing and replacement service. We test charging system and install premium batteries with warranty.',
+    price: '$149.99',
+    duration: '30 mins',
+    imageUrl: 'https://images.unsplash.com/photo-1619642751034-765dfdf7c58e?w=500&h=300&fit=crop',
+    category: 'Electrical',
+    features: ['Battery load test', 'Charging system check', 'Terminal cleaning', 'Premium battery options'],
+  },
+  {
+    id: '7',
+    name: 'Transmission Service',
+    description: 'Transmission fluid change and filter replacement. Helps prevent costly transmission repairs and ensures smooth shifting.',
+    price: '$179.99',
+    duration: '2 hours',
+    imageUrl: 'https://images.unsplash.com/photo-1487754180451-c456f719a1fc?w=500&h=300&fit=crop',
+    category: 'Maintenance',
+    features: ['Fluid exchange', 'Filter replacement', 'Gasket inspection', 'Test drive included'],
+  },
+  {
+    id: '8',
+    name: 'Full Detail & Wash',
+    description: 'Premium interior and exterior detailing. Hand wash, wax, interior vacuum, and conditioning. Make your car look brand new.',
+    price: '$199.99',
+    duration: '3 hours',
+    imageUrl: 'https://images.unsplash.com/photo-1601362840469-51e4d8d58785?w=500&h=300&fit=crop',
+    category: 'Detailing',
+    popular: true,
+    features: ['Exterior hand wash & wax', 'Interior deep clean', 'Leather conditioning', 'Tire shine'],
+  },
+  {
+    id: '9',
+    name: 'Wheel Alignment',
+    description: 'Precision wheel alignment using advanced computerized equipment. Improves handling and extends tire life.',
+    price: '$99.99',
+    duration: '1 hour',
+    imageUrl: 'https://images.unsplash.com/photo-1625047509248-ec889cbff17f?w=500&h=300&fit=crop',
+    category: 'Maintenance',
+    features: ['4-wheel alignment', 'Computerized precision', 'Steering check', 'Before/after report'],
+  },
+  {
+    id: '10',
+    name: 'Exhaust System Repair',
+    description: 'Complete exhaust system inspection and repair. Muffler, catalytic converter, and pipe replacement available.',
+    price: '$299.99',
+    duration: '2 hours',
+    imageUrl: 'https://images.unsplash.com/photo-1487754180451-c456f719a1fc?w=500&h=300&fit=crop',
+    category: 'Repair',
+    features: ['Full system inspection', 'Leak detection', 'Component replacement', 'Emissions test'],
+  },
+  {
+    id: '11',
+    name: 'Suspension Service',
+    description: 'Inspection and repair of shocks, struts, and suspension components. Ensures smooth ride and proper handling.',
+    price: '$249.99',
+    duration: '2.5 hours',
+    imageUrl: 'https://images.unsplash.com/photo-1615906655593-ad0386982a0f?w=500&h=300&fit=crop',
+    category: 'Repair',
+    features: ['Shock/strut inspection', 'Component replacement', 'Ride quality test', 'Alignment check'],
+  },
+  {
+    id: '12',
+    name: 'Pre-Purchase Inspection',
+    description: 'Comprehensive 150-point inspection for used car buyers. Get complete peace of mind before your purchase.',
+    price: '$149.99',
+    duration: '2 hours',
+    imageUrl: 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=500&h=300&fit=crop',
+    category: 'Diagnostics',
+    features: ['150-point inspection', 'Detailed written report', 'Photos included', 'Expert recommendations'],
+  },
+];
+
+const categories = [
+  'All Services',
+  'Maintenance',
+  'Safety',
+  'Diagnostics',
+  'Repair',
+  'Electrical',
+  'Climate Control',
+  'Detailing',
+];
+
+export default function VehicleServicesPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All Services');
+  const [activeFilter, setActiveFilter] = useState('All');
+  const [services, setServices] = useState<VehicleService[]>([]); // Start with empty array - fetch from backend
+  const [loading, setLoading] = useState(true); // Start with loading true
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch services from backend
+  useEffect(() => {
+    const fetchServices = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        console.log('🔄 Fetching services from backend...');
+        const data = await serviceApi.getAllServices();
+        
+        // Transform backend data to frontend format
+        const transformedData = data.map(service => ({
+          ...service,
+          // Convert price to display format (backend uses LKR, frontend displays with currency)
+          price: typeof service.price === 'number' 
+            ? `${service.currency || 'LKR'} ${service.price.toFixed(2)}` 
+            : service.price,
+          // Convert durationInHours to duration string if not present
+          duration: service.duration || `${service.durationInHours || 1} hour${(service.durationInHours || 1) !== 1 ? 's' : ''}`,
+          // Extract category name from category object (backend sends {id, name, description})
+          category: typeof service.category === 'object' && service.category !== null 
+            ? (service.category as any).name 
+            : service.category || 'Service',
+          categoryId: typeof service.category === 'object' && service.category !== null 
+            ? (service.category as any).id 
+            : service.categoryId,
+          // Ensure features array exists (backend might not have it)
+          features: service.features || [],
+          // Set popular based on status or price (you can customize this logic)
+          popular: service.popular !== undefined ? service.popular : service.price > 5000,
+        }));
+        
+        setServices(transformedData as VehicleService[]);
+        console.log(`✅ Successfully loaded ${transformedData.length} services from backend`);
+        console.log('📦 Sample service:', transformedData[0]);
+      } catch (err) {
+        console.error('❌ Failed to fetch services from backend:', err);
+        setError('Unable to load services. Please make sure the backend server is running on http://localhost:8080');
+        
+        // Option: Use fallback data in development
+        if (process.env.NODE_ENV === 'development') {
+          console.info('⚠️ Using fallback mock data for development');
+          setServices(vehicleServices);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchServices();
+  }, []); // Run once on mount
+
+  // Filter services based on search and category
+  const filteredServices = services.filter((service) => {
+    const matchesSearch = service.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         service.description.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory = selectedCategory === 'All Services' || service.category === selectedCategory;
+    const matchesFilter = activeFilter === 'All' || 
+                         (activeFilter === 'Popular' && service.popular) ||
+                         (activeFilter === 'Maintenance' && service.category === 'Maintenance') ||
+                         (activeFilter === 'Repair' && service.category === 'Repair');
+    
+    return matchesSearch && matchesCategory && matchesFilter;
+  });
+
+  const resetFilters = () => {
+    setSearchQuery('');
+    setSelectedCategory('All Services');
+    setActiveFilter('All');
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      {/* Backend Connection Error Alert */}
+      {error && (
+        <div className="bg-red-50 border-l-4 border-red-500 p-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex items-start">
+              <svg className="w-6 h-6 text-red-500 mr-3 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+              <div className="flex-1">
+                <h3 className="text-sm font-medium text-red-800">Backend Connection Error</h3>
+                <p className="text-sm text-red-700 mt-1">{error}</p>
+                <p className="text-xs text-red-600 mt-2">
+                  <strong>Steps to fix:</strong>
+                  <br />1. Make sure Spring Boot backend is running: <code className="bg-red-100 px-1 rounded">./mvnw spring-boot:run</code>
+                  <br />2. Verify backend is accessible: <code className="bg-red-100 px-1 rounded">curl http://localhost:8080/api/customer/services</code>
+                  <br />3. Check CORS configuration in your backend
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Hero Section */}
+      <div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+          <div className="text-center">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">
+              Vehicle Service Center
+            </h1>
+            <p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
+              Professional automotive care and maintenance services. Quality work, competitive prices, and exceptional customer service.
+            </p>
+            <div className="flex flex-wrap justify-center gap-8 text-sm">
+              <div className="flex items-center gap-2">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+                <span>Certified Technicians</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+                <span>Warranty on All Services</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+                <span>Same-Day Service Available</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Search and Filter Section */}
+      <div className="bg-white shadow-md sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          {/* Search and Filter Bar */}
+          <div className="flex flex-col sm:flex-row gap-4 mb-6">
+            <div className="flex-1 relative">
+              <input
+                type="text"
+                placeholder="Search services..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full px-4 py-2.5 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+              <svg
+                className="absolute left-3 top-3.5 h-5 w-5 text-gray-400"
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </div>
+
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+              className="px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white min-w-[200px]"
+            >
+              {categories.map((category) => (
+                <option key={category} value={category}>
+                  {category}
+                </option>
+              ))}
+            </select>
+
+            <button 
+              onClick={resetFilters}
+              className="px-6 py-2.5 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-2"
+            >
+              <svg
+                className="h-5 w-5"
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+              Reset Filters
+            </button>
+          </div>
+
+          {/* Filter Tabs */}
+          <div className="flex gap-4 border-b -mb-px">
+            {['All', 'Popular', 'Maintenance', 'Repair'].map((filter) => (
+              <button
+                key={filter}
+                onClick={() => setActiveFilter(filter)}
+                className={`pb-3 px-1 font-medium transition-colors ${
+                  activeFilter === filter
+                    ? 'text-blue-600 border-b-2 border-blue-600'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                {filter}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Services Grid */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Results count and loading indicator */}
+        <div className="mb-6 flex items-center justify-between">
+          <p className="text-gray-600">
+            Showing <span className="font-semibold">{filteredServices.length}</span> service{filteredServices.length !== 1 ? 's' : ''}
+          </p>
+          {loading && (
+            <div className="flex items-center text-blue-600">
+              <svg className="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <span className="text-sm">Loading services...</span>
+            </div>
+          )}
+        </div>
+
+        {/* Loading Skeleton */}
+        {loading && services.length === 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[1, 2, 3, 4, 5, 6].map((n) => (
+              <div key={n} className="bg-white rounded-xl shadow-md overflow-hidden animate-pulse">
+                <div className="h-48 bg-gray-300"></div>
+                <div className="p-6">
+                  <div className="h-6 bg-gray-300 rounded mb-4"></div>
+                  <div className="h-4 bg-gray-300 rounded mb-2"></div>
+                  <div className="h-4 bg-gray-300 rounded mb-4"></div>
+                  <div className="flex justify-between items-center">
+                    <div className="h-8 w-20 bg-gray-300 rounded"></div>
+                    <div className="h-4 w-16 bg-gray-300 rounded"></div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredServices.map((service) => (
+            <div
+              key={service.id}
+              className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
+            >
+              {/* Service Image */}
+              <div className="relative h-48 bg-gray-200 overflow-hidden">
+                {service.imageUrl ? (
+                  <Image
+                    src={service.imageUrl}
+                    alt={service.name}
+                    fill
+                    className="object-cover"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-indigo-100">
+                    <svg className="w-20 h-20 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                    </svg>
+                  </div>
+                )}
+                {service.popular && (
+                  <div className="absolute top-4 right-4 bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1">
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                    Popular
+                  </div>
+                )}
+                <div className="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-xs font-semibold">
+                  {service.category}
+                </div>
+              </div>
+
+              {/* Service Details */}
+              <div className="p-6">
+                <h3 className="text-xl font-bold text-gray-900 mb-2">
+                  {service.name}
+                </h3>
+                
+                <p className="text-gray-600 text-sm mb-4 line-clamp-2">
+                  {service.description}
+                </p>
+
+                {/* Features */}
+                {service.features && Array.isArray(service.features) && service.features.length > 0 && (
+                  <div className="mb-4">
+                    <ul className="space-y-1">
+                      {service.features.slice(0, 3).map((feature, index) => (
+                        <li key={index} className="flex items-center text-xs text-gray-600">
+                          <svg className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                          </svg>
+                          {feature}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+
+                {/* Price and Duration */}
+                <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200">
+                  <div>
+                    <p className="text-2xl font-bold text-blue-600">
+                      {service.price}
+                    </p>
+                  </div>
+                  <div className="flex items-center text-gray-500 text-sm">
+                    <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    {service.duration}
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex gap-2">
+                  <a 
+                    href={`/services/${service.id}`}
+                    className="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-center"
+                  >
+                    Details
+                  </a>
+                  <button className="flex-1 px-4 py-2.5 text-sm font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg hover:from-blue-700 hover:to-indigo-700 transition-all shadow-md hover:shadow-lg">
+                    Book Now
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+          </div>
+        )}
+
+        {/* Empty State */}
+        {!loading && filteredServices.length === 0 && (
+          <div className="text-center py-12">
+            <svg className="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <h3 className="text-lg font-medium text-gray-900 mb-2">No services found</h3>
+            <p className="text-gray-600">Try adjusting your search or filters</p>
+          </div>
+        )}
+      </div>
+
+      {/* Footer CTA Section */}
+      <div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white mt-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
+          <h2 className="text-3xl font-bold mb-4">Need Help Choosing a Service?</h2>
+          <p className="text-blue-100 mb-6 max-w-2xl mx-auto">
+            Our expert technicians are here to help. Contact us for a free consultation and quote.
+          </p>
+          <div className="flex flex-wrap justify-center gap-4">
+            <button className="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
+              Call Us: (555) 123-4567
+            </button>
+            <button className="px-8 py-3 bg-blue-700 text-white rounded-lg font-semibold hover:bg-blue-800 transition-colors border-2 border-white">
+              Schedule Consultation
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/customer/vehicles/[id]/edit/page.tsx b/src/app/customer/vehicles/[id]/edit/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/vehicles/[id]/page.tsx b/src/app/customer/vehicles/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/customer/vehicles/page.tsx b/src/app/customer/vehicles/page.tsx
new file mode 100644
index 0000000..f761cc7
--- /dev/null
+++ b/src/app/customer/vehicles/page.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import VehicleList from "@/components/vehicles/VehicleList";
+import VehicleDetails from "@/components/vehicles/VehicleDetails";
+import VehicleForm, { NewVehicleInput } from "@/components/vehicles/VehicleForm";
+import { vehicleApi } from "@/lib/vehicleApi";
+import { Vehicle } from "@/types/vehicle.types";
+import { debugImageUpload } from "@/lib/debugImageUpload";
+
+export default function MyVehiclesPage() {
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [selected, setSelected] = useState<Vehicle | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [editingVehicle, setEditingVehicle] = useState<Vehicle | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load all vehicles on mount
+  useEffect(() => {
+    loadVehicles();
+  }, []);
+
+  const loadVehicles = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await vehicleApi.getAllVehicles();
+      setVehicles(data);
+      if (data.length > 0 && !selected) {
+        setSelected(data[0]);
+      }
+    } catch (err: any) {
+      console.error("Failed to load vehicles:", err);
+      setError(err.response?.data?.message || "Failed to load vehicles");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddClick = () => {
+    setEditingVehicle(null);
+    setShowForm(true);
+  };
+
+  const handleEditClick = (vehicle: Vehicle) => {
+    setEditingVehicle(vehicle);
+    setShowForm(true);
+  };
+
+  const handleSubmit = async (input: NewVehicleInput) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const vehicleData = {
+        model: input.model,
+        color: input.color,
+        vin: input.vin,
+        licensePlate: input.licensePlate,
+        year: Number(input.year),
+        registrationDate: input.registrationDate,
+      };
+
+      let savedVehicle: Vehicle;
+
+      if (editingVehicle) {
+        // Update existing vehicle
+        if (input.imageFile) {
+          savedVehicle = await vehicleApi.updateVehicleWithImage(
+            editingVehicle.id,
+            vehicleData,
+            input.imageFile
+          );
+        } else {
+          savedVehicle = await vehicleApi.updateVehicle(editingVehicle.id, vehicleData);
+        }
+        
+        // Update the vehicle in the list
+        setVehicles((prev) =>
+          prev.map((v) => (v.id === savedVehicle.id ? savedVehicle : v))
+        );
+      } else {
+        // Create new vehicle
+        if (input.imageFile) {
+          savedVehicle = await vehicleApi.createVehicleWithImage(vehicleData, input.imageFile);
+        } else {
+          savedVehicle = await vehicleApi.createVehicle(vehicleData);
+        }
+        
+        // Add to the beginning of the list
+        setVehicles((prev) => [savedVehicle, ...prev]);
+      }
+
+      setSelected(savedVehicle);
+      setShowForm(false);
+      setEditingVehicle(null);
+    } catch (err: any) {
+      console.error("Failed to save vehicle:", err);
+      setError(err.response?.data?.message || "Failed to save vehicle");
+      alert(`Error: ${err.response?.data?.message || "Failed to save vehicle"}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (vehicleId: number) => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      await vehicleApi.deleteVehicle(vehicleId);
+      
+      // Remove from list
+      setVehicles((prev) => prev.filter((v) => v.id !== vehicleId));
+      
+      // Clear selection if deleted vehicle was selected
+      if (selected?.id === vehicleId) {
+        const remaining = vehicles.filter((v) => v.id !== vehicleId);
+        setSelected(remaining.length > 0 ? remaining[0] : null);
+      }
+      
+      alert("Vehicle deleted successfully");
+    } catch (err: any) {
+      console.error("Failed to delete vehicle:", err);
+      setError(err.response?.data?.message || "Failed to delete vehicle");
+      alert(`Error: ${err.response?.data?.message || "Failed to delete vehicle"}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className="mb-6 flex justify-between items-center">
+        <div className="flex items-center gap-4">
+          <h2 className="text-xl font-semibold">My Vehicles</h2>
+          {/* Debug button - Remove after testing */}
+          <button
+            onClick={debugImageUpload}
+            className="px-3 py-1 text-sm bg-purple-600 text-white rounded hover:bg-purple-700"
+            title="Test image upload with detailed console logging"
+          >
+            🐛 Debug Upload
+          </button>
+        </div>
+        {error && (
+          <div className="text-red-600 text-sm">{error}</div>
+        )}
+      </div>
+
+      {loading && <div className="text-center py-4">Loading...</div>}
+
+      <div className="mb-6">
+        <VehicleList vehicles={vehicles} onSelect={setSelected} onAdd={handleAddClick} />
+      </div>
+
+      <div className="border-t pt-6 space-y-6">
+        <div className=" gap-6">
+          <div className="lg:col-span-1">
+            <VehicleDetails 
+              vehicle={selected} 
+              onEdit={handleEditClick}
+              onDelete={handleDelete}
+            />
+          </div>
+          <div className="lg:col-span-2">
+            
+          </div>
+        </div>
+      </div>
+
+      {showForm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white rounded shadow-lg w-full max-w-2xl p-6 max-h-[90vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h4 className="text-lg font-medium">
+                {editingVehicle ? 'Edit Vehicle' : 'Add New Vehicle'}
+              </h4>
+              <button 
+                onClick={() => {
+                  setShowForm(false);
+                  setEditingVehicle(null);
+                }} 
+                className="text-gray-500 hover:text-gray-700"
+              >
+                ✕
+              </button>
+            </div>
+            <VehicleForm 
+              initial={editingVehicle ? {
+                model: editingVehicle.model,
+                color: editingVehicle.color,
+                vin: editingVehicle.vin,
+                licensePlate: editingVehicle.licensePlate,
+                year: editingVehicle.year,
+                registrationDate: editingVehicle.registrationDate,
+                imagePreview: editingVehicle.imageUrl,
+              } : undefined}
+              onSubmit={handleSubmit} 
+              onCancel={() => {
+                setShowForm(false);
+                setEditingVehicle(null);
+              }} 
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/employee/appointments/[id]/page.tsx b/src/app/employee/appointments/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/employee/appointments/page.tsx b/src/app/employee/appointments/page.tsx
new file mode 100644
index 0000000..24c773e
--- /dev/null
+++ b/src/app/employee/appointments/page.tsx
@@ -0,0 +1,337 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Calendar, Clock, MapPin, User, Briefcase, CheckCircle, AlertCircle, Phone, Mail } from 'lucide-react';
+import { getEmployeeAppointments, type Appointment } from '@/lib/api';
+
+interface Project {
+  id: string | number;
+  projectName: string;
+  customerName: string;
+  customerPhone: string;
+  customerEmail: string;
+  vehicleInfo: string;
+  startDate: string;
+  endDate: string;
+  status: string;
+  completionPercentage: number;
+  services: string[];
+}
+
+export default function EmployeeAppointmentsPage() {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<'appointments' | 'projects'>('appointments');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const appointmentsData = await getEmployeeAppointments();
+        setAppointments(appointmentsData);
+
+        // Mock projects data
+        const mockProjects: Project[] = [
+          {
+            id: 1,
+            projectName: 'Full Service Package - Toyota Camry',
+            customerName: 'John Smith',
+            customerPhone: '+1 234-567-8901',
+            customerEmail: 'john.smith@email.com',
+            vehicleInfo: '2020 Toyota Camry - ABC-1234',
+            startDate: '2025-11-01',
+            endDate: '2025-11-15',
+            status: 'In Progress',
+            completionPercentage: 65,
+            services: ['Oil Change', 'Brake Service', 'Tire Rotation', 'Engine Diagnostics'],
+          },
+          {
+            id: 2,
+            projectName: 'Engine Overhaul - Honda Civic',
+            customerName: 'Sarah Johnson',
+            customerPhone: '+1 234-567-8902',
+            customerEmail: 'sarah.j@email.com',
+            vehicleInfo: '2018 Honda Civic - XYZ-5678',
+            startDate: '2025-11-03',
+            endDate: '2025-11-20',
+            status: 'In Progress',
+            completionPercentage: 35,
+            services: ['Engine Repair', 'Transmission Check', 'Cooling System'],
+          },
+        ];
+        setProjects(mockProjects);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const getStatusBadge = (status?: string) => {
+    const statusLower = status?.toLowerCase() || 'not started';
+    switch (statusLower) {
+      case 'completed':
+        return 'bg-green-100 text-green-800';
+      case 'in progress':
+        return 'bg-blue-100 text-blue-800';
+      case 'scheduled':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'paused':
+        return 'bg-orange-100 text-orange-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading your assignments...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">Appointments & Projects</h1>
+        <p className="text-gray-600">View and manage your assigned appointments and ongoing projects</p>
+      </div>
+
+      {/* Tabs */}
+      <div className="mb-6 border-b border-gray-200">
+        <div className="flex gap-4">
+          <button
+            onClick={() => setActiveTab('appointments')}
+            className={`pb-3 px-4 font-medium transition-colors relative ${
+              activeTab === 'appointments'
+                ? 'text-blue-600 border-b-2 border-blue-600'
+                : 'text-gray-600 hover:text-gray-800'
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              <Calendar className="w-5 h-5" />
+              <span>Appointments ({appointments.length})</span>
+            </div>
+          </button>
+          <button
+            onClick={() => setActiveTab('projects')}
+            className={`pb-3 px-4 font-medium transition-colors relative ${
+              activeTab === 'projects'
+                ? 'text-blue-600 border-b-2 border-blue-600'
+                : 'text-gray-600 hover:text-gray-800'
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              <Briefcase className="w-5 h-5" />
+              <span>Projects ({projects.length})</span>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* Appointments Tab */}
+      {activeTab === 'appointments' && (
+        <div>
+          {appointments.length === 0 ? (
+            <div className="bg-white rounded-lg shadow p-12 text-center">
+              <Calendar className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-lg font-semibold text-gray-800 mb-2">No Appointments</h3>
+              <p className="text-gray-600">You don't have any assigned appointments at the moment.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              {appointments.map((appointment) => (
+                <div
+                  key={appointment.id}
+                  className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6"
+                >
+                  {/* Header */}
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex-1">
+                      <h3 className="text-lg font-bold text-gray-800 mb-1">
+                        {appointment.serviceName}
+                      </h3>
+                      <span className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${getStatusBadge(appointment.status)}`}>
+                        {appointment.status || 'Not Started'}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Customer Info */}
+                  <div className="space-y-2 mb-4 pb-4 border-b border-gray-200">
+                    <div className="flex items-center gap-2 text-sm text-gray-700">
+                      <User className="w-4 h-4 text-gray-500" />
+                      <span className="font-medium">{appointment.customerName}</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm text-gray-600">
+                      <MapPin className="w-4 h-4 text-gray-500" />
+                      <span>{appointment.location}</span>
+                    </div>
+                  </div>
+
+                  {/* Progress */}
+                  <div className="mb-4">
+                    <div className="flex justify-between text-sm text-gray-600 mb-2">
+                      <span className="font-medium">Progress</span>
+                      <span className="font-semibold text-blue-600">
+                        {appointment.progressPercentage || 0}%
+                      </span>
+                    </div>
+                    <div className="w-full bg-gray-200 rounded-full h-2.5">
+                      <div
+                        className="bg-blue-600 h-2.5 rounded-full transition-all duration-500"
+                        style={{ width: `${appointment.progressPercentage || 0}%` }}
+                      ></div>
+                    </div>
+                  </div>
+
+                  {/* Time Info */}
+                  <div className="flex items-center justify-between text-sm">
+                    <div className="flex items-center gap-2 text-gray-700">
+                      <Clock className="w-4 h-4 text-gray-500" />
+                      <span>
+                        <span className="font-semibold">{appointment.actualHours?.toFixed(1) || 0}h</span>
+                        <span className="text-gray-500"> / {appointment.estimatedHours || 0}h</span>
+                      </span>
+                    </div>
+                    {appointment.timerRunning && (
+                      <span className="flex items-center gap-1 text-green-600 font-medium">
+                        <div className="w-2 h-2 bg-green-600 rounded-full animate-pulse"></div>
+                        Timer Active
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Projects Tab */}
+      {activeTab === 'projects' && (
+        <div>
+          {projects.length === 0 ? (
+            <div className="bg-white rounded-lg shadow p-12 text-center">
+              <Briefcase className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-lg font-semibold text-gray-800 mb-2">No Projects</h3>
+              <p className="text-gray-600">You don't have any assigned projects at the moment.</p>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {projects.map((project) => (
+                <div
+                  key={project.id}
+                  className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6"
+                >
+                  {/* Header */}
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex-1">
+                      <h3 className="text-xl font-bold text-gray-800 mb-2">
+                        {project.projectName}
+                      </h3>
+                      <span className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${getStatusBadge(project.status)}`}>
+                        {project.status}
+                      </span>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-2xl font-bold text-blue-600">
+                        {project.completionPercentage}%
+                      </div>
+                      <div className="text-xs text-gray-500">Complete</div>
+                    </div>
+                  </div>
+
+                  {/* Vehicle Info */}
+                  <div className="bg-gray-50 rounded-lg p-4 mb-4">
+                    <div className="flex items-center gap-2 text-sm text-gray-700">
+                      <Briefcase className="w-4 h-4 text-gray-500" />
+                      <span className="font-medium">{project.vehicleInfo}</span>
+                    </div>
+                  </div>
+
+                  {/* Customer Details */}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 pb-4 border-b border-gray-200">
+                    <div>
+                      <div className="text-xs text-gray-500 mb-1">Customer</div>
+                      <div className="flex items-center gap-2 text-sm text-gray-700">
+                        <User className="w-4 h-4 text-gray-500" />
+                        <span className="font-medium">{project.customerName}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-xs text-gray-500 mb-1">Contact</div>
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2 text-sm text-gray-600">
+                          <Phone className="w-4 h-4 text-gray-500" />
+                          <span>{project.customerPhone}</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-gray-600">
+                          <Mail className="w-4 h-4 text-gray-500" />
+                          <span>{project.customerEmail}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Timeline */}
+                  <div className="grid grid-cols-2 gap-4 mb-4">
+                    <div>
+                      <div className="text-xs text-gray-500 mb-1">Start Date</div>
+                      <div className="flex items-center gap-2 text-sm text-gray-700 font-medium">
+                        <Calendar className="w-4 h-4 text-green-600" />
+                        {new Date(project.startDate).toLocaleDateString()}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-xs text-gray-500 mb-1">End Date</div>
+                      <div className="flex items-center gap-2 text-sm text-gray-700 font-medium">
+                        <Calendar className="w-4 h-4 text-red-600" />
+                        {new Date(project.endDate).toLocaleDateString()}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Progress Bar */}
+                  <div className="mb-4">
+                    <div className="w-full bg-gray-200 rounded-full h-3">
+                      <div
+                        className="bg-gradient-to-r from-blue-500 to-blue-600 h-3 rounded-full transition-all duration-500"
+                        style={{ width: `${project.completionPercentage}%` }}
+                      ></div>
+                    </div>
+                  </div>
+
+                  {/* Services List */}
+                  <div>
+                    <div className="text-sm font-semibold text-gray-700 mb-2">
+                      Included Services:
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {project.services.map((service, index) => (
+                        <span
+                          key={index}
+                          className="px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-medium flex items-center gap-1"
+                        >
+                          <CheckCircle className="w-3 h-3" />
+                          {service}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/employee/dashboard/page.tsx b/src/app/employee/dashboard/page.tsx
new file mode 100644
index 0000000..24a1e98
--- /dev/null
+++ b/src/app/employee/dashboard/page.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Clock, CheckCircle, AlertCircle, TrendingUp } from 'lucide-react';
+import { getEmployeeAppointments, type Appointment } from '@/lib/api';
+
+export default function EmployeeDashboard() {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await getEmployeeAppointments();
+        setAppointments(data);
+      } catch (error) {
+        console.error('Error fetching appointments:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // Calculate stats
+  const totalAppointments = appointments.length;
+  const inProgress = appointments.filter(a => a.status?.toLowerCase() === 'in progress').length;
+  const completedToday = appointments.filter(a => a.status?.toLowerCase() === 'completed').length;
+  const totalHoursLogged = appointments.reduce((sum, a) => sum + (a.actualHours || 0), 0);
+
+  const getStatusBadge = (status?: string) => {
+    const statusLower = status?.toLowerCase() || 'not started';
+    switch (statusLower) {
+      case 'completed':
+        return 'bg-green-100 text-green-800';
+      case 'in progress':
+        return 'bg-blue-100 text-blue-800';
+      case 'paused':
+        return 'bg-yellow-100 text-yellow-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-6">Employee Dashboard</h1>
+      
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-600 text-sm font-medium">Assigned Appointments</h3>
+            <AlertCircle className="w-5 h-5 text-blue-600" />
+          </div>
+          <p className="text-3xl font-bold text-blue-600">{totalAppointments}</p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-600 text-sm font-medium">In Progress</h3>
+            <TrendingUp className="w-5 h-5 text-orange-600" />
+          </div>
+          <p className="text-3xl font-bold text-orange-600">{inProgress}</p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-600 text-sm font-medium">Completed</h3>
+            <CheckCircle className="w-5 h-5 text-green-600" />
+          </div>
+          <p className="text-3xl font-bold text-green-600">{completedToday}</p>
+        </div>
+      </div>
+
+      {/* Recent Appointments */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-semibold mb-4">Recent Appointments</h2>
+        
+        {appointments.length === 0 ? (
+          <p className="text-gray-500 text-center py-8">No appointments assigned yet.</p>
+        ) : (
+          <div className="space-y-3">
+            {appointments.map((appointment) => (
+              <div 
+                key={appointment.id} 
+                className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-gray-800 mb-1">
+                      {appointment.serviceName}
+                    </h3>
+                    <p className="text-sm text-gray-600 mb-2">
+                      {appointment.customerName} • {appointment.location}
+                    </p>
+                    
+                    {/* Progress Bar */}
+                    <div className="mb-2">
+                      <div className="flex justify-between text-xs text-gray-600 mb-1">
+                        <span>Progress</span>
+                        <span>{appointment.progressPercentage || 0}%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-2">
+                        <div 
+                          className="bg-blue-600 h-2 rounded-full transition-all duration-500"
+                          style={{ width: `${appointment.progressPercentage || 0}%` }}
+                        ></div>
+                      </div>
+                    </div>
+
+                    {/* Time and Status */}
+                    <div className="flex items-center gap-4 text-sm">
+                      <span className="text-gray-600 flex items-center gap-1">
+                        <Clock className="w-4 h-4" />
+                        {appointment.actualHours?.toFixed(1) || 0}h / {appointment.estimatedHours || 0}h
+                      </span>
+                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusBadge(appointment.status)}`}>
+                        {appointment.status || 'Not Started'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/employee/layout.tsx b/src/app/employee/layout.tsx
new file mode 100644
index 0000000..f2312bb
--- /dev/null
+++ b/src/app/employee/layout.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import EmployeeSidebar from '@/components/layout/EmployeeSidebar';
+import UserProfileCard from '@/components/layout/UserProfileCard';
+
+export default function EmployeeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen bg-gray-50">
+      <EmployeeSidebar />
+      <main className="flex-1 ml-64">
+        {/* Top Bar with User Profile */}
+        <div className="bg-white border-b border-gray-200 px-6 py-4 flex justify-end items-center sticky top-0 z-10">
+          <UserProfileCard useCurrentUser={true} />
+        </div>
+        
+        {/* Main Content */}
+        <div>{children}</div>
+      </main>
+    </div>
+  );
+}
diff --git a/src/app/employee/profile/page.tsx b/src/app/employee/profile/page.tsx
new file mode 100644
index 0000000..0807ef3
--- /dev/null
+++ b/src/app/employee/profile/page.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Edit2, Save, X } from 'lucide-react';
+import EmployeeProfileCard from '@/components/employee/profile/EmployeeProfileCard';
+import EmployeeProfileForm from '@/components/employee/profile/EmployeeProfileForm';
+import EmployeeStatsCard from '@/components/employee/profile/EmployeeStatsCard';
+
+interface EmployeeProfile {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+  employeeId: string;
+  position: string;
+  department: string;
+  joinedDate: string;
+  specialization: string[];
+  photo?: string;
+}
+
+export default function EmployeeProfilePage() {
+  const [profile, setProfile] = useState<EmployeeProfile>({
+    id: '1',
+    name: 'Mike Wilson',
+    email: 'employee@automobile.com',
+    phone: '+1 234-567-8903',
+    address: '789 Oak Street, Springfield, IL 62701',
+    employeeId: 'EMP-2024-001',
+    position: 'Senior Technician',
+    department: 'Service Department',
+    joinedDate: '2022-03-15',
+    specialization: ['Engine Repair', 'Brake Systems', 'Electrical Systems', 'Diagnostics'],
+    photo: '',
+  });
+
+  const [photoPreview, setPhotoPreview] = useState<string>('');
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [editedProfile, setEditedProfile] = useState<EmployeeProfile>(profile);
+
+  useEffect(() => {
+    // Load profile from localStorage or API
+    const savedProfile = localStorage.getItem('employeeProfile');
+    if (savedProfile) {
+      const parsed = JSON.parse(savedProfile);
+      setProfile(parsed);
+      setEditedProfile(parsed);
+      if (parsed.photo) {
+        setPhotoPreview(parsed.photo);
+      }
+    }
+  }, []);
+
+  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const result = reader.result as string;
+        setPhotoPreview(result);
+        setEditedProfile({ ...editedProfile, photo: result });
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleEdit = () => {
+    setIsEditing(true);
+    setEditedProfile(profile);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditedProfile(profile);
+    setPhotoPreview(profile.photo || '');
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    setProfile(editedProfile);
+    localStorage.setItem('employeeProfile', JSON.stringify(editedProfile));
+    setIsEditing(false);
+    setIsSaving(false);
+  };
+
+  const handleInputChange = (field: keyof EmployeeProfile, value: string) => {
+    setEditedProfile({ ...editedProfile, [field]: value });
+  };
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold mb-2">My Profile</h1>
+          <p className="text-gray-600">Manage your personal and professional information</p>
+        </div>
+        {!isEditing ? (
+          <button
+            onClick={handleEdit}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            <Edit2 className="w-4 h-4" />
+            Edit Profile
+          </button>
+        ) : (
+          <div className="flex gap-2">
+            <button
+              onClick={handleCancel}
+              className="flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+            >
+              <X className="w-4 h-4" />
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:bg-green-400"
+            >
+              <Save className="w-4 h-4" />
+              {isSaving ? 'Saving...' : 'Save Changes'}
+            </button>
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left Column - Photo and Basic Info */}
+        <div className="lg:col-span-1">
+          <EmployeeProfileCard
+            name={editedProfile.name}
+            position={editedProfile.position}
+            department={editedProfile.department}
+            employeeId={editedProfile.employeeId}
+            joinedDate={editedProfile.joinedDate}
+            specialization={editedProfile.specialization}
+            photo={editedProfile.photo}
+            photoPreview={photoPreview}
+            isEditing={isEditing}
+            onPhotoChange={handlePhotoChange}
+          />
+        
+          {/* <div className="mt-6">
+            <EmployeeStatsCard />
+          </div> */}
+        </div>
+        
+
+        {/* Right Column - Detailed Information */}
+        <div className="lg:col-span-2">
+          <EmployeeProfileForm
+            profile={isEditing ? editedProfile : profile}
+            isEditing={isEditing}
+            onInputChange={handleInputChange}
+          />
+
+          
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/employee/progress/[appointmentId]/page.tsx b/src/app/employee/progress/[appointmentId]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/employee/progress/page.tsx b/src/app/employee/progress/page.tsx
new file mode 100644
index 0000000..82cdab6
--- /dev/null
+++ b/src/app/employee/progress/page.tsx
@@ -0,0 +1,577 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { 
+  Clock, 
+  Play, 
+  Pause, 
+  CheckCircle, 
+  ClipboardList
+} from 'lucide-react';
+import { AppointmentProgress, ProgressUpdate, TimeLog } from '@/types/progress.types';
+import {
+  getEmployeeAppointments,
+  startTimer,
+  pauseTimer,
+  logTime,
+  updateProgress,
+  type Appointment
+} from '@/lib/api';
+
+// Modal Components
+function UpdateStatusModal({ 
+  isOpen, 
+  onClose, 
+  appointment, 
+  onUpdate 
+}: { 
+  isOpen: boolean; 
+  onClose: () => void; 
+  appointment: AppointmentProgress | null;
+  onUpdate: (data: ProgressUpdate) => Promise<void>;
+}) {
+  const [stage, setStage] = useState('');
+  const [percentage, setPercentage] = useState(0);
+  const [remarks, setRemarks] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (appointment) {
+      setStage(appointment.status);
+      setPercentage(appointment.progressPercentage);
+      setRemarks(appointment.latestRemarks || '');
+    }
+  }, [appointment]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (percentage < 0 || percentage > 100) {
+      alert('Percentage must be between 0 and 100');
+      return;
+    }
+    setLoading(true);
+    try {
+      await onUpdate({ stage, percentage, remarks });
+      onClose();
+    } catch (error) {
+      console.error('Failed to update status:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isOpen || !appointment) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-xl">
+        <h2 className="text-xl font-bold mb-4 text-gray-800">Update Progress Status</h2>
+        <p className="text-sm text-gray-600 mb-4">{appointment.serviceName}</p>
+        
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Stage
+            </label>
+            <select
+              value={stage}
+              onChange={(e) => setStage(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            >
+              <option value="">Select stage</option>
+              <option value="not started">Not Started</option>
+              <option value="in progress">In Progress</option>
+              <option value="paused">Paused</option>
+              <option value="completed">Completed</option>
+            </select>
+          </div>
+
+          <div className="mb-4">
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Progress Percentage (0-100)
+            </label>
+            <input
+              type="number"
+              min="0"
+              max="100"
+              value={percentage}
+              onChange={(e) => setPercentage(Number(e.target.value))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+          </div>
+
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Remarks
+            </label>
+            <textarea
+              value={remarks}
+              onChange={(e) => setRemarks(e.target.value)}
+              rows={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Add any notes or comments..."
+            />
+          </div>
+
+          <div className="flex gap-3 justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition"
+              disabled={loading}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition disabled:opacity-50"
+              disabled={loading}
+            >
+              {loading ? 'Updating...' : 'Update Status'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function LogTimeModal({ 
+  isOpen, 
+  onClose, 
+  appointment, 
+  onLog 
+}: { 
+  isOpen: boolean; 
+  onClose: () => void; 
+  appointment: AppointmentProgress | null;
+  onLog: (data: TimeLog) => Promise<void>;
+}) {
+  const [hours, setHours] = useState(0);
+  const [description, setDescription] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hours <= 0) {
+      alert('Hours must be greater than 0');
+      return;
+    }
+    setLoading(true);
+    try {
+      await onLog({ hours, description });
+      setHours(0);
+      setDescription('');
+      onClose();
+    } catch (error) {
+      console.error('Failed to log time:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isOpen || !appointment) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-xl">
+        <h2 className="text-xl font-bold mb-4 text-gray-800">Log Work Time</h2>
+        <p className="text-sm text-gray-600 mb-4">{appointment.serviceName}</p>
+        
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Hours Worked
+            </label>
+            <input
+              type="number"
+              step="0.1"
+              min="0.1"
+              value={hours || ''}
+              onChange={(e) => setHours(Number(e.target.value))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="e.g., 1.5"
+              required
+            />
+          </div>
+
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Description
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="What work was completed?"
+              required
+            />
+          </div>
+
+          <div className="flex gap-3 justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition"
+              disabled={loading}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition disabled:opacity-50"
+              disabled={loading}
+            >
+              {loading ? 'Logging...' : 'Log Time'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// Service Card Component
+function ServiceProgressCard({ 
+  appointment, 
+  onTimerToggle, 
+  onLogTime, 
+  onUpdateStatus 
+}: {
+  appointment: AppointmentProgress;
+  onTimerToggle: (id: number) => void;
+  onLogTime: (appointment: AppointmentProgress) => void;
+  onUpdateStatus: (appointment: AppointmentProgress) => void;
+}) {
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'in progress':
+        return 'bg-green-500';
+      case 'paused':
+        return 'bg-yellow-500';
+      case 'completed':
+        return 'bg-blue-500';
+      default:
+        return 'bg-gray-400';
+    }
+  };
+
+  const getTagColor = (tag: string) => {
+    return tag.toLowerCase() === 'appointment' 
+      ? 'bg-purple-100 text-purple-700'
+      : 'bg-blue-100 text-blue-700';
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
+      {/* Header */}
+      <div className="flex justify-between items-start mb-3">
+        <div className="flex-1">
+          <h3 className="text-lg font-bold text-gray-800 mb-1">
+            {appointment.serviceName}
+          </h3>
+          <p className="text-sm text-gray-600">{appointment.location}</p>
+        </div>
+        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${getTagColor(appointment.tag)}`}>
+          {appointment.tag}
+        </span>
+      </div>
+
+      {/* Customer */}
+      <p className="text-sm text-gray-700 mb-4">
+        <span className="font-medium">Customer:</span> {appointment.customerName}
+      </p>
+
+      {/* Progress Bar */}
+      <div className="mb-3">
+        <div className="flex justify-between text-sm mb-1">
+          <span className="text-gray-600">Progress</span>
+          <span className="font-semibold text-gray-800">{appointment.progressPercentage}%</span>
+        </div>
+        <div className="w-full bg-gray-200 rounded-full h-2.5">
+          <div 
+            className="bg-blue-900 h-2.5 rounded-full transition-all duration-500"
+            style={{ width: `${appointment.progressPercentage}%` }}
+          ></div>
+        </div>
+      </div>
+
+      {/* Time Progress */}
+      <p className="text-sm text-gray-600 mb-4">
+        <Clock className="inline w-4 h-4 mr-1" />
+        <span className="font-medium">{appointment.hoursLogged.toFixed(2)}h</span> / {appointment.estimatedHours}h
+      </p>
+
+      {/* Status */}
+      <div className="flex items-center gap-2 mb-4">
+        <div className={`w-2.5 h-2.5 rounded-full ${getStatusColor(appointment.status)}`}></div>
+        <span className="text-sm font-medium capitalize text-gray-700">
+          {appointment.status}
+        </span>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex gap-2">
+        <button
+          onClick={() => onTimerToggle(Number(appointment.appointmentId))}
+          className={`flex-1 px-4 py-2 rounded-md text-white font-medium transition flex items-center justify-center gap-2 ${
+            appointment.timerRunning 
+              ? 'bg-red-500 hover:bg-red-600' 
+              : 'bg-green-500 hover:bg-green-600'
+          }`}
+        >
+          {appointment.timerRunning ? (
+            <>
+              <Pause className="w-4 h-4" />
+              Pause
+            </>
+          ) : (
+            <>
+              <Play className="w-4 h-4" />
+              Start
+            </>
+          )}
+        </button>
+
+        <button
+          onClick={() => onLogTime(appointment)}
+          className="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition flex items-center justify-center gap-2"
+          title="Log Time"
+        >
+          <Clock className="w-4 h-4" />
+        </button>
+
+        <button
+          onClick={() => onUpdateStatus(appointment)}
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center gap-2"
+        >
+          <CheckCircle className="w-4 h-4" />
+          Update
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Main Page Component
+export default function EmployeeProgressPage() {
+  const [appointments, setAppointments] = useState<AppointmentProgress[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedAppointment, setSelectedAppointment] = useState<AppointmentProgress | null>(null);
+  const [showLogTimeModal, setShowLogTimeModal] = useState(false);
+  const [showUpdateStatusModal, setShowUpdateStatusModal] = useState(false);
+
+  // Transform API appointment data to AppointmentProgress format
+  const transformAppointment = (item: Appointment): AppointmentProgress => ({
+    appointmentId: typeof item.id === 'string' ? parseInt(item.id) : item.id,
+    serviceName: item.serviceName || 'Service',
+    location: item.location || 'Location TBD',
+    customerName: item.customerName || 'Unknown Customer',
+    tag: item.type || 'Appointment',
+    progressPercentage: item.progressPercentage || 0,
+    hoursLogged: item.actualHours || 0,
+    estimatedHours: item.estimatedHours || 1,
+    status: (item.status?.toLowerCase() || 'not started') as any,
+    timerRunning: item.timerRunning || false,
+    latestRemarks: item.notes || '',
+  });
+
+  // Fetch appointments from real API
+  const fetchAppointments = async () => {
+    try {
+      setError(null);
+      const data = await getEmployeeAppointments();
+      const transformedData = data.map(transformAppointment);
+      setAppointments(transformedData);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch appointments';
+      console.error('Error fetching appointments:', err);
+      setError(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAppointments();
+    
+    // Auto-refresh every 30 seconds
+    const interval = setInterval(fetchAppointments, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Timer toggle handler
+  const handleTimerToggle = async (appointmentId: number) => {
+    const appointment = appointments.find(a => a.appointmentId === appointmentId);
+    if (!appointment) return;
+
+    const isStarting = !appointment.timerRunning;
+    
+    try {
+      if (isStarting) {
+        await startTimer(appointmentId);
+      } else {
+        await pauseTimer(appointmentId);
+      }
+
+      // Optimistic update
+      setAppointments(prev =>
+        prev.map(a =>
+          a.appointmentId === appointmentId
+            ? { 
+                ...a, 
+                timerRunning: isStarting, 
+                status: isStarting ? 'in progress' : 'paused' 
+              }
+            : a
+        )
+      );
+    } catch (err) {
+      console.error(`Error ${isStarting ? 'starting' : 'pausing'} timer:`, err);
+      alert(`Failed to ${isStarting ? 'start' : 'pause'} timer. Please try again.`);
+    }
+  };
+
+  // Log time handler
+  const handleLogTime = async (data: TimeLog) => {
+    if (!selectedAppointment) return;
+
+    try {
+      await logTime(selectedAppointment.appointmentId, data);
+
+      // Update local state
+      setAppointments(prev =>
+        prev.map(a =>
+          a.appointmentId === selectedAppointment.appointmentId
+            ? { ...a, hoursLogged: a.hoursLogged + data.hours }
+            : a
+        )
+      );
+
+      alert('Time logged successfully!');
+    } catch (err) {
+      console.error('Error logging time:', err);
+      alert('Failed to log time. Please try again.');
+      throw err;
+    }
+  };
+
+  // Update status handler
+  const handleUpdateStatus = async (data: ProgressUpdate) => {
+    if (!selectedAppointment) return;
+
+    try {
+      await updateProgress(selectedAppointment.appointmentId, data);
+
+      // Update local state
+      setAppointments(prev =>
+        prev.map(a =>
+          a.appointmentId === selectedAppointment.appointmentId
+            ? { 
+                ...a, 
+                progressPercentage: data.percentage, 
+                status: data.stage.toLowerCase() as any,
+                latestRemarks: data.remarks 
+              }
+            : a
+        )
+      );
+
+      alert('Status updated successfully!');
+    } catch (err) {
+      console.error('Error updating status:', err);
+      alert('Failed to update status. Please try again.');
+      throw err;
+    }
+  };
+
+  return (
+    <div className="p-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-800 mb-2">Service Progress</h1>
+          <p className="text-gray-600">Track time and update work status</p>
+        </div>
+
+        {/* Loading State */}
+        {loading && (
+          <div className="flex items-center justify-center h-64">
+            <div className="text-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+              <p className="text-gray-600">Loading appointments...</p>
+            </div>
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && !loading && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+            <p className="text-red-800">
+              <strong>Error:</strong> {error}
+            </p>
+            <p className="text-red-700 text-sm mt-2">
+              Please ensure the backend API is running at{' '}
+              <code className="bg-red-100 px-2 py-1 rounded">
+                {process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8081'}
+              </code>
+            </p>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {!loading && !error && appointments.length === 0 && (
+          <div className="bg-white rounded-lg shadow-md p-12 text-center">
+            <ClipboardList className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold text-gray-700 mb-2">No Appointments</h3>
+            <p className="text-gray-600">You don't have any assigned appointments yet.</p>
+          </div>
+        )}
+
+        {/* Service Cards Grid */}
+        {!loading && appointments.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {appointments.map((appointment) => (
+              <ServiceProgressCard
+                key={appointment.appointmentId}
+                appointment={appointment}
+                onTimerToggle={handleTimerToggle}
+                onLogTime={(apt) => {
+                  setSelectedAppointment(apt);
+                  setShowLogTimeModal(true);
+                }}
+                onUpdateStatus={(apt) => {
+                  setSelectedAppointment(apt);
+                  setShowUpdateStatusModal(true);
+                }}
+              />
+            ))}
+          </div>
+        )}
+
+      {/* Modals */}
+      <LogTimeModal
+        isOpen={showLogTimeModal}
+        onClose={() => {
+          setShowLogTimeModal(false);
+          setSelectedAppointment(null);
+        }}
+        appointment={selectedAppointment}
+        onLog={handleLogTime}
+      />
+
+      <UpdateStatusModal
+        isOpen={showUpdateStatusModal}
+        onClose={() => {
+          setShowUpdateStatusModal(false);
+          setSelectedAppointment(null);
+        }}
+        appointment={selectedAppointment}
+        onUpdate={handleUpdateStatus}
+      />
+    </div>
+  );
+}
diff --git a/src/app/employee/time-logs/[appointmentId]/page.tsx b/src/app/employee/time-logs/[appointmentId]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/employee/time-logs/page.tsx b/src/app/employee/time-logs/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..07a0fa7 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..7b2b337 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,17 +1,12 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --background: #ffffff;
   --foreground: #171717;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
@@ -20,7 +15,22 @@
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  color: rgb(var(--foreground));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background))
+    )
+    rgb(var(--background));
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7fa87e..f830328 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { AuthProvider } from "./context/AuthContext";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Auto Mobile",
+  description: "Automobile Service Management System",
 };
 
 export default function RootLayout({
@@ -27,7 +28,9 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <AuthProvider>
+          {children}
+        </AuthProvider>
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a932894..47a5381 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,103 +1,5 @@
-import Image from "next/image";
+import { redirect } from 'next/navigation';
 
 export default function Home() {
-  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
+  redirect('/auth/login');
 }
diff --git a/src/components/appointments/AppointmentCard.tsx b/src/components/appointments/AppointmentCard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/appointments/AppointmentList.tsx b/src/components/appointments/AppointmentList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/appointments/BookingForm.tsx b/src/components/appointments/BookingForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/appointments/BookingSummary.tsx b/src/components/appointments/BookingSummary.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/appointments/ProgressTracker.tsx b/src/components/appointments/ProgressTracker.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/auth/ForgotPasswordForm.tsx b/src/components/auth/ForgotPasswordForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/auth/ProtectedRoute.tsx b/src/components/auth/ProtectedRoute.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/auth/ResetPasswordForm.tsx b/src/components/auth/ResetPasswordForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/auth/RoleGuard.tsx b/src/components/auth/RoleGuard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/auth/SignupForm.tsx b/src/components/auth/SignupForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/customer/profile/ProfileForm.tsx b/src/components/customer/profile/ProfileForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/customer/vehicles/VehicleCard.tsx b/src/components/customer/vehicles/VehicleCard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/customer/vehicles/VehicleForm.tsx b/src/components/customer/vehicles/VehicleForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/customer/vehicles/VehicleList.tsx b/src/components/customer/vehicles/VehicleList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/admin/AdminDashboard.tsx b/src/components/dashboard/admin/AdminDashboard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/customer/CustomerDashboard.tsx b/src/components/dashboard/customer/CustomerDashboard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/customer/UpcomingAppointments.tsx b/src/components/dashboard/customer/UpcomingAppointments.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/customer/VehiclesList.tsx b/src/components/dashboard/customer/VehiclesList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/employee/EmployeeDashboard.tsx b/src/components/dashboard/employee/EmployeeDashboard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/employee/TodayAppointments.tsx b/src/components/dashboard/employee/TodayAppointments.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/employee/profile/EmployeeProfileCard.tsx b/src/components/employee/profile/EmployeeProfileCard.tsx
new file mode 100644
index 0000000..acb80e3
--- /dev/null
+++ b/src/components/employee/profile/EmployeeProfileCard.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import React from 'react';
+import { Camera, User, IdCard, Calendar } from 'lucide-react';
+
+interface EmployeeProfileCardProps {
+  name: string;
+  position: string;
+  department: string;
+  employeeId: string;
+  joinedDate: string;
+  specialization: string[];
+  photo?: string;
+  photoPreview?: string;
+  isEditing: boolean;
+  onPhotoChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function EmployeeProfileCard({
+  name,
+  position,
+  department,
+  employeeId,
+  joinedDate,
+  specialization,
+  photo,
+  photoPreview,
+  isEditing,
+  onPhotoChange,
+}: EmployeeProfileCardProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6">
+      {/* Photo Upload */}
+      <div className="relative mb-6">
+        <div className="w-32 h-32 mx-auto rounded-full overflow-hidden bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center relative">
+          {photoPreview || photo ? (
+            <img
+              src={photoPreview || photo}
+              alt="Profile"
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <User className="w-16 h-16 text-white" />
+          )}
+          {isEditing && (
+            <label className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 cursor-pointer hover:bg-opacity-60 transition-opacity">
+              <Camera className="w-8 h-8 text-white" />
+              <input
+                type="file"
+                accept="image/*"
+                onChange={onPhotoChange}
+                className="hidden"
+              />
+            </label>
+          )}
+        </div>
+        {isEditing && (
+          <p className="text-xs text-gray-500 text-center mt-2">
+            Click to upload photo
+          </p>
+        )}
+      </div>
+
+      {/* Name and Position */}
+      <div className="text-center mb-4">
+        <h2 className="text-xl font-bold text-gray-800 mb-1">{name}</h2>
+        <p className="text-blue-600 font-medium">{position}</p>
+        <p className="text-gray-600 text-sm">{department}</p>
+      </div>
+
+      {/* Employee ID */}
+      <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-4 mb-4">
+        <div className="flex items-center justify-center gap-2 text-sm">
+          <IdCard className="w-4 h-4 text-blue-600" />
+          <span className="text-gray-600">Employee ID:</span>
+          <span className="font-bold text-gray-800">{employeeId}</span>
+        </div>
+      </div>
+
+      {/* Joined Date */}
+      <div className="flex items-center justify-center gap-2 text-sm text-gray-600 mb-4">
+        <Calendar className="w-4 h-4" />
+        <span>
+          Joined{' '}
+          {new Date(joinedDate).toLocaleDateString('en-US', {
+            month: 'long',
+            year: 'numeric',
+          })}
+        </span>
+      </div>
+
+      {/* Specializations */}
+      <div>
+        
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/employee/profile/EmployeeProfileForm.tsx b/src/components/employee/profile/EmployeeProfileForm.tsx
new file mode 100644
index 0000000..56c3311
--- /dev/null
+++ b/src/components/employee/profile/EmployeeProfileForm.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import React from 'react';
+import { User, Mail, Phone, MapPin, Briefcase } from 'lucide-react';
+
+interface EmployeeProfile {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+  employeeId: string;
+  position: string;
+  department: string;
+  joinedDate: string;
+  specialization: string[];
+  photo?: string;
+}
+
+interface EmployeeProfileFormProps {
+  profile: EmployeeProfile;
+  isEditing: boolean;
+  onInputChange: (field: keyof EmployeeProfile, value: string) => void;
+}
+
+export default function EmployeeProfileForm({
+  profile,
+  isEditing,
+  onInputChange,
+}: EmployeeProfileFormProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6">
+      <h3 className="text-lg font-bold text-gray-800 mb-6 pb-3 border-b border-gray-200">
+        Personal Information
+      </h3>
+
+      <div className="space-y-6">
+        {/* Full Name */}
+        <div>
+          {isEditing ? (
+            <div className="relative">
+              <User className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+              <input
+                type="text"
+                value={profile.name}
+                onChange={(e) => onInputChange('name', e.target.value)}
+                placeholder="Full Name"
+                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+          ) : (
+            <div className="flex items-center gap-3 px-4 py-3 bg-gray-50 rounded-lg">
+              <User className="w-5 h-5 text-gray-400" />
+              <div className="flex-1">
+                <span className="text-xs text-gray-500 block">Full Name</span>
+                <span className="text-gray-800 font-medium">{profile.name}</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Email */}
+        <div>
+          <div className="flex items-center gap-3 px-4 py-3 bg-gray-100 rounded-lg cursor-not-allowed">
+            <Mail className="w-5 h-5 text-gray-400" />
+            <div className="flex-1">
+              <span className="text-xs text-gray-500 block">Email Address</span>
+              <span className="text-gray-600">{profile.email}</span>
+            </div>
+            <span className="text-xs text-gray-500 italic">Cannot be changed</span>
+          </div>
+        </div>
+
+        {/* Phone */}
+        <div>
+          {isEditing ? (
+            <div className="relative">
+              <Phone className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+              <input
+                type="tel"
+                value={profile.phone}
+                onChange={(e) => onInputChange('phone', e.target.value)}
+                placeholder="Phone Number"
+                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+          ) : (
+            <div className="flex items-center gap-3 px-4 py-3 bg-gray-50 rounded-lg">
+              <Phone className="w-5 h-5 text-gray-400" />
+              <div className="flex-1">
+                <span className="text-xs text-gray-500 block">Phone Number</span>
+                <span className="text-gray-800 font-medium">{profile.phone}</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Address */}
+        <div>
+          {isEditing ? (
+            <div className="relative">
+              <MapPin className="w-5 h-5 text-gray-400 absolute left-3 top-3" />
+              <textarea
+                value={profile.address}
+                onChange={(e) => onInputChange('address', e.target.value)}
+                placeholder="Address"
+                rows={3}
+                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+              />
+            </div>
+          ) : (
+            <div className="flex items-start gap-3 px-4 py-3 bg-gray-50 rounded-lg">
+              <MapPin className="w-5 h-5 text-gray-400 mt-0.5" />
+              <div className="flex-1">
+                <span className="text-xs text-gray-500 block">Address</span>
+                <span className="text-gray-800 font-medium">{profile.address}</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Position */}
+        <div>
+          <div className="flex items-center gap-3 px-4 py-3 bg-gray-100 rounded-lg cursor-not-allowed">
+            <Briefcase className="w-5 h-5 text-gray-400" />
+            <div className="flex-1">
+              <span className="text-xs text-gray-500 block">Position</span>
+              <span className="text-gray-600">{profile.position}</span>
+            </div>
+            <span className="text-xs text-gray-500 italic">Managed by HR</span>
+          </div>
+        </div>
+
+        {/* Department */}
+        <div>
+          <div className="flex items-center gap-3 px-4 py-3 bg-gray-100 rounded-lg cursor-not-allowed">
+            <Briefcase className="w-5 h-5 text-gray-400" />
+            <div className="flex-1">
+              <span className="text-xs text-gray-500 block">Department</span>
+              <span className="text-gray-600">{profile.department}</span>
+            </div>
+            <span className="text-xs text-gray-500 italic">Managed by HR</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/employee/profile/EmployeeStatsCard.tsx b/src/components/employee/profile/EmployeeStatsCard.tsx
new file mode 100644
index 0000000..bf5fe32
--- /dev/null
+++ b/src/components/employee/profile/EmployeeStatsCard.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import React from 'react';
+
+interface StatItem {
+  value: string | number;
+  label: string;
+}
+
+interface EmployeeStatsCardProps {
+  stats?: StatItem[];
+}
+
+export default function EmployeeStatsCard({ stats }: EmployeeStatsCardProps) {
+  const defaultStats: StatItem[] = [
+    { value: 156, label: 'Services Completed' },
+    { value: 4.8, label: 'Average Rating' },
+    { value: 2.5, label: 'Years of Service' },
+  ];
+
+  const displayStats = stats || defaultStats;
+
+  return (
+    <div className="bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-md p-6 text-white">
+      <h3 className="text-lg font-bold mb-4">Quick Stats</h3>
+      <div className="grid grid-cols-3 gap-4">
+        {displayStats.map((stat, index) => (
+          <div key={index} className="text-center">
+            <div className="text-3xl font-bold mb-1">{stat.value}</div>
+            <div className="text-sm text-blue-100">{stat.label}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/AdminLayout.tsx b/src/components/layout/AdminLayout.tsx
new file mode 100644
index 0000000..200d3c7
--- /dev/null
+++ b/src/components/layout/AdminLayout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import UserProfileCard from './UserProfileCard';
+import AdminSidebar from './AdminSidebar';
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen bg-gray-50">
+      <AdminSidebar />
+      <main className="flex-1 ml-64">
+        {/* Top Bar with User Profile */}
+        <div className="bg-white border-b border-gray-200 px-6 py-4 flex justify-end items-center sticky top-0 z-10">
+          <UserProfileCard useCurrentUser={true} />
+        </div>
+        
+        {/* Main Content */}
+        <div>{children}</div>
+      </main>
+    </div>
+  );
+}
diff --git a/src/components/layout/AdminSidebar.tsx b/src/components/layout/AdminSidebar.tsx
new file mode 100644
index 0000000..f2af78a
--- /dev/null
+++ b/src/components/layout/AdminSidebar.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { 
+  LayoutDashboard, 
+  Users, 
+  Calendar,
+  Briefcase,
+  Settings,
+  Wrench,
+  UserCog
+} from 'lucide-react';
+
+export default function AdminSidebar() {
+  const pathname = usePathname();
+
+  const menuItems = [
+    {
+      href: '/admin/dashboard',
+      icon: LayoutDashboard,
+      label: 'Dashboard',
+    },
+    {
+      href: '/admin/customers',
+      icon: Users,
+      label: 'Customers',
+    },
+    {
+      href: '/admin/employees',
+      icon: UserCog,
+      label: 'Employees',
+    },
+    {
+      href: '/admin/appointments',
+      icon: Calendar,
+      label: 'Appointments',
+    },
+    {
+      href: '/admin/projects',
+      icon: Briefcase,
+      label: 'Projects',
+    },
+    {
+      href: '/admin/services',
+      icon: Wrench,
+      label: 'Services',
+    },
+    {
+      href: '/admin/settings',
+      icon: Settings,
+      label: 'Settings',
+    },
+  ];
+
+  return (
+    <aside className="w-64 bg-gray-900 text-white fixed h-full shadow-lg">
+      <div className="p-6">
+        <h1 className="text-xl font-bold mb-8 text-white">Admin Portal</h1>
+        <nav className="space-y-2">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href || pathname?.startsWith(item.href + '/');
+            
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition ${
+                  isActive
+                    ? 'bg-blue-600 text-white'
+                    : 'text-gray-300 hover:bg-gray-800 hover:text-white'
+                }`}
+              >
+                <Icon className="w-5 h-5" />
+                <span className="font-medium">{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/components/layout/CustomerLayout.tsx b/src/components/layout/CustomerLayout.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout/CustomerSidebar.tsx b/src/components/layout/CustomerSidebar.tsx
new file mode 100644
index 0000000..2c3a685
--- /dev/null
+++ b/src/components/layout/CustomerSidebar.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { 
+  LayoutDashboard, 
+  Calendar,
+  Briefcase,
+  Car,
+  User,
+  Bell,
+  Wrench
+} from 'lucide-react';
+
+export default function CustomerSidebar() {
+  const pathname = usePathname();
+
+  const menuItems = [
+    {
+      href: '/customer/dashboard',
+      icon: LayoutDashboard,
+      label: 'Dashboard',
+    },
+    {
+      href: '/customer/services',
+      icon: Wrench,
+      label: 'Services',
+    },
+    {
+      href: '/customer/my-appointments',
+      icon: Calendar,
+      label: 'My Appointments',
+    },
+    {
+      href: '/customer/my-projects',
+      icon: Briefcase,
+      label: 'My Projects',
+    },
+    {
+      href: '/customer/vehicles',
+      icon: Car,
+      label: 'My Vehicles',
+    },
+    {
+      href: '/customer/notifications',
+      icon: Bell,
+      label: 'Notifications',
+    },
+    {
+      href: '/customer/profile',
+      icon: User,
+      label: 'Profile',
+    },
+  ];
+
+  return (
+    <aside className="w-64 bg-gray-900 text-white fixed h-full shadow-lg">
+      <div className="p-6">
+        <h1 className="text-xl font-bold mb-8 text-white">Customer Portal</h1>
+        <nav className="space-y-2">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href || pathname?.startsWith(item.href + '/');
+            
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition ${
+                  isActive
+                    ? 'bg-blue-600 text-white'
+                    : 'text-gray-300 hover:bg-gray-800 hover:text-white'
+                }`}
+              >
+                <Icon className="w-5 h-5" />
+                <span className="font-medium">{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/components/layout/EmployeeLayout.tsx b/src/components/layout/EmployeeLayout.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout/EmployeeSidebar.tsx b/src/components/layout/EmployeeSidebar.tsx
new file mode 100644
index 0000000..79067ff
--- /dev/null
+++ b/src/components/layout/EmployeeSidebar.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { 
+  LayoutDashboard, 
+  ClipboardList, 
+  Calendar,
+  User,
+  Clock
+} from 'lucide-react';
+
+export default function EmployeeSidebar() {
+  const pathname = usePathname();
+
+  const menuItems = [
+    {
+      href: '/employee/dashboard',
+      icon: LayoutDashboard,
+      label: 'Dashboard',
+    },
+    {
+      href: '/employee/progress',
+      icon: ClipboardList,
+      label: 'Service Progress',
+    },
+    {
+      href: '/employee/appointments',
+      icon: Calendar,
+      label: 'Appointments & Requests',
+    },
+    {
+      href: '/employee/time-logs',
+      icon: Clock,
+      label: 'Time Logs',
+    },
+    {
+      href: '/employee/profile',
+      icon: User,
+      label: 'Profile',
+    },
+  ];
+
+  return (
+    <aside className="w-64 bg-gray-900 text-white fixed h-full shadow-lg">
+      <div className="p-6">
+        <h1 className="text-xl font-bold mb-8 text-white">Employee Portal</h1>
+        <nav className="space-y-2">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href || pathname?.startsWith(item.href + '/');
+            
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition ${
+                  isActive
+                    ? 'bg-blue-600 text-white'
+                    : 'text-gray-300 hover:bg-gray-800 hover:text-white'
+                }`}
+              >
+                <Icon className="w-5 h-5" />
+                <span className="font-medium">{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 0000000..33551a0
--- /dev/null
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,10 @@
+import { IoNotificationsOutline } from "react-icons/io5";
+
+export default function Header({ title }: { title: string }) {
+  return (
+    <div className="flex justify-between items-center bg-white p-2 md:p-3 shadow-sm border-b fixed top-0 left-0 w-full h-16 lg:pl-64 xl:pl-72 z-30">
+      <h1 className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold ml-16 lg:ml-0">{title}</h1>
+      <IoNotificationsOutline className="text-gray-700 mr-4 md:mr-8" size={28} />
+    </div>
+  );
+}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..db31ece
--- /dev/null
+++ b/src/components/layout/Sidebar.tsx
@@ -0,0 +1,104 @@
+"use client";
+import { useState } from "react";
+import { usePathname } from "next/navigation";
+import { FiMenu, FiLogOut } from "react-icons/fi";
+import { FaCar, FaCalendarAlt, FaProjectDiagram, FaUser, FaComments } from "react-icons/fa";
+import { MdDashboard } from "react-icons/md";
+import Link from "next/link";
+import { useAuth } from "@/app/context/AuthContext";
+
+export default function Sidebar() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const { logout } = useAuth();
+
+  return (
+    <>
+      {/* Toggle Button (Mobile & Tablet) */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="p-3 text-gray-700 lg:hidden fixed top-4 left-4 bg-white rounded-lg shadow-lg z-50 hover:bg-gray-100 transition-colors"
+      >
+        <FiMenu size={24} />
+      </button>
+
+      {/* Overlay (Mobile & Tablet) */}
+      {open && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
+          onClick={() => setOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <div
+        className={`fixed top-0 left-0 h-1/2 md:h-screen bg-white w-44 sm:w-48 md:w-56 lg:w-60 xl:w-64 p-3 flex flex-col transition-transform duration-300 z-50 shadow-md rounded-br-lg lg:rounded-none overflow-y-auto
+        ${open ? "translate-x-0" : "-translate-x-full"} lg:translate-x-0`}
+      >
+        <div className="flex flex-col items-center mb-4">
+          <div className="bg-blue-500 rounded-full w-20 h-20 md:w-24 md:h-24 flex items-center justify-center text-white text-sm font-medium">
+            User Photo
+          </div>
+        </div>
+
+  <nav className="flex flex-col gap-1 text-gray-700 text-sm md:text-base lg:text-base">
+          <Link
+            href="/customer/dashboard"
+            className={`flex items-center gap-2 p-2 rounded-md transition-colors ${
+              pathname?.includes('/customer/dashboard') ? 'bg-blue-500 text-white' : 'hover:bg-gray-100'
+            }`}
+          >
+            <MdDashboard size={16} /> Dashboard
+          </Link>
+          <Link
+            href="/customer/vehicles"
+            className={`flex items-center gap-2 p-2 rounded-md transition-colors ${
+              pathname?.includes('/customer/vehicles') ? 'bg-blue-500 text-white' : 'hover:bg-gray-100'
+            }`}
+          >
+            <FaCar size={16} /> My Vehicles
+          </Link>
+          <Link
+            href="/customer/my-appointments"
+            className={`flex items-center gap-2 p-2 rounded-md transition-colors ${
+              pathname?.includes('/customer/my-appointments') ? 'bg-blue-500 text-white' : 'hover:bg-gray-100'
+            }`}
+          >
+            <FaCalendarAlt size={16} /> My Appointments
+          </Link>
+          <Link
+            href="/customer/my-projects"
+            className={`flex items-center gap-2 p-2 rounded-md transition-colors ${
+              pathname?.includes('/customer/my-projects') ? 'bg-blue-500 text-white' : 'hover:bg-gray-100'
+            }`}
+          >
+            <FaProjectDiagram size={16} /> My Projects
+          </Link>
+          <Link
+            href="/customer/profile"
+            className={`flex items-center gap-2 p-2 rounded-md transition-colors ${
+              pathname?.includes('/customer/profile') ? 'bg-blue-500 text-white' : 'hover:bg-gray-100'
+            }`}
+          >
+            <FaUser size={16} /> Profile
+          </Link>
+          <Link
+            href="/customer/chatbot"
+            className={`flex items-center gap-2 p-2 rounded-md transition-colors ${
+              pathname?.includes('/customer/chatbot') ? 'bg-blue-500 text-white' : 'hover:bg-gray-100'
+            }`}
+          >
+            <FaComments size={16} /> Chatbot
+          </Link>
+        </nav>
+
+        <button 
+          onClick={logout}
+          className="mt-auto flex items-center gap-2 p-2 rounded-md text-red-600 text-sm md:text-base lg:text-base hover:bg-red-50 transition-colors"
+        >
+          <FiLogOut size={16} /> Logout
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/layout/UserProfileCard.tsx b/src/components/layout/UserProfileCard.tsx
new file mode 100644
index 0000000..d11a76c
--- /dev/null
+++ b/src/components/layout/UserProfileCard.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { User, LogOut, ChevronDown } from 'lucide-react';
+import { useAuth } from '@/app/context/AuthContext';
+
+interface UserProfileCardProps {
+  pictureSrc?: string;
+  pictureAlt?: string;
+  userName?: string;
+  userRole?: string;
+  useCurrentUser?: boolean;
+}
+
+export default function UserProfileCard({
+  pictureSrc,
+  pictureAlt = 'User Profile',
+  userName,
+  userRole,
+  useCurrentUser = true,
+}: UserProfileCardProps) {
+  const { user, logout } = useAuth();
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentUser, setCurrentUser] = useState<{
+    name?: string;
+    email: string;
+    role: string;
+    photo?: string;
+    firstName?: string;
+    lastName?: string;
+  } | null>(null);
+
+  useEffect(() => {
+    if (useCurrentUser && user) {
+      setCurrentUser({
+        name: user.name || `${user.firstName || ''} ${user.lastName || ''}`.trim(),
+        email: user.email,
+        role: user.role,
+        firstName: user.firstName,
+        lastName: user.lastName,
+      });
+    }
+  }, [useCurrentUser, user]);
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  const displayName = userName || currentUser?.name || 'User';
+  const displayRole = userRole || currentUser?.role || 'Guest';
+  const displayPhoto = pictureSrc || currentUser?.photo;
+
+  return (
+    <div className="relative">
+      {/* Profile Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-3 px-4 py-2 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border border-gray-200"
+      >
+        {/* Profile Picture */}
+        <div className="w-10 h-10 rounded-full overflow-hidden bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+          {displayPhoto ? (
+            <img
+              src={displayPhoto}
+              alt={pictureAlt}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <User className="w-6 h-6 text-white" />
+          )}
+        </div>
+
+        {/* User Info */}
+        <div className="text-left hidden sm:block">
+          <p className="text-sm font-semibold text-gray-800">{displayName}</p>
+          <p className="text-xs text-gray-500 capitalize">{displayRole}</p>
+        </div>
+
+        {/* Dropdown Icon */}
+        <ChevronDown
+          className={`w-4 h-4 text-gray-600 transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <>
+          {/* Backdrop to close dropdown */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setIsOpen(false)}
+          />
+
+          {/* Dropdown Content */}
+          <div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
+            {/* User Info Section */}
+            <div className="p-4 border-b border-gray-200">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+                  {displayPhoto ? (
+                    <img
+                      src={displayPhoto}
+                      alt={pictureAlt}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <User className="w-7 h-7 text-white" />
+                  )}
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-semibold text-gray-800">
+                    {displayName}
+                  </p>
+                  {currentUser?.email && (
+                    <p className="text-xs text-gray-500">{currentUser.email}</p>
+                  )}
+                  <span className="inline-block mt-1 px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs font-medium capitalize">
+                    {displayRole}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="p-2">
+              <button
+                onClick={handleLogout}
+                className="w-full flex items-center gap-3 px-4 py-2 text-left text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+              >
+                <LogOut className="w-4 h-4" />
+                <span className="font-medium">Logout</span>
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/notifications/NotificationList.tsx b/src/components/notifications/NotificationList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/profile/ProfileCard.tsx b/src/components/profile/ProfileCard.tsx
new file mode 100644
index 0000000..e1a9365
--- /dev/null
+++ b/src/components/profile/ProfileCard.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useState } from "react";
+import { FaCamera } from "react-icons/fa";
+import type { Customer } from '@/types';
+
+export default function ProfileCard({ 
+	customer, 
+	onPhotoUpdate 
+}: { 
+	customer: Customer; 
+	onPhotoUpdate?: (photo: string) => void;
+}) {
+	const [photoPreview, setPhotoPreview] = useState<string | null>(
+		(customer as any).photo || null
+	);
+
+	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (!file) return;
+		
+		const reader = new FileReader();
+		reader.onload = () => {
+			const result = reader.result as string;
+			setPhotoPreview(result);
+			if (onPhotoUpdate) {
+				onPhotoUpdate(result);
+			}
+		};
+		reader.readAsDataURL(file);
+	};
+
+	return (
+		<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+			<h3 className="text-lg font-semibold text-gray-800 mb-6">Upload a Photo</h3>
+			
+			<div className="flex flex-col items-center">
+				<div className="relative mb-4">
+					<div className="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden border-4 border-gray-100">
+						{photoPreview ? (
+							// eslint-disable-next-line @next/next/no-img-element
+							<img src={photoPreview} alt="Profile" className="w-full h-full object-cover" />
+						) : (
+							<FaCamera className="text-gray-400 text-4xl" />
+						)}
+					</div>
+					<label 
+						htmlFor="photo-upload" 
+						className="absolute bottom-0 right-0 w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center cursor-pointer hover:bg-blue-700 transition-colors shadow-md"
+					>
+						<FaCamera className="text-white text-sm" />
+					</label>
+					<input 
+						id="photo-upload"
+						type="file" 
+						accept="image/*" 
+						onChange={handleFileChange}
+						className="hidden"
+					/>
+				</div>
+				
+				<p className="text-xs text-gray-500 text-center max-w-[200px] mb-1">
+					Allowed JPEG, PNG, JPG formats, up to 3MB
+				</p>
+				<p className="text-xs text-red-500 font-medium">Not Required</p>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/profile/ProfileClient.tsx b/src/components/profile/ProfileClient.tsx
new file mode 100644
index 0000000..4202723
--- /dev/null
+++ b/src/components/profile/ProfileClient.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import { customerService } from '@/api/mockApiService';
+import ProfileCard from '@/components/profile/ProfileCard';
+import ProfileForm from '@/components/profile/ProfileForm';
+import type { Customer } from '@/types';
+
+export default function ProfileClient() {
+  const [customer, setCustomer] = useState<Customer | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    async function load() {
+      const c = await customerService.getProfile();
+      if (!mounted) return;
+      setCustomer(c);
+    }
+    load();
+    return () => { mounted = false; };
+  }, []);
+
+  const handleSave = async (update: Partial<Customer>) => {
+    const updated = await customerService.updateProfile(update);
+    setCustomer({ ...updated });
+  };
+
+  const handlePhotoUpdate = async (photo: string) => {
+    const updated = await customerService.updateProfile({ ...customer, photo } as any);
+    setCustomer({ ...updated });
+  };
+
+  if (!customer) return <div className="flex items-center justify-center h-64"><div className="text-gray-500">Loading...</div></div>;
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+      {/* Left side - Photo Upload */}
+      <div className="lg:col-span-1">
+        <ProfileCard customer={customer} onPhotoUpdate={handlePhotoUpdate} />
+      </div>
+      
+      {/* Right side - Form */}
+      <div className="lg:col-span-3">
+        <ProfileForm customer={customer} onSave={handleSave} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/profile/ProfileForm.tsx b/src/components/profile/ProfileForm.tsx
new file mode 100644
index 0000000..a763f63
--- /dev/null
+++ b/src/components/profile/ProfileForm.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useState } from "react";
+import type { Customer } from '@/types';
+
+export default function ProfileForm({
+	customer,
+	onSave,
+}: {
+	customer: Customer;
+	onSave: (c: Partial<Customer>) => Promise<void> | void;
+}) {
+	const [form, setForm] = useState<Partial<Customer>>(customer || {});
+	const [saving, setSaving] = useState(false);
+
+	const handle = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+		const { name, value } = e.target as HTMLInputElement;
+		setForm((s) => ({ ...s, [name]: value }));
+	};
+
+	const submit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setSaving(true);
+		try {
+			await onSave(form);
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	return (
+		<form onSubmit={submit} className="space-y-5 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+				{/* Customer Name */}
+				<div>
+					<label className="block text-sm font-medium text-gray-700 mb-2">Customer Name</label>
+					<input 
+						name="firstName" 
+						value={String(form.firstName || '')} 
+						onChange={handle} 
+						placeholder="Service Center Name"
+						className="w-full rounded-md border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
+					/>
+				</div>
+
+				{/* Email */}
+				<div>
+					<label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
+					<input 
+						name="email" 
+						value={customer.email} 
+						disabled 
+						placeholder="Email"
+						className="w-full rounded-md border border-gray-300 px-4 py-2.5 text-sm bg-gray-50 text-gray-500 cursor-not-allowed" 
+					/>
+				</div>
+
+				{/* NIC Number */}
+				<div>
+					<label className="block text-sm font-medium text-gray-700 mb-2">NIC Number</label>
+					<input 
+						name="nic" 
+						value={String(form.nic || '')} 
+						onChange={handle} 
+						placeholder="NIC Number"
+						className="w-full rounded-md border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
+					/>
+				</div>
+
+				{/* Telephone Number */}
+				<div>
+					<label className="block text-sm font-medium text-gray-700 mb-2">Telephone Number</label>
+					<input 
+						name="phone" 
+						value={String(form.phone || '')} 
+						onChange={handle} 
+						placeholder="Telephone Number"
+						className="w-full rounded-md border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
+					/>
+				</div>
+
+				{/* Address */}
+				<div className="md:col-span-2">
+					<label className="block text-sm font-medium text-gray-700 mb-2">Address</label>
+					<textarea 
+						name="address" 
+						value={String(form.address || '')} 
+						onChange={handle} 
+						placeholder="Address"
+						rows={3}
+						className="w-full rounded-md border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" 
+					/>
+				</div>
+			</div>
+
+			<div className="flex justify-end pt-2">
+				<button 
+					type="submit" 
+					disabled={saving} 
+					className="bg-teal-400 hover:bg-teal-500 text-white font-medium px-8 py-2.5 rounded-md transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
+				>
+					{saving ? 'Updating...' : 'Update'}
+				</button>
+			</div>
+		</form>
+	);
+}
diff --git a/src/components/services/ServiceCard.tsx b/src/components/services/ServiceCard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/services/ServiceDetails.tsx b/src/components/services/ServiceDetails.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/services/ServiceForm.tsx b/src/components/services/ServiceForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/services/ServiceList.tsx b/src/components/services/ServiceList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/time-logs/TimeLogCard.tsx b/src/components/time-logs/TimeLogCard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/time-logs/TimeLogList.tsx b/src/components/time-logs/TimeLogList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/vehicles/VehicleCard.tsx b/src/components/vehicles/VehicleCard.tsx
new file mode 100644
index 0000000..6139308
--- /dev/null
+++ b/src/components/vehicles/VehicleCard.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+
+export default function VehicleCard({
+	vehicle,
+	onClick,
+}: {
+	vehicle: any;
+	onClick?: () => void;
+}) {
+	return (
+		<div
+			onClick={onClick}
+			className="bg-white rounded shadow p-4 cursor-pointer hover:shadow-md flex flex-col items-center"
+		>
+			<div className="w-full h-28 bg-gray-100 flex items-center justify-center overflow-hidden rounded">
+				{vehicle.image ? (
+					// eslint-disable-next-line @next/next/no-img-element
+					<img src={vehicle.image} alt={vehicle.model || vehicle.licensePlate} className="h-full object-cover" />
+				) : (
+					<div className="text-sm text-gray-500">vehicle image</div>
+				)}
+			</div>
+			<div className="mt-3 text-center">
+				<div className="font-semibold">{vehicle.model || vehicle.licensePlate}</div>
+				<div className="text-xs text-gray-500">{vehicle.year || ''}</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/vehicles/VehicleDetails.tsx b/src/components/vehicles/VehicleDetails.tsx
new file mode 100644
index 0000000..e8dda64
--- /dev/null
+++ b/src/components/vehicles/VehicleDetails.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import React from "react";
+
+interface VehicleDetailsProps {
+	vehicle: any | null;
+	onEdit?: (vehicle: any) => void;
+	onDelete?: (vehicleId: number) => void;
+}
+
+export default function VehicleDetails({ vehicle, onEdit, onDelete }: VehicleDetailsProps) {
+	if (!vehicle) {
+		return (
+			<div className="bg-white rounded-lg shadow p-6">
+				<p className="text-gray-500 text-center">Select a vehicle to see details</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="bg-white rounded-lg shadow-lg overflow-hidden">
+			<div className="flex flex-col md:flex-row">
+				{/* Image Section */}
+				<div className="relative md:w-1/2 bg-gray-100 p-6 flex items-center justify-center">
+					{(vehicle.imageUrl || vehicle.image) ? (
+						// eslint-disable-next-line @next/next/no-img-element
+						<img 
+							src={vehicle.imageUrl || vehicle.image} 
+							alt={vehicle.model || vehicle.licensePlate} 
+							className="w-full h-auto max-h-96 object-contain rounded-lg" 
+						/>
+					) : (
+						<div className="h-64 flex items-center justify-center text-gray-400">
+							<div className="text-center">
+								<div className="text-4xl mb-2">🚗</div>
+								<div>No image available</div>
+							</div>
+						</div>
+					)}
+				</div>
+
+				{/* Details Section */}
+				<div className="md:w-1/2 p-6">
+					<h2 className="text-2xl font-bold text-gray-900 mb-4">
+						{vehicle.model || vehicle.licensePlate}
+					</h2>
+					
+					{vehicle.price && (
+						<div className="mb-6">
+							<div className="text-3xl font-bold text-green-600">
+								€{vehicle.price.toLocaleString()}
+							</div>
+							{vehicle.originalPrice && (
+								<div className="text-sm text-gray-500">
+									(Minimum price €{vehicle.originalPrice.toLocaleString()})
+								</div>
+							)}
+						</div>
+					)}
+
+					<div className="space-y-3">
+						
+						<div className="flex justify-between py-2 border-b border-gray-100">
+							<span className="text-gray-600">Year</span>
+							<span className="font-medium text-gray-900">{vehicle.year || '-'}</span>
+						</div>
+
+						<div className="flex justify-between py-2 border-b border-gray-100">
+							<span className="text-gray-600">Color</span>
+							<span className="font-medium text-gray-900">{vehicle.color || '-'}</span>
+						</div>
+
+						<div className="flex justify-between py-2 border-b border-gray-100">
+							<span className="text-gray-600">VIN</span>
+							<span className="font-medium text-gray-900">{vehicle.vin || '-'}</span>
+						</div>
+
+						<div className="flex justify-between py-2 border-b border-gray-100">
+							<span className="text-gray-600">License plate</span>
+							<span className="font-medium text-gray-900">
+								{vehicle.licensePlate || '-'}
+							</span>
+						</div>
+
+						<div className="flex justify-between py-2 border-b border-gray-100">
+							<span className="text-gray-600">Registration Date</span>
+							<span className="font-medium text-gray-900">
+								{vehicle.registrationDate || '-'}
+							</span>
+						</div>
+
+						
+					</div>
+
+					{/* Action Buttons */}
+					{(onEdit || onDelete) && (
+						<div className="mt-6 flex gap-3">
+							{onEdit && (
+								<button
+									onClick={() => onEdit(vehicle)}
+									className="flex-1 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
+								>
+									Edit Vehicle
+								</button>
+							)}
+							{onDelete && (
+								<button
+									onClick={() => {
+										if (window.confirm('Are you sure you want to delete this vehicle?')) {
+											onDelete(vehicle.id);
+										}
+									}}
+									className="flex-1 bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition"
+								>
+									Delete Vehicle
+								</button>
+							)}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
\ No newline at end of file
diff --git a/src/components/vehicles/VehicleForm.tsx b/src/components/vehicles/VehicleForm.tsx
new file mode 100644
index 0000000..4b75009
--- /dev/null
+++ b/src/components/vehicles/VehicleForm.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import React, { useState } from "react";
+
+export interface NewVehicleInput {
+	model: string;
+	color: string;
+	vin: string;
+	registrationDate: string; // ISO date
+	licensePlate: string;
+	year: number | '';
+	imageFile?: File | null; // Actual file object for upload
+	imagePreview?: string | null; // data URL for preview
+}
+
+export default function VehicleForm({
+	initial,
+	onSubmit,
+	onCancel,
+}: {
+	initial?: Partial<NewVehicleInput>;
+	onSubmit: (v: NewVehicleInput) => void;
+	onCancel?: () => void;
+}) {
+	const [form, setForm] = useState<NewVehicleInput>({
+		model: initial?.model || "",
+		color: initial?.color || "",
+		vin: initial?.vin || "",
+		registrationDate: initial?.registrationDate || "",
+		licensePlate: initial?.licensePlate || "",
+		year: (initial?.year as number) || "",
+		imageFile: initial?.imageFile ?? null,
+		imagePreview: initial?.imagePreview ?? null,
+	});
+
+	const [imagePreview, setImagePreview] = useState<string | null>(
+		initial?.imagePreview || null
+	);
+
+	const handleChange = (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+	) => {
+		const { name, value } = e.target as HTMLInputElement;
+		setForm((s) => ({ ...s, [name]: name === "year" ? Number(value) : value }));
+	};
+
+	const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (!file) return;
+		
+		// Store the actual file object for upload
+		setForm((s) => ({ ...s, imageFile: file }));
+		
+		// Create preview
+		const reader = new FileReader();
+		reader.onload = () => {
+			const result = reader.result as string;
+			setImagePreview(result);
+			setForm((s) => ({ ...s, imagePreview: result }));
+		};
+		reader.readAsDataURL(file);
+	};
+
+	const submit = (e: React.FormEvent) => {
+		e.preventDefault();
+		// simple validation
+		if (!form.model || !form.vin || !form.licensePlate) return;
+		onSubmit({ ...form, year: Number(form.year) });
+	};
+
+	return (
+		<form onSubmit={submit} className="space-y-4">
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div>
+					<label className="block text-sm font-medium mb-1">Model</label>
+					<input
+						name="model"
+						value={form.model}
+						onChange={handleChange}
+						className="w-full rounded border px-3 py-2"
+						required
+					/>
+				</div>
+
+				<div>
+					<label className="block text-sm font-medium mb-1">Color</label>
+					<input
+						name="color"
+						value={form.color}
+						onChange={handleChange}
+						className="w-full rounded border px-3 py-2"
+					/>
+				</div>
+
+				<div>
+					<label className="block text-sm font-medium mb-1">VIN</label>
+					<input
+						name="vin"
+						value={form.vin}
+						onChange={handleChange}
+						className="w-full rounded border px-3 py-2"
+						required
+					/>
+				</div>
+
+				<div>
+					<label className="block text-sm font-medium mb-1">License Plate</label>
+					<input
+						name="licensePlate"
+						value={form.licensePlate}
+						onChange={handleChange}
+						className="w-full rounded border px-3 py-2"
+						required
+					/>
+				</div>
+
+				<div>
+					<label className="block text-sm font-medium mb-1">Year</label>
+					<input
+						name="year"
+						value={String(form.year)}
+						onChange={handleChange}
+						type="number"
+						className="w-full rounded border px-3 py-2"
+					/>
+				</div>
+
+				<div>
+					<label className="block text-sm font-medium mb-1">Registration Date</label>
+					<input
+						name="registrationDate"
+						value={form.registrationDate}
+						onChange={handleChange}
+						type="date"
+						className="w-full rounded border px-3 py-2"
+					/>
+				</div>
+			</div>
+
+			<div>
+				<label className="block text-sm font-medium mb-1">Image</label>
+				<input type="file" accept="image/*" onChange={handleFile} />
+				{imagePreview && (
+					<div className="mt-2">
+						<img src={imagePreview} alt="preview" className="h-28 object-cover" />
+					</div>
+				)}
+			</div>
+
+			<div className="flex items-center gap-3">
+				<button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+					{initial ? 'Update Vehicle' : 'Add Vehicle'}
+				</button>
+				{onCancel && (
+					<button type="button" onClick={onCancel} className="px-4 py-2 rounded border hover:bg-gray-50">
+						Cancel
+					</button>
+				)}
+			</div>
+		</form>
+	);
+}
diff --git a/src/components/vehicles/VehicleList.tsx b/src/components/vehicles/VehicleList.tsx
new file mode 100644
index 0000000..01a104a
--- /dev/null
+++ b/src/components/vehicles/VehicleList.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import VehicleCard from "./VehicleCard";
+
+export default function VehicleList({
+	vehicles,
+	onSelect,
+	onAdd,
+}: {
+	vehicles: any[];
+	onSelect: (v: any) => void;
+	onAdd?: () => void;
+}) {
+	return (
+		<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+			<div
+				onClick={onAdd}
+				className="bg-white rounded shadow p-4 flex items-center justify-center cursor-pointer hover:shadow-md"
+			>
+				<div className="text-2xl font-bold">+</div>
+			</div>
+
+			{vehicles.map((v) => (
+				<div key={v.id} onClick={() => onSelect(v)}>
+					<VehicleCard vehicle={v} />
+				</div>
+			))}
+		</div>
+	);
+}
diff --git a/src/data/mockData.ts b/src/data/mockData.ts
new file mode 100644
index 0000000..fa91559
--- /dev/null
+++ b/src/data/mockData.ts
@@ -0,0 +1,191 @@
+/**
+ * Mock Data for Customer Dashboard
+ * Simulates data from backend API
+ */
+
+import type { Customer, Vehicle, Appointment, Project } from '@/types';
+
+// Current logged-in customer (mock)
+export const mockCustomer: Customer = {
+  id: 'CUST001',
+  name: 'James Wilson',
+  firstName: 'James',
+  lastName: 'Wilson',
+  email: 'james.wilson@email.com',
+  phone: '+1 (555) 123-4567',
+  address: '123 Main St, Springfield',
+  nic: 'NIC123456',
+  password: 'password123',
+  joinedDate: '2024-01-15'
+};
+
+// Customer's vehicles
+export const mockVehicles: Vehicle[] = [
+  {
+    id: 'VEH001',
+    customerId: 'CUST001',
+    vehicleNumber: 'ABC-2345',
+    make: 'Toyota',
+    model: 'Camry',
+    year: 2020,
+    type: 'Car'
+  }
+];
+
+// Appointments (Pre-defined Services)
+export const mockAppointments: Appointment[] = [
+  {
+    id: 'APT001',
+    customerId: 'CUST001',
+    vehicleId: 'VEH001',
+    vehicleNumber: 'ABC-2345',
+    serviceName: 'Brake Pad Checking',
+    date: '2025-11-12',
+    time: '11:00 AM - 12:00 PM',
+    status: 'Upcoming',
+    assignedEmployee: undefined,
+    approvedBy: 'Admin Sarah'
+  },
+  {
+    id: 'APT002',
+    customerId: 'CUST001',
+    vehicleId: 'VEH003',
+    vehicleNumber: 'XYZ-7890',
+    serviceName: 'Oil Change',
+    date: '2025-11-15',
+    time: '02:00 PM - 03:00 PM',
+    status: 'Upcoming',
+    assignedEmployee: undefined
+  },
+  {
+    id: 'APT003',
+    customerId: 'CUST001',
+    vehicleId: 'VEH001',
+    vehicleNumber: 'ABC-2345',
+    serviceName: 'Regular Checkup',
+    date: '2025-10-20',
+    time: '10:00 AM - 11:00 AM',
+    status: 'Completed',
+    assignedEmployee: 'Mike Johnson',
+    approvedBy: 'Admin Sarah'
+  },
+  {
+    id: 'APT004',
+    customerId: 'CUST001',
+    vehicleId: 'VEH002',
+    vehicleNumber: 'CBB-5475',
+    serviceName: 'Tire Rotation',
+    date: '2025-09-15',
+    time: '09:00 AM - 10:00 AM',
+    status: 'Completed',
+    assignedEmployee: 'David Smith'
+  },
+  {
+    id: 'APT005',
+    customerId: 'CUST001',
+    vehicleId: 'VEH003',
+    vehicleNumber: 'XYZ-7890',
+    serviceName: 'Battery Replacement',
+    date: '2025-08-10',
+    time: '03:00 PM - 04:00 PM',
+    status: 'Completed',
+    assignedEmployee: 'Mike Johnson'
+  }
+];
+
+// Projects (Custom Services)
+export const mockProjects: Project[] = [
+  {
+    id: 'PRJ001',
+    customerId: 'CUST001',
+    vehicleId: 'VEH002',
+    vehicleNumber: 'CBB-5475',
+    vehicleType: 'Van',
+    taskName: 'Seats Repairing',
+    description: 'Custom leather seat repair and modification',
+    startDate: '2025-11-05',
+    time: '09:00 AM - 05:00 PM',
+    status: 'Ongoing',
+    assignedEmployee: 'Robert Brown',
+    approvedBy: 'Admin Sarah',
+    estimatedCost: 1200,
+    notes: 'High priority - Customer deadline: Nov 20'
+  },
+  {
+    id: 'PRJ002',
+    customerId: 'CUST001',
+    vehicleId: 'VEH001',
+    vehicleNumber: 'ABC-2345',
+    vehicleType: 'Car',
+    taskName: 'Modify Body',
+    description: 'Custom body kit installation',
+    startDate: '2025-11-15',
+    time: '08:00 AM - 06:00 PM',
+    status: 'Pending',
+    assignedEmployee: undefined,
+    approvedBy: 'Admin John',
+    estimatedCost: 2500,
+    notes: 'Awaiting employee assignment'
+  },
+  {
+    id: 'PRJ006',
+    customerId: 'CUST001',
+    vehicleId: 'VEH003',
+    vehicleNumber: 'XYZ-7890',
+    vehicleType: 'SUV',
+    taskName: 'Paint Job',
+    description: 'Full body paint - Metallic Blue',
+    startDate: '2025-11-20',
+    time: '08:00 AM - 06:00 PM',
+    status: 'Pending',
+    assignedEmployee: undefined,
+    estimatedCost: 1500,
+    notes: 'Customer requested specific color code'
+  },
+  {
+    id: 'PRJ003',
+    customerId: 'CUST001',
+    vehicleId: 'VEH003',
+    vehicleNumber: 'XYZ-7890',
+    vehicleType: 'SUV',
+    taskName: 'Modify Engine',
+    description: 'Engine performance upgrade',
+    startDate: '2025-08-15',
+    completedDate: '2025-09-10',
+    time: '10:00 AM - 04:00 PM',
+    status: 'Completed',
+    assignedEmployee: 'Robert Brown',
+    approvedBy: 'Admin Sarah',
+    estimatedCost: 3500
+  },
+  {
+    id: 'PRJ004',
+    customerId: 'CUST001',
+    vehicleId: 'VEH002',
+    vehicleNumber: 'CBB-5475',
+    vehicleType: 'Van',
+    taskName: 'Modify Seats',
+    description: 'Additional seats installation',
+    startDate: '2025-07-20',
+    completedDate: '2025-08-05',
+    time: '09:00 AM - 05:00 PM',
+    status: 'Completed',
+    assignedEmployee: 'James Miller',
+    estimatedCost: 1800
+  },
+  {
+    id: 'PRJ005',
+    customerId: 'CUST001',
+    vehicleId: 'VEH001',
+    vehicleNumber: 'ABC-2345',
+    vehicleType: 'Car',
+    taskName: 'Sound System Installation',
+    description: 'Premium audio system upgrade',
+    startDate: '2025-06-10',
+    completedDate: '2025-06-15',
+    time: '10:00 AM - 02:00 PM',
+    status: 'Completed',
+    assignedEmployee: 'David Smith',
+    estimatedCost: 900
+  }
+];
diff --git a/src/lib/adminService.ts b/src/lib/adminService.ts
new file mode 100644
index 0000000..9820188
--- /dev/null
+++ b/src/lib/adminService.ts
@@ -0,0 +1,24 @@
+import api from './apiClient';
+import { CreateEmployeeRequest } from '@/types/auth.types';
+
+export const adminService = {
+  createEmployee: async (data: CreateEmployeeRequest) => {
+    return api.post('/admin/employees', data);
+  },
+  
+  getAllEmployees: async () => {
+    return api.get('/admin/employees');
+  },
+  
+  getEmployeeById: async (id: string) => {
+    return api.get(`/admin/employees/${id}`);
+  },
+  
+  updateEmployee: async (id: string, data: any) => {
+    return api.put(`/admin/employees/${id}`, data);
+  },
+  
+  deleteEmployee: async (id: string) => {
+    return api.delete(`/admin/employees/${id}`);
+  },
+};
diff --git a/src/lib/api.ts b/src/lib/api.ts
new file mode 100644
index 0000000..99090db
--- /dev/null
+++ b/src/lib/api.ts
@@ -0,0 +1,95 @@
+/**
+ * API Module for Employee Operations
+ */
+
+export interface Appointment {
+  id: string | number;
+  customerId?: string;
+  vehicleId?: string;
+  vehicleNumber?: string;
+  serviceName: string;
+  date?: string;
+  time?: string;
+  status?: string;
+  assignedEmployee?: string;
+  approvedBy?: string;
+  notes?: string;
+  location?: string;
+  customerName?: string;
+  type?: string;
+  progressPercentage?: number;
+  actualHours?: number;
+  estimatedHours?: number;
+  timerRunning?: boolean;
+}
+
+// Simulate network delay
+const delay = (ms: number = 300) => new Promise(resolve => setTimeout(resolve, ms));
+
+/**
+ * Get appointments assigned to employee
+ */
+export async function getEmployeeAppointments(employeeId?: string): Promise<Appointment[]> {
+  await delay();
+  // Mock data - replace with actual API call
+  return [
+    {
+      id: 1,
+      serviceName: 'Oil Change',
+      location: 'Bay 1',
+      customerName: 'John Doe',
+      type: 'Appointment',
+      progressPercentage: 25,
+      actualHours: 0.5,
+      estimatedHours: 2,
+      status: 'in progress',
+      timerRunning: false,
+      notes: 'Regular maintenance check',
+    },
+    {
+      id: 2,
+      serviceName: 'Brake Inspection',
+      location: 'Bay 2',
+      customerName: 'Jane Smith',
+      type: 'Project',
+      progressPercentage: 60,
+      actualHours: 1.5,
+      estimatedHours: 3,
+      status: 'in progress',
+      timerRunning: false,
+      notes: 'Front brake pads need replacement',
+    }
+  ];
+}
+
+/**
+ * Start timer for an appointment
+ */
+export async function startTimer(appointmentId: string | number): Promise<void> {
+  await delay();
+  console.log('Timer started for appointment:', appointmentId);
+}
+
+/**
+ * Pause timer for an appointment
+ */
+export async function pauseTimer(appointmentId: string | number): Promise<void> {
+  await delay();
+  console.log('Timer paused for appointment:', appointmentId);
+}
+
+/**
+ * Log time for an appointment
+ */
+export async function logTime(appointmentId: string | number, timeData: any): Promise<void> {
+  await delay();
+  console.log('Time logged for appointment:', appointmentId, timeData);
+}
+
+/**
+ * Update appointment progress
+ */
+export async function updateProgress(appointmentId: string | number, progressData: any): Promise<void> {
+  await delay();
+  console.log('Progress updated for appointment:', appointmentId, progressData);
+}
diff --git a/src/lib/api/appointmentService.ts b/src/lib/api/appointmentService.ts
new file mode 100644
index 0000000..22d372d
--- /dev/null
+++ b/src/lib/api/appointmentService.ts
@@ -0,0 +1,113 @@
+// API configuration
+import { axiosInstance } from '@/lib/apiClient';
+import type { Appointment as AppAppointment } from '@/types';
+
+const handleResponse = async (response: any) => {
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(error || 'Failed to fetch data');
+  }
+  return response.data;
+};
+
+// Use shared Appointment type from '@/types' for return values
+
+export const appointmentService = {
+  // Get all appointments
+  getAllAppointments: async (): Promise<AppAppointment[]> => {
+    const { data } = await axiosInstance.get('/appointments');
+  // map backend DTO to frontend Appointment shape
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (data || []).map((d: any) => ({
+      id: String(d.appointmentId || d.id || ''),
+      customerId: String(d.customerId || ''),
+      vehicleId: String(d.vehicleId || ''),
+      vehicleNumber: String(d.vehicleNo || d.vehicleNumber || ''),
+      serviceName: String(d.service || d.serviceName || ''),
+      date: String(d.date || ''),
+      time: String(d.startTime || d.time || ''),
+      status: (String(d.status || 'Upcoming') as AppAppointment['status']),
+    }));
+  },
+
+  // Get appointments for a specific customer
+  getCustomerAppointments: async (customerId: string): Promise<AppAppointment[]> => {
+    const { data } = await axiosInstance.get('/appointments', { params: { customerId } });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (data || []).map((d: any) => ({
+      id: String(d.appointmentId || d.id || ''),
+      customerId: String(d.customerId || ''),
+      vehicleId: String(d.vehicleId || ''),
+      vehicleNumber: String(d.vehicleNo || d.vehicleNumber || ''),
+      serviceName: String(d.service || d.serviceName || ''),
+      date: String(d.date || ''),
+      time: String(d.startTime || d.time || ''),
+      status: (String(d.status || 'Upcoming') as AppAppointment['status'])
+    }));
+  },
+
+  // Create a new appointment
+  createAppointment: async (appointmentData: Omit<AppAppointment, 'id'>): Promise<AppAppointment> => {
+    const { data: d } = await axiosInstance.post('/appointments', appointmentData);
+    return {
+      id: String(d.appointmentId || d.id || ''),
+      customerId: String(d.customerId || ''),
+      vehicleId: String(d.vehicleId || ''),
+      vehicleNumber: String(d.vehicleNo || d.vehicleNumber || ''),
+      serviceName: String(d.service || d.serviceName || ''),
+      date: String(d.date || ''),
+      time: String(d.startTime || d.time || ''),
+      status: (String(d.status || 'Upcoming') as AppAppointment['status'])
+    };
+  },
+
+  // Cancel an appointment
+  cancelAppointment: async (appointmentId: string): Promise<AppAppointment> => {
+    // Use the generic update endpoint to change status to CANCELLED
+    const payload = { status: 'CANCELLED' };
+    const { data: d } = await axiosInstance.put(`/appointments/${appointmentId}`, payload);
+    // map to frontend shape
+    return {
+      id: String(d.appointmentId || d.id || ''),
+      customerId: String(d.customerId || ''),
+      vehicleId: String(d.vehicleId || ''),
+      vehicleNumber: String(d.vehicleNo || d.vehicleNumber || ''),
+      serviceName: String(d.service || d.serviceName || ''),
+      date: String(d.date || ''),
+      time: String(d.startTime || d.time || ''),
+      status: (String(d.status || 'Cancelled') as AppAppointment['status']),
+    };
+  },
+
+  // Delete an appointment
+  deleteAppointment: async (appointmentId: string): Promise<void> => {
+    if (!appointmentId) {
+      throw new Error('Invalid appointment id');
+    }
+    await axiosInstance.delete(`/appointments/${encodeURIComponent(appointmentId)}`);
+  },
+
+  // Get globally booked start times for a given date (across all users).
+  // Tries a dedicated availability endpoint first; falls back to retrieving all appointments.
+  getBookedStartTimesForDate: async (date: string): Promise<string[]> => {
+    // Try availability endpoint
+    try {
+      const { data } = await axiosInstance.get(`/appointments/availability`, { params: { date } });
+      // Expecting something like: { date: 'YYYY-MM-DD', booked: ['09:00', '09:30', ...] }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const booked = (data?.booked || []) as any[];
+      return booked.map((t) => String(t));
+    } catch {
+      // Fallback to pulling all appointments if availability endpoint not present
+      try {
+        const all = await appointmentService.getAllAppointments();
+        return all
+          .filter(a => a.date === date && String(a.status).toUpperCase() !== 'CANCELLED')
+          .map(a => (a.time?.length ? a.time : ''))
+          .filter(Boolean) as string[];
+      } catch {
+        return [];
+      }
+    }
+  }
+};
\ No newline at end of file
diff --git a/src/lib/api/config.ts b/src/lib/api/config.ts
new file mode 100644
index 0000000..bc64fd6
--- /dev/null
+++ b/src/lib/api/config.ts
@@ -0,0 +1,81 @@
+import axios, { AxiosInstance, AxiosError, InternalAxiosRequestConfig } from 'axios';
+
+// Create axios instance with default config
+const apiClient: AxiosInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080/api',
+  timeout: parseInt(process.env.NEXT_PUBLIC_API_TIMEOUT || '10000'),
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor - Add auth token if available
+apiClient.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    // Get token from localStorage or cookies
+    if (typeof window !== 'undefined') {
+      const token = localStorage.getItem('authToken');
+      if (token && config.headers) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+    }
+    return config;
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor - Handle common errors
+apiClient.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error: AxiosError) => {
+    // Handle common error scenarios
+    if (error.response) {
+      switch (error.response.status) {
+        case 401:
+          // Unauthorized - redirect to login
+          if (typeof window !== 'undefined') {
+            localStorage.removeItem('authToken');
+            window.location.href = '/login';
+          }
+          break;
+        case 403:
+          // Forbidden
+          console.warn('Access forbidden');
+          break;
+        case 404:
+          // Not found
+          console.warn('Resource not found');
+          break;
+        case 500:
+          // Server error
+          console.warn('Server error occurred');
+          break;
+        default:
+          console.warn('API error:', error.response.data);
+      }
+    } else if (error.request) {
+      // Network error - backend not available
+      console.info('Backend API not available - using fallback data');
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;
+
+// Helper function to handle API errors
+export const handleApiError = (error: unknown): string => {
+  if (axios.isAxiosError(error)) {
+    if (error.response?.data?.message) {
+      return error.response.data.message;
+    }
+    if (error.message) {
+      return error.message;
+    }
+  }
+  return 'An unexpected error occurred';
+};
\ No newline at end of file
diff --git a/src/lib/api/projectService.ts b/src/lib/api/projectService.ts
new file mode 100644
index 0000000..8f286dc
--- /dev/null
+++ b/src/lib/api/projectService.ts
@@ -0,0 +1,73 @@
+import { axiosInstance } from '@/lib/apiClient';
+import type { Project as AppProject } from '@/types';
+
+export interface ProjectDTO {
+  projectId?: string;
+  id?: string;
+  customerId?: string;
+  name?: string;
+  description?: string;
+  startDate?: string;
+  endDate?: string;
+  status?: string; // PLANNED | IN_PROGRESS | COMPLETED | CANCELLED | ON_HOLD
+}
+
+const mapDtoToProject = (d: ProjectDTO): AppProject => {
+  const statusEnum = String(d.status || '').toUpperCase();
+  const statusMap: Record<string, AppProject['status']> = {
+    PLANNED: 'Ongoing',
+    IN_PROGRESS: 'Ongoing',
+    COMPLETED: 'Completed',
+    CANCELLED: 'Cancelled',
+    ON_HOLD: 'Ongoing',
+  };
+  const status = statusMap[statusEnum] || 'Ongoing';
+
+  return {
+    id: String(d.projectId || d.id || ''),
+    customerId: String(d.customerId || ''),
+    vehicleId: '',
+    vehicleNumber: '',
+    vehicleType: '',
+    taskName: String(d.name || ''),
+    description: String(d.description || ''),
+    startDate: String(d.startDate || ''),
+    estimatedEndDate: d.endDate ? String(d.endDate) : undefined,
+    completedDate: undefined,
+    time: '',
+    status,
+  };
+};
+
+export const projectService = {
+  // Get projects for current authenticated customer (principal inferred by backend)
+  getAllProjects: async (): Promise<AppProject[]> => {
+    const { data } = await axiosInstance.get('/projects');
+    return (data || []).map((d: ProjectDTO) => mapDtoToProject(d));
+  },
+
+  // Get projects for a specific customer id (if needed explicitly)
+  getCustomerProjects: async (customerId: string): Promise<AppProject[]> => {
+    const { data } = await axiosInstance.get('/projects', { params: { customerId } });
+    return (data || []).map((d: ProjectDTO) => mapDtoToProject(d));
+  },
+
+  getProjectById: async (projectId: string): Promise<AppProject | undefined> => {
+    const { data } = await axiosInstance.get(`/projects/${encodeURIComponent(projectId)}`);
+    return data ? mapDtoToProject(data as ProjectDTO) : undefined;
+  },
+
+  createProject: async (payload: { name: string; description: string; startDate: string; status?: string; }): Promise<AppProject> => {
+    const { data } = await axiosInstance.post('/projects', payload);
+    return mapDtoToProject(data as ProjectDTO);
+  },
+
+  updateProject: async (projectId: string, payload: Partial<ProjectDTO>): Promise<AppProject> => {
+    const { data } = await axiosInstance.put(`/projects/${encodeURIComponent(projectId)}`, payload);
+    return mapDtoToProject(data as ProjectDTO);
+  },
+
+  deleteProject: async (projectId: string): Promise<void> => {
+    await axiosInstance.delete(`/projects/${encodeURIComponent(projectId)}`);
+  }
+};
diff --git a/src/lib/api/services.ts b/src/lib/api/services.ts
new file mode 100644
index 0000000..4c61586
--- /dev/null
+++ b/src/lib/api/services.ts
@@ -0,0 +1,499 @@
+import apiClient, { handleApiError } from './config';
+
+// ==================== ENUMS ====================
+export enum AppointmentStatus {
+  PENDING = 'PENDING',
+  CONFIRMED = 'CONFIRMED',
+  IN_PROGRESS = 'IN_PROGRESS',
+  COMPLETED = 'COMPLETED',
+  CANCELLED = 'CANCELLED',
+}
+
+export enum ServiceStatus {
+  ACTIVE = 'ACTIVE',
+  INACTIVE = 'INACTIVE',
+}
+
+// ==================== PAGINATION INTERFACES ====================
+export interface PageableResponse<T> {
+  content: T[];
+  pageable: {
+    pageNumber: number;
+    pageSize: number;
+    sort: any;
+    offset: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  last: boolean;
+  totalPages: number;
+  totalElements: number;
+  first: boolean;
+  size: number;
+  number: number;
+  sort: any;
+  numberOfElements: number;
+  empty: boolean;
+}
+
+// Category object structure from backend
+export interface CategoryResponse {
+  id: string | number;
+  name: string;
+  description: string;
+}
+
+// ==================== SERVICE INTERFACES ====================
+// Matches Service.java entity
+export interface VehicleService {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  duration: string;
+  imageUrl?: string;
+  category: string | CategoryResponse;
+  categoryId?: string;
+  popular?: boolean;
+  features: string[];
+  status?: ServiceStatus;
+  estimatedTime?: number; // in minutes
+  durationInHours?: number; // Backend field
+  currency?: string; // Backend field
+  createdAt?: string; // Backend field
+  updatedAt?: string; // Backend field
+}
+
+// Matches ServiceResponse.java DTO
+export interface ServiceResponse {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  duration?: string;
+  imageUrl?: string;
+  category: string | CategoryResponse; // Can be string or object from backend
+  categoryId?: string;
+  popular?: boolean;
+  features?: string[];
+  status?: ServiceStatus;
+  durationInHours?: number; // Backend field
+  currency?: string; // Backend field
+  createdAt?: string; // Backend field
+  updatedAt?: string; // Backend field
+}
+
+// ==================== APPOINTMENT INTERFACES ====================
+// Matches CreateAppointmentRequest.java
+export interface CreateAppointmentRequest {
+  serviceId: string;
+  vehicleId: string;
+  appointmentDate: string; // ISO 8601 format
+  timeSlot: string;
+  notes?: string;
+}
+
+// Matches AppointmentResponse.java
+export interface AppointmentResponse {
+  id: string;
+  serviceId: string;
+  serviceName: string;
+  vehicleId: string;
+  vehicleInfo: string;
+  customerId: string;
+  customerName: string;
+  appointmentDate: string;
+  timeSlot: string;
+  status: AppointmentStatus;
+  notes?: string;
+  createdAt: string;
+  updatedAt?: string;
+}
+
+// Matches AppointmentDetailsResponse.java
+export interface AppointmentDetailsResponse extends AppointmentResponse {
+  serviceDetails: ServiceResponse;
+  vehicleDetails: VehicleResponse;
+  progressUpdates?: ProgressResponse[];
+  timeLogs?: TimeLogResponse[];
+}
+
+// ==================== VEHICLE INTERFACES ====================
+export interface VehicleResponse {
+  id: string;
+  make: string;
+  model: string;
+  year: number;
+  vin?: string;
+  licensePlate: string;
+  color?: string;
+  customerId: string;
+}
+
+// ==================== PROGRESS INTERFACES ====================
+export interface ProgressResponse {
+  id: string;
+  appointmentId: string;
+  status: AppointmentStatus;
+  description: string;
+  percentage: number;
+  updatedBy: string;
+  updatedAt: string;
+}
+
+// ==================== TIME LOG INTERFACES ====================
+export interface TimeLogResponse {
+  id: string;
+  appointmentId: string;
+  employeeId: string;
+  employeeName: string;
+  startTime: string;
+  endTime?: string;
+  duration?: number; // in minutes
+  description?: string;
+}
+
+// ==================== SERVICE CATALOG API ====================
+// Maps to ServiceCatalogController.java (Member 3 - sulakshani)
+export const serviceApi = {
+  // Get all services (handles paginated response)
+  getAllServices: async (params?: {
+    page?: number;
+    size?: number;
+    category?: string;
+    search?: string;
+    status?: ServiceStatus;
+  }): Promise<ServiceResponse[]> => {
+    try {
+      const response = await apiClient.get<PageableResponse<ServiceResponse>>('/customer/services', { 
+        params: {
+          page: params?.page || 0,
+          size: params?.size || 100, // Get all services by default
+          ...params
+        }
+      });
+
+      // Extract content array from paginated response
+      if (response.data && response.data.content) {
+        return response.data.content;
+      }
+
+      // Fallback if response is already an array
+      return Array.isArray(response.data) ? response.data : [];
+    } catch (error) {
+      // Silently fail and let the component handle fallback
+      const errorMessage = handleApiError(error);
+      console.info('Backend not available:', errorMessage);
+      throw error;
+    }
+  },
+
+  // GET /api/customer/services/{id}
+  getServiceById: async (id: string): Promise<ServiceResponse> => {
+    try {
+      const response = await apiClient.get(`/customer/services/${id}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching service:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/services/category/{categoryId}
+  getServicesByCategory: async (categoryId: string): Promise<ServiceResponse[]> => {
+    try {
+      const response = await apiClient.get(`/customer/services/category/${categoryId}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching services by category:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/services/popular
+  getPopularServices: async (): Promise<ServiceResponse[]> => {
+    try {
+      const response = await apiClient.get('/customer/services/popular');
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching popular services:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/services/search?query={query}
+  searchServices: async (query: string): Promise<ServiceResponse[]> => {
+    try {
+      const response = await apiClient.get('/customer/services/search', {
+        params: { query },
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error searching services:', handleApiError(error));
+      throw error;
+    }
+  },
+};
+
+// ==================== APPOINTMENT API ====================
+// Maps to CustomerAppointmentController.java (Member 4 - charindu, Member 5 - dilusha)
+export const appointmentApi = {
+  // POST /api/customer/appointments - Create appointment
+  createAppointment: async (request: CreateAppointmentRequest): Promise<AppointmentResponse> => {
+    try {
+      const response = await apiClient.post('/customer/appointments', request);
+      return response.data;
+    } catch (error) {
+      console.error('Error creating appointment:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/appointments - Get user's appointments
+  getMyAppointments: async (params?: {
+    status?: AppointmentStatus;
+    page?: number;
+    size?: number;
+  }): Promise<AppointmentResponse[]> => {
+    try {
+      const response = await apiClient.get('/customer/appointments', { params });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching appointments:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/appointments/{id} - Get appointment details
+  getAppointmentById: async (id: string): Promise<AppointmentDetailsResponse> => {
+    try {
+      const response = await apiClient.get(`/customer/appointments/${id}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching appointment:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // PUT /api/customer/appointments/{id}/cancel - Cancel appointment
+  cancelAppointment: async (id: string, reason?: string): Promise<AppointmentResponse> => {
+    try {
+      const response = await apiClient.put(`/customer/appointments/${id}/cancel`, { reason });
+      return response.data;
+    } catch (error) {
+      console.error('Error canceling appointment:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // PUT /api/customer/appointments/{id}/reschedule
+  rescheduleAppointment: async (
+    id: string,
+    newDate: string,
+    newTimeSlot: string
+  ): Promise<AppointmentResponse> => {
+    try {
+      const response = await apiClient.put(`/customer/appointments/${id}/reschedule`, {
+        appointmentDate: newDate,
+        timeSlot: newTimeSlot,
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error rescheduling appointment:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/appointments/available-slots
+  getAvailableSlots: async (date: string, serviceId: string): Promise<string[]> => {
+    try {
+      const response = await apiClient.get('/customer/appointments/available-slots', {
+        params: { date, serviceId },
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching available slots:', handleApiError(error));
+      throw error;
+    }
+  },
+};
+
+// ==================== VEHICLE API ====================
+// Maps to VehicleController.java (Member 2 - navindu)
+export const vehicleApi = {
+  // GET /api/customer/vehicles - Get user's vehicles
+  getMyVehicles: async (): Promise<VehicleResponse[]> => {
+    try {
+      const response = await apiClient.get('/customer/vehicles');
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching vehicles:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/vehicles/{id}
+  getVehicleById: async (id: string): Promise<VehicleResponse> => {
+    try {
+      const response = await apiClient.get(`/customer/vehicles/${id}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching vehicle:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // POST /api/customer/vehicles
+  createVehicle: async (vehicle: Omit<VehicleResponse, 'id' | 'customerId'>): Promise<VehicleResponse> => {
+    try {
+      const response = await apiClient.post('/customer/vehicles', vehicle);
+      return response.data;
+    } catch (error) {
+      console.error('Error creating vehicle:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // PUT /api/customer/vehicles/{id}
+  updateVehicle: async (
+    id: string,
+    vehicle: Partial<VehicleResponse>
+  ): Promise<VehicleResponse> => {
+    try {
+      const response = await apiClient.put(`/customer/vehicles/${id}`, vehicle);
+      return response.data;
+    } catch (error) {
+      console.error('Error updating vehicle:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // DELETE /api/customer/vehicles/{id}
+  deleteVehicle: async (id: string): Promise<void> => {
+    try {
+      await apiClient.delete(`/customer/vehicles/${id}`);
+    } catch (error) {
+      console.error('Error deleting vehicle:', handleApiError(error));
+      throw error;
+    }
+  },
+};
+
+// ==================== PROGRESS TRACKING API ====================
+// Maps to ProgressViewController.java (Member 8 - aloka)
+export const progressApi = {
+  // GET /api/customer/appointments/{appointmentId}/progress
+  getAppointmentProgress: async (appointmentId: string): Promise<ProgressResponse[]> => {
+    try {
+      const response = await apiClient.get(`/customer/appointments/${appointmentId}/progress`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching progress:', handleApiError(error));
+      throw error;
+    }
+  },
+};
+
+// Authentication API functions
+export const authApi = {
+  login: async (email: string, password: string) => {
+    try {
+      const response = await apiClient.post('/auth/login', { email, password });
+      if (response.data.token) {
+        localStorage.setItem('authToken', response.data.token);
+      }
+      return response.data;
+    } catch (error) {
+      console.error('Login error:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  register: async (userData: {
+    name: string;
+    email: string;
+    password: string;
+  }) => {
+    try {
+      const response = await apiClient.post('/auth/register', userData);
+      return response.data;
+    } catch (error) {
+      console.error('Registration error:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  logout: async () => {
+    try {
+      await apiClient.post('/auth/logout');
+      localStorage.removeItem('authToken');
+    } catch (error) {
+      console.error('Logout error:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  getCurrentUser: async () => {
+    try {
+      const response = await apiClient.get('/auth/me');
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching current user:', handleApiError(error));
+      throw error;
+    }
+  },
+};
+
+// ==================== DASHBOARD API ====================
+// Maps to CustomerDashboardController.java (Member 5 - dilusha)
+export const dashboardApi = {
+  // GET /api/customer/dashboard - Get customer dashboard data
+  getDashboardData: async () => {
+    try {
+      const response = await apiClient.get('/customer/dashboard');
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching dashboard data:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/dashboard/upcoming-appointments
+  getUpcomingAppointments: async (limit: number = 5) => {
+    try {
+      const response = await apiClient.get('/customer/dashboard/upcoming-appointments', {
+        params: { limit },
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching upcoming appointments:', handleApiError(error));
+      throw error;
+    }
+  },
+
+  // GET /api/customer/dashboard/recent-services
+  getRecentServices: async (limit: number = 5) => {
+    try {
+      const response = await apiClient.get('/customer/dashboard/recent-services', {
+        params: { limit },
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching recent services:', handleApiError(error));
+      throw error;
+    }
+  },
+};
+
+// Export all APIs as default for backward compatibility
+export default {
+  service: serviceApi,
+  appointment: appointmentApi,
+  vehicle: vehicleApi,
+  progress: progressApi,
+  auth: authApi,
+  dashboard: dashboardApi,
+};
+
+// Also export serviceApi as vehicleServiceApi for backward compatibility with existing code
+export const vehicleServiceApi = serviceApi;
\ No newline at end of file
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
new file mode 100644
index 0000000..871b1fc
--- /dev/null
+++ b/src/lib/apiClient.ts
@@ -0,0 +1,89 @@
+import axios, { AxiosRequestConfig, AxiosInstance } from 'axios';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080/api';
+
+export const getAuthToken = (): string | null => {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem('auth_token');
+  }
+  return null;
+};
+
+// Create single axios instance with default config
+export const axiosInstance: AxiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+
+axiosInstance.interceptors.request.use(
+  (config) => {
+    const token = getAuthToken();
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    // Only set Content-Type to application/json if it's not already set
+    // This allows multipart/form-data requests to work properly
+    if (!config.headers['Content-Type']) {
+      // Check if data is FormData
+      if (config.data instanceof FormData) {
+        // Don't set Content-Type for FormData - browser will set it with boundary
+        delete config.headers['Content-Type'];
+      } else {
+        // Set to application/json for regular requests
+        config.headers['Content-Type'] = 'application/json';
+      }
+    }
+    
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle errors
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      if (typeof window !== 'undefined') {
+        localStorage.removeItem('auth_token');
+        localStorage.removeItem('auth_user');
+        window.location.href = '/auth/login';
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export const api = {
+  get: async <T = any>(endpoint: string, config?: AxiosRequestConfig): Promise<T> => {
+    const response = await axiosInstance.get(endpoint, config);
+    return response.data;
+  },
+
+  post: async <T = any>(endpoint: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
+    const response = await axiosInstance.post(endpoint, data, config);
+    return response.data;
+  },
+
+  put: async <T = any>(endpoint: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
+    const response = await axiosInstance.put(endpoint, data, config);
+    return response.data;
+  },
+
+  patch: async <T = any>(endpoint: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
+    const response = await axiosInstance.patch(endpoint, data, config);
+    return response.data;
+  },
+
+  delete: async <T = any>(endpoint: string, config?: AxiosRequestConfig): Promise<T> => {
+    const response = await axiosInstance.delete(endpoint, config);
+    return response.data;
+  },
+};
+
+export default api;
diff --git a/src/lib/appointmentApi.ts b/src/lib/appointmentApi.ts
new file mode 100644
index 0000000..7af5ce4
--- /dev/null
+++ b/src/lib/appointmentApi.ts
@@ -0,0 +1,55 @@
+const API_BASE_URL = 'http://localhost:8080/api';
+
+export interface Appointment {
+  id: number;
+  serviceName: string;
+  vehicleNumber: string;
+  date: string;
+  time: string;
+  status: string;
+  customerId?: string;
+  customerName?: string;
+}
+
+export const appointmentApi = {
+  // Get all appointments
+  getAllAppointments: async (): Promise<Appointment[]> => {
+    const response = await fetch(`${API_BASE_URL}/appointments`);
+    if (!response.ok) {
+      throw new Error('Failed to fetch appointments');
+    }
+    return response.json();
+  },
+
+  // Get appointments by customer ID
+  getCustomerAppointments: async (customerId: string): Promise<Appointment[]> => {
+    const response = await fetch(`${API_BASE_URL}/appointments/customer/${customerId}`);
+    if (!response.ok) {
+      throw new Error('Failed to fetch customer appointments');
+    }
+    return response.json();
+  },
+
+  // Create a new appointment
+  createAppointment: async (appointmentData: {
+    serviceName: string;
+    vehicleNumber: string;
+    date: string;
+    time: string;
+    status: string;
+  }): Promise<Appointment> => {
+    const response = await fetch(`${API_BASE_URL}/appointments`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(appointmentData),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to create appointment');
+    }
+
+    return response.json();
+  }
+};
\ No newline at end of file
diff --git a/src/lib/authApi.ts b/src/lib/authApi.ts
new file mode 100644
index 0000000..e21d3e7
--- /dev/null
+++ b/src/lib/authApi.ts
@@ -0,0 +1,32 @@
+import { LoginRequest, SignupRequest, AuthResponse } from '@/types/auth.types';
+import { axiosInstance } from './apiClient';
+
+export async function loginUser(credentials: LoginRequest): Promise<AuthResponse> {
+  try {
+    const response = await axiosInstance.post('/auth/login', credentials);
+    return response.data;
+  } catch (error: any) {
+    throw new Error(error.response?.data || error.message || 'Login failed');
+  }
+}
+
+export async function signupUser(data: SignupRequest): Promise<AuthResponse> {
+  try {
+    const response = await axiosInstance.post('/auth/signup', data);
+    return response.data;
+  } catch (error: any) {
+    throw new Error(error.response?.data || error.message || 'Signup failed');
+  }
+}
+
+export async function logoutUser(token: string): Promise<void> {
+  try {
+    await axiosInstance.post('/auth/logout', null, {
+      headers: {
+        'Authorization': `Bearer ${token}`,
+      },
+    });
+  } catch (error) {
+    console.error('Logout failed on server:', error);
+  }
+}
diff --git a/src/lib/debugImageUpload.ts b/src/lib/debugImageUpload.ts
new file mode 100644
index 0000000..5074bef
--- /dev/null
+++ b/src/lib/debugImageUpload.ts
@@ -0,0 +1,92 @@
+// Debugging utility for testing vehicle image upload
+// Add this temporarily to your page.tsx for testing
+
+export const debugImageUpload = () => {
+  console.log('🔍 Starting Image Upload Debug...');
+  
+  // Create file input
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+  
+  input.onchange = async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    
+    if (!file) {
+      console.error('❌ No file selected');
+      return;
+    }
+
+    console.log('📁 File Information:');
+    console.log('  - Name:', file.name);
+    console.log('  - Type:', file.type);
+    console.log('  - Size:', (file.size / 1024).toFixed(2), 'KB');
+    console.log('  - Last Modified:', new Date(file.lastModified));
+    console.log('  - Is File object:', file instanceof File);
+
+    const vehicleData = {
+      model: "Debug Test Vehicle",
+      color: "Red",
+      vin: "DEBUG" + Date.now(),
+      licensePlate: "DBG-" + Date.now(),
+      year: 2023,
+      registrationDate: "2023-11-06"
+    };
+
+    console.log('🚗 Vehicle Data:', vehicleData);
+
+    // Create FormData
+    const formData = new FormData();
+    formData.append('vehicle', JSON.stringify(vehicleData));
+    formData.append('image', file);
+
+    console.log('📦 FormData Contents:');
+    for (let pair of formData.entries()) {
+      console.log('  -', pair[0] + ':', typeof pair[1] === 'string' ? pair[1] : pair[1]);
+    }
+
+    // Check token
+    const token = localStorage.getItem('auth_token');
+    console.log('🔐 Auth Token:', token ? '✅ Present' : '❌ Missing');
+    if (token) {
+      console.log('  - Token preview:', token.substring(0, 20) + '...');
+    }
+
+    // Test API call
+    console.log('🌐 Making API Call...');
+    console.log('⚠️  NOTE: NOT setting Content-Type header - browser will set it automatically with boundary');
+    try {
+      const response = await fetch('http://localhost:8080/api/vehicles/customer/my-vehicles/with-image', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`
+          // CRITICAL: DON'T set Content-Type - let browser add boundary automatically
+          // Setting 'Content-Type': 'multipart/form-data' will break the request!
+        },
+        body: formData
+      });
+
+      console.log('📡 Response Status:', response.status, response.statusText);
+      
+      if (response.ok) {
+        const data = await response.json();
+        console.log('✅ SUCCESS!', data);
+        alert('✅ Image uploaded successfully!\n\nCheck console for details.');
+      } else {
+        const errorText = await response.text();
+        console.error('❌ ERROR Response:', errorText);
+        alert('❌ Upload failed!\n\nStatus: ' + response.status + '\nCheck console for details.');
+      }
+    } catch (error) {
+      console.error('❌ NETWORK ERROR:', error);
+      alert('❌ Network error!\n\nCheck if backend is running on port 8080.\nCheck console for details.');
+    }
+  };
+
+  // Trigger file selection
+  input.click();
+  console.log('📂 File picker opened...');
+};
+
+// To use: Add this to your vehicle page component and call it:
+// <button onClick={debugImageUpload}>🐛 Debug Image Upload</button>
diff --git a/src/lib/notificationService.ts b/src/lib/notificationService.ts
new file mode 100644
index 0000000..c7a046d
--- /dev/null
+++ b/src/lib/notificationService.ts
@@ -0,0 +1,36 @@
+export const authNotifications = {
+  loginSuccess: () => {
+    console.log('Login successful');
+    // You can implement toast notifications here later
+  },
+  
+  loginError: (message: string) => {
+    console.error('Login error:', message);
+    // You can implement toast notifications here later
+  },
+  
+  logoutSuccess: () => {
+    console.log('Logout successful');
+    // You can implement toast notifications here later
+  },
+  
+  signupSuccess: () => {
+    console.log('Signup successful');
+    // You can implement toast notifications here later
+  },
+  
+  signupError: (message: string) => {
+    console.error('Signup error:', message);
+    // You can implement toast notifications here later
+  },
+  
+  passwordResetSent: () => {
+    console.log('Password reset email sent');
+    // You can implement toast notifications here later
+  },
+  
+  passwordResetSuccess: () => {
+    console.log('Password reset successful');
+    // You can implement toast notifications here later
+  }
+};
\ No newline at end of file
diff --git a/src/lib/passwordApi.ts b/src/lib/passwordApi.ts
new file mode 100644
index 0000000..16308a4
--- /dev/null
+++ b/src/lib/passwordApi.ts
@@ -0,0 +1,56 @@
+import { axiosInstance } from './apiClient';
+
+export interface ForgotPasswordRequest {
+  email: string;
+}
+
+export interface VerifyOtpRequest {
+  email: string;
+  otp: string;
+}
+
+export interface ResetPasswordRequest {
+  email: string;
+  otp: string;
+  newPassword: string;
+}
+
+export interface ForgotPasswordResponse {
+  message: string;
+  email: string;
+}
+
+export interface VerifyOtpResponse {
+  message: string;
+}
+
+export interface ResetPasswordResponse {
+  message: string;
+}
+
+export async function sendOtp(email: string): Promise<ForgotPasswordResponse> {
+  try {
+    const response = await axiosInstance.post('/password/forgot', { email });
+    return response.data;
+  } catch (error: any) {
+    throw new Error(error.response?.data?.error || error.message || 'Failed to send OTP');
+  }
+}
+
+export async function verifyOtp(email: string, otp: string): Promise<VerifyOtpResponse> {
+  try {
+    const response = await axiosInstance.post('/password/verify-otp', { email, otp });
+    return response.data;
+  } catch (error: any) {
+    throw new Error(error.response?.data?.error || error.message || 'OTP verification failed');
+  }
+}
+
+export async function resetPassword(email: string, otp: string, newPassword: string): Promise<ResetPasswordResponse> {
+  try {
+    const response = await axiosInstance.post('/password/reset', { email, otp, newPassword });
+    return response.data;
+  } catch (error: any) {
+    throw new Error(error.response?.data?.error || error.message || 'Password reset failed');
+  }
+}
diff --git a/src/lib/vehicleApi.ts b/src/lib/vehicleApi.ts
new file mode 100644
index 0000000..d4e665f
--- /dev/null
+++ b/src/lib/vehicleApi.ts
@@ -0,0 +1,109 @@
+import { axiosInstance } from './apiClient';
+import {
+  Vehicle,
+  CreateVehicleRequest,
+  UpdateVehicleRequest,
+} from '@/types/vehicle.types';
+
+const VEHICLE_API_BASE = '/vehicles/customer/my-vehicles';
+
+/**
+ * Vehicle API Service
+ * Connects to backend vehicle endpoints
+ */
+export const vehicleApi = {
+  /**
+   * Get all vehicles for the authenticated customer
+   */
+  getAllVehicles: async (): Promise<Vehicle[]> => {
+    const response = await axiosInstance.get<Vehicle[]>(VEHICLE_API_BASE);
+    return response.data;
+  },
+
+  /**
+   * Get a specific vehicle by ID
+   */
+  getVehicleById: async (vehicleId: number): Promise<Vehicle> => {
+    const response = await axiosInstance.get<Vehicle>(`${VEHICLE_API_BASE}/${vehicleId}`);
+    return response.data;
+  },
+
+  /**
+   * Create a new vehicle without an image
+   */
+  createVehicle: async (vehicleData: CreateVehicleRequest): Promise<Vehicle> => {
+    const response = await axiosInstance.post<Vehicle>(VEHICLE_API_BASE, vehicleData);
+    return response.data;
+  },
+
+  /**
+   * Create a new vehicle with an image
+   */
+  createVehicleWithImage: async (
+    vehicleData: CreateVehicleRequest,
+    imageFile: File
+  ): Promise<Vehicle> => {
+    const formData = new FormData();
+    
+    // Add vehicle data as JSON string (must match backend @RequestPart name)
+    formData.append('vehicle', JSON.stringify(vehicleData));
+    
+    // Add image file (must match backend @RequestPart name)
+    formData.append('image', imageFile);
+
+    // No need to specify headers - the interceptor handles it
+    const response = await axiosInstance.post<Vehicle>(
+      `${VEHICLE_API_BASE}/with-image`,
+      formData
+    );
+    return response.data;
+  },
+
+  /**
+   * Update an existing vehicle without changing the image
+   */
+  updateVehicle: async (
+    vehicleId: number,
+    vehicleData: UpdateVehicleRequest
+  ): Promise<Vehicle> => {
+    const response = await axiosInstance.put<Vehicle>(
+      `${VEHICLE_API_BASE}/${vehicleId}`,
+      vehicleData
+    );
+    return response.data;
+  },
+
+  /**
+   * Update an existing vehicle with a new image
+   */
+  updateVehicleWithImage: async (
+    vehicleId: number,
+    vehicleData: UpdateVehicleRequest,
+    imageFile: File
+  ): Promise<Vehicle> => {
+    const formData = new FormData();
+    
+    // Add vehicle data as JSON string (must match backend @RequestPart name)
+    formData.append('vehicle', JSON.stringify(vehicleData));
+    
+    // Add image file (must match backend @RequestPart name)
+    formData.append('image', imageFile);
+
+    // No need to specify headers - the interceptor handles it
+    const response = await axiosInstance.put<Vehicle>(
+      `${VEHICLE_API_BASE}/${vehicleId}/with-image`,
+      formData
+    );
+    return response.data;
+  },
+
+  /**
+   * Delete a vehicle
+   */
+  deleteVehicle: async (vehicleId: number): Promise<string> => {
+    const response = await axiosInstance.delete<string>(`${VEHICLE_API_BASE}/${vehicleId}`);
+    return response.data;
+  },
+};
+
+export default vehicleApi;
diff --git a/src/types/appointment.types.ts b/src/types/appointment.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/auth.types.ts b/src/types/auth.types.ts
new file mode 100644
index 0000000..6bb1b3f
--- /dev/null
+++ b/src/types/auth.types.ts
@@ -0,0 +1,46 @@
+export interface User {
+  id: string;
+  email: string;
+  firstName?: string;
+  lastName?: string;
+  name?: string;
+  role: 'CUSTOMER' | 'EMPLOYEE' | 'ADMIN';
+  phoneNumber?: string;
+}
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface SignupRequest {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  phoneNumber: string;
+}
+
+export interface CreateEmployeeRequest {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+}
+
+export interface AuthResponse {
+  token: string;
+  type: string;
+  email: string;
+  role: string;
+}
+
+export interface AuthContextType {
+  user: User | null;
+  token: string | null;
+  login: (email: string, password: string) => Promise<void>;
+  signup: (data: SignupRequest) => Promise<void>;
+  logout: () => void;
+  loading: boolean;
+  isAuthenticated: boolean;
+}
diff --git a/src/types/dashboard.types.ts b/src/types/dashboard.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..5201cc3
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,72 @@
+/**
+ * TypeScript Types for Automobile Service Management
+ */
+
+// Customer Types
+export interface Customer {
+  id: string;
+  name: string;
+  firstName?: string;
+  lastName?: string;
+  email: string;
+  phone: string;
+  address?: string;
+  nic?: string;
+  password?: string;
+  joinedDate: string;
+}
+
+// Vehicle Types
+export interface Vehicle {
+  id: string;
+  customerId: string;
+  vehicleNumber: string;
+  make: string;
+  model: string;
+  year: number;
+  type: 'Car' | 'Van' | 'Truck' | 'SUV';
+}
+
+// Appointment Types (Pre-defined Services)
+export interface Appointment {
+  id: string;
+  customerId: string;
+  vehicleId: string;
+  vehicleNumber: string;
+  serviceName: string;
+  date: string;
+  time: string;
+  status: 'Upcoming' | 'Completed' | 'Cancelled';
+  assignedEmployee?: string;
+  approvedBy?: string;
+  notes?: string;
+}
+
+// Project Types (Custom Services)
+export interface Project {
+  id: string;
+  customerId: string;
+  vehicleId: string;
+  vehicleNumber: string;
+  vehicleType: string;
+  taskName: string;
+  description: string;
+  startDate: string;
+  estimatedEndDate?: string;
+  completedDate?: string;
+  time: string;
+  status: 'Pending' | 'Ongoing' | 'Completed' | 'Cancelled';
+  assignedEmployee?: string;
+  approvedBy?: string;
+  estimatedCost?: number;
+  notes?: string;
+}
+
+// Dashboard Stats
+export interface DashboardStats {
+  totalVehicles: number;
+  upcomingAppointments: number;
+  ongoingProjects: number;
+  completedAppointments: number;
+  completedProjects: number;
+}
diff --git a/src/types/notification.types.ts b/src/types/notification.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/progress.types.ts b/src/types/progress.types.ts
new file mode 100644
index 0000000..c0dc942
--- /dev/null
+++ b/src/types/progress.types.ts
@@ -0,0 +1,28 @@
+/**
+ * Progress Types for Employee Operations
+ */
+
+export interface AppointmentProgress {
+  appointmentId: number | string;
+  serviceName: string;
+  location: string;
+  customerName: string;
+  tag: string;
+  progressPercentage: number;
+  hoursLogged: number;
+  estimatedHours: number;
+  status: 'not started' | 'in progress' | 'paused' | 'completed';
+  timerRunning: boolean;
+  latestRemarks: string;
+}
+
+export interface ProgressUpdate {
+  stage: string;
+  percentage: number;
+  remarks: string;
+}
+
+export interface TimeLog {
+  hours: number;
+  description: string;
+}
diff --git a/src/types/project.type.ts b/src/types/project.type.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/service.types.ts b/src/types/service.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/timelog.types.ts b/src/types/timelog.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/user.types.ts b/src/types/user.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/vehicle.types.ts b/src/types/vehicle.types.ts
new file mode 100644
index 0000000..4aae784
--- /dev/null
+++ b/src/types/vehicle.types.ts
@@ -0,0 +1,40 @@
+// Vehicle type definitions matching backend API
+export interface Vehicle {
+  id: number;
+  customerId: number;
+  model: string;
+  color: string;
+  vin: string;
+  licensePlate: string;
+  year: number;
+  registrationDate: string;
+  imageUrl: string | null;
+}
+
+export interface CreateVehicleRequest {
+  model: string;
+  color: string;
+  vin: string;
+  licensePlate: string;
+  year: number;
+  registrationDate: string;
+}
+
+export interface UpdateVehicleRequest {
+  model: string;
+  color: string;
+  vin: string;
+  licensePlate: string;
+  year: number;
+  registrationDate: string;
+}
+
+export interface CreateVehicleWithImageRequest {
+  vehicle: CreateVehicleRequest;
+  image: File;
+}
+
+export interface UpdateVehicleWithImageRequest {
+  vehicle: UpdateVehicleRequest;
+  image: File;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..4f7350a
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+}
+
diff --git a/tsconfig.json b/tsconfig.json
index c133409..ff5c04d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strict": false,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",