diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..47b2496
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import { useState } from "react";
+import { Eye, EyeOff, Lock, Mail, LogIn } from "lucide-react";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    // Simulate API call
+    setTimeout(() => {
+      setIsLoading(false);
+      console.log("Login attempted with:", { email, password });
+    }, 2000);
+  };
+
+  const handleSignup = () => {
+    console.log("Signup clicked");
+  };
+
+  const handleForgotPassword = () => {
+    console.log("Forgot password clicked");
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="HealthCare Hub"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Features", id: "features" },
+            { name: "Login", id: "/login" },
+            { name: "Contact", id: "contact" },
+          ]}
+        />
+      </div>
+
+      <div className="min-h-[calc(100vh-80px)] flex items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 mb-4">
+              <Lock className="w-6 h-6 text-white" />
+            </div>
+            <h1 className="text-3xl font-bold text-foreground mb-2">Welcome Back</h1>
+            <p className="text-foreground/70">Sign in to your HealthCare Hub account</p>
+          </div>
+
+          {/* Login Form Card */}
+          <div className="rounded-lg border border-accent/20 bg-card p-8 backdrop-blur-sm shadow-lg">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Email Field */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Email Address
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/50" />
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="you@hospital.com"
+                    className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-accent/30 bg-background focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta text-foreground placeholder-foreground/50 transition-colors"
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* Password Field */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/50" />
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="••••••••"
+                    className="w-full pl-10 pr-10 py-2.5 rounded-lg border border-accent/30 bg-background focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta text-foreground placeholder-foreground/50 transition-colors"
+                    required
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* Remember Me & Forgot Password */}
+              <div className="flex items-center justify-between text-sm">
+                <label className="flex items-center">
+                  <input type="checkbox" className="w-4 h-4 rounded border-accent/30 text-primary-cta focus:ring-primary-cta" />
+                  <span className="ml-2 text-foreground/70">Remember me</span>
+                </label>
+                <button
+                  type="button"
+                  onClick={handleForgotPassword}
+                  className="text-primary-cta hover:text-primary-cta/80 transition-colors"
+                >
+                  Forgot password?
+                </button>
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full py-2.5 px-4 bg-gradient-to-r from-primary-cta to-primary-cta/80 hover:to-primary-cta text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                {isLoading ? (
+                  <>
+                    <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
+                    Signing in...
+                  </>
+                ) : (
+                  <>
+                    <LogIn className="w-5 h-5" />
+                    Sign In
+                  </>
+                )}
+              </button>
+            </form>
+
+            {/* Divider */}
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-accent/20"></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span className="px-2 bg-card text-foreground/50">New to HealthCare Hub?</span>
+              </div>
+            </div>
+
+            {/* Sign Up Link */}
+            <button
+              onClick={handleSignup}
+              className="w-full py-2.5 px-4 border border-accent/30 hover:border-primary-cta/50 text-foreground font-semibold rounded-lg transition-all duration-300 hover:bg-accent/5"
+            >
+              Create Account
+            </button>
+          </div>
+
+          {/* Security Notice */}
+          <div className="mt-6 p-4 rounded-lg bg-accent/10 border border-accent/20">
+            <p className="text-xs text-foreground/70 text-center">
+              🔒 Your information is secure and HIPAA-compliant. We use enterprise-grade encryption to protect your data.
+            </p>
+          </div>
+
+          {/* Help Links */}
+          <div className="mt-6 flex justify-center gap-4 text-sm">
+            <a href="#" className="text-foreground/50 hover:text-foreground/70 transition-colors">
+              Support Center
+            </a>
+            <span className="text-foreground/20">•</span>
+            <a href="#" className="text-foreground/50 hover:text-foreground/70 transition-colors">
+              Contact Support
+            </a>
+            <span className="text-foreground/20">•</span>
+            <a href="#" className="text-foreground/50 hover:text-foreground/70 transition-colors">
+              Privacy Policy
+            </a>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}