diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 87dd22a..7bab779 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -27,7 +27,9 @@ export function LoginPage() {
   return (
     <div className="login-wrap">
       <form className="card login-card" onSubmit={submit}>
-        <img src="/nexapg-logo.svg" alt="NexaPG" className="login-logo" />
+        <div className="login-logo-wrap" aria-hidden="true">
+          <img src="/nexapg-logo.svg" alt="NexaPG" className="login-logo" />
+        </div>
         <div className="login-eyebrow">NexaPG Monitor</div>
         <h2>Welcome back</h2>
         <p className="login-subtitle">Sign in to access monitoring and query insights.</p>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6a8f09e..40fc963 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1509,10 +1509,24 @@ td {
   animation: loginEnter 0.5s ease;
 }
 
+.login-logo-wrap {
+  margin: 2px auto 6px auto;
+  width: 190px;
+  display: grid;
+  place-items: center;
+  padding: 10px 10px 8px 10px;
+  border-radius: 16px;
+  border: 1px solid #2f6eb1;
+  background:
+    radial-gradient(circle at 50% 16%, #52cbff4f, transparent 62%),
+    linear-gradient(180deg, #163965, #122d52);
+  box-shadow: inset 0 1px 0 #8bd8ff40, 0 14px 28px #04163875;
+}
+
 .login-logo {
-  width: 110px;
-  margin: 0 auto 2px auto;
-  filter: drop-shadow(0 8px 18px #03173577);
+  width: 152px;
+  margin: 0 auto;
+  filter: drop-shadow(0 10px 22px #041c3eaa) saturate(1.08) contrast(1.04);
 }
 
 .login-eyebrow {