diff --git a/app/auth/SignIn/page.tsx b/app/auth/SignIn/page.tsx
index aa982a7..e88cf5f 100644
--- a/app/auth/SignIn/page.tsx
+++ b/app/auth/SignIn/page.tsx
@@ -5,6 +5,7 @@ import { useForm } from "react-hook-form"
 import * as z from "zod"
 import { loginSchema } from "zodSchema/login"
 import Image from "next/image"
+import { AiFillApple, AiFillGoogleCircle } from "react-icons/ai"
 
 export default function SignIn() {
   return (
@@ -57,7 +58,7 @@ export default function SignIn() {
 
               <div className="mt-4 flex items-center justify-center text-center">
                 <p className="text-slate-500"> Don't have an account?&nbsp; </p>
-                <a className="text-[#F5887A]" href="#">
+                <a className="text-[#F5887A]" href="/auth/SignUp">
                   Sign Up
                 </a>
               </div>
@@ -67,12 +68,14 @@ export default function SignIn() {
                 <div className="h-[1px] w-[40%] bg-slate-500"></div>
               </div>
             </div>
-            <div className="flex items-center justify-between">
-              <button className=" border-conic-gradient relative inline-flex h-9 w-full items-center justify-between rounded-full border-[1px]  border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
+            <div className="flex w-[80%] items-center justify-around max-md:flex-wrap">
+              <button className=" border-conic-gradient relative m-2 inline-flex h-9 w-full items-center justify-around rounded-full border-[1px]  border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
+                <AiFillGoogleCircle className="text-lg" />
                 Sign In With Google
               </button>
-              <button className="border-conic-gradient h-9 w-full items-center justify-between rounded-full border-[1px] border-gray-400 bg-gradient-to-br from-gray-900  to-gray-800">
-                Sign In With Facebook
+              <button className=" border-conic-gradient relative m-2 inline-flex h-9 w-full items-center justify-around rounded-full border-[1px]  border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
+                <AiFillApple className="text-lg" />
+                Sign In With Icloud
               </button>
             </div>
           </div>
diff --git a/app/auth/SignUp/page.tsx b/app/auth/SignUp/page.tsx
index 94e994c..be689e1 100644
--- a/app/auth/SignUp/page.tsx
+++ b/app/auth/SignUp/page.tsx
@@ -1,32 +1,95 @@
-import React, { useState } from "react"
-
-const SignUpPage: React.FC = () => {
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-
-  const handleSignUp = () => {
-    // Implement your sign-up logic here
-    console.log("Sign up button clicked")
-    console.log("Email:", email)
-    console.log("Password:", password)
-  }
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useRouter } from "next/router"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { loginSchema } from "zodSchema/login"
+import Image from "next/image"
+import { AiFillApple, AiFillGoogleCircle } from "react-icons/ai"
 
+export default function SignIn() {
   return (
-    <div>
-      <h1>Sign Up</h1>
-      <form>
-        <label>Email:</label>
-        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
-        <br />
-        <label>Password:</label>
-        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
-        <br />
-        <button type="button" onClick={handleSignUp}>
-          Sign Up
-        </button>
-      </form>
-    </div>
+    <section className="relative h-[100vh]">
+      <div className=" rigth-[50%] absolute -z-10 align-middle opacity-[0.7] blur-[40px] max-md:right-[10%]">
+        <Image
+          src="/images/auth-illustration.svg"
+          alt="hero"
+          width="1440"
+          height="450"
+          className="block h-auto max-w-none"
+        />
+      </div>
+      <div className="relative ml-auto mr-auto flex max-w-6xl justify-center pl-6 pr-6">
+        <div className="pb-20 pt-40 ">
+          <div className="flex flex-col items-center justify-center">
+            <Image src="/images/logoicon.png" alt="logo" width="100" height="100" />
+            <div className="mb-4 max-w-2xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
+              <h2 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 bg-clip-text p-5 text-center text-transparent">
+                Sign In To Your Account
+              </h2>
+            </div>
+            <div className="w-[80%]">
+              <form className="w-full max-w-lg">
+                <label className="mb-2 block text-sm font-bold text-white" htmlFor="email">
+                  Email
+                </label>
+                <input
+                  className=" w-full appearance-none rounded  bg-[#1e293b] px-3 py-2 leading-tight text-white focus:outline-[#F5887A]"
+                  id="email"
+                  type="text"
+                  placeholder="youremail@website.com"
+                />
+                <label className="mb-2 mt-4 block text-sm font-bold text-white" htmlFor="password">
+                  Password
+                </label>
+                <input
+                  className=" w-full appearance-none rounded  bg-[#1e293b] px-3 py-2 leading-tight text-gray-700 shadow focus:outline-[#F5887A]"
+                  id="password"
+                  type="password"
+                  placeholder="Password"
+                />
+                <label className="mb-2 mt-4 block text-sm font-bold text-white" htmlFor="password">
+                  Confirm Password
+                </label>
+                <input
+                  className=" w-full appearance-none rounded  bg-[#1e293b] px-3 py-2 leading-tight text-gray-700 shadow focus:outline-[#F5887A]"
+                  id="ConfirmPassword"
+                  type="password"
+                  placeholder="ConfirmPassword"
+                />
+                <button
+                  className="focus:shadow-outline focus:shadow-outline hover:shadow-outline mt-4 w-full rounded-full bg-[#F5887A] px-4 py-2 font-bold text-white transition-all hover:bg-[#F0B37D] focus:outline-none"
+                  type="button"
+                >
+                  Sign Up
+                </button>
+              </form>
+
+              <div className="mt-4 flex items-center justify-center text-center">
+                <p className="text-slate-500"> Already an account?&nbsp; </p>
+                <a className="text-[#F5887A]" href="/auth/SignIn">
+                  Sign In
+                </a>
+              </div>
+              <div className="my-[10px] flex items-center justify-between">
+                <div className="h-[1px] w-[40%] bg-slate-500"></div>
+                <p className="text-slate-500">OR</p>
+                <div className="h-[1px] w-[40%] bg-slate-500"></div>
+              </div>
+            </div>
+            <div className="flex w-[80%] items-center justify-around max-md:flex-wrap">
+              <button className=" border-conic-gradient relative m-2 inline-flex h-9 w-full items-center justify-around rounded-full border-[1px]  border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
+                <AiFillGoogleCircle className="text-lg" />
+                Sign Up With Google
+              </button>
+              <button className=" border-conic-gradient relative m-2 inline-flex h-9 w-full items-center justify-around rounded-full border-[1px]  border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
+                <AiFillApple className="text-lg" />
+                Sign Up With Icloud
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   )
 }
-
-export default SignUpPage
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index e80d512..bfe3ac6 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -107,7 +107,7 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
             </li>
             <li className="hidden lg:block">
               <Button
-                href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
+                href="/auth/SignUp"
                 intent="navSignUp"
                 size="hero2"
                 onMouseEnter={() => setHovered(true)}