diff --git a/studio/frontend/src/features/auth/change-password-page.tsx b/studio/frontend/src/features/auth/change-password-page.tsx
index 96ee8dd1a8..30f840faca 100644
--- a/studio/frontend/src/features/auth/change-password-page.tsx
+++ b/studio/frontend/src/features/auth/change-password-page.tsx
@@ -10,11 +10,11 @@ export function ChangePasswordPage() {
     <div className="relative flex min-h-[calc(100dvh-var(--studio-titlebar-height,0px))] items-center justify-center overflow-hidden bg-background px-4 py-8 sm:px-6 sm:py-10 md:px-10">
       <LightRays
         count={6}
-        color="rgba(34, 197, 94, 0.25)"
+        color="rgba(34, 197, 94, 0.1)"
         blur={34}
         speed={15}
         length="70vh"
-        style={{ opacity: 0.4 }}
+        className="opacity-35 dark:opacity-15"
       />
       <Card className="relative z-10 w-full max-w-sm px-5 py-6 shadow-border ring-1 ring-border sm:px-6 sm:py-8">
         <AuthForm mode="change-password" />
diff --git a/studio/frontend/src/features/auth/login-page.tsx b/studio/frontend/src/features/auth/login-page.tsx
index eb33a6a71b..638df7d362 100644
--- a/studio/frontend/src/features/auth/login-page.tsx
+++ b/studio/frontend/src/features/auth/login-page.tsx
@@ -10,11 +10,11 @@ export function LoginPage() {
     <div className="relative flex min-h-[calc(100dvh-var(--studio-titlebar-height,0px))] items-center justify-center overflow-hidden bg-background px-4 py-8 sm:px-6 sm:py-10 md:px-10">
       <LightRays
         count={6}
-        color="rgba(34, 197, 94, 0.25)"
+        color="rgba(34, 197, 94, 0.1)"
         blur={34}
         speed={15}
         length="70vh"
-        style={{ opacity: 0.4 }}
+        className="opacity-35 dark:opacity-15"
       />
       <Card className="relative z-10 w-full max-w-sm px-5 py-6 shadow-border ring-0 sm:px-6 sm:py-8">
         <AuthForm mode="login" />