diff --git a/frontend/src/Login/ForgotPass.tsx b/frontend/src/Login/ForgotPass.tsx
new file mode 100644
index 00000000..3a1f0929
--- /dev/null
+++ b/frontend/src/Login/ForgotPass.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import DocsGPT3 from '../assets/cute_docsgpt3.svg';
+import { useNavigate } from 'react-router-dom';
+export default function forgotPass() {
+  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">
+        <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        <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">Password reset</h1>
+            <p className="text-md font-semibold text-[#888888] md:max-w-[25vw]">
+              Enter the email address associated with your account and we will
+              send you a link to reset your password.
+            </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">
+            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't have an account ?
+            <h2
+              className="text-center font-medium text-white hover:cursor-pointer"
+              onClick={() => navigate('/register')}
+            >
+              Sign up
+            </h2>
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/Login/Login.tsx b/frontend/src/Login/Login.tsx
new file mode 100644
index 00000000..e8348495
--- /dev/null
+++ b/frontend/src/Login/Login.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import DocsGPT3 from '../assets/cute_docsgpt3.svg';
+import { useNavigate } from 'react-router-dom';
+export default function Login() {
+  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 md:w-fit">
+        <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        <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] md:w-fit"
+        >
+          <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 md:min-w-[25vw]"
+            // onChange={onchange}
+          />
+          <input
+            type="password"
+            name="Name"
+            placeholder="Password"
+            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"
+            onClick={() => navigate('/Resetpass')}
+          >
+            Forgot your password?
+          </h2>
+          <button className="h-[7vh] rounded-lg bg-[#7D54D1] font-medium text-white">
+            Log in
+          </button>
+          <div className="flex w-full justify-center  text-sm">
+            <h2 className="flex gap-1 text-right  text-[#5F5F5F]">
+              Don't have an account ?
+              <h2
+                className="text-center font-medium text-white hover:cursor-pointer"
+                onClick={() => navigate('/register')}
+              >
+                Sign up
+              </h2>
+            </h2>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/Login/ResetCode.tsx b/frontend/src/Login/ResetCode.tsx
new file mode 100644
index 00000000..aaf0f61d
--- /dev/null
+++ b/frontend/src/Login/ResetCode.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ResetCode() {
+  return <div>ResetCode</div>;
+}
diff --git a/frontend/src/Login/Signup.tsx b/frontend/src/Login/Signup.tsx
new file mode 100644
index 00000000..2b09ad3f
--- /dev/null
+++ b/frontend/src/Login/Signup.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import DocsGPT3 from '../assets/cute_docsgpt3.svg';
+import { useNavigate } from 'react-router-dom';
+
+export default function Signup() {
+  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 md:w-fit">
+        <img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
+        <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">
+            DocsGPT
+          </h1>
+          <h1 className="text-white">Account</h1>
+        </div>
+        <form
+          onSubmit={handleSubmit}
+          className="flex w-full flex-col gap-[3vh] md:w-fit"
+        >
+          <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 md:min-w-[25vw]"
+            // onChange={onchange}
+          />
+          <input
+            type="password"
+            name="Name"
+            placeholder="Password"
+            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">
+            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"
+                onClick={() => navigate('/login')}
+              >
+                log in
+              </h2>
+            </h2>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}