diff --git a/frontend/admin-panel/src/App.tsx b/frontend/admin-panel/src/App.tsx
index 4dc32b5..37e95d1 100644
--- a/frontend/admin-panel/src/App.tsx
+++ b/frontend/admin-panel/src/App.tsx
@@ -1,11 +1,13 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import Dashboard from './pages/Dashboard';
+import Login from './pages/Login';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/login" element={<Login />} />
         <Route path="/" element={<Layout />}>
           <Route index element={<Dashboard />} />
           <Route path="users" element={<div className="p-4">مدیریت کاربران</div>} />
diff --git a/frontend/admin-panel/src/pages/Login.tsx b/frontend/admin-panel/src/pages/Login.tsx
new file mode 100644
index 0000000..8a0847b
--- /dev/null
+++ b/frontend/admin-panel/src/pages/Login.tsx
@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Lock, Mail, ChevronLeft } from 'lucide-react';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    
+    // Simulate API call
+    setTimeout(() => {
+      setIsLoading(false);
+      navigate('/');
+    }, 1000);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-vazir" dir="rtl">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="w-20 h-20 bg-purple-600 rounded-2xl mx-auto flex items-center justify-center shadow-lg shadow-purple-200">
+          <Lock className="w-10 h-10 text-white" />
+        </div>
+        <h2 className="mt-6 text-center text-3xl font-black text-gray-900">
+          ورود به پنل مدیریت
+        </h2>
+        <p className="mt-2 text-center text-sm text-gray-600 font-bold">
+          کانی‌نا | لابراتوار تخصصی مکمل‌های درمانی حیوانات
+        </p>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white py-8 px-4 shadow-xl shadow-gray-100 sm:rounded-3xl sm:px-10 border border-gray-100">
+          <form className="space-y-6" onSubmit={handleLogin}>
+            <div>
+              <label className="block text-sm font-black text-gray-700">آدرس ایمیل</label>
+              <div className="mt-2 relative">
+                <div className="absolute inset-y-0 right-0 pl-3 flex items-center pr-3 pointer-events-none">
+                  <Mail className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="block w-full pl-3 pr-10 py-3 border border-gray-200 rounded-xl focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 font-bold transition-all"
+                  placeholder="admin@canina-iran.com"
+                  dir="ltr"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-black text-gray-700">رمز عبور</label>
+              <div className="mt-2 relative">
+                <div className="absolute inset-y-0 right-0 pl-3 flex items-center pr-3 pointer-events-none">
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  type="password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="block w-full pl-3 pr-10 py-3 border border-gray-200 rounded-xl focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 font-bold transition-all text-left"
+                  placeholder="••••••••"
+                  dir="ltr"
+                />
+              </div>
+            </div>
+
+            <div>
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full flex justify-center items-center gap-2 py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-black text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all disabled:opacity-50 disabled:cursor-wait"
+              >
+                {isLoading ? 'در حال ورود...' : 'ورود به سیستم'}
+                {!isLoading && <ChevronLeft className="w-5 h-5" />}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}