Index: ReserveNGo-frontend/eslint.config.js
===================================================================
--- ReserveNGo-frontend/eslint.config.js	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ ReserveNGo-frontend/eslint.config.js	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -17,5 +17,5 @@
   js.configs.recommended,
   ...pluginVue.configs['flat/essential'],
-  
+
   {
     ...pluginVitest.configs.recommended,
Index: ReserveNGo-frontend/package-lock.json
===================================================================
--- ReserveNGo-frontend/package-lock.json	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ ReserveNGo-frontend/package-lock.json	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -23,4 +23,6 @@
       "devDependencies": {
         "@eslint/js": "^9.18.0",
+        "@typescript-eslint/eslint-plugin": "^8.54.0",
+        "@typescript-eslint/parser": "^8.54.0",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitest/eslint-plugin": "1.1.25",
@@ -1113,7 +1115,7 @@
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
-      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
       "dev": true,
       "license": "MIT",
@@ -1132,7 +1134,7 @@
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "dev": true,
       "license": "MIT",
@@ -1431,42 +1433,4 @@
       "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
       "license": "Apache-2.0"
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
     },
     "node_modules/@one-ini/wasm": {
@@ -2167,13 +2131,19 @@
       }
     },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.21.0.tgz",
-      "integrity": "sha512-G3IBKz0/0IPfdeGRMbp+4rbjfSSdnGkXsM/pFZA8zM9t9klXDnB/YnKOBQ0GoPmoROa4bCq2NeHgJa5ydsQ4mA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.21.0",
-        "@typescript-eslint/visitor-keys": "8.21.0"
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
+      "integrity": "sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/type-utils": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
@@ -2183,12 +2153,35 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.21.0.tgz",
-      "integrity": "sha512-PAL6LUuQwotLW2a8VsySDBwYMm129vFm4tMVlylzdoTybTHaAi0oBp7Ac6LhSrHHOdLM3efH+nAR6hAWoMF89A==",
-      "dev": true,
-      "license": "MIT",
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.54.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
+      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
+        "debug": "^4.4.3"
+      },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2197,21 +2190,20 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.21.0.tgz",
-      "integrity": "sha512-x+aeKh/AjAArSauz0GiQZsjT8ciadNMHdkUSwBB9Z6PrKc/4knM4g3UfHml6oDJmKC88a6//cdxnO/+P2LkMcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.21.0",
-        "@typescript-eslint/visitor-keys": "8.21.0",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^2.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
+      "integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.54.0",
+        "@typescript-eslint/types": "^8.54.0",
+        "debug": "^4.4.3"
       },
       "engines": {
@@ -2223,19 +2215,16 @@
       },
       "peerDependencies": {
-        "typescript": ">=4.8.4 <5.8.0"
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.21.0.tgz",
-      "integrity": "sha512-xcXBfcq0Kaxgj7dwejMbFyq7IOHgpNMtVuDveK7w3ZGwG9owKzhALVwKpTF2yrZmEwl9SWdetf3fxNzJQaVuxw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.21.0",
-        "@typescript-eslint/types": "8.21.0",
-        "@typescript-eslint/typescript-estree": "8.21.0"
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
+      "integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0"
       },
       "engines": {
@@ -2245,20 +2234,54 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
+      "integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.54.0.tgz",
+      "integrity": "sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.21.0.tgz",
-      "integrity": "sha512-BkLMNpdV6prozk8LlyK/SOoWLmUFi+ZD+pcqti9ILCbVvHGk1ui1g4jJOc2WDLaeExz2qWwojxlPce5PljcT3w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/types": "8.21.0",
-        "eslint-visitor-keys": "^4.2.0"
-      },
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
+      "integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2269,8 +2292,79 @@
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
+      "integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.54.0",
+        "@typescript-eslint/tsconfig-utils": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
+        "debug": "^4.4.3",
+        "minimatch": "^9.0.5",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
+      "integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
+      "integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.54.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
@@ -3048,6 +3142,6 @@
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "devOptional": true,
-      "license": "MIT",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -3367,7 +3461,7 @@
     },
     "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "dev": true,
       "license": "MIT",
@@ -3985,34 +4079,4 @@
       "license": "Apache-2.0"
     },
-    "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",
-      "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"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "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": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
@@ -4045,14 +4109,4 @@
       "license": "BSD-3-Clause"
     },
-    "node_modules/fastq": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
-      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
     "node_modules/figures": {
       "version": "6.1.0",
@@ -4088,6 +4142,6 @@
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "devOptional": true,
-      "license": "MIT",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -4498,6 +4552,6 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "devOptional": true,
-      "license": "MIT",
+      "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=0.12.0"
@@ -4899,20 +4953,10 @@
       "license": "MIT"
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "devOptional": true,
-      "license": "MIT",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
         "braces": "^3.0.3",
@@ -5290,6 +5334,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
-      "license": "MIT",
+      "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=8.6"
@@ -5436,25 +5480,4 @@
       }
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/randombytes": {
       "version": "2.1.0",
@@ -5496,15 +5519,4 @@
       "engines": {
         "node": ">=4"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
       }
     },
@@ -5576,28 +5588,4 @@
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
@@ -5753,7 +5741,7 @@
     },
     "node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
@@ -6151,4 +6139,53 @@
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tinypool": {
       "version": "1.0.2",
@@ -6205,6 +6242,6 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "devOptional": true,
-      "license": "MIT",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
         "is-number": "^7.0.0"
@@ -6251,7 +6288,7 @@
     },
     "node_modules/ts-api-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.0.tgz",
-      "integrity": "sha512-xCt/TOAc+EOHS1XPnijD3/yzpH6qg2xppZO1YDqGoVsNXfQfzHpOdNuXwrwOU8u4ITXJyDCTyt8w5g1sZv9ynQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
       "dev": true,
       "license": "MIT",
Index: ReserveNGo-frontend/package.json
===================================================================
--- ReserveNGo-frontend/package.json	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ ReserveNGo-frontend/package.json	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -27,4 +27,6 @@
   "devDependencies": {
     "@eslint/js": "^9.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/eslint-plugin": "1.1.25",
Index: ReserveNGo-frontend/src/App.vue
===================================================================
--- ReserveNGo-frontend/src/App.vue	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ ReserveNGo-frontend/src/App.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -1,24 +1,67 @@
-<template>
-  <div class="wrapper">
-    <NavBar />
-    <main class="content">
-      <router-view />
-    </main>
-  </div>
-  <ToastContainer></ToastContainer>
-</template>
-
 <script>
-import NavBar from './components/Project/Nav_bar_new.vue'
+import HeaderNavigationBar from './components/Project/Bars/HeaderNavigationBar.vue'
+import FooterBar from '@/components/Project/Bars/FooterBar.vue'
 import { userStore } from '@/PiniaStores/UserStore.js'
 import ToastContainer from './components/Project/Utility/ToastContainer.vue'
 
 export default {
-  components: { NavBar, ToastContainer },
+  components: { NavBar: HeaderNavigationBar, FooterStatic: FooterBar, ToastContainer },
+
+  data() {
+    return {
+      showScrollTop: false,
+    }
+  },
+
   beforeMount() {
     userStore().getLocalStorage()
   },
+
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+    this.handleScroll()
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+
+  methods: {
+    handleScroll() {
+      this.showScrollTop = window.scrollY > 200
+    },
+    scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    },
+  },
 }
 </script>
+
+<template>
+  <div class="wrapper">
+    <NavBar />
+
+    <main class="content">
+      <router-view />
+    </main>
+
+    <FooterStatic />
+
+    <transition name="fade">
+      <button
+        v-if="showScrollTop"
+        class="back-to-top-btn"
+        aria-label="Back to top"
+        @click="scrollToTop"
+      >
+        <i class="fas fa-arrow-up"></i>
+      </button>
+    </transition>
+  </div>
+  <ToastContainer />
+</template>
 
 <style>
@@ -26,6 +69,5 @@
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
+  min-height: 100vh;
 }
 
@@ -42,8 +84,45 @@
 main.content {
   flex: 1;
-  overflow: hidden;
   margin-top: 80px;
   background: #f3f5f8;
-  padding-bottom: 80px;
+  overflow-y: auto;
+}
+
+.back-to-top-btn {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #5ea5bc;
+  color: #fff;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  transition: all 0.3s ease;
+  font-size: 1.2rem;
+}
+
+.back-to-top-btn:hover {
+  background-color: #4a8fa3;
+  transform: translateY(-2px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(0.85);
 }
 </style>
Index: ReserveNGo-frontend/src/components/Project/Bars/FooterBar.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Bars/FooterBar.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
+++ ReserveNGo-frontend/src/components/Project/Bars/FooterBar.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+const year = new Date().getFullYear()
+</script>
+
+<template>
+  <footer class="footer">
+    <div class="container py-4">
+      <div class="row align-items-center">
+        <!-- Brand -->
+        <div
+          class="col-md-4 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-0"
+        >
+          <img
+            src="/src/assets/rng_logo.png"
+            alt="ReserveNGo logo"
+            class="me-3"
+            style="height: 48px"
+          />
+          <div>
+            <div class="brand-name">Reserve<span class="brand-n">N</span>Go</div>
+            <small class="brand-tagline"> Reservations made simple </small>
+          </div>
+        </div>
+
+        <!-- Center links -->
+        <div class="col-md-4 text-center mb-3 mb-md-0">
+          <router-link to="/about-us" class="footer-link"> About us </router-link>
+          <span class="separator">·</span>
+          <router-link to="/contact" class="footer-link"> Contact </router-link>
+          <span class="separator">·</span>
+          <router-link to="/privacy-policy" class="footer-link"> Privacy policy </router-link>
+        </div>
+
+        <!-- Copyright -->
+        <div class="col-md-4 text-center text-md-end">
+          <small class="copyright"> © {{ year }} ReserveNGo. All rights reserved.</small>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  background-color: #4c8fa3;
+}
+
+/* Brand */
+.brand-name {
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: #ffffff;
+  letter-spacing: 1px;
+}
+
+.brand-n {
+  color: #f55845;
+}
+
+.brand-tagline {
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 0.85rem;
+}
+
+/* Links */
+.footer-link {
+  color: #ffffff;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.footer-link:hover {
+  text-decoration: underline;
+  opacity: 0.85;
+}
+
+.separator {
+  margin: 0 10px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* Copyright */
+.copyright {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
+++ ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -0,0 +1,138 @@
+<script>
+import { userStore } from '@/PiniaStores/UserStore.js'
+import logout_ from '@/components/Project/Auth/logout_.vue'
+import { useLocalManager } from '@/repository/LocalManager.ts'
+
+export default {
+  components: {
+    logout_,
+  },
+  data() {
+    return {
+      user: userStore(),
+      managerLocalId: '',
+    }
+  },
+  methods: {
+    fetchLocalForManager() {
+      useLocalManager
+        .getMyLocal()
+        .then((data) => (this.managerLocalId = data.id))
+        .catch((err) => console.log(err))
+    },
+  },
+  mounted() {
+    if (this.user && this.user.data.role === 'ROLE_LOCAL_MANAGER') {
+      this.fetchLocalForManager()
+    }
+  },
+}
+</script>
+
+<template>
+  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5">
+    <div class="container-fluid">
+      <router-link
+        v-if="user.data.role !== 'ROLE_LOCAL_MANAGER'"
+        to="/"
+        class="navbar-brand d-flex align-items-center"
+      >
+        <img src="/src/assets/rng_logo.png" alt="Logo" class="me-2" style="height: 60px" />
+        <span class="navbar-brand fw-bold fs-3 brand-accent">Reserve<span class="brand-n fs-3">N</span>Go</span>
+      </router-link>
+
+      <div
+        v-if="user.data.role === 'ROLE_LOCAL_MANAGER'"
+        class="navbar-brand d-flex align-items-center"
+      >
+        <img src="/src/assets/rng_logo.png" alt="Logo" class="me-2" style="height: 60px" />
+        <span class="navbar-brand fw-bold fs-3 brand-accent">
+          Reserve<span class="brand-n fs-3">N</span>Go
+        </span>
+      </div>
+
+      <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
+        <ul class="navbar-nav align-items-center">
+          <li class="nav-item" v-if="user.data.role === 'ROLE_CUSTOMER'">
+            <router-link
+              :to="{ name: 'favourite_locals', params: { mode: 'favourites' } }"
+              class="nav-link text-black"
+              >Favourite locals</router-link
+            >
+          </li>
+
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_CUSTOMER'">
+            <router-link to="/my_reservations" class="nav-link text-black"
+              >My reservations</router-link
+            >
+          </li>
+
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_ADMIN'">
+            <router-link to="/admin-dashboard" class="nav-link text-black">Dashboard</router-link>
+          </li>
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
+            <router-link :to="`/more_details/${this.managerLocalId}`" class="nav-link text-black"
+              >My Restaurant</router-link
+            >
+          </li>
+
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
+            <router-link to="/manager-dashboard" class="nav-link text-black">Dashboard</router-link>
+          </li>
+
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_WORKER'">
+            <router-link to="/worker-reservations-dashboard" class="nav-link text-black"
+              >Dashboard</router-link
+            >
+          </li>
+
+          <li
+            class="nav-item"
+            v-if="user.data.role !== 'ROLE_ADMIN' && user.data.role !== 'UN_AUTHENTICATED'"
+          >
+            <router-link to="/profilePage" class="nav-link text-white">
+              <i class="fa-solid fa-user"></i>
+              {{ user.data.firstName }} {{ user.data.lastName }}
+            </router-link>
+          </li>
+
+          <li class="nav-item" v-if="user.data.role === 'UN_AUTHENTICATED'">
+            <router-link to="/login" class="btn btn-dark me-2">Login</router-link>
+          </li>
+
+          <li class="nav-item" v-if="user.data.role === 'UN_AUTHENTICATED'">
+            <router-link to="/register" class="btn btn-dark me-2">Register</router-link>
+          </li>
+
+          <li class="nav-item">
+            <logout_ />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.navbar-brand span {
+  font-size: 1.25rem;
+}
+
+.custom-background-nav {
+  background-color: #5ea5bc;
+}
+
+.navbar-nav .nav-link:hover {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+
+.brand-accent {
+  letter-spacing: 1px;
+  padding-left: 5px;
+  color: #fff;
+}
+
+.brand-n {
+  color: #f55845;
+}
+</style>
Index: serveNGo-frontend/src/components/Project/Nav_bar_new.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ 	(revision )
@@ -1,140 +1,0 @@
-<script>
-import { userStore } from '@/PiniaStores/UserStore.js'
-import logout_ from '@/components/Project/Auth/logout_.vue'
-import { useLocalManager } from '@/repository/LocalManager.ts'
-
-export default {
-  components: {
-    logout_,
-  },
-  data() {
-    return {
-      user: userStore(),
-      managerLocalId: '',
-    }
-  },
-  methods: {
-    fetchLocalForManager() {
-      useLocalManager
-        .getMyLocal()
-        .then((data) => (this.managerLocalId = data.id))
-        .catch((err) => console.log(err))
-    },
-  },
-  mounted() {
-    if (this.user && this.user.data.role === 'ROLE_LOCAL_MANAGER') {
-      this.fetchLocalForManager()
-    }
-  },
-}
-</script>
-
-<template>
-  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5">
-    <div class="container-fluid">
-      <router-link
-        v-if="user.data.role !== 'ROLE_LOCAL_MANAGER'"
-        to="/"
-        class="navbar-brand d-flex align-items-center"
-      >
-        <img src="/src/assets/rng_logo.png" alt="Logo" class="me-2" style="height: 50px" />
-        <span class="navbar-brand fw-bold fs-4 brand-accent">
-          Reserve<span class="brand-n">N</span>Go
-        </span>
-      </router-link>
-
-      <div
-        v-if="user.data.role === 'ROLE_LOCAL_MANAGER'"
-        class="navbar-brand d-flex align-items-center"
-      >
-        <img src="/src/assets/rng_logo.png" alt="Logo" class="me-2" style="height: 50px" />
-        <span class="navbar-brand fw-bold fs-4 brand-accent">
-          Reserve<span class="brand-n">N</span>Go
-        </span>
-      </div>
-
-      <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
-        <ul class="navbar-nav align-items-center">
-          <li class="nav-item" v-if="user.data.role === 'ROLE_CUSTOMER'">
-            <router-link
-              :to="{ name: 'favourite_locals', params: { mode: 'favourites' } }"
-              class="nav-link text-black"
-              >Favourite locals</router-link
-            >
-          </li>
-
-          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_CUSTOMER'">
-            <router-link to="/my_reservations" class="nav-link text-black"
-              >My reservations</router-link
-            >
-          </li>
-
-          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_ADMIN'">
-            <router-link to="/admin-dashboard" class="nav-link text-black">Dashboard</router-link>
-          </li>
-          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
-            <router-link :to="`/more_details/${this.managerLocalId}`" class="nav-link text-black"
-              >My Restaurant</router-link
-            >
-          </li>
-
-          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
-            <router-link to="/manager-dashboard" class="nav-link text-black">Dashboard</router-link>
-          </li>
-
-          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_WORKER'">
-            <router-link to="/worker-reservations-dashboard" class="nav-link text-black"
-              >Dashboard</router-link
-            >
-          </li>
-
-          <li
-            class="nav-item"
-            v-if="user.data.role !== 'ROLE_ADMIN' && user.data.role !== 'UN_AUTHENTICATED'"
-          >
-            <router-link to="/profilePage" class="nav-link text-white">
-              <i class="fa-solid fa-user"></i>
-              {{ user.data.firstName }} {{ user.data.lastName }}
-            </router-link>
-          </li>
-
-          <li class="nav-item" v-if="user.data.role === 'UN_AUTHENTICATED'">
-            <router-link to="/login" class="btn btn-dark me-2">Login</router-link>
-          </li>
-
-          <li class="nav-item" v-if="user.data.role === 'UN_AUTHENTICATED'">
-            <router-link to="/register" class="btn btn-dark me-2">Register</router-link>
-          </li>
-
-          <li class="nav-item">
-            <logout_ />
-          </li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-</template>
-
-<style scoped>
-.navbar-brand span {
-  font-size: 1.25rem;
-}
-
-.custom-background-nav {
-  background-color: #5ea5bc;
-}
-
-.navbar-nav .nav-link:hover {
-  color: rgba(255, 255, 255, 0.6) !important;
-}
-
-.brand-accent {
-  letter-spacing: 1px;
-  padding-left: 5px;
-  color: #fff;
-}
-
-.brand-n {
-  color: #f55845;
-}
-</style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -700,6 +700,4 @@
 <style scoped>
 .locale-details-wrapper {
-  height: calc(100vh - 80px);
-  overflow-y: auto;
   background-color: #f3f5f8;
 }
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -21,5 +21,4 @@
       allEvents: [],
       allEventsRaw: [],
-      showBackToTop: true,
       locals: [],
       activeView: 'locals',
@@ -28,35 +27,5 @@
   },
 
-  mounted() {
-    const wrapper = this.$el.querySelector('.home-page-wrapper')
-    if (wrapper) {
-      wrapper.addEventListener('scroll', this.handleScroll)
-      this.handleScroll()
-    }
-  },
-
-  beforeUnmount() {
-    const wrapper = this.$el.querySelector('.home-page-wrapper')
-    if (wrapper) {
-      wrapper.removeEventListener('scroll', this.handleScroll)
-    }
-  },
-
   methods: {
-    handleScroll() {
-      const wrapper = this.$el.querySelector('.home-page-wrapper')
-      if (wrapper) {
-        this.showBackToTop = wrapper.scrollTop > 0
-      }
-    },
-    scrollToTop() {
-      const wrapper = this.$el.querySelector('.home-page-wrapper')
-      if (wrapper) {
-        wrapper.scrollTo({
-          top: 0,
-          behavior: 'smooth',
-        })
-      }
-    },
     sendSearchQuery(searchQuery, sortBy, directions, isOpen) {
       if (this.activeView === 'locals') {
@@ -71,4 +40,5 @@
       }
     },
+
     filterEvents(searchQuery, sortBy, directions) {
       let filteredEvents = [...this.allEventsRaw]
@@ -115,7 +85,9 @@
       this.allEvents = transformArray(filteredEvents, 3)
     },
+
     setActiveView(view) {
       this.activeView = view
     },
+
     async loadFavouriteEvents() {
       try {
@@ -127,4 +99,5 @@
       }
     },
+
     toggleFavouriteEvent(id) {
       const isFav = this.favouriteEvents.map((item) => item.id).includes(id)
@@ -138,10 +111,8 @@
             this.favouriteEvents = this.favouriteEvents.filter((fav) => fav.id !== id)
           } else {
-            // Find the event in allEventsRaw and add it to favourites
             const event = this.allEventsRaw.find((e) => e.id === id)
             if (event) {
               this.favouriteEvents.push(event)
             } else {
-              // If not found in allEventsRaw, refresh the entire list
               this.loadFavouriteEvents()
             }
@@ -150,5 +121,4 @@
         .catch((err) => {
           console.log('Error toggling favourite:', err)
-          // If there's a 409 conflict, refresh the list to sync
           if (err.message && err.message.includes('409')) {
             this.loadFavouriteEvents()
@@ -159,8 +129,5 @@
 
   beforeMount() {
-    // Load favourite events first and wait for it
-    this.loadFavouriteEvents().then(() => {
-      console.log('Favourites loaded, count:', this.favouriteEvents.length)
-    })
+    this.loadFavouriteEvents()
 
     useEvents
@@ -169,7 +136,6 @@
         this.allEventsRaw = data.events
         this.allEvents = transformArray(data.events, 3)
-        console.log('Currently Reading here', this.allEvents)
       })
-      .catch((error) => console.log('Probably failed fetching events due to login', error))
+      .catch((error) => console.log('Failed fetching events', error))
 
     useLocales
@@ -177,8 +143,4 @@
       .then((data) => {
         this.locals = data.locals
-        console.log(
-          'The data of the locals will probobly be needed later so this console log stays',
-          data,
-        )
       })
       .catch((err) => console.log('The locals are not being caught.', err))
@@ -188,60 +150,43 @@
 
 <template>
-  <div>
-    <div class="home-page-wrapper">
-      <div class="container-fluid px-0">
-        <div class="row justify-content-center">
-          <SearchFilterPanel :activeView="activeView" @search-query-sent="sendSearchQuery" />
-
-          <div class="col-12 events-section-wrapper">
-            <div class="container">
-              <Events_carousel :all-events="allEvents" />
-            </div>
+  <div class="home-page-wrapper">
+    <div class="container-fluid px-0">
+      <div class="row justify-content-center">
+        <SearchFilterPanel :activeView="activeView" @search-query-sent="sendSearchQuery" />
+
+        <div class="col-12 events-section-wrapper">
+          <div class="container">
+            <Events_carousel :all-events="allEvents" />
           </div>
-
-          <div class="col-md-8">
-            <div class="navigation-toggle">
-              <button
-                @click="setActiveView('locals')"
-                :class="['nav-btn', { active: activeView === 'locals' }]"
-              >
-                <i class="fas fa-utensils me-2"></i>Locals
-              </button>
-              <button
-                @click="setActiveView('events')"
-                :class="['nav-btn', { active: activeView === 'events' }]"
-              >
-                <i class="fas fa-calendar-alt me-2"></i>Events
-              </button>
-            </div>
+        </div>
+
+        <div class="col-md-8">
+          <div class="navigation-toggle">
+            <button
+              @click="setActiveView('locals')"
+              :class="['nav-btn', { active: activeView === 'locals' }]"
+            >
+              <i class="fas fa-utensils me-2"></i>Locals
+            </button>
+            <button
+              @click="setActiveView('events')"
+              :class="['nav-btn', { active: activeView === 'events' }]"
+            >
+              <i class="fas fa-calendar-alt me-2"></i>Events
+            </button>
           </div>
-
-          <div class="col-md-8 listing-column">
-            <Locale_listing_container
-              v-if="activeView === 'locals'"
-              :locals="locals"
-              :mode="'all'"
-            />
-            <Event_listing_container
-              v-else
-              :events="allEvents"
-              :favouriteEvents="favouriteEvents"
-              @toggle-favourite="toggleFavouriteEvent"
-            />
-          </div>
+        </div>
+
+        <div class="col-md-8 listing-column">
+          <Locale_listing_container v-if="activeView === 'locals'" :locals="locals" mode="all" />
+          <Event_listing_container
+            v-else
+            :events="allEvents"
+            :favouriteEvents="favouriteEvents"
+            @toggle-favourite="toggleFavouriteEvent"
+          />
         </div>
       </div>
     </div>
-
-    <transition name="fade">
-      <button
-        v-if="showBackToTop"
-        @click="scrollToTop"
-        class="back-to-top-btn"
-        aria-label="Back to top"
-      >
-        <i class="fas fa-arrow-up"></i>
-      </button>
-    </transition>
   </div>
 </template>
@@ -249,12 +194,5 @@
 <style scoped>
 .home-page-wrapper {
-  height: calc(100vh - 80px);
-  overflow-y: auto;
   overflow-x: hidden;
-}
-
-.search-bar {
-  background-color: #f3f5f8;
-  z-index: 1050;
 }
 
@@ -269,5 +207,5 @@
   display: flex;
   gap: 1rem;
-  padding: 1rem 1rem 0.5rem 1rem;
+  padding: 1rem 1rem 0.5rem;
   background-color: #f3f5f8;
 }
@@ -283,5 +221,4 @@
   cursor: pointer;
   transition: all 0.3s ease;
-  font-size: 1rem;
 }
 
@@ -299,78 +236,7 @@
 }
 
-.nav-btn i {
-  font-size: 1.1rem;
-}
-
 .listing-column {
   background-color: #f3f5f8;
   padding: 1rem;
 }
-
-.back-to-top-btn {
-  position: fixed;
-  bottom: 2rem;
-  right: 2rem;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background-color: #5ea5bc;
-  color: #fff;
-  border: none;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  transition: all 0.3s ease;
-  font-size: 1.2rem;
-}
-
-.back-to-top-btn:hover {
-  background-color: #4a8fa3;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-}
-
-.back-to-top-btn:active {
-  transform: translateY(0);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition:
-    opacity 0.3s ease,
-    transform 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-  transform: scale(0.8);
-}
-
-@media (max-width: 768px) {
-  .events-section-wrapper {
-    padding: 0.5rem 0;
-  }
-
-  .navigation-toggle {
-    padding: 0.75rem 0.75rem 0.5rem 0.75rem;
-    gap: 0.5rem;
-  }
-
-  .nav-btn {
-    padding: 0.6rem 1rem;
-    font-size: 0.9rem;
-  }
-
-  .back-to-top-btn {
-    bottom: 1.5rem;
-    right: 1.5rem;
-    width: 45px;
-    height: 45px;
-    font-size: 1rem;
-  }
-}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -9,7 +9,12 @@
 })
 
-const selectedFilters = ref([])
+const selectedFilters = ref<string[]>([])
 
-const localeFilterOptions = { 'Open Now': 'isOpen', 'Top Rated': 'rating', Nearby: 'distance' }
+const localeFilterOptions = {
+  'Open Now': 'isOpen',
+  'Top Rated': 'rating',
+  Nearby: 'distance',
+}
+
 const eventFilterOptions = {
   Upcoming: 'upcoming',
@@ -35,23 +40,24 @@
 ]
 
-const filterOptions = computed(() => {
-  return props.activeView === 'locals' ? localeFilterOptions : eventFilterOptions
-})
+const filterOptions = computed(() =>
+  props.activeView === 'locals' ? localeFilterOptions : eventFilterOptions,
+)
 
-const sortOptions = computed(() => {
-  return props.activeView === 'locals' ? localeSortOptions : eventSortOptions
-})
+const sortOptions = computed(() =>
+  props.activeView === 'locals' ? localeSortOptions : eventSortOptions,
+)
 
-const placeholderText = computed(() => {
-  return props.activeView === 'locals' ? 'Search locals...' : 'Search events...'
-})
+const placeholderText = computed(() =>
+  props.activeView === 'locals' ? 'Search locals...' : 'Search events...',
+)
 
 const sortQuery = ref('')
 const searchInput = ref('')
 
-let debounceTimer = null
-const emit = defineEmits(['searchQuerySent'])
+let debounceTimer: number | null = null
+const emit = defineEmits<{
+  (e: 'searchQuerySent', search: string, sort: string, direction: string, filters: any): void
+}>()
 
-// Reset filters when the view changes
 watch(
   () => props.activeView,
@@ -64,21 +70,14 @@
 
 watch([searchInput, sortQuery, selectedFilters], (newValues) => {
-  clearTimeout(debounceTimer)
+  if (debounceTimer) clearTimeout(debounceTimer)
 
-  debounceTimer = setTimeout(() => {
-    const [newSearchValue, newSortValue, newSelectedFilters] = newValues
-    const [extractedSortValue, ascOrDsc = 'asc'] = newSortValue.split(',')
+  debounceTimer = window.setTimeout(() => {
+    const [search, sort, filters] = newValues
+    const [sortField, direction = 'asc'] = sort.split(',')
 
     if (props.activeView === 'locals') {
-      emit(
-        'searchQuerySent',
-        newSearchValue,
-        extractedSortValue,
-        ascOrDsc,
-        newSelectedFilters.includes('isOpen'),
-      )
+      emit('searchQuerySent', search, sortField, direction, filters.includes('isOpen'))
     } else {
-      // For events, we just pass the filters array, parent will handle it
-      emit('searchQuerySent', newSearchValue, extractedSortValue, ascOrDsc, newSelectedFilters)
+      emit('searchQuerySent', search, sortField, direction, filters)
     }
   }, 400)
@@ -87,62 +86,63 @@
 
 <template>
-  <!-- Sticky Search and Filter Bar outside scroll area -->
-  <div class="col-12 col-md-8 search-bar sticky-top shadow-sm px-3 py-3 mb-5">
-    <div class="row g-2 align-items-center">
-      <!-- Search Bar -->
-      <div class="col-12 col-md-6">
-        <input
-          v-model="searchInput"
-          type="text"
-          class="form-control"
-          :placeholder="placeholderText"
-        />
-      </div>
+  <!-- ✅ STICKY WRAPPER (NOT A BOOTSTRAP COL) -->
+  <div class="search-bar-wrapper">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-12 col-md-8 search-bar shadow-sm px-3 py-3 mb-5">
+          <div class="row g-2 align-items-center">
+            <!-- Search -->
+            <div class="col-12 col-md-6">
+              <input
+                v-model="searchInput"
+                type="text"
+                class="form-control"
+                :placeholder="placeholderText"
+              />
+            </div>
 
-      <!-- Sort By Dropdown -->
-      <div class="col-6 col-md-3">
-        <select v-model="sortQuery" class="form-select">
-          <option
-            v-for="option in sortOptions"
-            :key="option.value"
-            :value="option.value"
-            :selected="option.value === ''"
-            :disabled="option.value === ''"
-          >
-            {{ option.text }}
-          </option>
-        </select>
-      </div>
+            <!-- Sort -->
+            <div class="col-6 col-md-3">
+              <select v-model="sortQuery" class="form-select">
+                <option disabled value="">Sort by</option>
+                <option v-for="option in sortOptions" :key="option.value" :value="option.value">
+                  {{ option.text }}
+                </option>
+              </select>
+            </div>
 
-      <!-- Filter Dropdown with Checkboxes -->
-      <div class="col-6 col-md-3">
-        <div class="dropdown">
-          <button
-            class="btn btn-outline-secondary dropdown-toggle w-100"
-            type="button"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
-          >
-            Filter
-            <span v-if="selectedFilters.length > 0" class="badge bg-primary ms-1">
-              {{ selectedFilters.length }}
-            </span>
-          </button>
-          <ul class="dropdown-menu p-2" style="min-width: 200px">
-            <li v-for="(option, key) in filterOptions" :key="key">
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  :id="option"
-                  :value="option"
-                  v-model="selectedFilters"
-                />
-                <label class="form-check-label" :for="option">
-                  {{ key }}
-                </label>
+            <!-- Filter -->
+            <div class="col-6 col-md-3">
+              <div class="dropdown">
+                <button
+                  class="btn btn-outline-secondary dropdown-toggle w-100"
+                  type="button"
+                  data-bs-toggle="dropdown"
+                >
+                  Filter
+                  <span v-if="selectedFilters.length" class="badge bg-primary ms-1">
+                    {{ selectedFilters.length }}
+                  </span>
+                </button>
+
+                <ul class="dropdown-menu p-2" style="min-width: 200px">
+                  <li v-for="(option, key) in filterOptions" :key="key">
+                    <div class="form-check">
+                      <input
+                        class="form-check-input"
+                        type="checkbox"
+                        :id="option"
+                        :value="option"
+                        v-model="selectedFilters"
+                      />
+                      <label class="form-check-label" :for="option">
+                        {{ key }}
+                      </label>
+                    </div>
+                  </li>
+                </ul>
               </div>
-            </li>
-          </ul>
+            </div>
+          </div>
         </div>
       </div>
@@ -152,8 +152,17 @@
 
 <style scoped>
+/* ✅ Sticky must live OUTSIDE bootstrap grid */
+.search-bar-wrapper {
+  position: sticky;
+  top: 0;          /* 👈 key change */
+  z-index: 900;    /* still below navbar */
+}
+
+/* Actual bar */
 .search-bar {
   background-color: #f3f5f8;
 }
 
+/* Badge */
 .badge {
   font-size: 0.7rem;
Index: ReserveNGo-frontend/src/components/Project/StaticPages/AboutUs.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/StaticPages/AboutUs.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
+++ ReserveNGo-frontend/src/components/Project/StaticPages/AboutUs.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -0,0 +1,54 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="container py-5 about">
+    <h1 class="mb-4">About Us</h1>
+
+    <p>
+      <strong>ReserveNGo</strong> is a reservation management platform designed to connect customers
+      with local businesses such as restaurants, cafés, and similar venues. Our goal is to simplify
+      the reservation process for everyone involved.
+    </p>
+
+    <p>
+      We provide a complete system with clearly defined roles for
+      <strong>customers</strong>, <strong>local workers</strong>, and
+      <strong>local managers</strong>, allowing each user to focus on what matters most.
+    </p>
+
+    <h5 class="mt-4">For Customers</h5>
+    <p>
+      Customers can search for venues using detailed filters, manage their reservations, save
+      favorite locations or events, and leave ratings and feedback. Reservations can be made quickly
+      without the need for phone calls, while still offering the option to contact the venue
+      directly.
+    </p>
+
+    <h5 class="mt-4">For Local Businesses</h5>
+    <p>
+      Local managers can fully manage their venue’s information, create and promote events, and
+      oversee reservations through a centralized dashboard. Worker accounts are focused specifically
+      on reservation handling, ensuring smooth daily operations.
+    </p>
+
+    <h5 class="mt-4">Events & Discoverability</h5>
+    <p>
+      In addition to searching for venues, customers can discover places through events. Businesses
+      can create custom events, allowing users to search based on experiences rather than just
+      locations.
+    </p>
+
+    <h5 class="mt-4">Our Vision</h5>
+    <p>
+      ReserveNGo is currently developed as a student project, but it is treated as a future-ready
+      business idea. The long-term vision is to offer a subscription-based platform that helps local
+      businesses modernize their reservation workflows and improve customer experience.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.about {
+  max-width: 900px;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/StaticPages/ContactComp.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/StaticPages/ContactComp.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
+++ ReserveNGo-frontend/src/components/Project/StaticPages/ContactComp.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -0,0 +1,86 @@
+<template>
+  <div class="container py-5 contact">
+    <h1 class="mb-4">Contact</h1>
+
+    <p class="mb-4">
+      If you have questions, feedback, or are interested in using ReserveNGo for your business, feel
+      free to reach out.
+    </p>
+
+    <div class="row g-4">
+      <!-- Contact Info -->
+      <div class="col-md-5">
+        <div class="card shadow-sm h-100">
+          <div class="card-body">
+            <h5 class="card-title mb-3">Contact Information</h5>
+
+            <p class="mb-2">
+              <strong>Email:</strong><br />
+              reservengo2025@gmail.com
+            </p>
+
+            <p class="mb-2">
+              <strong>Phone:</strong><br />
+              +123 456 789
+            </p>
+
+            <p class="mb-0">
+              <strong>Location:</strong><br />
+              Faculty of Computer Science & Engineering (FINKI), Skopje
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Contact Form -->
+      <div class="col-md-7">
+        <div class="card shadow-sm">
+          <div class="card-body">
+            <h5 class="card-title mb-3">Send a Message</h5>
+
+            <form>
+              <div class="mb-3">
+                <label class="form-label">Your Name</label>
+                <input type="text" class="form-control" placeholder="John Doe" />
+              </div>
+
+              <div class="mb-3">
+                <label class="form-label">Email</label>
+                <input type="email" class="form-control" placeholder="you@example.com" />
+              </div>
+
+              <div class="mb-3">
+                <label class="form-label">Message</label>
+                <textarea
+                  class="form-control"
+                  rows="4"
+                  placeholder="Write your message here..."
+                ></textarea>
+              </div>
+
+              <button type="button" class="btn btn-primary">Send Message</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Map -->
+    <div class="mt-5">
+      <h5 class="mb-3">Find Us</h5>
+      <div class="ratio ratio-16x9 rounded overflow-hidden shadow-sm">
+        <iframe
+          src="https://www.google.com/maps?q=FINKI%20Skopje&output=embed"
+          loading="lazy"
+          referrerpolicy="no-referrer-when-downgrade"
+        ></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.contact {
+  max-width: 1000px;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/StaticPages/PrivacyPolicy.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/StaticPages/PrivacyPolicy.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
+++ ReserveNGo-frontend/src/components/Project/StaticPages/PrivacyPolicy.vue	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -0,0 +1,60 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="container py-5 privacy">
+    <h1 class="mb-4">Privacy Policy</h1>
+
+    <p>
+      At <strong>ReserveNGo</strong>, we value your privacy and are committed to protecting your
+      personal information. This Privacy Policy explains how we collect, use, and safeguard your
+      data.
+    </p>
+
+    <h5 class="mt-4">Information We Collect</h5>
+    <p>
+      We may collect personal information such as your name, email address, and reservation details
+      when you use our services.
+    </p>
+
+    <h5 class="mt-4">How We Use Your Information</h5>
+    <p>
+      Your information is used solely to provide and improve our reservation services, manage
+      bookings, and communicate important updates related to your account.
+    </p>
+
+    <h5 class="mt-4">Data Security</h5>
+    <p>
+      We take reasonable technical and organizational measures to protect your personal data against
+      unauthorized access, loss, or misuse.
+    </p>
+
+    <h5 class="mt-4">Third-Party Services</h5>
+    <p>
+      ReserveNGo does not sell or share your personal information with third parties except when
+      required to provide the service or comply with legal obligations.
+    </p>
+
+    <h5 class="mt-4">Your Rights</h5>
+    <p>
+      You have the right to access, correct, or request deletion of your personal data in accordance
+      with applicable laws.
+    </p>
+
+    <h5 class="mt-4">Changes to This Policy</h5>
+    <p>
+      We may update this Privacy Policy from time to time. Any changes will be posted on this page.
+    </p>
+
+    <h5 class="mt-4">Contact Us</h5>
+    <p>
+      If you have any questions regarding this Privacy Policy, please contact us through the Contact
+      page.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.privacy {
+  max-width: 900px;
+}
+</style>
Index: ReserveNGo-frontend/src/router/index.js
===================================================================
--- ReserveNGo-frontend/src/router/index.js	(revision db283446961fcf587e111f8d3c5fc5166ac3c162)
+++ ReserveNGo-frontend/src/router/index.js	(revision 89156d04aa0fe80b52a9d502dc95400417b2c194)
@@ -13,4 +13,7 @@
 import DisabledAccountPage from '@/components/Project/Auth/DisabledAccountPage.vue'
 import WorkerReservationsDashboard from '@/components/Project/Worker/WorkerReservationsDashboard.vue'
+import AboutUs from '@/components/Project/StaticPages/AboutUs.vue'
+import ContactComp from '@/components/Project/StaticPages/ContactComp.vue'
+import PrivacyPolicy from '@/components/Project/StaticPages/PrivacyPolicy.vue'
 
 const router = createRouter({
@@ -79,4 +82,19 @@
       component: WorkerReservationsDashboard,
     },
+    {
+      path: '/about-us',
+      name: 'about-us',
+      component: AboutUs,
+    },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: ContactComp,
+    },
+    {
+      path: '/privacy-policy',
+      name: 'privacy-policy',
+      component: PrivacyPolicy,
+    },
   ],
 })