diff --git a/components/NavBar.jsx b/components/NavBar.jsx
index 8cd1666..eda045c 100644
--- a/components/NavBar.jsx
+++ b/components/NavBar.jsx
@@ -274,6 +274,15 @@ export default function NavBar() {
                 Organizations
               </Link>
             </div>
+            <Link
+  href={"/about"}
+  className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
+    router.pathname === "/about" ? "text-sky-200 font-bold" : ""
+  }`}
+>
+  About
+</Link>
+
             <div className="px-2 h-full  items-center justify-center flex">
               {user !== null ? (
                 <>
diff --git a/components/about.jsx b/components/about.jsx
new file mode 100644
index 0000000..bc7a608
--- /dev/null
+++ b/components/about.jsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import NavBar from "@/components/NavBar"; // Import the NavBar
+import { motion } from "framer-motion"; // Import framer-motion for animation effects
+
+export default function About() {
+  const [showContent, setShowContent] = useState(false);
+
+  // A simple animation effect when the page loads
+  useEffect(() => {
+    setTimeout(() => {
+      setShowContent(true);
+    }, 200);
+  }, []);
+
+  return (
+    <>
+      <NavBar />
+      <section className="flex flex-col items-center justify-center h-screen bg-gray-50 text-gray-700">
+        <motion.div
+          className="bg-white p-10 rounded-lg shadow-lg max-w-4xl text-center"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: showContent ? 1 : 0, y: showContent ? 0 : 20 }}
+          transition={{ duration: 0.5 }}
+        >
+          <h1 className="text-4xl font-bold mb-4 text-indigo-600">
+            About JobSewa
+          </h1>
+          <p className="text-lg leading-relaxed mb-6">
+            JobSewa is a platform dedicated to bridging the gap between job
+            seekers and employers. Whether you're looking to post jobs, find
+            opportunities, or stay up-to-date with the latest industry trends,
+            we've got you covered. Our mission is to empower both employers and
+            job seekers by providing a seamless experience and fostering a
+            supportive community.
+          </p>
+          <motion.div
+            className="text-left"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: showContent ? 1 : 0, x: showContent ? 0 : -20 }}
+            transition={{ duration: 0.7, delay: 0.3 }}
+          >
+            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+              Our Vision
+            </h2>
+            <p className="text-base leading-relaxed mb-4">
+              To build a future where job searching is effortless, effective,
+              and efficient for all. Our aim is to make meaningful connections
+              between talents and opportunities that help people achieve their
+              career goals.
+            </p>
+            <h2 className="text-2xl font-semibold text-gray-900 mb-3">
+              Our Mission
+            </h2>
+            <p className="text-base leading-relaxed">
+              We strive to create a job platform that prioritizes user
+              experience, provides transparency, and connects the right people
+              to the right jobs in a timely manner.
+            </p>
+          </motion.div>
+        </motion.div>
+      </section>
+    </>
+  );
+}
diff --git a/pages/_app.js b/pages/_app.js
index 3594623..5b2c1f7 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -5,6 +5,8 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import Cookies from 'js-cookie';
 import 'react-toastify/dist/ReactToastify.css';
+import '../styles/globals.css'; // Ensure this is imported to use globally
+
 
 
 
diff --git a/pages/auth/forget-password.jsx b/pages/auth/forget-password.jsx
index 015c484..a51b1d9 100644
--- a/pages/auth/forget-password.jsx
+++ b/pages/auth/forget-password.jsx
@@ -38,7 +38,7 @@ export default function ForgetPassword() {
     }
 
     if (formData.password !== formData.confirmPassword) {
-      toast.error("Password and Confirm Password does not match");
+      toast.error("Password and Confirm Password do not match");
     }
 
     const res = await forget_password(formData);
@@ -55,94 +55,97 @@ export default function ForgetPassword() {
   return (
     <>
       <NavBar />
-      <section className="bg-indigo-600  text-center">
+      <section className="bg-gradient-to-r from-indigo-900 via-purple-900 to-black text-center">
         <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
-          <div className="w-full p-6 bg-white rounded-lg shadow  md:mt-0 sm:max-w-md  sm:p-8">
-            <h2 className="mb-1 text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl ">
-              Change Password
-            </h2>
-            <form
-              onSubmit={handleSubmit}
-              className="mt-4 space-y-4 lg:mt-5 md:space-y-5"
-            >
-              <div className="text-left">
-                <label
-                  htmlFor="email"
-                  className="block mb-2 text-sm font-medium text-gray-900 "
-                >
-                  Your email
-                </label>
-                <input
-                  onChange={(e) =>
-                    setFormData({ ...formData, email: e.target.value })
-                  }
-                  type="email"
-                  name="email"
-                  id="email"
-                  className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5 "
-                  placeholder="name@company.com"
-                  required=""
-                />
-                {error.email && (
-                  <p className="text-sm text-red-500">{error.email}</p>
-                )}
-              </div>
-              <div className="text-left">
-                <label
-                  htmlFor="password"
-                  className="block mb-2 text-sm font-medium text-gray-900 "
-                >
-                  New Password
-                </label>
-                <input
-                  onChange={(e) =>
-                    setFormData({ ...formData, password: e.target.value })
-                  }
-                  type="password"
-                  name="password"
-                  id="password"
-                  placeholder="••••••••"
-                  className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5 "
-                  required=""
-                />
-                {error.password && (
-                  <p className="text-sm text-red-500">{error.password}</p>
-                )}
-              </div>
-              <div className="text-left">
-                <label
-                  htmlFor="confirm-password"
-                  className="block mb-2 text-sm font-medium text-gray-900 "
-                >
-                  Confirm password
-                </label>
-                <input
-                  onChange={(e) =>
-                    setFormData({
-                      ...formData,
-                      confirmPassword: e.target.value,
-                    })
-                  }
-                  type="password"
-                  name="confirm-password"
-                  id="confirm-password"
-                  placeholder="••••••••"
-                  className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5 "
-                  required=""
-                />
-                {error.confirmPassword && (
-                  <p className="text-sm text-red-500">
-                    {error.confirmPassword}
-                  </p>
-                )}
-              </div>
-              <button
-                type="submit"
-                className="w-full text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
+          <div className="relative w-full p-6 bg-white rounded-lg shadow-lg md:mt-0 sm:max-w-md sm:p-8 transform hover:scale-105 transition-transform duration-500 ease-in-out">
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent to-indigo-600 opacity-75 blur-md rounded-lg"></div>
+            <div className="relative z-10">
+              <h2 className="mb-1 text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl">
+                Change Password
+              </h2>
+              <form
+                onSubmit={handleSubmit}
+                className="mt-4 space-y-6 lg:mt-5"
               >
-                Reset passwod
-              </button>
-            </form>
+                <div className="text-left">
+                  <label
+                    htmlFor="email"
+                    className="block mb-2 text-sm font-medium text-gray-900"
+                  >
+                    Your email
+                  </label>
+                  <input
+                    onChange={(e) =>
+                      setFormData({ ...formData, email: e.target.value })
+                    }
+                    type="email"
+                    name="email"
+                    id="email"
+                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-purple-500 focus:border-purple-700 block w-full p-2.5 transition-all duration-300 ease-in-out hover:shadow-glow hover:shadow-purple-500/50"
+                    placeholder="name@company.com"
+                    required
+                  />
+                  {error.email && (
+                    <p className="text-sm text-red-500">{error.email}</p>
+                  )}
+                </div>
+                <div className="text-left">
+                  <label
+                    htmlFor="password"
+                    className="block mb-2 text-sm font-medium text-gray-900"
+                  >
+                    New Password
+                  </label>
+                  <input
+                    onChange={(e) =>
+                      setFormData({ ...formData, password: e.target.value })
+                    }
+                    type="password"
+                    name="password"
+                    id="password"
+                    placeholder="••••••••"
+                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-purple-500 focus:border-purple-700 block w-full p-2.5 transition-all duration-300 ease-in-out hover:shadow-glow hover:shadow-purple-500/50"
+                    required
+                  />
+                  {error.password && (
+                    <p className="text-sm text-red-500">{error.password}</p>
+                  )}
+                </div>
+                <div className="text-left">
+                  <label
+                    htmlFor="confirm-password"
+                    className="block mb-2 text-sm font-medium text-gray-900"
+                  >
+                    Confirm password
+                  </label>
+                  <input
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        confirmPassword: e.target.value,
+                      })
+                    }
+                    type="password"
+                    name="confirm-password"
+                    id="confirm-password"
+                    placeholder="••••••••"
+                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-purple-500 focus:border-purple-700 block w-full p-2.5 transition-all duration-300 ease-in-out hover:shadow-glow hover:shadow-purple-500/50"
+                    required
+                  />
+                  {error.confirmPassword && (
+                    <p className="text-sm text-red-500">
+                      {error.confirmPassword}
+                    </p>
+                  )}
+                </div>
+                <button
+                  type="submit"
+                  className="relative w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center transition-all duration-300 ease-in-out hover:shadow-purple-500/50 transform hover:scale-110 hover:shadow-glow"
+                >
+                  Reset Password
+                </button>
+              </form>
+            </div>
           </div>
         </div>
         <ToastContainer />
diff --git a/pages/auth/globals.css b/pages/auth/globals.css
new file mode 100644
index 0000000..89daf3a
--- /dev/null
+++ b/pages/auth/globals.css
@@ -0,0 +1,21 @@
+/* styles/globals.css */
+
+@keyframes futuristicGlow {
+    0% {
+      box-shadow: 0 0 5px #0fa, 0 0 10px #0fa, 0 0 20px #0fa;
+      transform: scale(1);
+    }
+    50% {
+      box-shadow: 0 0 20px #0fa, 0 0 40px #0fa, 0 0 60px #0fa;
+      transform: scale(1.1);
+    }
+    100% {
+      box-shadow: 0 0 5px #0fa, 0 0 10px #0fa, 0 0 20px #0fa;
+      transform: scale(1);
+    }
+  }
+  
+  .animate-glow {
+    animation: futuristicGlow 0.6s ease-in-out;
+  }
+  
\ No newline at end of file
diff --git a/pages/auth/login.jsx b/pages/auth/login.jsx
index 53fc8e7..942e210 100644
--- a/pages/auth/login.jsx
+++ b/pages/auth/login.jsx
@@ -11,12 +11,19 @@ import NavBar from "@/components/NavBar";
 
 export default function Login() {
   const dispatch = useDispatch();
-
   const [formData, setFormData] = useState({ email: "", password: "" });
   const [error, setError] = useState({ email: "", password: "" });
+  const [isAnimating, setIsAnimating] = useState(false); // State to track animation
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+
+    // Trigger the animation
+    setIsAnimating(true);
+
+    // Reset the animation after 0.6s (duration of the animation)
+    setTimeout(() => setIsAnimating(false), 600);
+
     if (!formData.email) {
       setError({ ...error, email: "Email Field is Required" });
       return;
@@ -54,11 +61,11 @@ export default function Login() {
   return (
     <>
       <NavBar />
-      <div className="w-full h-screen bg-gray-600">
-        <div className="flex flex-col items-center  text-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
-          <div className="w-full bg-white text-black rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 ">
+      <div className="w-full h-screen bg-gradient-to-br from-gray-800 to-black text-white futuristic-bg">
+        <div className="flex flex-col items-center text-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
+          <div className="w-full bg-black bg-opacity-70 rounded-lg shadow-lg neon-shadow sm:max-w-md xl:p-0">
             <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
-              <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl ">
+              <h1 className="text-3xl font-extrabold leading-tight tracking-tight text-white glowing-text">
                 Sign in to your account
               </h1>
               <form
@@ -69,7 +76,7 @@ export default function Login() {
                 <div className="text-left">
                   <label
                     htmlFor="email"
-                    className="block mb-2 text-sm font-medium text-gray-900 "
+                    className="block mb-2 text-sm font-medium glowing-label"
                   >
                     Your email
                   </label>
@@ -80,7 +87,7 @@ export default function Login() {
                     type="email"
                     name="email"
                     id="email"
-                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5 "
+                    className="bg-gray-900 border border-gray-700 text-white sm:text-sm rounded-lg focus:ring-cyan-500 focus:border-cyan-500 focus:outline-none transition-all duration-300 w-full p-2.5 neon-input"
                     placeholder="name@company.com"
                     required=""
                   />
@@ -91,7 +98,7 @@ export default function Login() {
                 <div className="text-left">
                   <label
                     htmlFor="password"
-                    className="block mb-2 text-sm font-medium text-gray-900 "
+                    className="block mb-2 text-sm font-medium glowing-label"
                   >
                     Password
                   </label>
@@ -103,7 +110,7 @@ export default function Login() {
                     name="password"
                     id="password"
                     placeholder="••••••••"
-                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5"
+                    className="bg-gray-900 border border-gray-700 text-white sm:text-sm rounded-lg focus:ring-cyan-500 focus:border-cyan-500 focus:outline-none transition-all duration-300 w-full p-2.5 neon-input"
                     required=""
                   />
                   {error.password && (
@@ -117,14 +124,14 @@ export default function Login() {
                         id="remember"
                         aria-describedby="remember"
                         type="checkbox"
-                        className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-indigo-300   dark:focus:ring-indigo-600 "
+                        className="w-4 h-4 border border-gray-300 rounded bg-gray-900 focus:ring-3 focus:ring-cyan-500"
                         required=""
                       />
                     </div>
                     <div className="ml-3 text-sm">
                       <label
                         htmlFor="remember"
-                        className="text-gray-500 dark:text-gray-300"
+                        className="text-gray-400"
                       >
                         Remember me
                       </label>
@@ -132,22 +139,24 @@ export default function Login() {
                   </div>
                   <Link
                     href="/auth/forget-password"
-                    className="text-sm font-medium text-sky-700 hover:underline "
+                    className="text-sm font-medium text-cyan-400 hover:text-cyan-600 transition-colors"
                   >
                     Forgot password?
                   </Link>
                 </div>
                 <button
                   type="submit"
-                  className="w-full text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800"
+                  className={`w-full bg-cyan-600 hover:bg-cyan-700 text-white font-medium rounded-lg text-sm px-5 py-2.5 transition-all duration-300 ${
+                    isAnimating ? "animate-glow" : ""
+                  } focus:ring-4 focus:ring-cyan-500 focus:outline-none`}
                 >
                   Sign in
                 </button>
-                <p className="text-sm font-light ">
+                <p className="text-sm font-light text-gray-400">
                   Don’t have an account yet?{" "}
                   <Link
                     href="/auth/register"
-                    className="font-medium text-sky-700 hover:underline "
+                    className="font-medium text-cyan-400 hover:text-cyan-600 transition-colors"
                   >
                     Sign up
                   </Link>
@@ -158,6 +167,46 @@ export default function Login() {
         </div>
         <ToastContainer />
       </div>
+
+      <style jsx>{`
+        .futuristic-bg {
+          background: radial-gradient(circle at top left, #1a1a2e, #16213e);
+        }
+
+        .neon-input {
+          box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
+        }
+
+        .neon-shadow {
+          box-shadow: 0px 4px 15px rgba(0, 255, 255, 0.5);
+        }
+
+        .glowing-text {
+          color: #00d4ff;
+          text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff;
+        }
+
+        .glowing-label {
+          color: #00e0ff;
+          text-shadow: 0 0 8px #00e0ff;
+        }
+
+        @keyframes glow {
+          0% {
+            box-shadow: 0 0 5px #00d4ff;
+          }
+          50% {
+            box-shadow: 0 0 20px #00d4ff;
+          }
+          100% {
+            box-shadow: 0 0 5px #00d4ff;
+          }
+        }
+
+        .animate-glow {
+          animation: glow 0.6s ease-in-out infinite;
+        }
+      `}</style>
     </>
   );
 }
diff --git a/pages/auth/register.jsx b/pages/auth/register.jsx
index d64142b..e49ffa9 100644
--- a/pages/auth/register.jsx
+++ b/pages/auth/register.jsx
@@ -16,7 +16,7 @@ export default function Register() {
     }
   }, [router]);
 
-  const [formData, setFormData] = useState({ email: "", password: "" });
+  const [formData, setFormData] = useState({ email: "", password: "", name: "" });
   const [error, setError] = useState({ email: "", password: "", name: "" });
 
   const handleSubmit = async (e) => {
@@ -48,107 +48,107 @@ export default function Register() {
   return (
     <>
       <NavBar />
-      <div className="w-full h-screen bg-gray-600 ">
-        <div className="flex flex-col text-center items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0 shadow-xl">
-          <div className="w-full bg-white rounded-lg shadow dark:border text-black md:mt-0 sm:max-w-md xl:p-0 ">
-            <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
-              <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl ">
-                Register your account
-              </h1>
-              <form
-                onSubmit={handleSubmit}
-                className="space-y-4 md:space-y-6"
-                action="#"
+      <div className="w-full h-screen bg-gradient-to-r from-blue-900 to-purple-900 flex items-center justify-center">
+        <div className="w-full max-w-md p-8 space-y-8 glassmorphic-background rounded-lg shadow-xl transform transition duration-500 hover:scale-105 hover:shadow-2xl">
+          <h1 className="text-2xl font-bold text-center text-white animate-pulse">
+            Register your account
+          </h1>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="text-left">
+              <label
+                htmlFor="name"
+                className="block mb-2 text-sm font-medium text-gray-300"
               >
-                <div className="text-left">
-                  <label
-                    htmlFor="name"
-                    className="block mb-2 text-sm font-medium text-gray-900 "
-                  >
-                    Your Name
-                  </label>
-                  <input
-                    onChange={(e) =>
-                      setFormData({ ...formData, name: e.target.value })
-                    }
-                    type="text"
-                    name="name"
-                    id="namw"
-                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5"
-                    placeholder="Name"
-                    required=""
-                  />
-                  {error.name && (
-                    <p className="text-sm text-red-500">{error.name}</p>
-                  )}
-                </div>
-                <div className="text-left">
-                  <label
-                    htmlFor="email"
-                    className="block mb-2 text-sm font-medium text-gray-900 "
-                  >
-                    Your email
-                  </label>
-                  <input
-                    onChange={(e) =>
-                      setFormData({ ...formData, email: e.target.value })
-                    }
-                    type="email"
-                    name="email"
-                    id="email"
-                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5"
-                    placeholder="name@company.com"
-                    required=""
-                  />
-                  {error.email && (
-                    <p className="text-sm text-red-500">{error.email}</p>
-                  )}
-                </div>
-                <div className="text-left">
-                  <label
-                    htmlFor="password"
-                    className="block mb-2 text-sm font-medium text-gray-900 "
-                  >
-                    Password
-                  </label>
-                  <input
-                    onChange={(e) =>
-                      setFormData({ ...formData, password: e.target.value })
-                    }
-                    type="password"
-                    name="password"
-                    id="password"
-                    placeholder="••••••••"
-                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5"
-                    required=""
-                  />
-                  {error.password && (
-                    <p className="text-sm text-red-500">{error.password}</p>
-                  )}
-                </div>
+                Your Name
+              </label>
+              <input
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                type="text"
+                name="name"
+                id="name"
+                className="bg-transparent border border-gray-600 text-gray-300 sm:text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 transition duration-300 ease-in-out transform hover:scale-105"
+                placeholder="Enter your name"
+              />
+              {error.name && (
+                <p className="text-sm text-red-500">{error.name}</p>
+              )}
+            </div>
 
-                <button
-                  type="submit"
-                  className="w-full text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
-                >
-                  Sign Up
-                </button>
-                <p className="text-sm font-light text-gray-500 ">
-                  Already have an account{" "}
-                  <Link
-                    href="/auth/login"
-                    className="font-medium text-sky-700 hover:underline "
-                  >
-                    Sign In
-                  </Link>
-                </p>
-              </form>
+            <div className="text-left">
+              <label
+                htmlFor="email"
+                className="block mb-2 text-sm font-medium text-gray-300"
+              >
+                Your Email
+              </label>
+              <input
+                onChange={(e) =>
+                  setFormData({ ...formData, email: e.target.value })
+                }
+                type="email"
+                name="email"
+                id="email"
+                className="bg-transparent border border-gray-600 text-gray-300 sm:text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 transition duration-300 ease-in-out transform hover:scale-105"
+                placeholder="name@company.com"
+              />
+              {error.email && (
+                <p className="text-sm text-red-500">{error.email}</p>
+              )}
             </div>
-          </div>
-        </div>
 
+            <div className="text-left">
+              <label
+                htmlFor="password"
+                className="block mb-2 text-sm font-medium text-gray-300"
+              >
+                Password
+              </label>
+              <input
+                onChange={(e) =>
+                  setFormData({ ...formData, password: e.target.value })
+                }
+                type="password"
+                name="password"
+                id="password"
+                className="bg-transparent border border-gray-600 text-gray-300 sm:text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 transition duration-300 ease-in-out transform hover:scale-105"
+                placeholder="••••••••"
+              />
+              {error.password && (
+                <p className="text-sm text-red-500">{error.password}</p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              className="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:bg-gradient-to-l hover:from-purple-700 hover:to-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center transition duration-500 ease-in-out transform hover:scale-110 hover:shadow-lg"
+            >
+              Sign Up
+            </button>
+
+            <p className="text-sm font-light text-gray-400">
+              Already have an account?{" "}
+              <Link
+                href="/auth/login"
+                className="font-medium text-blue-400 hover:underline"
+              >
+                Sign In
+              </Link>
+            </p>
+          </form>
+        </div>
         <ToastContainer />
       </div>
+
+      <style jsx>{`
+        .glassmorphic-background {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 16px;
+          backdrop-filter: blur(10px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+      `}</style>
     </>
   );
 }