diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 419a1f10..0f72134d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,8 +21,8 @@
         "remark-gfm": "^3.0.0"
       },
       "devDependencies": {
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.0.10",
+        "@types/react": "^18.2.38",
+        "@types/react-dom": "^18.2.17",
         "@types/react-syntax-highlighter": "^15.5.6",
         "@typescript-eslint/eslint-plugin": "^5.51.0",
         "@typescript-eslint/parser": "^5.51.0",
@@ -1255,9 +1255,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
-      "version": "18.0.27",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
-      "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
+      "version": "18.2.38",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.38.tgz",
+      "integrity": "sha512-cBBXHzuPtQK6wNthuVMV6IjHAFkdl/FOPFIlkd81/Cd1+IqkHu/A+w4g43kaQQoYHik/ruaQBDL72HyCy1vuMw==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1265,9 +1265,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.0.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
-      "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
+      "version": "18.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
+      "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
       "devOptional": true,
       "dependencies": {
         "@types/react": "*"
diff --git a/frontend/package.json b/frontend/package.json
index bb7b6db5..f67ed479 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,8 +32,8 @@
     "remark-gfm": "^3.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
     "@types/react-syntax-highlighter": "^15.5.6",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fdf86dd2..3dc29adc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,12 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router-dom';
 import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
+import Login from './Login/Login';
+import Signup from './Login/Signup';
+import ResetCode from './Login/ResetCode';
+import ForgotPass from './Login/ForgotPass';
+
 import PageNotFound from './PageNotFound';
 import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
@@ -13,20 +18,28 @@ inject();
 export default function App() {
   const { isMobile } = useMediaQuery();
   const [navOpen, setNavOpen] = useState(!isMobile);
+  const location = useLocation();
+
+  // Checking for the login page
+  const isLogin = location.pathname === '/login';
 
   return (
     <div className="min-h-full min-w-full">
-      <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
+      {!isLogin && <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />}
       <div
-        className={`transition-all duration-200 ${
+        className={`transition-all duration-200  ${
           !isMobile
             ? `ml-0 ${!navOpen ? '-mt-5 md:mx-auto lg:mx-auto' : 'md:ml-72'}`
             : 'ml-0 md:ml-16'
-        }`}
+        }${isLogin && `ml-0`}`}
       >
         <Routes>
           <Route path="/" element={<Conversation />} />
           <Route path="/about" element={<About />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Signup />} />
+          <Route path="/Forgot" element={<ForgotPass />} />
+          <Route path="/ResetPassword" element={<ResetCode />} />
           <Route path="*" element={<PageNotFound />} />
           <Route path="/settings" element={<Setting />} />
         </Routes>
diff --git a/frontend/src/Login/ForgotPass.tsx b/frontend/src/Login/ForgotPass.tsx
index 3a1f0929..501bb7e7 100644
--- a/frontend/src/Login/ForgotPass.tsx
+++ b/frontend/src/Login/ForgotPass.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import { useNavigate } from 'react-router-dom';
-export default function forgotPass() {
+export default function ForgotPass() {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     console.log('login');