diff --git a/frontend/src/Login/ForgotPass.tsx b/frontend/src/Login/ForgotPass.tsx
index e4a33b02..fe0cb3dc 100644
--- a/frontend/src/Login/ForgotPass.tsx
+++ b/frontend/src/Login/ForgotPass.tsx
@@ -12,7 +12,9 @@ export default function ForgotPass() {
   return (
     <div className="z-30 flex h-full min-h-screen  w-full items-center justify-center bg-[#1D1D1D]">
       <div className=" flex flex-col items-center px-[5vw] md:w-fit md:p-0">
-        <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        <div className=" cursor-pointer" onClick={() => navigate('/')}>
+          <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        </div>
         <div className="font-bold md:flex md:gap-2 ">
           <h1 className="text-white">Log in to </h1>
           <h1 className="bg-gradient-to-r from-[#56B3CB] via-[#CD2AA0] to-[#EA635C] bg-clip-text text-transparent">
@@ -38,7 +40,12 @@ export default function ForgotPass() {
             // onChange={onchange}
           />
 
-          <button className="h-[7vh] rounded-lg bg-[#7D54D1] text-sm font-medium text-white">
+          <button
+            className="h-[7vh] rounded-lg bg-[#7D54D1] text-sm font-medium text-white hover:bg-[#8A62DC]"
+            onClick={() => {
+              navigate('/ResetPassword');
+            }}
+          >
             Request password reset
           </button>
         </form>
@@ -46,7 +53,7 @@ export default function ForgotPass() {
           <h2 className="gap-1 text-right text-[#5F5F5F]  md:flex">
             Don&apos;t have an account ?
             <h2
-              className="text-center font-medium text-white hover:cursor-pointer"
+              className="text-center font-medium text-white hover:cursor-pointer hover:underline"
               onClick={() => navigate('/register')}
             >
               Sign up
diff --git a/frontend/src/Login/Login.tsx b/frontend/src/Login/Login.tsx
index b5985bbc..55fe99ef 100644
--- a/frontend/src/Login/Login.tsx
+++ b/frontend/src/Login/Login.tsx
@@ -1,10 +1,60 @@
-import React from 'react';
+import React, { useState } from 'react';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import { useNavigate } from 'react-router-dom';
 export default function Login() {
+  const [showalert, setshowalert] = useState<string>('');
+  const [email, setemail] = useState('');
+  const [password, setpassword] = useState('');
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log('login');
+
+    //email validation
+    if (email.length === 0 || password.length === 0) {
+      if (password.length === 0) {
+        setshowalert('Password is required');
+        return;
+      } else {
+        setshowalert('Email is required');
+      }
+      return;
+    } else {
+      setshowalert('');
+    }
+    if (password.length === 0) {
+      setshowalert('Password is required');
+      return;
+    }
+
+    // const response = await fetch(`http://localhost:5000/api/auth/login`, {
+    //   method: "POST",
+    //   headers: {
+    //     "Content-Type": "application/json",
+    //   },
+    //   body: JSON.stringify({
+    //     Email: user.Email,
+    //     Password: user.Password,
+    //   }),
+    // });
+    // const json = await response.json();
+    // console.log(json);
+    // if (json.Check) {
+    //   localStorage.setItem("token", json.authtoken);
+    //   if (json?.status)
+    //   {
+    //     localStorage.setItem("isadmin" , true);
+    //   }
+    //   navigate("/");
+    // }
+    // else if (!json.Check)
+    // {
+    //   alert("Invalid Login Credentials")
+    //   console.log("Invalid Login Cred")
+    // }
+
+    alert('Login Successful ');
+
+    navigate('/');
   };
 
   const navigate = useNavigate();
@@ -12,7 +62,9 @@ export default function Login() {
   return (
     <div className="z-30 flex h-full min-h-screen  w-full items-center justify-center bg-[#1D1D1D]">
       <div className=" flex flex-col items-center md:w-fit">
-        <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        <div className=" cursor-pointer" onClick={() => navigate('/')}>
+          <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        </div>
         <div className="font-bold md:flex md:gap-2">
           <h1 className="text-white">Log in to </h1>
           <h1 className="bg-gradient-to-r from-[#56B3CB] via-[#CD2AA0] to-[#EA635C] bg-clip-text text-transparent">
@@ -27,6 +79,9 @@ export default function Login() {
             type="email"
             name="Name"
             placeholder="Email"
+            onChange={(e) => {
+              setemail(e.target.value);
+            }}
             className="w-full rounded-lg border-none bg-[#2B2B2B] p-4 text-sm font-medium text-white focus:outline-none md:min-w-[25vw]"
             // onChange={onchange}
           />
@@ -34,23 +89,29 @@ export default function Login() {
             type="password"
             name="Name"
             placeholder="Password"
+            onChange={(e) => {
+              setpassword(e.target.value);
+            }}
             className="w-full rounded-lg border-none bg-[#2B2B2B] p-4 text-sm font-medium  text-white focus:outline-none md:min-w-[25vw]"
             // onChange={onchange}
           />
           <h2
-            className="text-right text-sm text-[#5F5F5F] hover:cursor-pointer"
+            className="text-right text-sm text-[#5F5F5F] hover:cursor-pointer hover:text-white"
             onClick={() => navigate('/Forgot')}
           >
             Forgot your password?
           </h2>
-          <button className="h-[7vh] rounded-lg bg-[#7D54D1] font-medium text-white">
+          <button className="h-[7vh] rounded-lg bg-[#7D54D1] font-medium text-white hover:bg-[#8A62DC]">
             Log in
           </button>
+          {showalert.length > 0 && (
+            <div className="text-red-500">{showalert}</div>
+          )}
           <div className="flex w-full justify-center  text-sm">
             <h2 className="flex gap-1 text-right  text-[#5F5F5F]">
               Don&apos;t have an account ?
               <h2
-                className="text-center font-medium text-white hover:cursor-pointer"
+                className="text-center font-medium text-white hover:cursor-pointer hover:underline"
                 onClick={() => navigate('/register')}
               >
                 Sign up
diff --git a/frontend/src/Login/ResetCode.tsx b/frontend/src/Login/ResetCode.tsx
index aaf0f61d..6b15b829 100644
--- a/frontend/src/Login/ResetCode.tsx
+++ b/frontend/src/Login/ResetCode.tsx
@@ -1,5 +1,63 @@
 import React from 'react';
-
+import DocsGPT3 from '../assets/cute_docsgpt3.svg';
+import { useNavigate } from 'react-router-dom';
 export default function ResetCode() {
-  return <div>ResetCode</div>;
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('login');
+  };
+
+  const navigate = useNavigate();
+  return (
+    <div className="z-30 flex h-full min-h-screen  w-full items-center justify-center bg-[#1D1D1D]">
+      <div className=" flex flex-col items-center px-[5vw] md:w-fit md:p-0">
+        <div className=" cursor-pointer" onClick={() => navigate('/')}>
+          <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        </div>
+        <div className="font-bold md:flex md:gap-2 ">
+          <h1 className="text-white">Log in to </h1>
+          <h1 className="bg-gradient-to-r from-[#56B3CB] via-[#CD2AA0] to-[#EA635C] bg-clip-text text-transparent">
+            DocsGPT
+          </h1>
+        </div>
+        <form
+          onSubmit={handleSubmit}
+          className="flex w-full flex-col gap-[3vh] rounded-2xl border-2 border-[#383838] bg-[#222222] py-[2vh] px-[5vh] text-white md:w-fit"
+        >
+          <div>
+            <h1 className=" text-xl font-semibold md:max-w-[25vw]">
+              We&apos;ve sent you instructions to reset your password. Please
+              check your inbox.
+            </h1>
+            <p className="text-md  text-[#888888] md:max-w-[25vw]">
+              If you haven&apos;t received an email in 5 minutes, check your
+              spam, resend, or try a different email.
+            </p>
+          </div>
+          <input
+            type="email"
+            name="Name"
+            placeholder="Email"
+            className="w-full rounded-lg border-none bg-[#2B2B2B] p-4 text-sm font-medium text-white focus:outline-none "
+            // onChange={onchange}
+          />
+
+          <button className="h-[7vh] rounded-lg bg-[#7D54D1] text-sm font-medium text-white hover:bg-[#8A62DC]">
+            Request password reset
+          </button>
+        </form>
+        <div className="mt-[2vh] flex w-full justify-center text-sm">
+          <h2 className="gap-1 text-right text-[#5F5F5F]  md:flex">
+            Don&apos;t have an account ?
+            <h2
+              className="text-center font-medium text-white hover:cursor-pointer hover:underline"
+              onClick={() => navigate('/register')}
+            >
+              Sign up
+            </h2>
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/src/Login/Signup.tsx b/frontend/src/Login/Signup.tsx
index 2b09ad3f..dae3dd83 100644
--- a/frontend/src/Login/Signup.tsx
+++ b/frontend/src/Login/Signup.tsx
@@ -5,7 +5,10 @@ import { useNavigate } from 'react-router-dom';
 export default function Signup() {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log('login');
+
+    alert('Signup Successful ');
+
+    navigate('/login');
   };
 
   const navigate = useNavigate();
@@ -13,7 +16,9 @@ export default function Signup() {
   return (
     <div className="z-30 flex h-full min-h-screen  w-full items-center justify-center bg-[#1D1D1D]">
       <div className=" flex flex-col items-center md:w-fit">
-        <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        <div className=" cursor-pointer" onClick={() => navigate('/')}>
+          <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        </div>
         <div className="font-bold md:flex md:gap-2">
           <h1 className="text-white">Create</h1>
           <h1 className="bg-gradient-to-r from-[#56B3CB] via-[#CD2AA0] to-[#EA635C] bg-clip-text text-transparent">
@@ -39,17 +44,17 @@ export default function Signup() {
             className="w-full rounded-lg border-none bg-[#2B2B2B] p-4 text-sm font-medium  text-white focus:outline-none md:min-w-[25vw]"
             // onChange={onchange}
           />
-          <button className="h-[7vh] rounded-lg bg-[#7D54D1] font-medium text-white">
+          <button className="h-[7vh] rounded-lg bg-[#7D54D1] font-medium text-white hover:bg-[#8A62DC]">
             Create Account
           </button>
           <div className="flex w-full justify-center  text-sm">
             <h2 className="flex gap-1 text-right  text-[#5F5F5F]">
               Already have an account ?
               <h2
-                className="text-center font-medium text-white hover:cursor-pointer"
+                className="text-center font-medium text-white hover:cursor-pointer hover:underline"
                 onClick={() => navigate('/login')}
               >
-                log in
+                Log in
               </h2>
             </h2>
           </div>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 96415c1c..c797d652 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -1,6 +1,7 @@
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Hero from '../Hero';
+import { useNavigate } from 'react-router-dom';
 import { AppDispatch } from '../store';
 import ConversationBubble from './ConversationBubble';
 import {
@@ -115,6 +116,8 @@ export default function Conversation() {
     document.execCommand('insertText', false, text);
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="flex flex-col justify-center p-4 md:flex-row">
       {queries.length > 0 && !hasScrolledToLast && (
@@ -152,8 +155,23 @@ export default function Conversation() {
       {queries.length === 0 && (
         <Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
       )}
+
       <div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white pt-3 md:fixed md:w-[65%]">
         <div className="flex h-full w-full">
+          <div className="mt-[1vh] flex w-full items-center justify-center gap-[1vh]">
+            <button
+              className="mr-4 flex items-center justify-center rounded-full bg-blue-1000 py-2 px-4 text-white hover:bg-blue-3000"
+              onClick={() => navigate('/register')}
+            >
+              Sign Up
+            </button>
+            <button
+              className="mr-4 flex items-center justify-center rounded-full bg-blue-1000 py-2 px-4 text-white hover:bg-blue-3000"
+              onClick={() => navigate('/login')}
+            >
+              Sign in
+            </button>
+          </div>
           <div
             id="inputbox"
             ref={inputRef}