diff --git a/apps/web/.env.development.example b/apps/web/.env.development.example
index 56c7bf0..a1c9eb0 100644
--- a/apps/web/.env.development.example
+++ b/apps/web/.env.development.example
@@ -24,6 +24,7 @@ RESEND_API_KEY=
 
 # Formbase
 ALLOW_SIGNIN_SIGNUP=true
+SKIP_EMAIL_VERIFICATION=true
 
 # Analytics (optional)
 UMAMI_TRACKING_ID=
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/src/app/(auth)/signup/signup.tsx b/apps/web/src/app/(auth)/signup/signup.tsx
index b282ea4..9a84c9f 100644
--- a/apps/web/src/app/(auth)/signup/signup.tsx
+++ b/apps/web/src/app/(auth)/signup/signup.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { type FormEvent, useState } from 'react';
+import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
+import type { FormEvent } from 'react';
+
 import { IconBrandGithub, IconBrandGoogleFilled } from '@tabler/icons-react';
 
 import { signUp } from '@formbase/auth/client';
-
-import { Logo } from '../_components/logo';
 import { Button } from '@formbase/ui/primitives/button';
 import { Input } from '@formbase/ui/primitives/input';
 import { Label } from '@formbase/ui/primitives/label';
@@ -18,6 +18,8 @@ import { LoadingButton } from '~/components/loading-button';
 import { PasswordInput } from '~/components/password-input';
 import { useSocialAuth } from '~/lib/hooks/use-social-auth';
 
+import { Logo } from '../_components/logo';
+
 export function Signup() {
   const router = useRouter();
   const [formError, setFormError] = useState<string | null>(null);
@@ -50,7 +52,7 @@ export function Signup() {
       });
 
       if (error) {
-        setFormError(error.message);
+        setFormError(error.message ?? 'An error occurred');
         return;
       }
 
@@ -180,6 +182,7 @@ export function Signup() {
           ) : null}
 
           <LoadingButton
+            type="submit"
             className="mt-4 w-full py-2 font-medium"
             loading={isSubmitting}
           >
diff --git a/apps/web/src/app/(auth)/verify-email/page.tsx b/apps/web/src/app/(auth)/verify-email/page.tsx
index 43edb5a..43ae86c 100644
--- a/apps/web/src/app/(auth)/verify-email/page.tsx
+++ b/apps/web/src/app/(auth)/verify-email/page.tsx
@@ -1,9 +1,9 @@
 import { redirect } from 'next/navigation';
 
 import { getSession } from '@formbase/auth/server';
+import { env } from '@formbase/env';
 
 import { Logo } from '../_components/logo';
-
 import { VerifyEmail } from './verify-code';
 
 export const metadata = {
@@ -25,7 +25,7 @@ export default async function VerifyEmailPage({
     redirect('/login');
   }
 
-  if (session?.user.emailVerified) {
+  if (session?.user.emailVerified || env.SKIP_EMAIL_VERIFICATION) {
     redirect('/dashboard');
   }
 
@@ -50,7 +50,7 @@ export default async function VerifyEmailPage({
             <>Use the verification link from your email to continue.</>
           )}
         </p>
-        <VerifyEmail email={session?.user.email} />
+        <VerifyEmail email={session?.user.email ?? null} />
       </div>
     </div>
   );
diff --git a/apps/web/src/app/(landing)/_components/header.tsx b/apps/web/src/app/(landing)/_components/header.tsx
index 982002d..56a1281 100644
--- a/apps/web/src/app/(landing)/_components/header.tsx
+++ b/apps/web/src/app/(landing)/_components/header.tsx
@@ -1,10 +1,9 @@
 import Link from 'next/link';
 
-import { FunctionSquare } from 'lucide-react';
-
 import { type User } from '@formbase/auth';
 import { env } from '@formbase/env';
 
+import { Logo } from '../../(auth)/_components/logo';
 import { MobileNavigation } from './mobile-navigation';
 
 const routes = [{ name: 'Docs', href: 'https://docs.formbase.dev' }] as const;
@@ -18,19 +17,19 @@ export const Header = ({ user }: LandingHeaderProps) => {
 
   return (
     <header>
-      <nav className="z-20 w-full overflow-hidden border-b border-(--ui-light-border-color) bg-white/80 backdrop-blur-sm dark:border-(--ui-dark-border-color) dark:bg-gray-950/75 dark:shadow-md dark:shadow-gray-950/10">
+      <nav className="z-20 w-full border-b border-(--ui-light-border-color) bg-white/80 backdrop-blur-sm dark:border-(--ui-dark-border-color) dark:bg-gray-950/75 dark:shadow-md dark:shadow-gray-950/10">
         <div className="m-auto max-w-5xl px-6 2xl:px-0">
           <div className="flex justify-between py-2 sm:py-4">
             <div className="flex w-full items-center justify-between lg:w-auto">
               <Link
-                className="text flex items-center justify-center gap-2 font-medium"
+                className="text flex items-center justify-center gap-2 font-semibold"
                 href={isLoggedIn ? '/dashboard' : '/'}
               >
-                <FunctionSquare className="mr-2 h-5 w-5" /> Formbase
+                <Logo className="h-6 w-6" /> Formbase
               </Link>
             </div>
             <div className="flex">
-              <div className="mdw-fit hidden h-0 w-full flex-wrap items-center justify-end space-y-8 md:flex md:h-fit md:flex-nowrap md:space-y-0">
+              <div className="hidden w-full flex-wrap items-center justify-end space-y-8 md:flex md:w-fit md:h-fit md:flex-nowrap md:space-y-0">
                 <div className="mt-6 text-gray-600 dark:text-gray-300 md:-ml-4 md:mt-0 lg:pr-4">
                   <ul className="space-y-6 text-base tracking-wide md:flex md:space-y-0 md:text-sm">
                     {routes.map(({ name, href }) => (
diff --git a/apps/web/src/app/(landing)/_components/mobile-navigation.tsx b/apps/web/src/app/(landing)/_components/mobile-navigation.tsx
index 62011e2..b1eb169 100644
--- a/apps/web/src/app/(landing)/_components/mobile-navigation.tsx
+++ b/apps/web/src/app/(landing)/_components/mobile-navigation.tsx
@@ -3,10 +3,9 @@
 import { useState } from 'react';
 import Link from 'next/link';
 
-import { FunctionSquare } from 'lucide-react';
-
 import { Sheet, SheetContent } from '@formbase/ui/primitives/sheet';
 
+import { Logo } from '../../(auth)/_components/logo';
 import { HamburgerMenu } from './mobile-hamburger';
 import { ThemeToggle } from './theme-toggle';
 
@@ -36,9 +35,9 @@ const MobileNavigationSheet = ({
         <Link
           href="/"
           onClick={handleMenuItemClick}
-          className="flex items-center font-medium"
+          className="flex items-center font-semibold"
         >
-          <FunctionSquare className="mr-2 h-5 w-5" /> Formbase
+          <Logo className="h-6 w-6" /> Formbase
         </Link>
 
         <div className="mt-8 flex w-full flex-col items-start gap-y-4">
diff --git a/apps/web/src/app/(main)/_components/header.tsx b/apps/web/src/app/(main)/_components/header.tsx
index edc48c7..b998e14 100644
--- a/apps/web/src/app/(main)/_components/header.tsx
+++ b/apps/web/src/app/(main)/_components/header.tsx
@@ -1,9 +1,8 @@
 import Link from 'next/link';
 
-import { FunctionSquare } from 'lucide-react';
-
 import { type User } from '@formbase/auth';
 
+import { Logo } from '../../(auth)/_components/logo';
 import { UserDropdown } from './user-dropdown';
 
 const routes = [{ name: 'Dashboard', href: '/dashboard' }] as const;
@@ -13,10 +12,10 @@ export const Header = ({ user }: { user: User }) => {
     <header className="top-0 border-b py-2">
       <div className="container flex items-center gap-2 px-2 py-2 lg:px-4">
         <Link
-          className="text flex items-center justify-center font-medium"
+          className="text flex items-center justify-center font-semibold"
           href={user.id ? '/dashboard' : '/'}
         >
-          <FunctionSquare className="mr-2 h-5 w-5" /> Formbase
+          <Logo className="h-6 w-6" /> Formbase
         </Link>
 
         <nav className="ml-8 hidden gap-4 sm:gap-6 md:flex">
diff --git a/apps/web/src/app/(main)/_components/user-dropdown.tsx b/apps/web/src/app/(main)/_components/user-dropdown.tsx
index 73b12d5..45e3c94 100644
--- a/apps/web/src/app/(main)/_components/user-dropdown.tsx
+++ b/apps/web/src/app/(main)/_components/user-dropdown.tsx
@@ -24,7 +24,6 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger,
 } from '@formbase/ui/primitives/alert-dialog';
 import { Button } from '@formbase/ui/primitives/button';
 import {
@@ -49,6 +48,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
   const user = session?.user;
   const { setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const [signoutDialogOpen, setSignoutDialogOpen] = useState(false);
 
   useEffect(() => {
     setMounted(true);
@@ -59,105 +59,129 @@ export const UserDropdown = ({ className }: { className?: string }) => {
   }
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          className={`h-auto p-0 hover:bg-transparent ${className ?? ''}`}
-        >
-          <UserAvatar src={user.image ?? null} seed={user.email ?? user.id} />
-          <ChevronDownIcon
-            aria-hidden="true"
-            className="opacity-60"
-            size={16}
-          />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-48">
-        <DropdownMenuGroup>
-          <DropdownMenuLabel className="flex min-w-0 flex-col">
-            <span className="truncate text-sm font-medium text-foreground">
-              {user.name ?? 'User'}
-            </span>
-            <span className="truncate text-xs font-normal text-muted-foreground">
-              {user.email}
-            </span>
-          </DropdownMenuLabel>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem className="cursor-pointer" asChild>
-            <Link href="/dashboard">
-              <LayoutDashboardIcon
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className={`h-auto p-0 hover:bg-transparent ${className ?? ''}`}
+          >
+            <UserAvatar src={user.image ?? null} seed={user.email ?? user.id} />
+            <ChevronDownIcon
+              aria-hidden="true"
+              className="opacity-60"
+              size={16}
+            />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel className="flex min-w-0 flex-col">
+              <span className="truncate text-sm font-medium text-foreground">
+                {user.name ?? 'User'}
+              </span>
+              <span className="truncate text-xs font-normal text-muted-foreground">
+                {user.email}
+              </span>
+            </DropdownMenuLabel>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem className="cursor-pointer" asChild>
+              <Link href="/dashboard">
+                <LayoutDashboardIcon
+                  aria-hidden="true"
+                  className="opacity-60"
+                  size={16}
+                />
+                <span>Dashboard</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer" asChild>
+              <Link href="/dashboard/settings">
+                <SettingsIcon
+                  aria-hidden="true"
+                  className="opacity-60"
+                  size={16}
+                />
+                <span>Settings</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer" asChild>
+              <Link href="/onboarding">
+                <BookOpenIcon
+                  aria-hidden="true"
+                  className="opacity-60"
+                  size={16}
+                />
+                <span>Onboarding</span>
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger className="cursor-pointer">
+              <PaletteIcon
                 aria-hidden="true"
                 className="opacity-60"
                 size={16}
               />
-              <span>Dashboard</span>
-            </Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem className="cursor-pointer" asChild>
-            <Link href="/dashboard/settings">
-              <SettingsIcon
-                aria-hidden="true"
-                className="opacity-60"
-                size={16}
-              />
-              <span>Settings</span>
-            </Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem className="cursor-pointer" asChild>
-            <Link href="/onboarding">
-              <BookOpenIcon
-                aria-hidden="true"
-                className="opacity-60"
-                size={16}
-              />
-              <span>Onboarding</span>
-            </Link>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger className="cursor-pointer">
-            <PaletteIcon aria-hidden="true" className="opacity-60" size={16} />
-            <span>Theme</span>
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent>
-              <DropdownMenuItem
-                onClick={() => {
-                  setTheme('light');
-                }}
-              >
-                Light
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => {
-                  setTheme('dark');
-                }}
-              >
-                Dark
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => {
-                  setTheme('system');
-                }}
-              >
-                System
-              </DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-        <DropdownMenuSeparator />
-        <SignoutConfirmation />
-      </DropdownMenuContent>
-    </DropdownMenu>
+              <span>Theme</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem
+                  onClick={() => {
+                    setTheme('light');
+                  }}
+                >
+                  Light
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => {
+                    setTheme('dark');
+                  }}
+                >
+                  Dark
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => {
+                    setTheme('system');
+                  }}
+                >
+                  System
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <SignoutMenuItem onClick={() => setSignoutDialogOpen(true)} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <SignoutDialog
+        open={signoutDialogOpen}
+        onOpenChange={setSignoutDialogOpen}
+      />
+    </>
+  );
+};
+
+const SignoutMenuItem = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <DropdownMenuItem className="cursor-pointer" onClick={onClick}>
+      <LogOutIcon aria-hidden="true" className="opacity-60" size={16} />
+      <span>Sign out</span>
+    </DropdownMenuItem>
   );
 };
 
-const SignoutConfirmation = () => {
-  const [open, setOpen] = useState(false);
+const SignoutDialog = ({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSignout = async () => {
@@ -178,22 +202,13 @@ const SignoutConfirmation = () => {
         });
       }
     } finally {
-      setOpen(false);
+      onOpenChange(false);
       setIsLoading(false);
     }
   };
 
   return (
-    <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onSelect={(e) => e.preventDefault()}
-        >
-          <LogOutIcon aria-hidden="true" className="opacity-60" size={16} />
-          <span>Sign out</span>
-        </DropdownMenuItem>
-      </AlertDialogTrigger>
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent className="max-w-xs">
         <AlertDialogHeader>
           <AlertDialogTitle className="text-center">
diff --git a/apps/web/src/app/(main)/layout.tsx b/apps/web/src/app/(main)/layout.tsx
index e4a2257..230ea69 100644
--- a/apps/web/src/app/(main)/layout.tsx
+++ b/apps/web/src/app/(main)/layout.tsx
@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import { redirect } from 'next/navigation';
 
 import { getSession } from '@formbase/auth/server';
+import { env } from '@formbase/env';
 
 import { Header } from './_components/header';
 
@@ -13,7 +14,7 @@ const MainLayout = async ({ children }: { children: ReactNode }) => {
     redirect('/login');
   }
 
-  if (!user.emailVerified) {
+  if (!user.emailVerified && !env.SKIP_EMAIL_VERIFICATION) {
     redirect('/verify-email');
   }
 
diff --git a/packages/auth/index.ts b/packages/auth/index.ts
index c138e40..e63bbc7 100644
--- a/packages/auth/index.ts
+++ b/packages/auth/index.ts
@@ -50,9 +50,10 @@ export const auth = betterAuth({
     },
   },
   emailVerification: {
-    sendOnSignUp: true,
+    sendOnSignUp: !env.SKIP_EMAIL_VERIFICATION,
     autoSignInAfterVerification: true,
     sendVerificationEmail: async ({ user, token }) => {
+      if (env.SKIP_EMAIL_VERIFICATION) return;
       const verifyUrl = `${env.NEXT_PUBLIC_APP_URL}/verify-email?token=${token}`;
       await sendVerificationEmail({
         email: user.email,
@@ -67,4 +68,4 @@ export const auth = betterAuth({
 });
 
 export type Session = typeof auth.$Infer.Session;
-export type User = typeof auth.$Infer.User;
+export type User = Session['user'];
diff --git a/packages/env/index.ts b/packages/env/index.ts
index 83e9f2e..eec0ce9 100644
--- a/packages/env/index.ts
+++ b/packages/env/index.ts
@@ -39,6 +39,7 @@ export const env = createEnv({
     SMTP_PASS: z.string().trim().min(1).optional(),
 
     ALLOW_SIGNIN_SIGNUP: z.string().trim().min(1),
+    SKIP_EMAIL_VERIFICATION: booleanFromString.optional(),
 
     UMAMI_TRACKING_ID: z.string().optional(),
     STORAGE_ENDPOINT: z.string().trim().min(1).optional(),
diff --git a/packages/ui/primitives/alert-dialog.tsx b/packages/ui/primitives/alert-dialog.tsx
index 5c06cdd..10809c2 100644
--- a/packages/ui/primitives/alert-dialog.tsx
+++ b/packages/ui/primitives/alert-dialog.tsx
@@ -1,18 +1,19 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import * as React from 'react';
 
-import { cn } from "@formbase/ui/utils/cn"
-import { Button } from "@formbase/ui/primitives/button"
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+
+import { Button } from '@formbase/ui/primitives/button';
+import { cn } from '@formbase/ui/utils/cn';
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 type AlertDialogTriggerProps = AlertDialogPrimitive.Trigger.Props & {
-  asChild?: boolean
-}
+  asChild?: boolean;
+};
 
 function AlertDialogTrigger({
   asChild = false,
@@ -20,23 +21,24 @@ function AlertDialogTrigger({
   ...props
 }: AlertDialogTriggerProps) {
   const renderProp =
-    asChild && React.isValidElement(children) ? children : undefined
+    asChild && React.isValidElement(children) ? children : undefined;
 
   return (
     <AlertDialogPrimitive.Trigger
       data-slot="alert-dialog-trigger"
       render={renderProp}
+      nativeButton={!asChild}
       {...props}
     >
       {asChild ? undefined : children}
     </AlertDialogPrimitive.Trigger>
-  )
+  );
 }
 
 function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
   return (
     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  );
 }
 
 function AlertDialogOverlay({
@@ -47,20 +49,20 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
-        className
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogContent({
   className,
-  size = "default",
+  size = 'default',
   ...props
 }: AlertDialogPrimitive.Popup.Props & {
-  size?: "default" | "sm"
+  size?: 'default' | 'sm';
 }) {
   return (
     <AlertDialogPortal>
@@ -69,55 +71,61 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs sm:data-[size=default]:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-hidden",
-          className
+          'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs sm:data-[size=default]:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-hidden',
+          className,
         )}
         {...props}
       />
     </AlertDialogPortal>
-  )
+  );
 }
 
 function AlertDialogHeader({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:has-data-[slot=alert-dialog-media]:group-data-[size=default]/alert-dialog-content:grid-rows-[auto_1fr]", className)}
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:has-data-[slot=alert-dialog-media]:group-data-[size=default]/alert-dialog-content:grid-rows-[auto_1fr]',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogFooter({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
+        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogMedia({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-media"
-      className={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 [svg:not([class*='size-'])]:*:size-6", className)}
+      className={cn(
+        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 [svg:not([class*='size-'])]:*:size-6",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogTitle({
@@ -127,10 +135,13 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-lg font-medium sm:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:group-data-[size=default]/alert-dialog-content:col-start-2", className)}
+      className={cn(
+        'text-lg font-medium sm:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:group-data-[size=default]/alert-dialog-content:col-start-2',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogDescription({
@@ -140,10 +151,13 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground hover:[a]:*:text-foreground text-sm text-balance md:text-pretty [a]:*:underline [a]:*:underline-offset-3", className)}
+      className={cn(
+        'text-muted-foreground hover:[a]:*:text-foreground text-sm text-balance md:text-pretty [a]:*:underline [a]:*:underline-offset-3',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogAction({
@@ -156,16 +170,16 @@ function AlertDialogAction({
       className={cn(className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogCancel({
   className,
-  variant = "outline",
-  size = "default",
+  variant = 'outline',
+  size = 'default',
   ...props
 }: AlertDialogPrimitive.Close.Props &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
   return (
     <AlertDialogPrimitive.Close
       data-slot="alert-dialog-cancel"
@@ -173,7 +187,7 @@ function AlertDialogCancel({
       render={<Button variant={variant} size={size} />}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -189,4 +203,4 @@ export {
   AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
-}
+};
diff --git a/tests/e2e/auth.spec.ts b/tests/e2e/auth.spec.ts
index a764889..c325e5d 100644
--- a/tests/e2e/auth.spec.ts
+++ b/tests/e2e/auth.spec.ts
@@ -16,13 +16,17 @@ test.describe('Authentication', () => {
       // Check form elements
       await expect(page.getByPlaceholder('email@example.com')).toBeVisible();
       await expect(page.getByPlaceholder('********')).toBeVisible();
-      await expect(page.getByRole('button', { name: 'Log In', exact: true })).toBeVisible();
+      await expect(
+        page.getByRole('button', { name: 'Log In', exact: true }),
+      ).toBeVisible();
     });
 
     test('shows error for invalid credentials', async ({ page }) => {
       await page.goto('/login');
 
-      await page.getByPlaceholder('email@example.com').fill('invalid@example.com');
+      await page
+        .getByPlaceholder('email@example.com')
+        .fill('invalid@example.com');
       await page.getByPlaceholder('********').fill('wrongpassword');
       await page.getByRole('button', { name: 'Log In', exact: true }).click();
 
@@ -35,7 +39,9 @@ test.describe('Authentication', () => {
     test('successfully logs in with valid credentials', async ({ page }) => {
       await page.goto('/login');
 
-      await page.getByPlaceholder('email@example.com').fill(E2E_TEST_USER.email);
+      await page
+        .getByPlaceholder('email@example.com')
+        .fill(E2E_TEST_USER.email);
       await page.getByPlaceholder('********').fill(E2E_TEST_USER.password);
       await page.getByRole('button', { name: 'Log In', exact: true }).click();
 
@@ -48,7 +54,9 @@ test.describe('Authentication', () => {
     }) => {
       // First, log in
       await page.goto('/login');
-      await page.getByPlaceholder('email@example.com').fill(E2E_TEST_USER.email);
+      await page
+        .getByPlaceholder('email@example.com')
+        .fill(E2E_TEST_USER.email);
       await page.getByPlaceholder('********').fill(E2E_TEST_USER.password);
       await page.getByRole('button', { name: 'Log In', exact: true }).click();
       await page.waitForURL(/.*dashboard/, { timeout: 15000 });
@@ -65,7 +73,9 @@ test.describe('Authentication', () => {
     test('successfully logs out', async ({ page }) => {
       // First, log in
       await page.goto('/login');
-      await page.getByPlaceholder('email@example.com').fill(E2E_TEST_USER.email);
+      await page
+        .getByPlaceholder('email@example.com')
+        .fill(E2E_TEST_USER.email);
       await page.getByPlaceholder('********').fill(E2E_TEST_USER.password);
       await page.getByRole('button', { name: 'Log In', exact: true }).click();
       await page.waitForURL(/.*dashboard/, { timeout: 15000 });
@@ -78,7 +88,7 @@ test.describe('Authentication', () => {
       await page.getByRole('button', { name: /sign\s*out/i }).click();
 
       // Confirm the sign out dialog
-      await page.getByRole('button', { name: 'Continue' }).click();
+      await page.getByRole('button', { name: 'Okay' }).click();
 
       // After logout, should be on home or login page (root URL ends with port/)
       await expect(page).toHaveURL(/:\d+\/?$|\/login/, { timeout: 10000 });
@@ -100,13 +110,17 @@ test.describe('Authentication', () => {
     test('allows authenticated user to access dashboard', async ({ page }) => {
       // Log in first
       await page.goto('/login');
-      await page.getByPlaceholder('email@example.com').fill(E2E_TEST_USER.email);
+      await page
+        .getByPlaceholder('email@example.com')
+        .fill(E2E_TEST_USER.email);
       await page.getByPlaceholder('********').fill(E2E_TEST_USER.password);
       await page.getByRole('button', { name: 'Log In', exact: true }).click();
       await page.waitForURL(/.*dashboard/, { timeout: 15000 });
 
       // Dashboard should show the main heading
-      await expect(page.getByRole('heading', { name: 'Form Endpoints' })).toBeVisible();
+      await expect(
+        page.getByRole('heading', { name: 'Form Endpoints' }),
+      ).toBeVisible();
     });
   });
 });