diff --git a/internal/router/frontend.go b/internal/router/frontend.go
index c2c968f..abe949a 100644
--- a/internal/router/frontend.go
+++ b/internal/router/frontend.go
@@ -39,7 +39,8 @@ func registerFrontendRoutes(cfg *Config) {
 	// Public routes for login and registration pages
 	e.GET("/login", func(c echo.Context) error {
 		var buf bytes.Buffer
-		err := templates.Login().Render(c.Request().Context(), &buf)
+		sessionExpired := c.QueryParam("session") == "expired"
+		err := templates.Login(sessionExpired).Render(c.Request().Context(), &buf)
 		if err != nil {
 			return err
 		}
diff --git a/templates/login.templ b/templates/login.templ
index 77fc349..62873fd 100644
--- a/templates/login.templ
+++ b/templates/login.templ
@@ -1,6 +1,6 @@
 package templates
 
-templ Login() {
+templ Login(sessionExpired bool) {
     <!DOCTYPE html>
     <html lang="en">
     <head>
@@ -29,7 +29,15 @@ templ Login() {
                     <option value="catppuccin-latte">Catppuccin Latte</option>
                 </select>
             </div>
-            
+
+            if sessionExpired {
+                <div class="mb-4 p-3 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--accent);">
+                    <p style="color: var(--text-primary);">
+                        Your session has expired. Please log in again to continue.
+                    </p>
+                </div>
+            }
+
             <form hx-post="/api/auth/login" hx-target="#result" hx-swap="innerHTML" class="card p-6 rounded-lg shadow-md border">
                 <div class="mb-4">
                     <label class="block mb-2" style="color: var(--text-secondary)">Email or Username</label>
diff --git a/templates/login_templ.go b/templates/login_templ.go
index 38ef758..bbdc088 100644
--- a/templates/login_templ.go
+++ b/templates/login_templ.go
@@ -8,7 +8,7 @@ package templates
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func Login() templ.Component {
+func Login(sessionExpired bool) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -29,7 +29,17 @@ func Login() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Login</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\"><div class=\"container mx-auto px-4 py-8 max-w-md\"><div class=\"flex justify-between items-center mb-8\"><h1 class=\"text-3xl font-bold\">Login to Bookhoard</h1><select id=\"theme-select\" class=\"px-3 py-2 border rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" onchange=\"changeTheme()\"><option value=\"tokyo-night\">Tokyo Night</option> <option value=\"dracula\">Dracula</option> <option value=\"nord\">Nord</option> <option value=\"solarized-dark\">Solarized Dark</option> <option value=\"monokai\">Monokai</option> <option value=\"one-dark-pro\">One Dark Pro</option> <option value=\"material-dark\">Material Dark</option> <option value=\"catppuccin-mocha\">Catppuccin Mocha</option> <option value=\"catppuccin-macchiato\">Catppuccin Macchiato</option> <option value=\"catppuccin-frappe\">Catppuccin Frappé</option> <option value=\"catppuccin-latte\">Catppuccin Latte</option></select></div><form hx-post=\"/api/auth/login\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"card p-6 rounded-lg shadow-md border\"><div class=\"mb-4\"><label class=\"block mb-2\" style=\"color: var(--text-secondary)\">Email or Username</label> <input type=\"text\" name=\"login\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block mb-2\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><button type=\"submit\" class=\"btn-primary w-full py-2 rounded\">Sign In</button></form><div id=\"result\" class=\"mt-4 text-center\"></div><p class=\"text-center mt-4\"><a href=\"/register\" class=\"text-blue-500 hover:underline\">Don't have an account? Sign Up</a></p></div><script>\n            function applyTheme(theme) {\n                document.body.className = `theme-${theme} min-h-screen`;\n                localStorage.setItem('theme', theme);\n            }\n            function loadTheme() {\n                const theme = localStorage.getItem('theme') || 'tokyo-night';\n                applyTheme(theme);\n            }\n            function changeTheme() {\n                const theme = document.getElementById('theme-select').value;\n                applyTheme(theme);\n                const token = localStorage.getItem('token');\n                if (token) {\n                    fetch('/api/auth/theme', {\n                        method: 'PUT',\n                        headers: {\n                            'Content-Type': 'application/json',\n                            'Authorization': 'Bearer ' + token\n                        },\n                        body: JSON.stringify({ theme })\n                    }).catch(err => console.log('Theme save failed', err));\n                }\n            }\n            document.addEventListener('DOMContentLoaded', () => {\n                loadTheme();\n                document.getElementById('theme-select').value = localStorage.getItem('theme') || 'tokyo-night';\n            });\n        </script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Login</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\"><div class=\"container mx-auto px-4 py-8 max-w-md\"><div class=\"flex justify-between items-center mb-8\"><h1 class=\"text-3xl font-bold\">Login to Bookhoard</h1><select id=\"theme-select\" class=\"px-3 py-2 border rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" onchange=\"changeTheme()\"><option value=\"tokyo-night\">Tokyo Night</option> <option value=\"dracula\">Dracula</option> <option value=\"nord\">Nord</option> <option value=\"solarized-dark\">Solarized Dark</option> <option value=\"monokai\">Monokai</option> <option value=\"one-dark-pro\">One Dark Pro</option> <option value=\"material-dark\">Material Dark</option> <option value=\"catppuccin-mocha\">Catppuccin Mocha</option> <option value=\"catppuccin-macchiato\">Catppuccin Macchiato</option> <option value=\"catppuccin-frappe\">Catppuccin Frappé</option> <option value=\"catppuccin-latte\">Catppuccin Latte</option></select></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if sessionExpired {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"mb-4 p-3 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--accent);\"><p style=\"color: var(--text-primary);\">Your session has expired. Please log in again to continue.</p></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<form hx-post=\"/api/auth/login\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"card p-6 rounded-lg shadow-md border\"><div class=\"mb-4\"><label class=\"block mb-2\" style=\"color: var(--text-secondary)\">Email or Username</label> <input type=\"text\" name=\"login\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block mb-2\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><button type=\"submit\" class=\"btn-primary w-full py-2 rounded\">Sign In</button></form><div id=\"result\" class=\"mt-4 text-center\"></div><p class=\"text-center mt-4\"><a href=\"/register\" class=\"text-blue-500 hover:underline\">Don't have an account? Sign Up</a></p></div><script>\n            function applyTheme(theme) {\n                document.body.className = `theme-${theme} min-h-screen`;\n                localStorage.setItem('theme', theme);\n            }\n            function loadTheme() {\n                const theme = localStorage.getItem('theme') || 'tokyo-night';\n                applyTheme(theme);\n            }\n            function changeTheme() {\n                const theme = document.getElementById('theme-select').value;\n                applyTheme(theme);\n                const token = localStorage.getItem('token');\n                if (token) {\n                    fetch('/api/auth/theme', {\n                        method: 'PUT',\n                        headers: {\n                            'Content-Type': 'application/json',\n                            'Authorization': 'Bearer ' + token\n                        },\n                        body: JSON.stringify({ theme })\n                    }).catch(err => console.log('Theme save failed', err));\n                }\n            }\n            document.addEventListener('DOMContentLoaded', () => {\n                loadTheme();\n                document.getElementById('theme-select').value = localStorage.getItem('theme') || 'tokyo-night';\n            });\n        </script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
