diff --git a/components/auth/LoginForm.tsx b/components/auth/LoginForm.tsx
index f580aca..213f6d6 100644
--- a/components/auth/LoginForm.tsx
+++ b/components/auth/LoginForm.tsx
@@ -1,8 +1,13 @@
 'use client';
 import IconLockDots from '@/components/icon/icon-lock-dots';
 import IconMail from '@/components/icon/icon-mail';
+import IconEye from '@/components/icon/icon-eye';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
+import axios from 'axios';
+import Cookies from 'universal-cookie';
+
+const cookies = new Cookies();
 
 const LoginForm = () => {
     const router = useRouter();
@@ -13,7 +18,9 @@ const LoginForm = () => {
         password: '',
     });
 
-    // ✅ State for errors
+    // ✅ State for loading and errors
+    const [loading, setLoading] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
     const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
 
     // Generic handler for inputs
@@ -43,7 +50,7 @@ const LoginForm = () => {
         return newErrors;
     };
 
-    const submitForm = (e: React.FormEvent) => {
+    const submitForm = async (e: React.FormEvent) => {
         e.preventDefault();
         const validationErrors = validate();
 
@@ -52,8 +59,25 @@ const LoginForm = () => {
             return;
         }
 
-        console.log('Form Data:', formData);
-        router.push('/');
+        setLoading(true);
+        try {
+            const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000/api/';
+            const response = await axios.post(`${baseUrl}auth/login`, formData);
+
+            if (response.data.success && response.data.data?.token) {
+                cookies.set('token', response.data.data.token, { path: '/' });
+                cookies.set('user', JSON.stringify(response.data.data.user), { path: '/' });
+                router.push('/');
+            }
+        } catch (error: any) {
+            console.error('Login error', error);
+            setErrors({
+                email: error.response?.data?.message || 'Invalid email or password',
+                password: '',
+            });
+        } finally {
+            setLoading(false);
+        }
     };
 
     return (
@@ -85,15 +109,22 @@ const LoginForm = () => {
                     <input
                         id="Password"
                         name="password"
-                        type="password"
+                        type={showPassword ? "text" : "password"}
                         placeholder="Enter Password"
-                        className="form-input ps-10 placeholder:text-white-dark"
+                        className="form-input ps-10 pe-10 placeholder:text-white-dark"
                         value={formData.password}
                         onChange={handleChange}
                     />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
                         <IconLockDots fill={true} />
                     </span>
+                    <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className={`absolute end-4 top-1/2 -translate-y-1/2 hover:text-black dark:hover:text-white ${showPassword ? 'text-black dark:text-white' : ''}`}
+                    >
+                        <IconEye />
+                    </button>
                 </div>
                 {errors.password && (
                     <p className="text-red-500 text-sm mt-1">{errors.password}</p>
@@ -103,8 +134,9 @@ const LoginForm = () => {
             <button
                 type="submit"
                 className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"
+                disabled={loading}
             >
-                Sign in
+                {loading ? 'Signing in...' : 'Sign in'}
             </button>
         </form>
     );