diff --git a/frontend/src/components/partials/LoginForm.tsx b/frontend/src/components/partials/LoginForm.tsx
index 313f3d5..710ee19 100644
--- a/frontend/src/components/partials/LoginForm.tsx
+++ b/frontend/src/components/partials/LoginForm.tsx
@@ -1,76 +1,97 @@
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { CircleAlert } from "lucide-react";
 
 import { login } from "@/services/auth";
 
 
 export function LoginForm({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<"div">) {
 
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
 
-    const handelSubmit = async (e) => {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+
+    const handelLogin = async (e) => {
         e.preventDefault();
         try {
+            setLoading(true)
             await login(username, password);
-            window.location.href = "/";
-        } catch (error) {
-            alert("Login failed!");
+
+            // Get the stored redirect path from localStorage
+            const redirectPath = localStorage.getItem("redirect_after_login") || "/";
+            localStorage.removeItem("redirect_after_login"); // clear the redirect path after use
+
+            // Redirect to the stored path
+            navigate(redirectPath, { replace: true });
+        } catch (err) {
+            setError("Invalid credentials. Please try again.");
+            console.log(err)
+        } finally {
+            setLoading(false);
         }
     };
 
-  return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card className="overflow-hidden border-2 border-fuchsia-800">
-        <CardContent className="grid p-0 md:grid-cols-2">
-          <form onSubmit={handelSubmit} className="p-6 md:p-8">
-            <div className="flex flex-col gap-6">
-              <div className="flex flex-col items-center text-center">
-                <h1 className="text-2xl font-bold">Welcome back</h1>
-                <p className="text-balance text-muted-foreground">
-                  Login to your Gallery Archive account
-                </p>
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="username">Username</Label>
-                <Input
-                  id="username"
-                  type="text"
-                  required
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                />
-              </div>
-              <div className="grid gap-2">
-                <div className="flex items-center">
-                  <Label htmlFor="password">Password</Label>
-                  <a
-                    href="#"
-                    className="ml-auto text-sm underline-offset-2 hover:underline"
-                  >
-                    Forgot your password?
-                  </a>
-                </div>
-                <Input
-                  id="password"
-                  type="password"
-                  required
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                />
-              </div>
-              <Button type="submit" className="w-full bg-primary">
-                Login
-              </Button>
-              {/* <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+    return (
+        <div className={cn("flex flex-col gap-6", className)} {...props}>
+            <Card className="overflow-hidden border-2 border-fuchsia-800">
+                <CardContent className="grid p-0 md:grid-cols-2">
+                    <form onSubmit={handelLogin} className="p-6 md:p-8">
+                        <div className="flex flex-col gap-6">
+                            <div className="flex flex-col items-center text-center">
+                                <h1 className="text-2xl font-bold">Welcome back</h1>
+                                <p className="text-balance text-muted-foreground">
+                                    Login to your {__SITE_NAME__} account
+                                </p>
+                            </div>
+                            {error && <div className="flex flex-row border-2 border-red-600 p-6 bg-red-400 bg-opacity-40 rounded-md">
+                                <CircleAlert />
+                                <p className="ps-4">{error}</p>
+                            </div>}
+                            <div className="grid gap-2">
+                                <Label htmlFor="username">Username</Label>
+                                <Input
+                                    id="username"
+                                    type="text"
+                                    required
+                                    value={username}
+                                    onChange={(e) => setUsername(e.target.value)}
+                                />
+                            </div>
+                            <div className="grid gap-2">
+                                <div className="flex items-center">
+                                    <Label htmlFor="password">Password</Label>
+                                    <a
+                                        href="#"
+                                        className="ml-auto text-sm underline-offset-2 hover:underline"
+                                    >
+                                        Forgot your password?
+                                    </a>
+                                </div>
+                                <Input
+                                    id="password"
+                                    type="password"
+                                    required
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                />
+                            </div>
+                            <Button type="submit" className="w-full bg-primary">
+                                {loading ? "Logging in..." : "Login"}
+                            </Button>
+                            {/* <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
                 <span className="relative z-10 bg-background px-2 text-muted-foreground">
                   Or continue with
                 </span>
@@ -104,27 +125,27 @@ export function LoginForm({
                   <span className="sr-only">Login with Meta</span>
                 </Button>
               </div> */}
-              <div className="text-center text-sm">
-                Don&apos;t have an account?{" "}
-                <a href="/user/register" className="underline underline-offset-4">
-                  Sign up
-                </a>
-              </div>
+                            <div className="text-center text-sm">
+                                Don&apos;t have an account?{" "}
+                                <a href="/user/register" className="underline underline-offset-4">
+                                    Sign up
+                                </a>
+                            </div>
+                        </div>
+                    </form>
+                    <div className="relative hidden bg-muted md:block bg-zinc-300 dark:bg-indigo-950">
+                        <img
+                            src="/images/wave.gif"
+                            alt="Image"
+                            className="absolute p-12 inset-0 h-full w-full object-cover dark:brightness-[0.6]"
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+            <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
+                By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+                and <a href="#">Privacy Policy</a>.
             </div>
-          </form>
-          <div className="relative hidden bg-muted md:block bg-zinc-300 dark:bg-indigo-950">
-            <img
-              src="/images/wave.gif"
-              alt="Image"
-              className="absolute p-12 inset-0 h-full w-full object-cover dark:brightness-[0.6]"
-            />
-          </div>
-        </CardContent>
-      </Card>
-      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
-        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
-        and <a href="#">Privacy Policy</a>.
-      </div>
-    </div>
-  )
+        </div>
+    )
 }