diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 06a52ca..223806e 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { motion } from "motion/react";
+import { Navbar } from "@/components/navbar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Lock, Mail } from "lucide-react";
@@ -12,7 +13,7 @@ export default function Login() {
 
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
-    const [error, setError] = useState<string|null>(null);
+    const [error, setError] = useState<string | null>(null);
 
     const handleLogin = async () => {
         setError(null);
@@ -26,70 +27,77 @@ export default function Login() {
     };
 
     return (
-        <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center px-6">
-            {/* Card */}
-            <motion.div
-                initial={{ opacity: 0, y: -20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.8 }}
-                className="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-md"
-            >
-                <h2 className="text-3xl font-bold text-center mb-6">Login</h2>
+        <div className="min-h-screen bg-gray-900 text-white flex flex-col">
+            <div className="w-full">
+                <Navbar />
+            </div>
 
-                {error && <p className="text-red-500 text-center mb-4">{error}</p>}
+            <div className="flex-1 flex items-center justify-center px-6">
+                {/* Card */}
+                <motion.div
+                    initial={{ opacity: 0, y: -20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8 }}
+                    className="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-md"
+                >
+                    <h2 className="text-3xl font-bold text-center mb-6">Login</h2>
 
-                <div className="space-y-4">
-                    <div>
-                        <label className="block text-gray-400 mb-1">Email</label>
-                        <div className="relative">
-                            <Mail className="absolute left-3 top-2 text-gray-500" size={20} />
-                            <Input
-                                type="email"
-                                placeholder="Enter your email"
-                                className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
-                                value={email}
-                                onChange={(e) => setEmail(e.target.value)}
-                            />
+                    {error && <p className="text-red-500 text-center mb-4">{error}</p>}
+
+                    <div className="space-y-4">
+                        <div>
+                            <label className="block text-gray-400 mb-1">Email</label>
+                            <div className="relative">
+                                <Mail className="absolute left-3 top-2 text-gray-500" size={20} />
+                                <Input
+                                    type="email"
+                                    placeholder="Enter your email"
+                                    className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                />
+                            </div>
                         </div>
-                    </div>
 
-                    <div>
-                        <label className="block text-gray-400 mb-1">Password</label>
-                        <div className="relative">
-                            <Lock className="absolute left-3 top-2 text-gray-500" size={20} />
-                            <Input
-                                type="password"
-                                placeholder="Enter your password"
-                                className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                            />
+                        <div>
+                            <label className="block text-gray-400 mb-1">Password</label>
+                            <div className="relative">
+                                <Lock className="absolute left-3 top-2 text-gray-500" size={20} />
+                                <Input
+                                    type="password"
+                                    placeholder="Enter your password"
+                                    className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                />
+                            </div>
                         </div>
+
+                        <Button
+                            className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
+                            onClick={handleLogin}
+                        >
+                            Login
+                        </Button>
+                        <div className="my-6 flex items-center">
+                            <div className="flex-1 border-t border-gray-600"></div>
+                            <p className="px-4 text-gray-400">or</p>
+                            <div className="flex-1 border-t border-gray-600"></div>
+                        </div>
+                        <Button
+                            className="w-full bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg mt-2 hover:bg-blue-600"
+                            onClick={handleGoogleSignIn}
+                        >
+                            Sign in with Google
+                        </Button>
                     </div>
 
-                    <Button
-                        className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
-                        onClick={handleLogin}
-                    >
-                        Login
-                    </Button>
-                    <div className="my-6 flex items-center">
-                    <div className="flex-1 border-t border-gray-600"></div>
-                    <p className="px-4 text-gray-400">or</p>
-                    <div className="flex-1 border-t border-gray-600"></div>
-                    </div>
-                    <Button
-                        className="w-full bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg mt-2 hover:bg-blue-600"
-                        onClick={handleGoogleSignIn}
-                    >
-                        Sign in with Google
-                    </Button>
-                </div>
+                    <p className="text-center text-gray-400 mt-4">
+                        Don&apos;t have an account? <a href="/register" className="text-blue-400 hover:underline">Register</a>
+                    </p>
+                </motion.div>
+            </div>
 
-                <p className="text-center text-gray-400 mt-4">
-                    Don&apos;t have an account? <a href="/register" className="text-blue-400 hover:underline">Register</a>
-                </p>
-            </motion.div>
         </div>
     );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d9f3bcb..8131027 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,19 +1,13 @@
 'use client'
 import { motion } from "motion/react";
+import { Navbar } from "@/components/navbar";
 import { Button } from "@/components/ui/button";
 import { ArrowRight, CheckCircle, MessageCircle } from "lucide-react";
 
 export default function Home() {
   return (
     <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center">
-      {/* Navbar */}
-      <nav className="w-full py-4 px-8 flex justify-between items-center bg-gray-800 shadow-md">
-        <h1 className="text-2xl font-bold">Todoist</h1>
-        <div className="space-x-4">
-          <button className="px-4 py-2 rounded-lg border-2 font-semibold"><a href="/login">Login</a></button>
-          <button className="px-4 py-2 rounded-lg bg-white text-gray-900 font-semibold">Register</button>
-        </div>
-      </nav>
+      <Navbar />
 
       {/* Hero Section */}
       <motion.div
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 0000000..6857188
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+const Navbar = () => {
+    return (
+        <nav className="w-full py-4 px-8 flex justify-between items-center bg-gray-800 shadow-md">
+            <Link href="/">
+                <h1 className="text-2xl font-bold text-white cursor-pointer">Todoist</h1>
+            </Link>
+            <div className="space-x-4">
+                <Link href="/login">
+                    <button className="px-4 py-2 rounded-lg border-2 border-white text-white font-semibold hover:bg-white hover:text-gray-800 transition">
+                        Login
+                    </button>
+                </Link>
+                <Link href="/register">
+                    <button className="px-4 py-2 rounded-lg bg-white text-gray-900 font-semibold hover:bg-gray-200 transition">
+                        Register
+                    </button>
+                </Link>
+            </div>
+        </nav>
+    );
+};
+
+export { Navbar };
\ No newline at end of file