diff --git a/app/components/auth/auth-brand-panel.tsx b/app/components/auth/auth-brand-panel.tsx
new file mode 100644
index 0000000..5ca808a
--- /dev/null
+++ b/app/components/auth/auth-brand-panel.tsx
@@ -0,0 +1,36 @@
+import { LogoMark } from '~/components/logo-mark';
+import { ArIllustration } from '~/components/auth/ar-illustration';
+
+export function AuthBrandPanel() {
+    return (
+        <aside className="relative hidden overflow-hidden border-r border-neutral-900 bg-[#0A0A0A] p-12 lg:flex lg:flex-col lg:justify-between">
+            <div className="pointer-events-none absolute top-1/3 left-1/2 h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500/10 blur-[140px]" />
+
+            {/* Real-world floor grid */}
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2 [perspective:600px]">
+                <div
+                    className="absolute inset-0 origin-bottom [transform:rotateX(60deg)] opacity-30"
+                    style={{
+                        backgroundImage:
+                            'linear-gradient(to right, rgba(249,115,22,0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(249,115,22,0.25) 1px, transparent 1px)',
+                        backgroundSize: '48px 48px',
+                        maskImage: 'linear-gradient(to top, black 10%, transparent 90%)',
+                        WebkitMaskImage: 'linear-gradient(to top, black 10%, transparent 90%)',
+                    }}
+                />
+            </div>
+
+            <div className="relative z-10">
+                <LogoMark className="h-10 w-10 text-2xl" />
+            </div>
+
+            <div className="relative z-10 flex flex-1 items-center justify-center py-8">
+                <ArIllustration />
+            </div>
+
+            <p className="relative z-10 text-2xl font-semibold tracking-tight text-white">
+                Step into <span className="text-orange-500">augmented reality.</span>
+            </p>
+        </aside>
+    );
+}