diff --git a/www/app/favicon.ico b/www/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/www/app/favicon.ico and /dev/null differ
diff --git a/www/app/globals.css b/www/app/globals.css
index f6aa6c3..5203499 100644
--- a/www/app/globals.css
+++ b/www/app/globals.css
@@ -25,3 +25,7 @@
     @apply border-foreground/20;
   }
 }
+
+body {
+  background-color: white;
+}
diff --git a/www/app/login/page.tsx b/www/app/login/page.tsx
index 37fc75d..a01e63a 100644
--- a/www/app/login/page.tsx
+++ b/www/app/login/page.tsx
@@ -1,119 +1,11 @@
-import Link from "next/link";
-import { headers } from "next/headers";
-import { createClient } from "@/utils/supabase/server";
-import { redirect } from "next/navigation";
-import { SubmitButton } from "./submit-button";
+function loginPage() {
 
-export default function Login({
-  searchParams,
-}: {
-  searchParams: { message: string };
-}) {
-  const signIn = async (formData: FormData) => {
-    "use server";
+   return (
 
-    const email = formData.get("email") as string;
-    const password = formData.get("password") as string;
-    const supabase = createClient();
+    <div className="container">
 
-    const { error } = await supabase.auth.signInWithPassword({
-      email,
-      password,
-    });
-
-    if (error) {
-      return redirect("/login?message=Could not authenticate user");
-    }
-
-    return redirect("/protected");
-  };
-
-  const signUp = async (formData: FormData) => {
-    "use server";
-
-    const origin = headers().get("origin");
-    const email = formData.get("email") as string;
-    const password = formData.get("password") as string;
-    const supabase = createClient();
-
-    const { error } = await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: `${origin}/auth/callback`,
-      },
-    });
-
-    if (error) {
-      return redirect("/login?message=Could not authenticate user");
-    }
-
-    return redirect("/login?message=Check email to continue sign in process");
-  };
-
-  return (
-    <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
-      <Link
-        href="/"
-        className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-foreground bg-btn-background hover:bg-btn-background-hover flex items-center group text-sm"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1"
-        >
-          <polyline points="15 18 9 12 15 6" />
-        </svg>{" "}
-        Back
-      </Link>
-
-      <form className="flex-1 flex flex-col w-full justify-center gap-2 text-foreground">
-        <label className="text-md" htmlFor="email">
-          Email
-        </label>
-        <input
-          className="rounded-md px-4 py-2 bg-inherit border mb-6"
-          name="email"
-          placeholder="you@example.com"
-          required
-        />
-        <label className="text-md" htmlFor="password">
-          Password
-        </label>
-        <input
-          className="rounded-md px-4 py-2 bg-inherit border mb-6"
-          type="password"
-          name="password"
-          placeholder="••••••••"
-          required
-        />
-        <SubmitButton
-          formAction={signIn}
-          className="bg-green-700 rounded-md px-4 py-2 text-foreground mb-2"
-          pendingText="Signing In..."
-        >
-          Sign In
-        </SubmitButton>
-        <SubmitButton
-          formAction={signUp}
-          className="border border-foreground/20 rounded-md px-4 py-2 text-foreground mb-2"
-          pendingText="Signing Up..."
-        >
-          Sign Up
-        </SubmitButton>
-        {searchParams?.message && (
-          <p className="mt-4 p-4 bg-foreground/10 text-foreground text-center">
-            {searchParams.message}
-          </p>
-        )}
-      </form>
     </div>
-  );
+   )
 }
+
+export default loginPage;
\ No newline at end of file
diff --git a/www/app/signin/page.tsx b/www/app/signin/page.tsx
new file mode 100644
index 0000000..3263a42
--- /dev/null
+++ b/www/app/signin/page.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import {FieldValues, useForm} from 'react-hook-form'
+import { z } from 'zod'
+
+
+export default function SignUp() {
+
+  const  SignupSchema = z.object({
+
+    username: z.string().min(10, {message:"Minimum 10 character required!"}),
+    email: z.string().email('Invalid email'),
+    password: z.string().min(8,{message:"password must be of 8 characters!!"})
+
+  })
+
+
+  const {  register,
+           handleSubmit,
+           formState:{errors},
+           reset,
+        } = useForm({
+          resolver:zodResolver(SignupSchema),
+        });
+
+  const onSubmit =(data: FieldValues) => {
+      console.log(data);
+  }      
+
+  return (
+
+    <div className="flex justify-center w-screen items-center h-screen ">
+      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+        <h2 className="text-2xl font-bold text-gray-800 mb-4">Create Your Account</h2>
+
+        <form onSubmit={handleSubmit(onSubmit)}>
+
+          <div className="mb-4">
+            <label htmlFor="username" className="block text-gray-700 text-sm font-bold mb-2">Username</label>
+            <input type="text" {... register("username")} 
+            placeholder="Enter your username" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+            {
+              errors?.username && (<p className="text-red-500"> {`${errors?.username.message}`} </p>)
+            }
+          </div>
+
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">Email</label>
+            <input type="email" {... register("email")} 
+          placeholder="Enter your email" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+           {
+              errors?.email && (<p className="text-red-500"> {`${errors?.email.message}`} </p>)
+            }
+          </div>
+
+          <div className="mb-6">
+            <label htmlFor="password" className="block text-gray-700 text-sm font-bold mb-2">Password</label>
+            <input type="password"  {... register("password")}  
+             placeholder="Enter your password" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+              {
+              errors?.password && (<p className="text-red-500"> {`${errors?.password.message}`} </p>)
+            }
+          </div>
+
+          <div className="flex items-center justify-between">
+            <button type ="submit"  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" >
+              Sign Up
+            </button>
+
+          </div>
+
+        </form>
+
+      </div>
+    </div>
+  );
+}
diff --git a/www/package-lock.json b/www/package-lock.json
index 063381b..5424732 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -13,8 +13,10 @@
         "postcss": "8.4.33",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-hook-form": "^7.52.1",
         "tailwindcss": "3.4.1",
-        "typescript": "5.3.3"
+        "typescript": "5.3.3",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@types/node": "20.11.5",
@@ -1609,6 +1611,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.52.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.1.tgz",
+      "integrity": "sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -2196,6 +2213,14 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/www/package.json b/www/package.json
index a9997ef..41bab67 100644
--- a/www/package.json
+++ b/www/package.json
@@ -14,8 +14,10 @@
     "postcss": "8.4.33",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.52.1",
     "tailwindcss": "3.4.1",
-    "typescript": "5.3.3"
+    "typescript": "5.3.3",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "20.11.5",