diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 547da3c..5202b58 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -229,6 +229,21 @@ html.lenis body {
     inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
+/* Glassmorphism card for the auth screens: more transparent than the landing
+   panel so the clouds blur through, a bright glassy edge highlight and a soft
+   layered shadow — kept on a slate tint so the white form text stays legible
+   over the bright sky. (See hype4 glassmorphism generator for the language.) */
+.auth-glass {
+  background: rgba(17, 25, 45, 0.32);
+  backdrop-filter: blur(22px) saturate(170%);
+  -webkit-backdrop-filter: blur(22px) saturate(170%);
+  border: 1px solid rgba(255, 255, 255, 0.30);
+  box-shadow:
+    0 12px 40px rgba(2, 6, 23, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.40),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .abrban-float,
   .abrban-scroll-hint,
diff --git a/frontend/src/components/auth/AuthShell.tsx b/frontend/src/components/auth/AuthShell.tsx
index 8f16a34..5070ea8 100644
--- a/frontend/src/components/auth/AuthShell.tsx
+++ b/frontend/src/components/auth/AuthShell.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
+import { ArrowLeft } from 'lucide-react';
 import { Link } from '@/i18n/Link';
 import { useT } from '@/i18n/I18nProvider';
 import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
@@ -58,15 +59,24 @@ export function AuthShell({
             <p className="abrban-ink mt-2 text-white/85">{subtitle}</p>
           </div>
 
-          <div className="abrban-panel rounded-[1.75rem] p-6 sm:p-8">{children}</div>
+          <div className="auth-glass rounded-[1.75rem] p-6 sm:p-8">{children}</div>
 
           {altPrompt && altHref && altLabel && (
-            <p className="abrban-ink mt-6 text-center text-sm text-white/90">
-              {altPrompt}{' '}
-              <Link href={altHref} className="font-bold text-primary-200 underline-offset-4 hover:text-white hover:underline">
+            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-2 gap-y-2">
+              <span
+                className="text-base font-semibold text-slate-900"
+                style={{ textShadow: '0 1px 3px rgba(255,255,255,0.7)' }}
+              >
+                {altPrompt}
+              </span>
+              <Link
+                href={altHref}
+                className="inline-flex items-center gap-1.5 rounded-xl border border-white/45 bg-slate-900/45 px-4 py-2 text-sm font-bold text-white shadow-lg shadow-black/25 backdrop-blur-md transition hover:border-white/70 hover:bg-slate-900/65"
+              >
                 {altLabel}
+                <ArrowLeft className="h-4 w-4 ltr:rotate-180" />
               </Link>
-            </p>
+            </div>
           )}
         </div>
       </main>