diff --git a/public/images/login-bg.jpg b/public/images/login-bg.jpg
new file mode 100644
index 0000000..a63ed93
Binary files /dev/null and b/public/images/login-bg.jpg differ
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 221b87e..7a1956f 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -34,7 +34,21 @@ function LoginForm() {
 
   return (
     <div className="container relative min-h-[calc(100vh-theme(spacing.14))] flex-col items-center justify-center grid lg:max-w-none lg:grid-cols-2 lg:px-0">
-      <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
+      <div className="relative hidden h-full flex-col bg-slate-800/80 p-10 text-white lg:flex dark:border-r">
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage: "url('/images/login-bg.jpg')",
+            opacity: "0.4",
+          }}
+        />
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage:
+              "linear-gradient(to bottom, rgba(30, 41, 59, 0.2), rgba(30, 41, 59, 0.7))",
+          }}
+        />
         <div className="relative z-20 flex items-center text-lg font-medium">
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/middleware.ts b/src/middleware.ts
index 4690ba5..cb57e3f 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
 // Routes qui ne nécessitent pas d'authentification
-const publicRoutes = ["/login", "/register"];
+const publicRoutes = ["/login", "/register", "/images"];
 
 // Routes d'API qui ne nécessitent pas d'authentification
 const publicApiRoutes = ["/api/auth/login", "/api/auth/register", "/api/komga/test"];
@@ -10,8 +10,12 @@ const publicApiRoutes = ["/api/auth/login", "/api/auth/register", "/api/komga/te
 export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
-  // Vérifier si c'est une route publique
-  if (publicRoutes.includes(pathname) || publicApiRoutes.includes(pathname)) {
+  // Vérifier si c'est une route publique ou commence par /images/
+  if (
+    publicRoutes.includes(pathname) ||
+    publicApiRoutes.includes(pathname) ||
+    pathname.startsWith("/images/")
+  ) {
     return NextResponse.next();
   }
 
@@ -63,8 +67,9 @@ export const config = {
      * 1. /api/auth/* (authentication routes)
      * 2. /_next/* (Next.js internals)
      * 3. /fonts/* (inside public directory)
-     * 4. /favicon.ico, /sitemap.xml (public files)
+     * 4. /images/* (inside public directory)
+     * 5. /favicon.ico, /sitemap.xml (public files)
      */
-    "/((?!api/auth|_next/static|_next/image|fonts|favicon.ico|sitemap.xml).*)",
+    "/((?!api/auth|_next/static|_next/image|fonts|images|favicon.ico|sitemap.xml).*)",
   ],
 };