diff --git a/client/package-lock.json b/client/package-lock.json
index e6ab13c..133b854 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "@mui/material": "^5.15.19",
         "@tabler/icons-react": "^3.5.0",
         "axios": "^1.6.8",
@@ -22,8 +23,10 @@
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
         "react-heatmap-grid": "^0.9.0",
+        "react-helmet": "^6.1.0",
         "react-icons": "^5.2.1",
-        "react-router-dom": "^6.23.1"
+        "react-router-dom": "^6.23.1",
+        "react-scroll": "^1.9.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -992,6 +995,21 @@
         "@floating-ui/utils": "^0.2.0"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.2.tgz",
+      "integrity": "sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/react-dom": "^1.3.0",
+        "aria-hidden": "^1.1.3",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/react-dom": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
@@ -1004,11 +1022,33 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+      "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/utils": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
       "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+      "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1141,6 +1181,88 @@
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
       "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
     },
+    "node_modules/@mantine/core": {
+      "version": "6.0.21",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.21.tgz",
+      "integrity": "sha512-Kx4RrRfv0I+cOCIcsq/UA2aWcYLyXgW3aluAuW870OdXnbII6qg7RW28D+r9D76SHPxWFKwIKwmcucAG08Divg==",
+      "peer": true,
+      "dependencies": {
+        "@floating-ui/react": "^0.19.1",
+        "@mantine/styles": "6.0.21",
+        "@mantine/utils": "6.0.21",
+        "@radix-ui/react-scroll-area": "1.0.2",
+        "react-remove-scroll": "^2.5.5",
+        "react-textarea-autosize": "8.3.4"
+      },
+      "peerDependencies": {
+        "@mantine/hooks": "6.0.21",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@mantine/dates": {
+      "version": "6.0.21",
+      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-6.0.21.tgz",
+      "integrity": "sha512-nSX7MxNkHyyDJqEJOT7Wg930jBfgWz+3pnoWo601cYDvFjh5GgcRz66v36rnMJFK1/56k5G9rWzUOzuM94j6hg==",
+      "peer": true,
+      "dependencies": {
+        "@mantine/utils": "6.0.21"
+      },
+      "peerDependencies": {
+        "@mantine/core": "6.0.21",
+        "@mantine/hooks": "6.0.21",
+        "dayjs": ">=1.0.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@mantine/hooks": {
+      "version": "6.0.21",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.21.tgz",
+      "integrity": "sha512-sYwt5wai25W6VnqHbS5eamey30/HD5dNXaZuaVEAJ2i2bBv8C0cCiczygMDpAFiSYdXoSMRr/SZ2CrrPTzeNew==",
+      "peer": true,
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@mantine/styles": {
+      "version": "6.0.21",
+      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.21.tgz",
+      "integrity": "sha512-PVtL7XHUiD/B5/kZ/QvZOZZQQOj12QcRs3Q6nPoqaoPcOX5+S7bMZLMH0iLtcGq5OODYk0uxlvuJkOZGoPj8Mg==",
+      "peer": true,
+      "dependencies": {
+        "clsx": "1.1.1",
+        "csstype": "3.0.9"
+      },
+      "peerDependencies": {
+        "@emotion/react": ">=11.9.0",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@mantine/styles/node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mantine/styles/node_modules/csstype": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
+      "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==",
+      "peer": true
+    },
+    "node_modules/@mantine/utils": {
+      "version": "6.0.21",
+      "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.21.tgz",
+      "integrity": "sha512-33RVDRop5jiWFao3HKd3Yp7A9mEq4HAJxJPTuYm1NkdqX6aTKOQK7wT8v8itVodBp+sb4cJK6ZVdD1UurK/txQ==",
+      "peer": true,
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.40",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
@@ -1425,6 +1547,148 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz",
+      "integrity": "sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz",
+      "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz",
+      "integrity": "sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz",
+      "integrity": "sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.0",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
+      "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
@@ -1931,6 +2195,18 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -2566,6 +2842,12 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "peer": true
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3448,6 +3730,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
@@ -3692,6 +3983,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -4256,6 +4556,11 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4992,11 +5297,30 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-heatmap-grid": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/react-heatmap-grid/-/react-heatmap-grid-0.9.0.tgz",
       "integrity": "sha512-kJ+aHrNoyrzDTI09UyAEDORdRGc4iAyqii3liCNx3hs/Gg80baSpukiG/Wyoz3fR1Mr9+dzswXlC9Vl2SLQeDg=="
     },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
@@ -5019,6 +5343,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.10",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.10.tgz",
+      "integrity": "sha512-m3zvBRANPBw3qxVVjEIPEQinkcwlFZ4qyomuWVpNJdv4c6MvHfXV0C3L9Jx5rr3HeBHKNRX+1jreB5QloDIJjA==",
+      "peer": true,
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "peer": true,
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.23.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
@@ -5049,6 +5420,67 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.0.tgz",
+      "integrity": "sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "peer": true,
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz",
+      "integrity": "sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.10.2",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -5660,6 +6092,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "peer": true
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
@@ -5753,8 +6191,7 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -5907,6 +6344,89 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
+      "peer": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peer": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "peer": true,
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "peer": true,
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6225,4 +6745,4 @@
       }
     }
   }
-  }
\ No newline at end of file
+}
diff --git a/client/src/components/Home.jsx b/client/src/components/Home.jsx
index fcea4f3..8e667b1 100644
--- a/client/src/components/Home.jsx
+++ b/client/src/components/Home.jsx
@@ -20,161 +20,106 @@ const Home = () => {
           backgroundBlendMode: "multiply",
         }}
       >
-        <div className="p-8 text-center">
-         
+        <div className="p-8 text-center space-y-6">
           <motion.h1
-  initial={{ opacity: 0, y: -150 }}
-  whileInView={{ opacity: 1, y: 0 }}
-  viewport={{ once: true }}
-  transition={{
-    duration: 1,
-    type: "spring",
-    stiffness: 100,
-    delay: 0.5,
-  }}
-  className="diabetes-predictor-header"
-  style={{
-    position: 'absolute',
-    width: '90%', /* Use percentage for width to make it responsive */
-    maxWidth: '1150px', /* Set a maximum width for larger screens */
-    height: 'auto', /* Let the height adjust based on content */
-    left: '-10%', /* Center horizontally */
-    transform: 'translateX(-50%)', /* Center horizontally */
-    top: '47%', /* Adjust based on your layout */
-    fontFamily: "'Abhaya Libre ExtraBold'",
-    fontStyle: 'normal',
-    fontWeight: 800,
-    fontSize: 'clamp(30px, 5vw, 50px)', /* Responsive font size using clamp */
-    lineHeight: '1.5', /* Adjust line height based on font size */
-    display: 'flex',
-    alignItems: 'flex-end',
-    justifyContent: 'center', /* Center text horizontally */
-    color: '#FFFFFF',
-    textAlign: 'center', /* Center text horizontally */
-  }}
->
-  Welcome to the Diabetes Predictor!
-</motion.h1>
-
-          
-<motion.p
-  initial={{ opacity: 0, y: 150 }}
-  whileInView={{ opacity: 1, y: 0 }}
-  viewport={{ once: true }}
-  transition={{
-    duration: 0.8,
-    type: "spring",
-    stiffness: 100,
-    delay: 1,
-  }}
-  style={{
-    position: 'absolute',
-    width: '90%', /* Use percentage for width to make it responsive */
-    maxWidth: '444px', /* Set a maximum width for larger screens */
-    height: 'auto', /* Let the height adjust based on content */
-    left: '-0.3%', /* Center horizontally */
-    transform: 'translateX(-50%)', /* Center horizontally */
-    top: '58.5%', /* Adjust based on your layout */
-    fontFamily: "'Abhaya Libre ExtraBold', serif",
-    fontStyle: 'normal',
-    fontWeight: 800,
-    fontSize: 'clamp(20px, 4vw, 40px)', /* Responsive font size using clamp */
-    lineHeight: '1.5', /* Adjust line height based on font size */
-    display: 'flex',
-    alignItems: 'flex-end',
-    justifyContent: 'center', /* Center text horizontally */
-    color: '#FFFFFF',
-    textAlign: 'center', /* Center text horizontally */
-  }}
->
-  Know your risk
-</motion.p>
-
-
-
-<motion.p
-  initial={{ opacity: 0, y: 150 }}
-  whileInView={{ opacity: 1, y: 0 }}
-  viewport={{ once: true }}
-  transition={{
-    duration: 0.8,
-    type: "spring",
-    stiffness: 100,
-    delay: 1.2, // Slightly delay the second text for a staggered effect
-  }}
-  style={{
-    position: 'absolute',
-    width: '90%', /* Use percentage for width to make it responsive */
-    maxWidth: '771px', /* Set a maximum width for larger screens */
-    height: 'auto', /* Let the height adjust based on content */
-    left: '-5.2%', /* Center horizontally */
-    transform: 'translateX(-50%)', /* Center horizontally */
-    top: '63%', /* Adjust based on your layout */
-    fontFamily: "'Abhaya Libre ExtraBold', serif",
-    fontStyle: 'normal',
-    fontWeight: 800,
-    fontSize: 'clamp(20px, 4vw, 40px)', /* Responsive font size using clamp */
-    lineHeight: '1.5', /* Adjust line height based on font size */
-    display: 'flex',
-    alignItems: 'flex-end',
-    justifyContent: 'center', /* Center text horizontally */
-    color: '#FFFFFF',
-    textAlign: 'center', /* Center text horizontally */
-  }}
->
-  take control of your health.
-</motion.p>
+            initial={{ opacity: 0, y: -150 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 1,
+              type: "spring",
+              stiffness: 100,
+              delay: 0.5,
+            }}
+            className="text-white font-extrabold"
+            style={{
+              fontFamily: "'Abhaya Libre ExtraBold'",
+              fontSize: "clamp(30px, 5vw, 50px)",
+              lineHeight: "1.5",
+              textAlign: "center",
+            }}
+          >
+            Welcome to the Diabetes Predictor!
+          </motion.h1>
 
-<motion.div
-  initial={{ opacity: 0, y: 150 }}
-  whileInView={{ opacity: 1, y: 0 }}
-  viewport={{ once: true }}
-  transition={{
-    duration: 0.8,
-    type: "spring",
-    stiffness: 100,
-    delay: 1.2,
-  }}
-  style={{
-    position: 'absolute',
-    width: '90%', /* Use percentage for width to make it responsive */
-    maxWidth: '250px', /* Set a maximum width for larger screens */
-    height: '8%', 
-    left: '5.4%', /* Center horizontally */
-    transform: 'translateX(-50%)', /* Center horizontally */
-    top: '73%', /* Adjust based on your layout */
-    background: '#FF9900',
-    border: '0.7px solid #5C3200',
-    borderRadius: '10px',
-    boxSizing: 'border-box',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }}
->
-  <Link
-    to="/prediction"
-    style={{
-      width: '100%', /* Fill the entire width of the div */
-      height: '100%', /* Fill the entire height of the div */
-      fontFamily: "'Abhaya Libre ExtraBold', serif",
-      fontStyle: 'normal',
-      fontWeight: 800,
-      fontSize: 'clamp(14px, 3vw, 23px)', /* Responsive font size using clamp */
-      color: '#FFFFFF',
-      textAlign: 'center',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: 'transparent', // Ensures link background is transparent
-      textDecoration: 'none', // Remove underline from the link
-    }}
-  >
-    GET STARTED 
-  </Link>
-</motion.div>
+          <motion.p
+            initial={{ opacity: 0, y: 150 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 0.8,
+              type: "spring",
+              stiffness: 100,
+              delay: 1,
+            }}
+            className="text-white font-extrabold"
+            style={{
+              fontFamily: "'Abhaya Libre ExtraBold', serif",
+              fontSize: "clamp(20px, 4vw, 40px)",
+              lineHeight: "1.5",
+              textAlign: "center",
+            }}
+          >
+            Know your risk
+          </motion.p>
 
+          <motion.p
+            initial={{ opacity: 0, y: 150 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 0.8,
+              type: "spring",
+              stiffness: 100,
+              delay: 1.2,
+            }}
+            className="text-white font-extrabold"
+            style={{
+              fontFamily: "'Abhaya Libre ExtraBold', serif",
+              fontSize: "clamp(20px, 4vw, 40px)",
+              lineHeight: "1.5",
+              textAlign: "center",
+            }}
+          >
+            Take control of your health.
+          </motion.p>
 
+          <motion.div
+            initial={{ opacity: 0, y: 150 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 0.85,
+              type: "spring",
+              stiffness: 100,
+              delay: 1.2,
+            }}
+            className="w-full max-w-xs"
+            style={{
+              background: "#FF9900",
+              border: "0.7px solid #5C3200",
+              borderRadius: "10px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "10px",
+              margin: "0 auto",
+            }}
+          >
+            <Link
+              to="/prediction"
+              className="w-full h-full flex items-center justify-center text-white font-extrabold"
+              style={{
+                fontFamily: "'Abhaya Libre ExtraBold', serif",
+                fontSize: "clamp(14px, 3vw, 23px)",
+                textAlign: "center",
+                textDecoration: "none",
+                backgroundColor: "transparent",
+              }}
+            >
+              GET STARTED
+            </Link>
+          </motion.div>
         </div>
       </div>
 
@@ -338,17 +283,18 @@ const Home = () => {
         </div>
       </div>
       <motion.div
-  initial={{ opacity: 0, x: -150 }}
-  whileInView={{ opacity: 1, x: 0 }}
-  viewport={{ once: true }}
-  transition={{
-    duration: 0.8,
-    type: "spring",
-    stiffness: 100,
-    delay: 1,
-  }}>
-    <Testimonials />
-  </motion.div>
+        initial={{ opacity: 0, x: -150 }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 0.8,
+          type: "spring",
+          stiffness: 100,
+          delay: 1,
+        }}
+      >
+        <Testimonials />
+      </motion.div>
     </div>
   );
 };
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index 96ab33a..35b0d16 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { FaGithub, FaBars, FaTimes } from "react-icons/fa"; // Combine the imports from react-icons/fa
 import { Link } from "react-router-dom";
 import { CiStar } from "react-icons/ci";
-import logo_final from '../assets/logo_final.png'; // Adjust the path to your logo
+import logo_final from "../assets/logo_final.png"; // Adjust the path to your logo
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -16,10 +16,10 @@ const Navbar = () => {
   };
 
   const logoStyle = {
-    height: '60px', // Adjusted size for better visibility
-    width: '60px',
-    borderRadius: '50%',
-    marginRight: '10px',
+    height: "60px", // Adjusted size for better visibility
+    width: "60px",
+    borderRadius: "50%",
+    marginRight: "10px",
   };
 
   return (
@@ -34,12 +34,24 @@ const Navbar = () => {
           </div>
           <div className="hidden md:block">
             <div className="ml-10 flex items-center space-x-4">
-              <NavLink to="/" onClick={closeMenu}>Home</NavLink>
-              <NavLink to="/data-info" onClick={closeMenu}>Data Info</NavLink>
-              <NavLink to="/prediction" onClick={closeMenu}>Prediction</NavLink>
-              <NavLink to="/visualization" onClick={closeMenu}>Visualization</NavLink>
-              <NavLink to="/contact" onClick={closeMenu}>Contact Us</NavLink>
-              <NavLink to="/FAQ" onClick={closeMenu}>FAQ</NavLink>
+              <NavLink to="/" onClick={closeMenu}>
+                Home
+              </NavLink>
+              <NavLink to="/data-info" onClick={closeMenu}>
+                Data Info
+              </NavLink>
+              <NavLink to="/prediction" onClick={closeMenu}>
+                Prediction
+              </NavLink>
+              <NavLink to="/visualization" onClick={closeMenu}>
+                Visualization
+              </NavLink>
+              <NavLink to="/contact" onClick={closeMenu}>
+                Contact Us
+              </NavLink>
+              <NavLink to="/FAQ" onClick={closeMenu}>
+                FAQ
+              </NavLink>
               <a
                 href="https://github.com/BamaCharanChhandogi/Diabetes-Prediction"
                 target="_blank"
@@ -47,7 +59,7 @@ const Navbar = () => {
                 className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
                 onClick={closeMenu}
               >
-                <CiStar className="w-7 h-7 text-yellow-500 font-bold" />
+                <CiStar className="w-7 h-7 text-yellow-500 font-bold mr-2" />
                 <FaGithub className="h-7 w-7" />
               </a>
             </div>
@@ -72,14 +84,30 @@ const Navbar = () => {
       </div>
 
       {/* Mobile Menu */}
-      <div className={`${isOpen ? "block" : "hidden"} md:hidden`}>
-        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-          <NavLink to="/" onClick={closeMenu}>Home</NavLink>
-          <NavLink to="/data-info" onClick={closeMenu}>Data Info</NavLink>
-          <NavLink to="/prediction" onClick={closeMenu}>Prediction</NavLink>
-          <NavLink to="/visualization" onClick={closeMenu}>Visualization</NavLink>
-          <NavLink to="/contact" onClick={closeMenu}>Contact Us</NavLink>
-          <NavLink to="/FAQ" onClick={closeMenu}>FAQ</NavLink>
+      <div
+        className={`fixed top-0 right-0 h-full bg-gray-800 bg-opacity-90 z-50 transform ${
+          isOpen ? "translate-x-0" : "translate-x-full"
+        } transition-transform duration-300 ease-in-out md:hidden`}
+      >
+        <div className="px-2 pt-2 pb-3 space-y-1">
+          <NavLink to="/" onClick={closeMenu}>
+            Home
+          </NavLink>
+          <NavLink to="/data-info" onClick={closeMenu}>
+            Data Info
+          </NavLink>
+          <NavLink to="/prediction" onClick={closeMenu}>
+            Prediction
+          </NavLink>
+          <NavLink to="/visualization" onClick={closeMenu}>
+            Visualization
+          </NavLink>
+          <NavLink to="/contact" onClick={closeMenu}>
+            Contact Us
+          </NavLink>
+          <NavLink to="/FAQ" onClick={closeMenu}>
+            FAQ
+          </NavLink>
           <a
             href="https://github.com/BamaCharanChhandogi/Diabetes-Prediction"
             target="_blank"
@@ -87,8 +115,8 @@ const Navbar = () => {
             className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
             onClick={closeMenu}
           >
-            <CiStar className="w-5 h-5 text-yellow-500 font-bold" />
-            <FaGithub className="h-5 w-5" />
+            <CiStar className="w-5 h-5 text-yellow-500 font-bold mr-2" />
+            <FaGithub className="h-5 w-5 mr-2" />
             GitHub
           </a>
         </div>
@@ -108,4 +136,4 @@ const NavLink = ({ to, children, onClick }) => (
   </Link>
 );
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;