diff --git a/src/lib/components/app/auth-dialog.svelte b/src/lib/components/app/auth-dialog.svelte
index 15209e6..2978d46 100644
--- a/src/lib/components/app/auth-dialog.svelte
+++ b/src/lib/components/app/auth-dialog.svelte
@@ -168,31 +168,31 @@
       </Dialog.Title>
     </Dialog.Header>
     {#if user}
-      <div class="flex flex-col gap-4">
-        <div class="rounded-lg border border-foreground/10 bg-foreground/5 p-4">
+      <div class="flex flex-col gap-5">
+        <div class="rounded-xl border border-white/[0.1] bg-white/[0.04] backdrop-blur-sm p-4 shadow-lg">
           <div class="flex items-start gap-3">
-            <div class="rounded-full bg-foreground/10 p-2">
-              <UserRound class="size-4" />
+            <div class="rounded-full bg-white/10 p-2.5 backdrop-blur-sm">
+              <UserRound class="size-4 text-white/90" />
             </div>
             <div class="min-w-0">
-              <p class="font-medium">{user.name}</p>
-              <p class="text-sm opacity-70">Account #{user.accountNumber}</p>
+              <p class="font-medium text-white">{user.name}</p>
+              <p class="text-sm text-white/60">Account #{user.accountNumber}</p>
             </div>
           </div>
         </div>
 
         {#if passkeys.length > 0}
-          <div class="flex flex-col gap-2">
-            <p class="text-sm font-medium">Your passkeys</p>
-            <div class="flex flex-col gap-1">
+          <div class="flex flex-col gap-2.5">
+            <p class="text-sm font-medium text-white/80">Your passkeys</p>
+            <div class="flex flex-col gap-2">
               {#each passkeys as passkey (passkey.id)}
                 <div
-                  class="flex items-center gap-2 rounded-lg border border-foreground/10 bg-foreground/5 p-3"
+                  class="flex items-center gap-3 rounded-xl border border-white/[0.08] bg-white/[0.03] backdrop-blur-sm p-3 transition-colors hover:bg-white/[0.06]"
                 >
-                  <Key class="size-4" />
+                  <Key class="size-4 text-white/70" />
                   <div class="min-w-0 flex-1">
-                    <p>{passkey.name}</p>
-                    <p class="text-sm opacity-70">
+                    <p class="text-white/90">{passkey.name}</p>
+                    <p class="text-sm text-white/50">
                       Added on {new Date(passkey.createdAt).toLocaleDateString()}
                     </p>
                   </div>
@@ -216,8 +216,8 @@
           </div>
         {/if}
 
-        <div class="flex flex-col gap-2">
-          <p class="text-sm font-medium">Security</p>
+        <div class="flex flex-col gap-2.5">
+          <p class="text-sm font-medium text-white/80">Security</p>
           <Input
             type="text"
             id="passkeyName"
@@ -228,16 +228,16 @@
             {busyAction === 'add-passkey' ? 'Waiting for passkey...' : 'Add a passkey'}
           </Button>
           {#if passkeyMessage}
-            <p class="text-sm opacity-80">{passkeyMessage}</p>
+            <p class="text-sm text-white/70 bg-white/[0.03] rounded-lg px-3 py-2 border border-white/[0.06]">{passkeyMessage}</p>
           {/if}
         </div>
 
-        <Button variant="ghost" onclick={signOut}>Sign out</Button>
+        <Button variant="ghost" onclick={signOut} class="text-white/70 hover:text-white hover:bg-white/10">Sign out</Button>
       </div>
     {:else}
-      <div class="flex flex-col gap-4 pt-4">
+      <div class="flex flex-col gap-4 pt-2">
         {#if authScreen === 'login'}
-          <div class="flex w-full flex-col gap-1.5">
+          <div class="flex w-full flex-col gap-2">
             <Label for="accountNumber">Account Number</Label>
             <div class="flex items-center gap-2">
               <Input
@@ -266,10 +266,10 @@
             {busyAction === 'account-number' ? 'Signing in...' : 'Sign in with account number'}
           </Button>
 
-          <div class="relative my-2 flex items-center gap-3">
-            <div class="h-px flex-1 bg-foreground/20"></div>
-            <span class="text-sm text-foreground/70">or</span>
-            <div class="h-px flex-1 bg-foreground/20"></div>
+          <div class="relative my-3 flex items-center gap-4">
+            <div class="h-px flex-1 bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
+            <span class="text-sm text-white/50">or</span>
+            <div class="h-px flex-1 bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
           </div>
 
           <Button
@@ -281,17 +281,19 @@
             {busyAction === 'create-account' ? 'Creating account...' : 'Create account number'}
           </Button>
           {#if authMessage}
-            <p class="text-sm text-red-400">{authMessage}</p>
+            <p class="text-sm text-red-400/90 bg-red-500/10 rounded-lg px-3 py-2 border border-red-500/20">{authMessage}</p>
           {/if}
         {:else if authScreen === 'create'}
-          <Label for="name">Your name</Label>
-          <Input
-            type="text"
-            id="name"
-            bind:value={name}
-            placeholder="Steve Jobs"
-            autocomplete="name webauthn"
-          />
+          <div class="flex flex-col gap-2">
+            <Label for="name">Your name</Label>
+            <Input
+              type="text"
+              id="name"
+              bind:value={name}
+              placeholder="Steve Jobs"
+              autocomplete="name webauthn"
+            />
+          </div>
 
           <div class="flex w-full items-center gap-2">
             <Button
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index d606542..3e24cc3 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -23,18 +23,26 @@
   <DialogPrimitive.Content
     bind:ref
     class={cn(
-      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 sm:rounded-xl',
-      'bg-black/40 backdrop-blur-lg border border-white/10 shadow-lg text-white',
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-300 sm:rounded-2xl',
+      'bg-white/[0.08] dark:bg-black/[0.45] backdrop-blur-2xl',
+      'border border-white/[0.12] dark:border-white/[0.08]',
+      'shadow-[0_8px_32px_rgba(0,0,0,0.32),inset_0_1px_0_rgba(255,255,255,0.1)]',
+      'text-white',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+      'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+      'before:absolute before:inset-0 before:rounded-2xl before:bg-gradient-to-br before:from-white/[0.08] before:to-transparent before:pointer-events-none',
       className
     )}
     {...restProps}
   >
-    <div class="text-white max-w-none space-y-3 font-medium">
+    <div class="relative z-10 text-white max-w-none space-y-3 font-medium">
       {@render children?.()}
     </div>
     <DialogPrimitive.Close
-      class="absolute right-4 top-4 rounded-md opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none p-1 shadow-sm bg-black/20 backdrop-blur-md border border-white/10"
+      class="absolute right-4 top-4 z-20 rounded-lg p-2 opacity-60 transition-all duration-200 hover:opacity-100 hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 disabled:pointer-events-none backdrop-blur-sm border border-white/[0.08]"
     >
       <X class="size-4 text-white" />
       <span class="sr-only">Close</span>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
index 59f3ba0..066611e 100644
--- a/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -11,6 +11,6 @@
 
 <DialogPrimitive.Description
 	bind:ref
-	class={cn("text-black/80 text-sm", className)}
+	class={cn("text-white/70 text-sm leading-relaxed", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
index 91ecaba..8b402f6 100644
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -13,7 +13,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 mt-2 border-t border-white/[0.08]", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
index 8d1abfc..2257c3d 100644
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -13,7 +13,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left pb-2", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
index 19a2d0c..86e33d2 100644
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -12,7 +12,11 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+		"fixed inset-0 z-50",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out",
+		"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+		"bg-black/40 backdrop-blur-sm",
+		"before:absolute before:inset-0 before:bg-gradient-to-b before:from-black/20 before:to-transparent",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
index 9cf592c..b727fab 100644
--- a/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -11,6 +11,6 @@
 
 <DialogPrimitive.Title
 	bind:ref
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	class={cn("text-xl font-semibold leading-none tracking-tight text-white drop-shadow-sm", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 78c7760..e34197a 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -24,7 +24,13 @@
 	<input
 		bind:this={ref}
 		class={cn(
-			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"flex h-10 w-full rounded-lg px-3 py-2 text-sm transition-all duration-200",
+			"bg-white/[0.06] dark:bg-black/20 backdrop-blur-sm",
+			"border border-white/[0.1] dark:border-white/[0.08]",
+			"placeholder:text-white/40 text-white",
+			"focus:outline-none focus:ring-2 focus:ring-white/20 focus:border-white/20",
+			"disabled:cursor-not-allowed disabled:opacity-50",
+			"file:border-0 file:bg-transparent file:text-sm file:font-medium",
 			className
 		)}
 		type="file"
@@ -36,7 +42,12 @@
 	<input
 		bind:this={ref}
 		class={cn(
-			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"flex h-10 w-full rounded-lg px-3 py-2 text-sm transition-all duration-200",
+			"bg-white/[0.06] dark:bg-black/20 backdrop-blur-sm",
+			"border border-white/[0.1] dark:border-white/[0.08]",
+			"placeholder:text-white/40 text-white",
+			"focus:outline-none focus:ring-2 focus:ring-white/20 focus:border-white/20",
+			"disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index 247d23c..d13b558 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -12,7 +12,7 @@
 <LabelPrimitive.Root
 	bind:ref
 	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		"text-sm font-medium leading-none text-white/90 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
 		className
 	)}
 	{...restProps}