diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
index 4ee3bf24..7ba93c6a 100644
--- a/src/khoj/interface/web/assets/khoj.css
+++ b/src/khoj/interface/web/assets/khoj.css
@@ -9,6 +9,7 @@
     --primary-focus: rgba(255, 179, 0, 0.125);
     --primary-inverse: rgba(0, 0, 0, 0.75);
     --background-color: #f5f4f3;
+    --frosted-background-color: rgba(245, 244, 243, 0.75);
     --main-text-color: #475569;
     --summer-sun: #fcc50b;
     --water: #44b9da;
@@ -26,6 +27,7 @@
         --primary-focus: rgba(255, 179, 0, 0.25);
         --primary-inverse: rgba(0, 0, 0, 0.75);
         --background-color: #f5f4f3;
+        --frosted-background-color: rgba(245, 244, 243, 0.75);
         --main-text-color: #475569;
         --summer-sun: #fcc50b;
         --water: #44b9da;
@@ -42,6 +44,7 @@
     --primary-focus: rgba(255, 179, 0, 0.25);
     --primary-inverse: rgba(0, 0, 0, 0.75);
     --background-color: #f5f4f3;
+    --frosted-background-color: rgba(245, 244, 243, 0.75);
     --main-text-color: #475569;
     --summer-sun: #fcc50b;
     --water: #44b9da;
diff --git a/src/khoj/interface/web/assets/samples/desktop-plain-chat-sample.png b/src/khoj/interface/web/assets/samples/desktop-plain-chat-sample.png
new file mode 100644
index 00000000..2520014f
Binary files /dev/null and b/src/khoj/interface/web/assets/samples/desktop-plain-chat-sample.png differ
diff --git a/src/khoj/interface/web/assets/samples/phone-plain-chat-sample.png b/src/khoj/interface/web/assets/samples/phone-plain-chat-sample.png
new file mode 100644
index 00000000..84b1b9d1
Binary files /dev/null and b/src/khoj/interface/web/assets/samples/phone-plain-chat-sample.png differ
diff --git a/src/khoj/interface/web/login.html b/src/khoj/interface/web/login.html
index c6b16033..bc8304c0 100644
--- a/src/khoj/interface/web/login.html
+++ b/src/khoj/interface/web/login.html
@@ -65,13 +65,24 @@
             padding: 0px;
             margin: 0px;
             height: 100%;
-            background: var(--background-color);
+            background: url('/static/assets/samples/desktop-plain-chat-sample.png') no-repeat center center fixed;
+            background-size: contain;
             color: var(--main-text-color);
             font-family: var(--font-family);
             font-size: 20px;
             font-weight: 300;
             line-height: 1.5em;
         }
+        body::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--frosted-background-color);
+            backdrop-filter: blur(10px);
+        }
         body > * {
             padding: 10px;
             margin: 10px;
@@ -100,9 +111,9 @@
             grid-template-rows: 1fr auto auto 1fr;
             gap: 32px;
             min-height: 300px;
-            background: var(--background-color);
             margin-left: 25%;
             margin-right: 25%;
+            z-index: 1;
         }
 
         div.g_id_signin {
@@ -118,9 +129,14 @@
         }
 
         @media only screen and (max-width: 700px) {
+            body{
+                background: url('/static/assets/samples/phone-plain-chat-sample.png') no-repeat center center fixed;
+                background-size: contain;
+            }
             div#login-modal {
                 margin-left: 10%;
                 margin-right: 10%;
+                z-index: 1;
             }
         }