diff --git a/client/package-lock.json b/client/package-lock.json
index c01bfe8a..e51fc2c5 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -28,7 +28,7 @@
         "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
-        "vite": "^5.2.0"
+        "vite": "^5.4.18"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1065,9 +1065,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
-      "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
+      "integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==",
       "cpu": [
         "arm"
       ],
@@ -1079,9 +1079,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
-      "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.0.tgz",
+      "integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==",
       "cpu": [
         "arm64"
       ],
@@ -1093,9 +1093,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
-      "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.0.tgz",
+      "integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==",
       "cpu": [
         "arm64"
       ],
@@ -1107,9 +1107,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
-      "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.0.tgz",
+      "integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==",
       "cpu": [
         "x64"
       ],
@@ -1120,10 +1120,38 @@
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.0.tgz",
+      "integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.0.tgz",
+      "integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
-      "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.0.tgz",
+      "integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==",
       "cpu": [
         "arm"
       ],
@@ -1135,9 +1163,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
-      "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.0.tgz",
+      "integrity": "sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==",
       "cpu": [
         "arm"
       ],
@@ -1149,9 +1177,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
-      "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.0.tgz",
+      "integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==",
       "cpu": [
         "arm64"
       ],
@@ -1163,9 +1191,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
-      "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.0.tgz",
+      "integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==",
       "cpu": [
         "arm64"
       ],
@@ -1176,10 +1204,24 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.0.tgz",
+      "integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
-      "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.0.tgz",
+      "integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==",
       "cpu": [
         "ppc64"
       ],
@@ -1191,9 +1233,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
-      "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.0.tgz",
+      "integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.0.tgz",
+      "integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==",
       "cpu": [
         "riscv64"
       ],
@@ -1205,9 +1261,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
-      "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.0.tgz",
+      "integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==",
       "cpu": [
         "s390x"
       ],
@@ -1219,9 +1275,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
-      "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.0.tgz",
+      "integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==",
       "cpu": [
         "x64"
       ],
@@ -1233,9 +1289,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
-      "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.0.tgz",
+      "integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==",
       "cpu": [
         "x64"
       ],
@@ -1247,9 +1303,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
-      "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.0.tgz",
+      "integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==",
       "cpu": [
         "arm64"
       ],
@@ -1261,9 +1317,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
-      "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.0.tgz",
+      "integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==",
       "cpu": [
         "ia32"
       ],
@@ -1275,9 +1331,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
-      "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.0.tgz",
+      "integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==",
       "cpu": [
         "x64"
       ],
@@ -1334,9 +1390,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -4012,9 +4068,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
@@ -4321,9 +4377,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -4367,9 +4423,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -4386,9 +4442,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -4803,13 +4859,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
-      "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
+      "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.7"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -4819,22 +4875,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.18.0",
-        "@rollup/rollup-android-arm64": "4.18.0",
-        "@rollup/rollup-darwin-arm64": "4.18.0",
-        "@rollup/rollup-darwin-x64": "4.18.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.18.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.18.0",
-        "@rollup/rollup-linux-arm64-musl": "4.18.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.18.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.18.0",
-        "@rollup/rollup-linux-x64-gnu": "4.18.0",
-        "@rollup/rollup-linux-x64-musl": "4.18.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.18.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.18.0",
-        "@rollup/rollup-win32-x64-msvc": "4.18.0",
+        "@rollup/rollup-android-arm-eabi": "4.40.0",
+        "@rollup/rollup-android-arm64": "4.40.0",
+        "@rollup/rollup-darwin-arm64": "4.40.0",
+        "@rollup/rollup-darwin-x64": "4.40.0",
+        "@rollup/rollup-freebsd-arm64": "4.40.0",
+        "@rollup/rollup-freebsd-x64": "4.40.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.40.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.40.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.40.0",
+        "@rollup/rollup-linux-arm64-musl": "4.40.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.40.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.40.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-musl": "4.40.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.40.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.40.0",
+        "@rollup/rollup-win32-x64-msvc": "4.40.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -5004,9 +5064,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -5569,15 +5629,15 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
-      "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
+      "version": "5.4.18",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.18.tgz",
+      "integrity": "sha512-1oDcnEp3lVyHCuQ2YFelM4Alm2o91xNoMncRm1U7S+JdYfYOvbiGZ3/CxGttrOu2M/KcGz7cRC2DoNUA6urmMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.38",
-        "rollup": "^4.13.0"
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -5596,6 +5656,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -5613,6 +5674,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
diff --git a/client/package.json b/client/package.json
index abb180b8..b6a25092 100644
--- a/client/package.json
+++ b/client/package.json
@@ -30,6 +30,6 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "vite": "^5.2.0"
+    "vite": "^5.4.18"
   }
 }
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 70eb0733..552f20e4 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -21,6 +21,9 @@ import ThemeContext from './assets/context/ThemeContext';
 import useAuth from './auth/useAuth';
 import { ProfileProvider } from './assets/context/ProfileContext';
 import Network from './assets/components/network/Network';
+import Adminpage from './assets/components/Admin/Adminpage';
+import Usersprofile from './assets/components/Admin/Usersprofile';
+
 
 function App() {
 
@@ -28,42 +31,64 @@ function App() {
   const { auth } = useAuth();
 
   return (
-    <main className='w-full min-h-screen' data-theme={darkMode ? "dim" : "nord"}>
-      <div className='max-w-[2000px] mx-auto min-h-screen px-2 py-6 bg-base-200'>
-        <Routes>
+    <main
+      className="w-full min-h-screen"
+      data-theme={darkMode ? "dim" : "nord"}
+    >
+      <div className="max-w-[2000px] mx-auto min-h-screen px-2 py-6 bg-base-200">
+        <Routes>            
           <Route path="*" element={<NotFound />} />   
           <Route path='*' element={<Navigate to='/' replace />} />
           <Route path='/unauthorized' element={<Unauthorized />} />
 
           <Route element={<PersistLogin />}>
             <Route element={<RedirectIfAuth />}>
-              <Route path='/' element={<Login />} />
-              <Route path='/register' element={<Register />} />
-              <Route path='/login' element={<Login />} />
+              <Route path="/" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              <Route path="/login" element={<Login />} />
             </Route>
           </Route>
 
           {/* Protected Routes */}
           <Route element={<PersistLogin />}>
-            <Route element={<RequireAuth allowedRoles={['owner', 'admin', 'moderator', 'user']} />}>
+            <Route
+              element={
+                <RequireAuth
+                  allowedRoles={["owner", "admin", "moderator", "user"]}
+                />
+              }
+            >
               <Route element={<Layout />}>
-                <Route path='/dashboard' element={<Dashboard />} />
-                <Route path='/profile' element={<Navigate to={`/profile/${auth?.username}`} />} />
+                <Route path="/dashboard" element={<Dashboard />} />
+                <Route
+                  path="/profile"
+                  element={<Navigate to={`/profile/${auth?.username}`} />}
+                />
                 <Route path="/profile/:username" element={<ProfileProvider />}>
                   <Route index element={<Profile />} />
                   <Route path="edit" element={<EditProfile />} />
                 </Route>
-                <Route path='/network' element={<Network />} />
-                <Route path='/tester' element={<TesterComponent />} />
+                <Route path="/network" element={<Network />} />
+
+                <Route path="/tester" element={<TesterComponent />} />
+              </Route>
+            </Route>
+
+            <Route element={<RequireAuth allowedRoles={["owner", "admin"]} />}>
+              <Route element={<Layout />}>
+                <Route path="/adminpage" element={<Adminpage />} />
+                <Route path="/admin/profile/:username" element={<ProfileProvider />} >
+                <Route index element={<Usersprofile />} />
+                <Route path="edit" element={<EditProfile />} />
+                </Route>
               </Route>
             </Route>
           </Route>
           {/* End Protected Routes */}
-
         </Routes>
       </div>
     </main>
-  )
+  );
 }
 
 export default App
diff --git a/client/src/assets/components/Admin/Adminpage.jsx b/client/src/assets/components/Admin/Adminpage.jsx
new file mode 100644
index 00000000..a4dce056
--- /dev/null
+++ b/client/src/assets/components/Admin/Adminpage.jsx
@@ -0,0 +1,385 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import Loading from "../subcomponents/Loading";
+import useAuth from "../../../auth/useAuth";
+import { axiosPrivate } from "../../../api/axios";
+import { FaTrashAlt, FaUserCircle, FaUserEdit } from "react-icons/fa";
+
+const Adminpage = () => {
+  const { auth } = useAuth();
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [userToDelete, setUserToDelete] = useState(null);
+  const [statusMessage, setStatusMessage] = useState(null);
+
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [userToEdit, setUserToEdit] = useState(null);
+  const [editData, setEditData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    username: "",
+  });
+
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const PER_PAGE_USERS = 6; 
+  const [currentPage, setCurrentPage] = useState(1); 
+
+  const fetchUsers = async () => {
+    setLoading(true);
+    try {
+      const response = await axiosPrivate.get("/api/users", {
+        headers: { Authorization: `Bearer ${auth?.accessToken}` },
+      });
+      setUsers(response.data);
+    } catch (err) {
+      console.error("Error fetching users:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, [auth?.accessToken]);
+
+  const confirmDelete = (user) => {
+    setUserToDelete(user);
+    setShowDeleteModal(true);
+  };
+
+  const handleDeleteConfirmed = async () => {
+    if (!userToDelete) return;
+    try {
+      const res = await axiosPrivate.delete(`/api/users/${userToDelete._id}`, {
+        headers: { Authorization: `Bearer ${auth?.accessToken}` },
+      });
+
+      if (res.status === 200 || res.status === 204) {
+        setStatusMessage({
+          type: "success",
+          text: `User "${userToDelete.username}" deleted successfully.`,
+        });
+        fetchUsers();
+      } else throw new Error("Unexpected response status");
+    } catch (err) {
+      setStatusMessage({ type: "error", text: "Failed to delete user." });
+    } finally {
+      setShowDeleteModal(false);
+      setUserToDelete(null);
+    }
+  };
+
+  const openEditModal = (user) => {
+    setUserToEdit(user);
+    setEditData({
+      firstName: user.firstName || "",
+      lastName: user.lastName || "",
+      email: user.email || "",
+      username: user.username || "",
+    });
+    setEditModalOpen(true);
+  };
+
+  const handleEditChange = (e) => {
+    const { name, value } = e.target;
+    setEditData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleEditSave = async () => {
+    try {
+      const res = await axiosPrivate.put(
+        `/profile/${userToEdit.username}/edit`,
+        editData,
+        {
+          headers: { Authorization: `Bearer ${auth?.accessToken}` },
+        }
+      );
+      if (res.status === 200) {
+        setStatusMessage({
+          type: "success",
+          text: "User updated successfully.",
+        });
+        setEditModalOpen(false);
+        fetchUsers();
+      } else {
+        setStatusMessage({ type: "error", text: "Failed to update user." });
+      }
+    } catch (err) {
+      setStatusMessage({
+        type: "error",
+        text: err?.response?.data?.message || "Update failed.",
+      });
+    }
+  };
+
+  const filteredUsers = users.filter((user) => {
+    const fullName = `${user.firstName} ${user.lastName}`.toLowerCase();
+    return (
+      fullName.includes(searchTerm.toLowerCase()) ||
+      user.username.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  });
+
+  const paginatedUsers = filteredUsers.slice(
+    (currentPage - 1) * PER_PAGE_USERS,
+    currentPage * PER_PAGE_USERS
+  );
+
+  const totalPages = Math.ceil(filteredUsers.length / PER_PAGE_USERS);
+
+  const handlePageChange = (page) => {
+    if (page >= 1 && page <= totalPages) setCurrentPage(page);
+  };
+
+  const getRoleBadge = (role) => {
+    let roleClass = "bg-gray-300 text-slate-800";
+    let roleText = "User";
+
+    if (role === "admin") {
+      roleClass = "bg-red-500 text-white";
+      roleText = "Admin";
+    } else if (role === "owner") {
+      roleClass = "bg-blue-500 text-white";
+      roleText = "Owner";
+    }
+
+    return (
+      <span
+        className={`px-4 py-1 rounded-full text-xs font-medium ${roleClass}`}
+      >
+        {roleText}
+      </span>
+    );
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 bg-base-100 rounded-xl shadow-lg mt-10">
+      <h2 className="text-2xl font-semibold mb-6 text-primary">
+        User Management
+      </h2>
+
+      <input
+        type="text"
+        placeholder="Search by name or username..."
+        className="w-full px-4 py-2 mb-5 border border-gray-400 rounded-md bg-slate-300 text-gray-800"
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+      />
+
+      {statusMessage && (
+        <div
+          className={`mb-4 p-3 rounded ${
+            statusMessage.type === "success"
+              ? "bg-green-100 text-green-800"
+              : "bg-red-100 text-red-800"
+          }`}
+        >
+          {statusMessage.text}
+        </div>
+      )}
+
+      {loading ? (
+        <Loading />
+      ) : (
+        <>
+          {filteredUsers.length === 0 ? (
+            <div className="text-center text-base-content/60 py-8">
+              No users found matching {searchTerm}
+            </div>
+          ) : (
+            <>
+              <div className="grid gap-6 md:grid-cols-2">
+                {paginatedUsers.map((user) => (
+                  <div
+                    key={user._id}
+                    className="p-5 bg-base-200 rounded-lg shadow-sm hover:shadow-md transition duration-300 flex flex-col justify-between"
+                  >
+                    <div className="mb-4">
+                      <div className="flex items-center justify-between mb-1">
+                        <p className="text-lg font-medium flex items-center gap-2">
+                          <FaUserCircle className="text-primary text-xl" />
+                          {user.firstName} {user.lastName}
+                        </p>
+                        <button
+                          onClick={() => confirmDelete(user)}
+                          className="text-red-700 hover:text-red-800"
+                        >
+                          <FaTrashAlt />
+                        </button>
+                      </div>
+                      <p className="text-sm text-base-content/70 mb-1">
+                        <strong>Username:</strong> {user.username}
+                      </p>
+                      <p className="text-sm text-base-content/70">
+                        <strong>Email:</strong> {user.email}
+                      </p>
+
+                      <div className="mt-3">{getRoleBadge(user.role)}</div>
+                    </div>
+
+                    <div className="flex items-center gap-4 mt-2">
+                      <Link
+                        to={`/admin/profile/${user.username}`}
+                        className="text-primary hover:underline text-sm flex items-center gap-2"
+                      >
+                        <FaUserCircle />
+                        View Profile
+                      </Link>
+
+                      <button
+                        onClick={() => openEditModal(user)}
+                        className="text-cyan-600 hover:text-cyan-800 text-sm flex items-center gap-2"
+                      >
+                        <FaUserEdit />
+                        Edit
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* pagination area */}
+              <div className="flex justify-center mt-8 gap-2">
+                <button
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  disabled={currentPage === 1}
+                  className="px-3 py-1 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 disabled:opacity-50"
+                >
+                  Previous
+                </button>
+
+                {Array.from({ length: totalPages }, (_, i) => (
+                  <button
+                    key={i}
+                    onClick={() => handlePageChange(i + 1)}
+                    className={`px-3 py-1 rounded ${
+                      currentPage === i + 1
+                        ? "bg-primary text-white"
+                        : "bg-gray-200 text-gray-800 hover:bg-gray-300"
+                    }`}
+                  >
+                    {i + 1}
+                  </button>
+                ))}
+
+                <button
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  disabled={currentPage === totalPages}
+                  className="px-3 py-1 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 disabled:opacity-50"
+                >
+                  Next
+                </button>
+              </div>
+            </>
+          )}
+        </>
+      )}
+
+      {/* Delete Modal */}
+      {showDeleteModal && userToDelete && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-base-100 p-6 rounded-lg shadow-xl w-80">
+            <h3 className="text-lg font-semibold text-center text-red-600 mb-4">
+              Confirm Deletion
+            </h3>
+            <p className="text-sm text-center mb-4">
+              Are you sure you want to delete{" "}
+              <strong>{userToDelete.username}</strong>?
+            </p>
+            <div className="flex justify-between mt-6">
+              <button
+                onClick={() => setShowDeleteModal(false)}
+                className="px-4 py-2 rounded transition-colors bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDeleteConfirmed}
+                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Modal */}
+      {editModalOpen && userToEdit && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-base-100 p-6 rounded-lg shadow-xl w-[400px]">
+            <h3 className="text-lg font-semibold mb-4 text-primary text-center">
+              Edit User
+            </h3>
+
+            <label className="block text-sm mb-2 font-medium">First Name</label>
+            <input
+              name="firstName"
+              value={editData.firstName}
+              onChange={handleEditChange}
+              className="w-full px-3 py-2 mb-3 rounded border bg-base-200"
+            />
+
+            <label className="block text-sm mb-2 font-medium">Last Name</label>
+            <input
+              name="lastName"
+              value={editData.lastName}
+              onChange={handleEditChange}
+              className="w-full px-3 py-2 mb-3 rounded border bg-base-200"
+            />
+
+            <label className="block text-sm mb-2 font-medium">Email</label>
+            <input
+              name="email"
+              value={editData.email}
+              onChange={handleEditChange}
+              className="w-full px-3 py-2 mb-3 rounded border bg-base-200"
+            />
+
+            <label className="block text-sm mb-2 font-medium">Username</label>
+            <input
+              name="username"
+              value={editData.username}
+              onChange={handleEditChange}
+              className="w-full px-3 py-2 mb-3 rounded border bg-base-200"
+            />
+
+            <div className="flex justify-between mt-4">
+              <button
+                onClick={() => setEditModalOpen(false)}
+                className="px-4 py-2 rounded transition-colors bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleEditSave}
+                className="px-4 py-2 bg-primary text-white rounded hover:bg-primary-focus"
+              >
+                Save
+              </button>
+            </div>
+            <div className="mt-6 text-center">
+              <button
+                onClick={() => {
+                  setUserToDelete(userToEdit);
+                  setEditModalOpen(false);
+                  setShowDeleteModal(true);
+                }}
+                className="text-sm text-red-600 hover:underline"
+              >
+                <FaTrashAlt className="inline-block mr-1" />
+                Delete this user
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Adminpage;
diff --git a/client/src/assets/components/Admin/Usersprofile.jsx b/client/src/assets/components/Admin/Usersprofile.jsx
new file mode 100644
index 00000000..195595a3
--- /dev/null
+++ b/client/src/assets/components/Admin/Usersprofile.jsx
@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { FaUserEdit } from "react-icons/fa";
+import Loading from '../subcomponents/Loading';
+import useAuth from '../../../auth/useAuth';
+import axiosPrivate from '../../../api/axios';
+
+const UsersProfile = () => {
+  const { username } = useParams();
+  const { auth } = useAuth();
+
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [isBioExpanded, setIsBioExpanded] = useState(false);
+
+  const isAdminOrOwner = ['admin', 'owner'].includes(auth?.role);
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        const response = await axiosPrivate.get(`/profile/${username}`, {
+          headers: { Authorization: `Bearer ${auth?.accessToken}` },
+          withCredentials: true
+        });
+        setProfile(response.data);
+      } catch (error) {
+        console.error('Failed to fetch user profile:', error);
+        setProfile(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (isAdminOrOwner) fetchProfile();
+    else setLoading(false);
+  }, [username, auth?.accessToken]);
+
+  if (loading) return <Loading />;
+  if (!profile) return <div className="max-w-4xl mx-auto p-6 bg-base-100 rounded shadow-md mt-10"><p className="text-center">Profile not found or unauthorized.</p></div>;
+  
+  const handleBioToggle = () => setIsBioExpanded(prevState => !prevState);
+
+  return (
+    <div className="max-w-[90%] lg:max-w-4xl mx-auto p-6 bg-base-100 rounded-lg shadow-md mt-10 relative">
+      {/* Edit Icon */}
+      {isAdminOrOwner && (
+        <Link
+          to="edit"
+          className="absolute top-0 right-0 p-6 text-2xl opacity-75 hover:opacity-100 transition text-primary"
+        >
+          <FaUserEdit />
+        </Link>
+      )}
+
+      {/* Profile Top */}
+      <div className="grid grid-cols-1 justify-items-center md:justify-items-start md:items-start md:grid-cols-[25%_75%] gap-6 mb-6">
+        {/* Avatar */}
+        <div className="w-32 h-32 rounded-full overflow-hidden bg-base-200 flex items-center justify-center mx-auto">
+          {profile.avatar ? (
+            <img src={profile.avatar} alt="Profile Avatar" className="object-cover w-full h-full" />
+          ) : (
+            <span className="text-sm text-base-content opacity-60">No Avatar</span>
+          )}
+        </div>
+
+        {/* Name & Bio */}
+        <div className="text-center md:text-left">
+          <h2 className="text-2xl font-bold">{profile.name}</h2>
+          <p className="text-sm text-base-content opacity-80 mb-1">@{profile.username}</p>
+
+          {/* Bio with "Read More" */}
+          <div className="text-base mt-2 md:pr-8 px-2 md:px-0">
+            {isBioExpanded ? (
+              <>
+                <p>{profile.bio}</p>
+                <button
+                  onClick={handleBioToggle}
+                  className="text-primary text-sm mt-2 underline"
+                >
+                  Read Less
+                </button>
+              </>
+            ) : (
+              <>
+                <p>{profile.bio?.substring(0, 150)}...</p>
+                <button
+                  onClick={handleBioToggle}
+                  className="text-primary text-sm mt-2 underline"
+                >
+                  Read More
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Info Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <div>
+          <p><strong>Email:</strong> <a href={'mailto:' + profile.email} className='link link-primary link-hover'>{profile.email}</a></p>
+          <p><strong>Location:</strong> {profile.location || "Not specified"}</p>
+          <p className='capitalize'><strong>Role:</strong> {profile.role}</p>
+        </div>
+        <div>
+          {profile.website && (
+            <p><strong>Website:</strong> <a className="link link-primary link-hover" href={profile.website} target="_blank" rel="noreferrer">{profile.website}</a></p>
+          )}
+          {profile.github && (
+            <p><strong>GitHub:</strong> <a className="link link-primary link-hover" href={profile.github} target="_blank" rel="noreferrer">{profile.github}</a></p>
+          )}
+          {profile.linkedin && (
+            <p><strong>LinkedIn:</strong> <a className="link link-primary link-hover" href={profile.linkedin} target="_blank" rel="noreferrer">{profile.linkedin}</a></p>
+          )}
+          {profile.otherWebsite && (
+            <p><strong>Other Website:</strong> <a className="link link-primary link-hover" href={profile.otherWebsite} target="_blank" rel="noreferrer">{profile.otherWebsite}</a></p>
+          )}
+        </div>
+      </div>
+
+      {/* Skills */}
+      <div>
+        <h3 className="text-lg font-semibold mb-2">Skills</h3>
+        {profile.skills && profile.skills.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {profile.skills.map((skill, index) => (
+              <span key={index} className="bg-primary text-primary-content px-3 py-1 rounded-full text-sm">
+                {skill}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <p>No skills listed.</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UsersProfile;
diff --git a/client/src/assets/components/layout/NavBar.jsx b/client/src/assets/components/layout/NavBar.jsx
index f1d7d33d..c932a410 100644
--- a/client/src/assets/components/layout/NavBar.jsx
+++ b/client/src/assets/components/layout/NavBar.jsx
@@ -1,178 +1,289 @@
-import { useContext } from "react";
-import { NavLink, Link } from 'react-router-dom'
+import { useContext, useEffect, useState } from "react";
+import { NavLink, Link } from "react-router-dom";
 import useLogout from "../../../auth/useLogout";
 
 // Icon Imports
 import { IoMdHome } from "react-icons/io";
 import { HiNewspaper } from "react-icons/hi2";
 import { IoMdPeople } from "react-icons/io";
-import { GiSuitcase } from "react-icons/gi";
+import {  GiSuitcase } from "react-icons/gi";
+import { TbUserSquareRounded } from "react-icons/tb";
 import { FaUserCircle } from "react-icons/fa";
 import { IoSettingsSharp } from "react-icons/io5";
 import { RiLogoutBoxLine } from "react-icons/ri";
 
 // Context Imports
 import ThemeContext from "../../context/ThemeContext";
+import useAuth from "../../../auth/useAuth";
+
 
 const NavBar = ({ avatar, username }) => {
+  const { auth } = useAuth();
 
-    const { darkMode, actions } = useContext(ThemeContext)
-
-    const profileURL = `/profile/${username}`;
-
-    const logout = useLogout();
-
-    const handleLogout = async () => {
-        await logout();
-    };
-
-    return (
-        <div className="navbar bg-base-100 w-[95%] mx-auto rounded-md shadow-md grid grid-cols-2 lg:grid-cols-4 auto-cols-max relative">
-
-            {/* Nav start */}
-            <div className="navbar-start w-[unset] lg:col-span-1">
-
-                {/* Mobile Nav */}
-                <div className="dropdown static">
-                    <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth="2"
-                                d="M4 6h16M4 12h8m-8 6h16" />
-                        </svg>
-                    </div>
-                    <ul
-                        tabIndex={0}
-                        className="menu menu-sm dropdown-content bg-base-200 rounded-box z-[1] mt-3 p-2 shadow w-[95%]">
-                        <li><NavLink to='/dashboard' className='py-4 flex items-center'><span className="text-2xl text-primary"><IoMdHome /></span>Home</NavLink></li>
-                        {/* <li><NavLink to='/tester' className='py-4 flex items-center'><span className="text-2xl text-primary"><IoMdHome /></span>Tester</NavLink></li> */}
-                        <li><NavLink to='' className='py-4 flex items-center'><span className="text-2xl text-primary"><HiNewspaper /></span>Blogs</NavLink></li>
-                        <li><NavLink to='/network' className='py-4 flex items-center'><span className="text-2xl text-primary"><IoMdPeople /></span>Network</NavLink></li>
-                        <li><NavLink to='' className='py-4 flex items-center'><span className="text-2xl text-primary"><GiSuitcase /></span>Jobs</NavLink></li>
-                    </ul>
-                </div>
-
-                {/* DevConnect Link */}
-                <Link to='/' className="btn btn-ghost text-xl rounded-md">DevConnect</Link>
-            </div>
+  const { darkMode, actions } = useContext(ThemeContext);
 
-            {/* Desktop Nav */}
-            <div className="navbar-center hidden lg:flex w-[unset] justify-center lg:col-span-2">
-                <ul className="menu menu-horizontal px-1">
-                    <li><NavLink to='/dashboard' className="flex items-center"><span className="text-2xl text-primary"><IoMdHome /></span>Home</NavLink></li>
-                    {/* <li><NavLink to='/tester' className="flex items-center"><span className="text-2xl text-primary"><HiNewspaper /></span>Tester</NavLink></li> */}
-                    <li><NavLink to='' className="flex items-center"><span className="text-2xl text-primary"><HiNewspaper /></span>Blogs</NavLink></li>
-                    <li><NavLink to='/network' className="flex items-center"><span className="text-2xl text-primary"><IoMdPeople /></span>Network</NavLink></li>
-                    <li><NavLink to='' className="flex items-center"><span className="text-2xl text-primary"><GiSuitcase /></span>Jobs</NavLink></li>
-                </ul>
-            </div>
+  const profileURL = `/profile/${username}`;
+
+  const logout = useLogout();
+
+
+  const handleLogout = async () => {
+    await logout();
+  };
+
+  return (
+    <div className="navbar bg-base-100 w-[95%] mx-auto rounded-md shadow-md grid grid-cols-2 lg:grid-cols-4 auto-cols-max relative">
+      {/* Nav start */}
+      <div className="navbar-start w-[unset] lg:col-span-1">
+        {/* Mobile Nav */}
+        <div className="dropdown static">
+          <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h8m-8 6h16"
+              />
+            </svg>
+          </div>
+          <ul
+            tabIndex={0}
+            className="menu menu-sm dropdown-content bg-base-200 rounded-box z-[1] mt-3 p-2 shadow w-[95%]"
+          >
+            <li>
+              <NavLink to="/dashboard" className="py-4 flex items-center">
+                <span className="text-2xl text-primary">
+                  <IoMdHome />
+                </span>
+                Home
+              </NavLink>
+            </li>
+            {/* <li><NavLink to='/tester' className='py-4 flex items-center'><span className="text-2xl text-primary"><IoMdHome /></span>Tester</NavLink></li> */}
+            <li>
+              <NavLink to="" className="py-4 flex items-center">
+                <span className="text-2xl text-primary">
+                  <HiNewspaper />
+                </span>
+                Blogs
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/network" className="py-4 flex items-center">
+                <span className="text-2xl text-primary">
+                  <IoMdPeople />
+                </span>
+                Network
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="" className="py-4 flex items-center">
+                <span className="text-2xl text-primary">
+                  <GiSuitcase />
+                </span>
+                Jobs
+              </NavLink>
+            </li>
+            {(auth?.role === "admin" || auth?.role === "owner") && (
+              <li>
+                <NavLink to="/adminpage" className="flex items-center">
+                  <span className="text-2xl text-primary">
+                  <TbUserSquareRounded />
+                  </span>
+                  Adminarea
+                </NavLink>
+              </li>
+            )}
+          </ul>
+        </div>
+
+        {/* DevConnect Link */}
+        <Link to="/" className="btn btn-ghost text-xl rounded-md">
+          DevConnect
+        </Link>
+      </div>
+
+      {/* Desktop Nav */}
+      <div className="navbar-center hidden lg:flex w-[unset] justify-center lg:col-span-2">
+        <ul className="menu menu-horizontal px-1">
+          <li>
+            <NavLink to="/dashboard" className="flex items-center">
+              <span className="text-2xl text-primary">
+                <IoMdHome />
+              </span>
+              Home
+            </NavLink>
+          </li>
+          {/* <li><NavLink to='/tester' className="flex items-center"><span className="text-2xl text-primary"><HiNewspaper /></span>Tester</NavLink></li> */}
+          <li>
+            <NavLink to="" className="flex items-center">
+              <span className="text-2xl text-primary">
+                <HiNewspaper />
+              </span>
+              Blogs
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/network" className="flex items-center">
+              <span className="text-2xl text-primary">
+                <IoMdPeople />
+              </span>
+              Network
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="" className="flex items-center">
+              <span className="text-2xl text-primary">
+                <GiSuitcase />
+              </span>
+              Jobs
+            </NavLink>
+          </li>
+          {/* for admin and owner */}
+          {(auth?.role === "admin" || auth?.role === "owner") && (
+            <li>
+              <NavLink to="/adminpage" className="flex items-center">
+                <span className="text-2xl text-primary">
+                <TbUserSquareRounded />
+                </span>
+                Adminarea
+              </NavLink>
+            </li>
+          )}
+        </ul>
+      </div>
+
+      {/* Nav End */}
+      <div className="navbar-end flex-none md:gap-2 w-[unset] lg:col-span-1">
+        {/* Search Icon */}
+        <button className="btn btn-ghost btn-circle">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+        </button>
+
+        {/* Notifications */}
+        <button className="btn btn-ghost btn-circle">
+          <div className="indicator">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+              />
+            </svg>
+            <span className="badge badge-xs badge-primary indicator-item"></span>
+          </div>
+        </button>
 
-            {/* Nav End */}
-            <div className="navbar-end flex-none md:gap-2 w-[unset] lg:col-span-1">
-
-                {/* Search Icon */}
-                <button className="btn btn-ghost btn-circle">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-5 w-5"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                    </svg>
-                </button>
-
-
-                {/* Notifications */}
-                <button className="btn btn-ghost btn-circle">
-                    <div className="indicator">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth="2"
-                                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                        </svg>
-                        <span className="badge badge-xs badge-primary indicator-item"></span>
-                    </div>
-                </button>
-
-                {/* Profile Avatar and Menu */}
-                <div className="dropdown dropdown-end">
-                    <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
-                        <div className="w-10 rounded-full">
-                            <img
-                                alt="Tailwind CSS Navbar component"
-                                src={avatar}
-                            />
-                        </div>
-                    </div>
-                    <ul
-                        tabIndex={0}
-                        className="menu menu-sm dropdown-content bg-base-200 rounded-box z-[1] mt-3 w-52 p-2 shadow">
-                        <li>
-                            {/* Theme Switcher */}
-                            <label className="flex cursor-pointer gap-2 text-primary">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    strokeWidth="2"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round">
-                                    <circle cx="12" cy="12" r="5" />
-                                    <path
-                                        d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
-                                </svg>
-                                {/* Theme Switcher */}
-                                <input
-                                    type="checkbox"
-                                    checked={darkMode ? true : false}
-                                    value="synthwave"
-                                    className="toggle theme-controller rounded-full"
-                                    onChange={() => actions.toggleTheme()}
-                                />
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="20"
-                                    height="20"
-                                    viewBox="0 0 24 24"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    strokeWidth="2"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round">
-                                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                                </svg>
-                            </label>
-                        </li>
-                        <li><NavLink to={profileURL} className='py-4 flex items-center'><span className="text-2xl text-primary"><FaUserCircle /></span>Profile</NavLink></li>
-                        <li><button className='py-4 flex items-center'><span className="text-2xl text-primary"><IoSettingsSharp /></span>Settings</button></li>
-                        <li><button onClick={handleLogout} className='py-4 flex items-center'><span className="text-2xl text-primary"><RiLogoutBoxLine /></span>Logout</button></li>
-                    </ul>
-                </div>
+        {/* Profile Avatar and Menu */}
+        <div className="dropdown dropdown-end">
+          <div
+            tabIndex={0}
+            role="button"
+            className="btn btn-ghost btn-circle avatar"
+          >
+            <div className="w-10 rounded-full">
+              <img alt="Tailwind CSS Navbar component" src={avatar} />
             </div>
+          </div>
+          <ul
+            tabIndex={0}
+            className="menu menu-sm dropdown-content bg-base-200 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+          >
+            <li>
+              {/* Theme Switcher */}
+              <label className="flex cursor-pointer gap-2 text-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="12" cy="12" r="5" />
+                  <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+                </svg>
+                {/* Theme Switcher */}
+                <input
+                  type="checkbox"
+                  checked={darkMode ? true : false}
+                  value="synthwave"
+                  className="toggle theme-controller rounded-full"
+                  onChange={() => actions.toggleTheme()}
+                />
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                </svg>
+              </label>
+            </li>
+            <li>
+              <NavLink to={profileURL} className="py-4 flex items-center">
+                <span className="text-2xl text-primary">
+                  <FaUserCircle />
+                </span>
+                Profile
+              </NavLink>
+            </li>
+            <li>
+              <button className="py-4 flex items-center">
+                <span className="text-2xl text-primary">
+                  <IoSettingsSharp />
+                </span>
+                Settings
+              </button>
+            </li>
+            <li>
+              <button onClick={handleLogout} className="py-4 flex items-center">
+                <span className="text-2xl text-primary">
+                  <RiLogoutBoxLine />
+                </span>
+                Logout
+              </button>
+            </li>
+          </ul>
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+};
 
-export default NavBar
\ No newline at end of file
+export default NavBar;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..05d8e780
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "DevConnect",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/server/controllers/userController.js b/server/controllers/userController.js
index 24f8a673..e2e1fa24 100644
--- a/server/controllers/userController.js
+++ b/server/controllers/userController.js
@@ -3,6 +3,8 @@ const User = require('../models/User');
 const bcrypt = require('bcrypt');
 const jwt = require('jsonwebtoken');
 
+
+//getallusers
 const getAllUsers = async (req, res) => {
     try {
         const users = await User.find().select('-password -refreshToken');
@@ -13,6 +15,7 @@ const getAllUsers = async (req, res) => {
     }
 }
 
+//createuser
 const createUser = async (req, res) => {
     try {
         const { email, username, firstName, lastName, password, role } = req.body;
@@ -49,6 +52,7 @@ const createUser = async (req, res) => {
     }
 }
 
+//updateuser
 const updateUser = async (req, res) => {
     try {
         const { id } = req.params;
@@ -103,6 +107,8 @@ const updateUser = async (req, res) => {
     }
 }
 
+
+//deleteuser
 const deleteUser = async (req, res) => {
     try {
         const { id } = req.params;