diff --git a/app/static/css/login.css b/app/static/css/login.css
index cff23df..d001a18 100644
--- a/app/static/css/login.css
+++ b/app/static/css/login.css
@@ -1,11 +1,30 @@
 body {
-    background-color: var(--auth-bg);
+    position: relative;
+    min-height: 100vh;
+    background-color: #050505;
+    overflow-x: hidden;
+    isolation: isolate;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)), url("/static/img/LoginPage.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: blur(12px) brightness(0.7) saturate(0.85);
+    transform: scale(1.08);
+    z-index: 0;
+    pointer-events: none;
 }
 #main {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
+    z-index: 1;
 }
 
 .login-container {
@@ -18,6 +37,8 @@ body {
     background-color: var(--auth-card-bg);
     box-shadow: 0 0 15px var(--auth-card-shadow);
     border-radius: 2px;
+    position: relative;
+    z-index: 1;
 }
 
 .login-container p {
@@ -50,18 +71,18 @@ body {
 }
 
 .login-logo {
-  display: block;
-  margin: 0 auto 8px;
-  max-width: 320px;
-  width: 100%;
-  height: auto;
+        display: block;
+        margin: 0 auto 8px;
+        max-width: 320px;
+        width: 100%;
+        height: auto;
 }
 
 .login-subtitle {
-  text-align: center;
-  margin-bottom: 12px;
-  color: rgba(230,238,248,0.9);
-  font-size: small;
+        text-align: center;
+        margin-bottom: 12px;
+        color: rgba(230, 238, 248, 0.9);
+        font-size: small;
 }
 
 .login-container button {
diff --git a/app/static/css/signup.css b/app/static/css/signup.css
index 60caa4f..ae4fc05 100644
--- a/app/static/css/signup.css
+++ b/app/static/css/signup.css
@@ -1,5 +1,23 @@
 body {
-    background-color: var(--auth-bg);
+    position: relative;
+    min-height: 100vh;
+    background-color: #050505;
+    overflow-x: hidden;
+    isolation: isolate;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)), url("/static/img/LoginPage.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: blur(12px) brightness(0.7) saturate(0.85);
+    transform: scale(1.08);
+    z-index: 0;
+    pointer-events: none;
 }
 
 #main {
@@ -7,6 +25,7 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
+    z-index: 1;
 }
 
 .signup-container {
@@ -19,6 +38,8 @@ body {
     background-color: var(--auth-card-bg);
     box-shadow: 0 0 15px var(--auth-card-shadow);
     border-radius: 2px;
+    position: relative;
+    z-index: 1;
 }
 
 .signup-logo {
diff --git a/app/static/img/LoginPage.png b/app/static/img/LoginPage.png
new file mode 100644
index 0000000..266078e
Binary files /dev/null and b/app/static/img/LoginPage.png differ