diff --git a/packages/web/src/app/(auth)/layout.tsx b/packages/web/src/app/(auth)/layout.tsx
index 1653da6..284ef69 100644
--- a/packages/web/src/app/(auth)/layout.tsx
+++ b/packages/web/src/app/(auth)/layout.tsx
@@ -13,34 +13,32 @@ const AuthLayout = ({ children }: PropsWithChildren) => {
     }
   }, [connect, isConnected])
 
-  if (!isConnected) {
-    return (
-      <section className="relative flex min-h-screen flex-col items-center justify-center">
-        <div className="pointer-events-none absolute h-full w-full overflow-hidden">
-          <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
-        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+  const Shell = ({ children: inner }: PropsWithChildren) => (
+    <section className="relative flex min-h-screen flex-col items-center justify-center gap-6 px-4 text-center">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full" />
+        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45" />
       </div>
 
-        <BrandHeading className="mb-6" size="lg" />
-        <Loader className="h-23" />
-        <h2 className="mt-2 text-center text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
-          Loading...
-        </h2>
-      </section>
+      <BrandHeading size="lg" />
+      {inner}
+    </section>
+  )
+
+  if (!isConnected) {
+    return (
+      <Shell>
+        <div className="flex flex-col items-center gap-3">
+          <Loader className="h-23" />
+          <h2 className="text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
+            Loading...
+          </h2>
+        </div>
+      </Shell>
     )
   }
 
-  return (
-    <section className="relative flex min-h-screen flex-col items-center justify-center">
-      <div className="pointer-events-none absolute h-full w-full overflow-hidden">
-        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
-        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
-      </div>
-
-      <BrandHeading className="mb-6" size="lg" />
-      {children}
-    </section>
-  )
+  return <Shell>{children}</Shell>
 }
 
 export default AuthLayout
diff --git a/packages/web/src/components/BrandHeading.tsx b/packages/web/src/components/BrandHeading.tsx
index f545fb0..de6c295 100644
--- a/packages/web/src/components/BrandHeading.tsx
+++ b/packages/web/src/components/BrandHeading.tsx
@@ -14,13 +14,13 @@ const BrandHeading = ({ className, size = "lg" }: Props) => {
 
   const sizeClass =
     size === "lg"
-      ? "text-4xl md:text-5xl"
+      ? "text-4xl md:text-5xl lg:text-6xl"
       : "text-2xl md:text-3xl"
 
   return (
     <div
       className={clsx(
-        "text-center font-black tracking-tight text-[#f7931e] drop-shadow-lg",
+        "text-center font-black tracking-tight text-[#f7931e] drop-shadow-lg leading-tight",
         sizeClass,
         className,
       )}