diff --git a/frontend/app/auth/page.tsx b/frontend/app/auth/page.tsx
deleted file mode 100644
index f77f08d..0000000
--- a/frontend/app/auth/page.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import ForgotPasswordModal from "./forgot-password-modal";
-import WaterDrop from "./waterdrop";
-
-import Link from "next/link";
-import Image from "next/image";
-
-export default function Signin() {
-  return (
-    <div>
-      <div className="grid grid-cols-[1.3fr_1.2fr] gap-0  h-screen overflow-hidden">
-        <div className="flex bg-[url('/plant-background.jpeg')] bg-cover  bg-center">
-          {/* <div className="flex flex-col gap-y-10 mt-40 ml-40">
-            <h1 className="text-5xl">Welcome back!</h1>
-            <p>Log in to personalize your planting adventure!</p>
-          </div> */}
-          {/* water pot and dripping animation */}
-          {/* <div className="absolute items-center mt-96 ">
-            <Image
-              src="/water-pot.png"
-              alt="Water Pot"
-              width={300}
-              height={300}
-              className=" ml-72"
-            />
-            <div className="absolute top-[150px] left-[560px] overflow-hidden">
-              <WaterDrop />
-            </div>
-          </div> */}
-          <div></div>
-        </div>
-
-        <div className="flex justify-center items-center ">
-          {/* login box */}
-          <div className="w-[560px] h-[600px]">
-            <div className="flex flex-col gap-5  justify-center items-center">
-              <h1 className="text-4xl mt-5 font-semibold">Log In</h1>
-              <div className="flex whitespace-nowrap gap-x-2">
-                <span>Don&apos;t have an account?</span>
-                <span className="text-green-600">
-                  <Link href="#">Sign up</Link>
-                </span>
-              </div>
-            </div>
-
-            {/* OAUTH */}
-            <div className="flex flex-col items-center mt-10 gap-x-5">
-              {/* Google */}
-              <div className="flex justify-center  rounded-full bg-gray-200 hover:bg-gray-300 duration-300 w-[90] h-[55] cursor-pointer ">
-                <Image src="/google-logo.png" alt="Google Logo" width={35} height={35} className="object-contain" />
-              </div>
-            </div>
-
-            <div className="flex flex-col mt-10 ">
-              <div>
-                <h1 className="whitespace-nowrap flex items-start ml-24">
-                  EMAIL <span className="text-red-500">*</span>
-                </h1>
-                <div className="flex flex-col items-center">
-                  <Input type="email" className="w-2/3 mt-3" />
-                </div>
-              </div>
-              <div className="mt-5">
-                <h1 className="whitespace-nowrap flex items-start ml-24">
-                  PASSWORD <span className="text-red-500">*</span>
-                </h1>
-                <div className="flex flex-col items-center">
-                  <Input type="password" className="w-2/3 mt-3" />
-                </div>
-              </div>
-              <ForgotPasswordModal />
-            </div>
-            <div className="flex justify-center mt-5">
-              <Button className="rounded-full w-20 h-12">Submit</Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/app/auth/forgot-password-modal.tsx b/frontend/app/auth/signin/forgot-password-modal.tsx
similarity index 75%
rename from frontend/app/auth/forgot-password-modal.tsx
rename to frontend/app/auth/signin/forgot-password-modal.tsx
index 7a2e20a..c2eb19c 100644
--- a/frontend/app/auth/forgot-password-modal.tsx
+++ b/frontend/app/auth/signin/forgot-password-modal.tsx
@@ -15,19 +15,18 @@ import { Label } from "@/components/ui/label";
 
 export default function ForgotPasswordModal() {
   return (
-    <div className="mt-5">
+    <div>
       <Dialog>
         <DialogTrigger asChild>
-          <Button className=" whitespace-nowrap flex  ml-20 bg-transparent border-none hover:bg-transparent shadow-none">
-            <h1 className="text-green-600">Forgot password?</h1>
+          <Button className=" whitespace-nowrap flex bg-transparent border-none hover:bg-transparent shadow-none">
+            <h1 className="text-green-600 underline">Forgot password?</h1>
           </Button>
         </DialogTrigger>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>What&apos;s your email?</DialogTitle>
             <DialogDescription>
-              Please verify your email for us. Once you do, we&apos;ll send
-              instructions to reset your password
+              Please verify your email for us. Once you do, we&apos;ll send instructions to reset your password
             </DialogDescription>
           </DialogHeader>
           <div className="flex items-center space-x-2">
@@ -35,11 +34,7 @@ export default function ForgotPasswordModal() {
               <Label htmlFor="link" className="sr-only">
                 Link
               </Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="your.email@gmail.com"
-              />
+              <Input id="email" type="email" placeholder="your.email@gmail.com" />
             </div>
           </div>
           <DialogFooter className="sm:justify-start">
diff --git a/frontend/app/auth/signin/page.tsx b/frontend/app/auth/signin/page.tsx
new file mode 100644
index 0000000..55dc3dd
--- /dev/null
+++ b/frontend/app/auth/signin/page.tsx
@@ -0,0 +1,76 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import ForgotPasswordModal from "./forgot-password-modal";
+
+import Link from "next/link";
+import Image from "next/image";
+
+export default function SigninPage() {
+  return (
+    <div>
+      <div className="grid grid-cols-[0.7fr_1.2fr] h-screen overflow-hidden">
+        <div className="flex bg-[url('/plant-background.jpeg')] bg-cover  bg-center"></div>
+
+        <div className="flex justify-center items-center">
+          {/* login box */}
+          <div className="container px-[25%]">
+            <div className="flex flex-col justify-center items-center">
+              <span>
+                <Image src={`/forfarm-logo.png`} alt="Forfarm" width={150} height={150}></Image>
+              </span>
+              <h1 className="text-3xl font-semibold">Welcome back.</h1>
+              <div className="flex whitespace-nowrap gap-x-2 mt-2">
+                <span className="text-md">New to Forfarm?</span>
+                <span className="text-green-600">
+                  <Link href="signup" className="underline">
+                    Sign up
+                  </Link>
+                </span>
+              </div>
+            </div>
+
+            <div className="flex flex-col mt-4">
+              <div>
+                <Label htmlFor="email">Email</Label>
+                <Input type="email" id="email" placeholder="Email" />
+              </div>
+              <div className="mt-5">
+                <div>
+                  <Label htmlFor="password">Password</Label>
+                  <Input type="empasswordail" id="password" placeholder="Password" />
+                </div>
+              </div>
+
+              <Button className="mt-5 rounded-full">Log in</Button>
+            </div>
+
+            <div id="signin-footer" className="flex justify-between mt-5">
+              <div className="flex items-center space-x-2">
+                <Checkbox id="terms" />
+                <label
+                  htmlFor="terms"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                  Remember me
+                </label>
+              </div>
+              <ForgotPasswordModal />
+            </div>
+
+            <div className="my-5">
+              <p className="text-sm">Or log in with</p>
+              {/* OAUTH */}
+              <div className="flex flex-col gap-x-5 mt-3">
+                {/* Google */}
+                <div className="flex w-1/3 justify-center rounded-full border-2 border-border bg-gray-100 hover:bg-gray-300 duration-300 cursor-pointer ">
+                  <Image src="/google-logo.png" alt="Google Logo" width={35} height={35} className="object-contain" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/auth/waterdrop.tsx b/frontend/app/auth/signin/waterdrop.tsx
similarity index 100%
rename from frontend/app/auth/waterdrop.tsx
rename to frontend/app/auth/signin/waterdrop.tsx
diff --git a/frontend/app/auth/signup/page.tsx b/frontend/app/auth/signup/page.tsx
new file mode 100644
index 0000000..5657830
--- /dev/null
+++ b/frontend/app/auth/signup/page.tsx
@@ -0,0 +1,69 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+
+import Link from "next/link";
+import Image from "next/image";
+
+export default function SignupPage() {
+  return (
+    <div>
+      <div className="grid grid-cols-[0.7fr_1.2fr] h-screen overflow-hidden">
+        <div className="flex bg-[url('/plant-background.jpeg')] bg-cover  bg-center"></div>
+
+        <div className="flex justify-center items-center">
+          {/* login box */}
+          <div className="container px-[25%]">
+            <div className="flex flex-col justify-center items-center">
+              <span>
+                <Image src={`/forfarm-logo.png`} alt="Forfarm" width={150} height={150}></Image>
+              </span>
+              <h1 className="text-3xl font-semibold">Hi! Welcome</h1>
+              <div className="flex whitespace-nowrap gap-x-2 mt-2">
+                <span className="text-md">Already have accounts?</span>
+                <span className="text-green-600">
+                  <Link href="signin" className="underline">
+                    Sign in
+                  </Link>
+                </span>
+              </div>
+            </div>
+
+            <div className="flex flex-col mt-4">
+              <div>
+                <Label htmlFor="email">Email</Label>
+                <Input type="email" id="email" placeholder="Email" />
+              </div>
+              <div className="mt-5">
+                <div>
+                  <Label htmlFor="password">Password</Label>
+                  <Input type="empasswordail" id="password" placeholder="Password" />
+                </div>
+              </div>
+              <div className="mt-5">
+                <div>
+                  <Label htmlFor="password">Confirm Password</Label>
+                  <Input type="empasswordail" id="password" placeholder="Password" />
+                </div>
+              </div>
+
+              <Button className="mt-5 rounded-full">Sign up</Button>
+            </div>
+
+            <div className="my-5">
+              <p className="text-sm">Or log in with</p>
+              {/* OAUTH */}
+              <div className="flex flex-col gap-x-5 mt-3">
+                {/* Google */}
+                <div className="flex w-1/3 justify-center rounded-full border-2 border-border bg-gray-100 hover:bg-gray-300 duration-300 cursor-pointer ">
+                  <Image src="/google-logo.png" alt="Google Logo" width={35} height={35} className="object-contain" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}