diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
index b5bfd92..e661160 100644
--- a/app/auth/login/page.tsx
+++ b/app/auth/login/page.tsx
@@ -9,29 +9,44 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
 
 export default function LoginPage() {
   const [username, setUsername] = useState(""); 
   const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
   async function handleLogin(e: React.FormEvent) {
     e.preventDefault();
-    setError("");
+    setIsLoading(true);
 
-    const res = await fetchData(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ username, password }),
-    });
-  
-    if (res.token) {
-      document.cookie = `Authorization=${res.token}; path=/; Secure; SameSite=Strict; max-age=604800`;
-      router.push("/dashboard");
-    } else {
-      const data = await res.json();
-      setError(data.error || "Invalid credentials");
+    try {
+      const res = await fetchData(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+    
+      if (res.token) {
+        document.cookie = `Authorization=${res.token}; path=/; Secure; SameSite=Strict; max-age=604800`;
+        router.push("/dashboard");
+      } else {
+        const data = await res.json();
+        const errorMessage = data.error || "Invalid credentials";
+        
+        // Show toast notification for failed login
+        toast.error("Login Failed", {
+          description: errorMessage,
+        });
+      }
+    } catch (error) {
+      // Handle network errors or other exceptions
+      toast.error("Login Error", {
+        description: "An error occurred while trying to log in. Please try again.",
+      });
+    } finally {
+      setIsLoading(false);
     }
   }
 
@@ -43,12 +58,10 @@ export default function LoginPage() {
           <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Please sign in to your account</p>
         </div>
 
-        {error && <p className="text-red-500 text-sm text-center">{error}</p>} {/* ✅ Display login errors */}
-
         <form className="mt-8 space-y-6" onSubmit={handleLogin}>
           <div className="space-y-4">
             <div>
-              <Label htmlFor="username">Username</Label> {/* ✅ Changed Email to Username */}
+              <Label htmlFor="username">Username</Label>
               <Input
                 id="username"
                 name="username"
@@ -75,9 +88,8 @@ export default function LoginPage() {
             </div>
           </div>
 
-
-          <Button type="submit" className="w-full">
-            Sign in
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? "Signing in..." : "Sign in"}
           </Button>
         </form>