diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx
index 3e14e2c..b9a5756 100644
--- a/ui/src/pages/login.tsx
+++ b/ui/src/pages/login.tsx
@@ -92,8 +92,7 @@ export function LoginPage() {
       <div
         ref={cardRef}
         className={twMerge(
-          "w-full max-w-lg rounded-2xl",
-          "shadow-2xl shadow-black/20 dark:shadow-black/40",
+          "w-full max-w-lg rounded-2xl relative",
           "transition-transform duration-200 ease-out will-change-transform"
         )}
         style={{ transform }}
@@ -101,7 +100,10 @@ export function LoginPage() {
         onMouseLeave={handleMouseLeave}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="relative w-full h-full p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10">
+        {/* Glow effect behind the card */}
+        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-secondary/10 blur-xl -z-10"></div>
+
+        <div className="relative w-full h-full p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border shadow-2xl shadow-black/20 dark:shadow-black/40 z-10">
           <div className="mb-6 flex items-center justify-between">
             <a
               href="https://www.xtablo.com"
diff --git a/ui/src/pages/signup.tsx b/ui/src/pages/signup.tsx
index 20d5ed4..f196fe0 100644
--- a/ui/src/pages/signup.tsx
+++ b/ui/src/pages/signup.tsx
@@ -138,8 +138,7 @@ export function SignUpPage() {
       <div
         ref={cardRef}
         className={twMerge(
-          "w-full max-w-xl rounded-2xl",
-          "shadow-2xl shadow-black/20 dark:shadow-black/40",
+          "w-full max-w-xl rounded-2xl relative",
           "transition-transform duration-200 ease-out will-change-transform"
         )}
         style={{ transform }}
@@ -147,7 +146,10 @@ export function SignUpPage() {
         onMouseLeave={handleMouseLeave}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="relative w-full h-full p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10">
+        {/* Glow effect behind the card */}
+        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-secondary/10 blur-xl -z-10"></div>
+
+        <div className="relative w-full h-full p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border shadow-2xl shadow-black/20 dark:shadow-black/40 z-10">
           <div className="mb-4 flex items-center justify-between">
             <a
               href="https://www.xtablo.com"