From 5095b0d8df6ec443da1c5f5320dbf0ce2b03e150 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Mon, 9 Mar 2026 16:12:21 -0400
Subject: [PATCH] refactor: adopt shared Input/Textarea components (#101)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: adopt shared Input/Textarea components across 15 files

Replace 42 raw <input>/<textarea> elements with <Input>/<Textarea>
from components/ui/. Consistent focus states, error handling, and
styling across all form fields.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: replace hardcoded rgba/hex colors with Tailwind tokens

- rgba(255,255,255,0.xx) → bg-white/[0.xx], border-white/[0.xx]
- rgba(6,182,212,0.3) → border-primary/30 (focus states)
- #0a0a0a → bg-background
- Inline style hex colors → var(--color-primary), var(--color-brand-gradient-to)
- 28 files updated, zero hardcoded rgba() patterns remaining

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add PageMeta to 16 pages for SEO and proper browser tab titles

Public pages (Login, Register, Forgot/Reset Password, Verify Email,
Survey Thank You) get descriptions for SEO. Authenticated pages
(Dashboard, Flow Library, My Flows, Session History, AI Assistant,
Account Settings, Step Library, My Shares, Feedback, Guides) get
proper tab titles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add page transitions and staggered list animations

- ViewTransitionOutlet: wraps Outlet with fade-in-up animation keyed
  to route path. Sidebar/topbar stay still, only content area animates.
- StaggerList: reusable component that cascades children with
  incremental delay (50ms default). Pure CSS via @utility stagger-item.
- Applied stagger to TreeGridView, MyTreesPage cards, SessionHistoryPage.
- New stagger-fade-in keyframe in @theme block.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: ViewTransitionOutlet needs h-full for React Flow canvas

The wrapper div broke the height chain needed by TreeEditorPage's
h-full layout, causing React Flow canvas to collapse to zero height.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: main-content flex layout for tree editor + scrollable pages

Main content area is now flex-col so the ViewTransitionOutlet wrapper
gets an explicit computed height via flex-1 min-h-0. This makes h-full
resolve correctly in the tree editor (React Flow canvas) while still
allowing overflow-y-auto scrolling for normal pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: resolve ESLint errors in Button and Skeleton components

- Button: suppress react-refresh/only-export-components for buttonVariants re-export
- Skeleton: replace empty interface with type alias, replace Math.random() with static widths array

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add PageMeta, animation classes, and layout fixes to remaining pages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                                     |  5 ++
 .../src/components/account/AccountLayout.tsx  |  2 +-
 .../components/account/DeleteAccountModal.tsx |  2 +-
 .../components/account/LeaveAccountModal.tsx  |  2 +-
 .../account/TransferOwnershipModal.tsx        |  2 +-
 .../components/admin/CreateCategoryModal.tsx  | 19 ++-----
 .../components/admin/EditCategoryModal.tsx    | 19 ++-----
 .../src/components/assistant/ChatMessage.tsx  |  4 +-
 .../src/components/assistant/ChatSidebar.tsx  |  6 +--
 .../assistant/ConcludeSessionModal.tsx        | 14 +++---
 .../assistant/SuggestedFlowCard.tsx           |  2 +-
 .../src/components/common/StaggerList.tsx     | 43 ++++++++++++++++
 .../src/components/copilot/CopilotPanel.tsx   |  6 +--
 .../components/editor-ai/AIPromptDialog.tsx   |  4 +-
 frontend/src/components/editor-ai/ChatTab.tsx |  6 +--
 .../components/editor-ai/SuggestionsTab.tsx   |  2 +-
 frontend/src/components/layout/AppLayout.tsx  |  7 +--
 .../layout/ViewTransitionOutlet.tsx           | 26 ++++++++++
 .../components/library/ImportFlowModal.tsx    |  2 +-
 .../src/components/library/TreeGridView.tsx   |  5 +-
 .../components/procedural/IntakeFormModal.tsx |  2 +-
 .../src/components/session/ForkTreeModal.tsx  | 17 ++-----
 .../session/SaveSessionAsTreeModal.tsx        | 19 ++-----
 .../src/components/session/SessionFilters.tsx |  2 +-
 .../components/session/ShareSessionModal.tsx  |  7 +--
 .../components/session/StepRatingModal.tsx    | 11 ++--
 .../src/components/step-library/StepForm.tsx  | 50 ++++++-------------
 frontend/src/components/ui/Button.tsx         |  3 +-
 frontend/src/components/ui/Input.tsx          |  2 +-
 frontend/src/components/ui/Skeleton.tsx       |  8 +--
 frontend/src/components/ui/Textarea.tsx       |  2 +-
 frontend/src/index.css                        | 14 +++++-
 frontend/src/pages/AccountSettingsPage.tsx    |  4 ++
 frontend/src/pages/AssistantChatPage.tsx      |  8 ++-
 frontend/src/pages/BatchStatusPage.tsx        |  2 +-
 frontend/src/pages/FeedbackPage.tsx           |  4 ++
 frontend/src/pages/ForgotPasswordPage.tsx     |  4 ++
 frontend/src/pages/GuideDetailPage.tsx        |  4 +-
 frontend/src/pages/GuidesHubPage.tsx          |  4 ++
 frontend/src/pages/LoginPage.tsx              |  8 ++-
 .../src/pages/MaintenanceFlowDetailPage.tsx   |  2 +-
 frontend/src/pages/MySharesPage.tsx           |  4 ++
 frontend/src/pages/MyTreesPage.tsx            |  9 +++-
 frontend/src/pages/QuickStartPage.tsx         |  4 ++
 frontend/src/pages/RegisterPage.tsx           |  4 ++
 frontend/src/pages/ResetPasswordPage.tsx      |  4 ++
 frontend/src/pages/SessionDetailPage.tsx      |  2 +-
 frontend/src/pages/SessionHistoryPage.tsx     | 29 +++++++----
 frontend/src/pages/StepLibraryPage.tsx        |  4 ++
 frontend/src/pages/SurveyPage.tsx             | 46 ++++++++---------
 frontend/src/pages/SurveyThankYouPage.tsx     |  8 ++-
 frontend/src/pages/TreeLibraryPage.tsx        |  4 ++
 frontend/src/pages/VerifyEmailPage.tsx        |  8 ++-
 .../account/ChatRetentionSettingsPage.tsx     |  4 +-
 .../src/pages/account/ProfileSettingsPage.tsx |  6 +--
 .../src/pages/account/TeamCategoriesPage.tsx  | 16 +++---
 frontend/src/pages/admin/FeatureFlagsPage.tsx | 15 +++---
 .../src/pages/admin/GlobalCategoriesPage.tsx  | 16 +++---
 frontend/src/pages/admin/InviteCodesPage.tsx  | 17 +++----
 frontend/src/pages/admin/PlanLimitsPage.tsx   | 23 ++++-----
 frontend/src/pages/admin/SettingsPage.tsx     |  7 +--
 .../src/pages/admin/SurveyInvitesPage.tsx     | 10 ++--
 .../src/pages/admin/SurveyResponsesPage.tsx   | 10 ++--
 frontend/src/pages/admin/UserDetailPage.tsx   |  8 +--
 frontend/src/pages/admin/UsersPage.tsx        | 37 +++-----------
 65 files changed, 352 insertions(+), 298 deletions(-)
 create mode 100644 frontend/src/components/common/StaggerList.tsx
 create mode 100644 frontend/src/components/layout/ViewTransitionOutlet.tsx

diff --git a/CLAUDE.md b/CLAUDE.md
index 6c68b1da..2d300b89 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -42,6 +42,11 @@
 
 When adding new pages/components: use "ResolutionFlow" branding, ice-cyan gradient accent theme, `.glass-card` / `.glass-card-static` containers, `text-foreground`/`text-muted-foreground` hierarchy. Primary actions use `bg-gradient-brand`. Pages render inside the app shell (CSS Grid: topbar + sidebar + main). Use "Flows" not "Trees" in all user-facing text; use "Projects" not "Procedures" for procedural flows. Reference [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md) for layout patterns, navigation, and component specs.
 
+## Implementation Principles
+
+- Prefer correct architecture over minimal diff
+- If two approaches exist, implement the one that scales, not the one that's faster to write
+- Flag any "simpler approach" tradeoffs for product owner review before proceeding
 ---
 
 ## Current State
diff --git a/frontend/src/components/account/AccountLayout.tsx b/frontend/src/components/account/AccountLayout.tsx
index ec3c18f9..1659e3be 100644
--- a/frontend/src/components/account/AccountLayout.tsx
+++ b/frontend/src/components/account/AccountLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom'
 
 export function AccountLayout() {
   return (
-    <div className="container mx-auto max-w-(--breakpoint-lg) px-4 py-6">
+    <div className="overflow-y-auto h-full container mx-auto max-w-(--breakpoint-lg) px-4 py-6">
       <Outlet />
     </div>
   )
diff --git a/frontend/src/components/account/DeleteAccountModal.tsx b/frontend/src/components/account/DeleteAccountModal.tsx
index 97e93774..53f5b275 100644
--- a/frontend/src/components/account/DeleteAccountModal.tsx
+++ b/frontend/src/components/account/DeleteAccountModal.tsx
@@ -69,7 +69,7 @@ export function DeleteAccountModal({ onClose }: Props) {
               onClick={onClose}
               className={cn(
                 'rounded-[10px] px-4 py-2 text-sm font-medium',
-                'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
+                'bg-white/[0.04] border border-brand-border text-foreground'
               )}
             >
               Cancel
diff --git a/frontend/src/components/account/LeaveAccountModal.tsx b/frontend/src/components/account/LeaveAccountModal.tsx
index d993b477..b8a8e22a 100644
--- a/frontend/src/components/account/LeaveAccountModal.tsx
+++ b/frontend/src/components/account/LeaveAccountModal.tsx
@@ -45,7 +45,7 @@ export function LeaveAccountModal({ accountName, onClose }: Props) {
             onClick={onClose}
             className={cn(
               'rounded-[10px] px-4 py-2 text-sm font-medium',
-              'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
+              'bg-white/[0.04] border border-brand-border text-foreground'
             )}
           >
             Cancel
diff --git a/frontend/src/components/account/TransferOwnershipModal.tsx b/frontend/src/components/account/TransferOwnershipModal.tsx
index a7626c90..ff2120df 100644
--- a/frontend/src/components/account/TransferOwnershipModal.tsx
+++ b/frontend/src/components/account/TransferOwnershipModal.tsx
@@ -90,7 +90,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 onClick={onClose}
                 className={cn(
                   'rounded-[10px] px-4 py-2 text-sm font-medium',
-                  'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
+                  'bg-white/[0.04] border border-brand-border text-foreground'
                 )}
               >
                 Cancel
diff --git a/frontend/src/components/admin/CreateCategoryModal.tsx b/frontend/src/components/admin/CreateCategoryModal.tsx
index 752d0ce5..a42daf0d 100644
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react'
-import { cn } from '@/lib/utils'
 import { Modal } from '@/components/common/Modal'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
 
 interface CreateCategoryModalProps {
   isOpen: boolean
@@ -93,7 +94,7 @@ export function CreateCategoryModal({
           <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
             Category Name <span className="text-red-400">*</span>
           </label>
-          <input
+          <Input
             id="name"
             type="text"
             value={name}
@@ -102,12 +103,6 @@ export function CreateCategoryModal({
             maxLength={100}
             placeholder="e.g., Network Troubleshooting"
             required
-            className={cn(
-              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-              'placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-              'disabled:opacity-50'
-            )}
           />
           <p className="mt-1 text-xs text-muted-foreground">
             {name.length}/100 characters
@@ -118,19 +113,13 @@ export function CreateCategoryModal({
           <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
             Description <span className="text-muted-foreground">(optional)</span>
           </label>
-          <textarea
+          <Textarea
             id="description"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             disabled={isSaving}
             rows={3}
             placeholder="Brief description of this category..."
-            className={cn(
-              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-              'placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-              'disabled:opacity-50'
-            )}
           />
         </div>
       </form>
diff --git a/frontend/src/components/admin/EditCategoryModal.tsx b/frontend/src/components/admin/EditCategoryModal.tsx
index fb586940..b113bee1 100644
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { cn } from '@/lib/utils'
 import type { StepCategoryListItem } from '@/types'
 import { Modal } from '@/components/common/Modal'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
 
 interface EditCategoryModalProps {
   isOpen: boolean
@@ -105,7 +106,7 @@ export function EditCategoryModal({
           <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
             Category Name <span className="text-red-400">*</span>
           </label>
-          <input
+          <Input
             id="edit-name"
             type="text"
             value={name}
@@ -114,12 +115,6 @@ export function EditCategoryModal({
             maxLength={100}
             placeholder="e.g., Network Troubleshooting"
             required
-            className={cn(
-              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-              'placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-              'disabled:opacity-50'
-            )}
           />
           <p className="mt-1 text-xs text-muted-foreground">
             {name.length}/100 characters
@@ -130,19 +125,13 @@ export function EditCategoryModal({
           <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
             Description <span className="text-muted-foreground">(optional)</span>
           </label>
-          <textarea
+          <Textarea
             id="edit-description"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             disabled={isSaving}
             rows={3}
             placeholder="Brief description of this category..."
-            className={cn(
-              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-              'placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-              'disabled:opacity-50'
-            )}
           />
         </div>
       </form>
diff --git a/frontend/src/components/assistant/ChatMessage.tsx b/frontend/src/components/assistant/ChatMessage.tsx
index ce8f1ca9..142c7b36 100644
--- a/frontend/src/components/assistant/ChatMessage.tsx
+++ b/frontend/src/components/assistant/ChatMessage.tsx
@@ -17,7 +17,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
           role === 'assistant'
             ? 'bg-primary/15 text-primary'
-            : 'bg-[rgba(255,255,255,0.08)] text-muted-foreground'
+            : 'bg-white/[0.08] text-muted-foreground'
         }`}
       >
         {role === 'assistant' ? <Sparkles size={14} /> : <User size={14} />}
@@ -29,7 +29,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
           className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${
             role === 'user'
               ? 'bg-primary/15 text-foreground'
-              : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-brand-border'
+              : 'bg-white/[0.04] text-foreground border border-brand-border'
           }`}
         >
           <MarkdownContent content={content} className="text-[0.875rem] leading-relaxed" />
diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx
index 49aa24b8..14c5f6f3 100644
--- a/frontend/src/components/assistant/ChatSidebar.tsx
+++ b/frontend/src/components/assistant/ChatSidebar.tsx
@@ -103,7 +103,7 @@ function ChatItem({
         'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
         isActive
           ? 'bg-primary/10 text-foreground'
-          : 'text-muted-foreground hover:bg-[rgba(255,255,255,0.04)] hover:text-foreground'
+          : 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground'
       )}
     >
       <MessageSquare size={14} className="shrink-0" />
@@ -116,14 +116,14 @@ function ChatItem({
       <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
         <button
           onClick={e => { e.stopPropagation(); onTogglePin() }}
-          className="p-1 rounded hover:bg-[rgba(255,255,255,0.08)]"
+          className="p-1 rounded hover:bg-white/[0.08]"
           title={chat.pinned ? 'Unpin' : 'Pin'}
         >
           <Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
         </button>
         <button
           onClick={e => { e.stopPropagation(); onDelete() }}
-          className="p-1 rounded hover:bg-[rgba(255,255,255,0.08)] text-muted-foreground hover:text-rose-400"
+          className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
           title="Delete"
         >
           <Trash2 size={12} />
diff --git a/frontend/src/components/assistant/ConcludeSessionModal.tsx b/frontend/src/components/assistant/ConcludeSessionModal.tsx
index b94d611c..bc01cd1a 100644
--- a/frontend/src/components/assistant/ConcludeSessionModal.tsx
+++ b/frontend/src/components/assistant/ConcludeSessionModal.tsx
@@ -233,8 +233,8 @@ export function ConcludeSessionModal({
                     className={cn(
                       'w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left',
                       'hover:scale-[1.01] active:scale-[0.99]',
-                      'bg-[rgba(255,255,255,0.02)] border-brand-border',
-                      'hover:border-[rgba(255,255,255,0.12)] hover:bg-[rgba(255,255,255,0.04)]'
+                      'bg-white/[0.02] border-brand-border',
+                      'hover:border-white/[0.12] hover:bg-white/[0.04]'
                     )}
                   >
                     <div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', o.bg)}>
@@ -282,7 +282,7 @@ export function ConcludeSessionModal({
                       : 'What still needs to be done, where you left off...'
                   }
                   rows={4}
-                  className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
+                  className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
                   style={{ borderColor: 'var(--glass-border)' }}
                 />
               </div>
@@ -308,7 +308,7 @@ export function ConcludeSessionModal({
 
               {/* Generated summary */}
               <div
-                className="rounded-xl border p-5 bg-[rgba(255,255,255,0.02)]"
+                className="rounded-xl border p-5 bg-white/[0.02]"
                 style={{ borderColor: 'var(--glass-border)' }}
               >
                 <div className="flex items-center justify-between mb-3">
@@ -335,7 +335,7 @@ export function ConcludeSessionModal({
               <div />
               <button
                 onClick={onClose}
-                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-brand-border hover:border-[rgba(255,255,255,0.12)] transition-all"
+                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
               >
                 Cancel
               </button>
@@ -346,7 +346,7 @@ export function ConcludeSessionModal({
             <>
               <button
                 onClick={() => setStep('select-outcome')}
-                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-brand-border hover:border-[rgba(255,255,255,0.12)] transition-all"
+                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
               >
                 Back
               </button>
@@ -407,7 +407,7 @@ export function ConcludeSessionModal({
                 </button>
                 <button
                   onClick={onClose}
-                  className="px-4 py-2.5 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-brand-border hover:border-[rgba(255,255,255,0.12)] transition-all"
+                  className="px-4 py-2.5 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
                 >
                   Done
                 </button>
diff --git a/frontend/src/components/assistant/SuggestedFlowCard.tsx b/frontend/src/components/assistant/SuggestedFlowCard.tsx
index f81a67ed..3e630e14 100644
--- a/frontend/src/components/assistant/SuggestedFlowCard.tsx
+++ b/frontend/src/components/assistant/SuggestedFlowCard.tsx
@@ -18,7 +18,7 @@ export function SuggestedFlowCard({ flow }: SuggestedFlowCardProps) {
   return (
     <button
       onClick={handleClick}
-      className="w-full text-left glass-card-static p-3 rounded-xl hover:border-[rgba(255,255,255,0.12)] transition-colors group"
+      className="w-full text-left glass-card-static p-3 rounded-xl hover:border-white/[0.12] transition-colors group"
     >
       <div className="flex items-start gap-2">
         <Box size={14} className="text-primary mt-0.5 shrink-0" />
diff --git a/frontend/src/components/common/StaggerList.tsx b/frontend/src/components/common/StaggerList.tsx
new file mode 100644
index 00000000..1e3444df
--- /dev/null
+++ b/frontend/src/components/common/StaggerList.tsx
@@ -0,0 +1,43 @@
+import { Children, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface StaggerListProps {
+  children: ReactNode
+  className?: string
+  /** Base delay before the first item animates (ms). Default: 0 */
+  baseDelay?: number
+  /** Delay increment between each item (ms). Default: 50 */
+  staggerMs?: number
+}
+
+/**
+ * Wraps each child in a stagger-item animation container.
+ * Children fade in sequentially with a configurable delay.
+ *
+ * Usage:
+ *   <StaggerList className="grid grid-cols-3 gap-4">
+ *     {items.map(item => <Card key={item.id} ... />)}
+ *   </StaggerList>
+ */
+export function StaggerList({
+  children,
+  className,
+  baseDelay = 0,
+  staggerMs = 50,
+}: StaggerListProps) {
+  const items = Children.toArray(children)
+
+  return (
+    <div className={cn(className)}>
+      {items.map((child, i) => (
+        <div
+          key={i}
+          className="stagger-item"
+          style={{ '--stagger-index': i, animationDelay: `${baseDelay + i * staggerMs}ms` } as React.CSSProperties}
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/src/components/copilot/CopilotPanel.tsx b/frontend/src/components/copilot/CopilotPanel.tsx
index 0d292085..3ab306c5 100644
--- a/frontend/src/components/copilot/CopilotPanel.tsx
+++ b/frontend/src/components/copilot/CopilotPanel.tsx
@@ -122,7 +122,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
                   ? 'bg-primary/15 text-foreground'
-                  : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-brand-border'
+                  : 'bg-white/[0.04] text-foreground border border-brand-border'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -131,7 +131,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         ))}
         {loading && (
           <div className="flex justify-start">
-            <div className="bg-[rgba(255,255,255,0.04)] border border-brand-border rounded-xl px-3.5 py-2.5">
+            <div className="bg-white/[0.04] border border-brand-border rounded-xl px-3.5 py-2.5">
               <Loader2 size={16} className="animate-spin text-primary" />
             </div>
           </div>
@@ -162,7 +162,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
             onKeyDown={handleKeyDown}
             placeholder="Ask about this step..."
             rows={1}
-            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
+            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
             style={{ borderColor: 'var(--glass-border)' }}
             disabled={loading || initializing}
           />
diff --git a/frontend/src/components/editor-ai/AIPromptDialog.tsx b/frontend/src/components/editor-ai/AIPromptDialog.tsx
index 641ddfe4..ad32fd54 100644
--- a/frontend/src/components/editor-ai/AIPromptDialog.tsx
+++ b/frontend/src/components/editor-ai/AIPromptDialog.tsx
@@ -68,7 +68,7 @@ export function AIPromptDialog({
           placeholder={`Example: "A flow for troubleshooting VPN connectivity issues when users can't connect to the corporate network"`}
           rows={4}
           disabled={isGenerating}
-          className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden resize-none disabled:opacity-50"
+          className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-hidden resize-none disabled:opacity-50"
           autoFocus
         />
 
@@ -83,7 +83,7 @@ export function AIPromptDialog({
           <button
             onClick={onClose}
             disabled={isGenerating}
-            className="rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-brand-border px-4 py-2 text-sm text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors disabled:opacity-50"
+            className="rounded-[10px] bg-white/[0.04] border border-brand-border px-4 py-2 text-sm text-foreground hover:border-white/[0.12] transition-colors disabled:opacity-50"
           >
             Cancel
           </button>
diff --git a/frontend/src/components/editor-ai/ChatTab.tsx b/frontend/src/components/editor-ai/ChatTab.tsx
index 78dff9eb..7d760bd0 100644
--- a/frontend/src/components/editor-ai/ChatTab.tsx
+++ b/frontend/src/components/editor-ai/ChatTab.tsx
@@ -50,7 +50,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
                   ? 'bg-primary/15 text-foreground'
-                  : 'bg-[rgba(255,255,255,0.04)] text-foreground border border-brand-border'
+                  : 'bg-white/[0.04] text-foreground border border-brand-border'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -59,7 +59,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
         ))}
         {isLoading && (
           <div className="flex justify-start">
-            <div className="bg-[rgba(255,255,255,0.04)] border border-brand-border rounded-xl px-3.5 py-2.5">
+            <div className="bg-white/[0.04] border border-brand-border rounded-xl px-3.5 py-2.5">
               <Loader2 size={16} className="animate-spin text-primary" />
             </div>
           </div>
@@ -77,7 +77,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
             onKeyDown={handleKeyDown}
             placeholder="Ask AI to help..."
             rows={1}
-            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
+            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
             style={{ borderColor: 'var(--glass-border)' }}
             disabled={isLoading}
           />
diff --git a/frontend/src/components/editor-ai/SuggestionsTab.tsx b/frontend/src/components/editor-ai/SuggestionsTab.tsx
index 4da91dce..64202564 100644
--- a/frontend/src/components/editor-ai/SuggestionsTab.tsx
+++ b/frontend/src/components/editor-ai/SuggestionsTab.tsx
@@ -26,7 +26,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
         const config = STATUS_CONFIG[s.status]
         const StatusIcon = config.icon
         return (
-          <div key={s.id} className="rounded-lg border border-border bg-[rgba(255,255,255,0.02)] px-3 py-2">
+          <div key={s.id} className="rounded-lg border border-border bg-white/[0.02] px-3 py-2">
             <div className="flex items-center justify-between">
               <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 {s.action_type.replace(/_/g, ' ')}
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index a5942fe5..e8ba3bff 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react'
-import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'
+import { useLocation, useNavigate, Link } from 'react-router-dom'
 import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Settings, LogOut, Shield } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
@@ -8,6 +8,7 @@ import { BrandLogo } from '@/components/common/BrandLogo'
 import { TopBar } from './TopBar'
 import { Sidebar } from './Sidebar'
 import { EmailVerificationBanner } from './EmailVerificationBanner'
+import { ViewTransitionOutlet } from './ViewTransitionOutlet'
 import { cn } from '@/lib/utils'
 
 export function AppLayout() {
@@ -183,9 +184,9 @@ export function AppLayout() {
       )}
 
       {/* Main Content */}
-      <main className="main-content">
+      <main className="main-content flex flex-col overflow-hidden">
         <EmailVerificationBanner />
-        <Outlet />
+        <ViewTransitionOutlet />
       </main>
     </div>
     </>
diff --git a/frontend/src/components/layout/ViewTransitionOutlet.tsx b/frontend/src/components/layout/ViewTransitionOutlet.tsx
new file mode 100644
index 00000000..5312a23a
--- /dev/null
+++ b/frontend/src/components/layout/ViewTransitionOutlet.tsx
@@ -0,0 +1,26 @@
+import { Outlet, useLocation } from 'react-router-dom'
+
+/**
+ * Wraps <Outlet> with a fade-in animation keyed to the route path.
+ * When the route changes, React unmounts/remounts the wrapper div,
+ * triggering the CSS animation. Sidebar and topbar stay still.
+ *
+ * Uses flex-1 + min-h-0 to fill the main content area exactly.
+ * overflow-y-auto enables scrolling for normal pages while full-height
+ * pages (tree editor, etc.) use their own overflow:hidden to take
+ * the exact container height without scrolling.
+ */
+export function ViewTransitionOutlet() {
+  const location = useLocation()
+
+  // Use the first two path segments as the key to avoid re-animating
+  // on param changes within the same page (e.g., /trees/123 → /trees/456)
+  const segments = location.pathname.split('/').filter(Boolean)
+  const routeKey = segments.slice(0, 2).join('/') || '/'
+
+  return (
+    <div key={routeKey} className="flex-1 min-h-0 animate-fade-in-up">
+      <Outlet />
+    </div>
+  )
+}
diff --git a/frontend/src/components/library/ImportFlowModal.tsx b/frontend/src/components/library/ImportFlowModal.tsx
index 45f6aad0..6b6ad309 100644
--- a/frontend/src/components/library/ImportFlowModal.tsx
+++ b/frontend/src/components/library/ImportFlowModal.tsx
@@ -122,7 +122,7 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
                   'flex flex-col items-center justify-center rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors cursor-pointer',
                   isDragging
                     ? 'border-primary/50 bg-primary/5'
-                    : 'border-border hover:border-[rgba(255,255,255,0.12)]'
+                    : 'border-border hover:border-white/[0.12]'
                 )}
                 onClick={() => fileInputRef.current?.click()}
                 onDragOver={(e) => { e.preventDefault(); setIsDragging(true) }}
diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx
index 3fb34531..2792c905 100644
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'
 import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Wrench, Star, Download } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
+import { StaggerList } from '@/components/common/StaggerList'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'
 import { getTreeEditorPath } from '@/lib/routing'
@@ -33,7 +34,7 @@ export function TreeGridView({
   const { canEditTree, canDeleteTree } = usePermissions()
 
   return (
-    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    <StaggerList className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {trees.map((tree) => (
         <div
           key={tree.id}
@@ -182,6 +183,6 @@ export function TreeGridView({
           </div>
         </div>
       ))}
-    </div>
+    </StaggerList>
   )
 }
diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx
index 19fae7ff..99260669 100644
--- a/frontend/src/components/procedural/IntakeFormModal.tsx
+++ b/frontend/src/components/procedural/IntakeFormModal.tsx
@@ -213,7 +213,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
-      <div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-[#0a0a0a] shadow-xl">
+      <div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-background shadow-xl">
         {/* Header */}
         <div className="border-b border-border px-6 py-4">
           <h2 className="text-lg font-semibold text-foreground">Project Information</h2>
diff --git a/frontend/src/components/session/ForkTreeModal.tsx b/frontend/src/components/session/ForkTreeModal.tsx
index a5dba031..61731ad8 100644
--- a/frontend/src/components/session/ForkTreeModal.tsx
+++ b/frontend/src/components/session/ForkTreeModal.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react'
 import { Modal } from '@/components/common/Modal'
 import { GitFork } from 'lucide-react'
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
 
 interface ForkTreeModalProps {
   isOpen: boolean
@@ -83,16 +84,12 @@ export function ForkTreeModal({
             <label htmlFor="tree-name" className="mb-1.5 block text-sm font-medium text-foreground">
               Tree Name <span className="text-red-400">*</span>
             </label>
-            <input
+            <Input
               id="tree-name"
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="My Custom Tree"
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20'
-              )}
             />
           </div>
 
@@ -100,17 +97,13 @@ export function ForkTreeModal({
             <label htmlFor="tree-description" className="mb-1.5 block text-sm font-medium text-foreground">
               Description <span className="text-muted-foreground">(optional)</span>
             </label>
-            <textarea
+            <Textarea
               id="tree-description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Describe what this tree helps troubleshoot..."
               rows={3}
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20',
-                'resize-none'
-              )}
+              className="resize-none"
             />
           </div>
         </div>
diff --git a/frontend/src/components/session/SaveSessionAsTreeModal.tsx b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
index 11f5635b..f0c68050 100644
--- a/frontend/src/components/session/SaveSessionAsTreeModal.tsx
+++ b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { X } from 'lucide-react'
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
 
 interface SaveSessionAsTreeModalProps {
   isOpen: boolean
@@ -60,7 +61,7 @@ export function SaveSessionAsTreeModal({
             <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-foreground">
               Tree Name <span className="text-muted-foreground">(optional)</span>
             </label>
-            <input
+            <Input
               id="treeName"
               type="text"
               value={treeName}
@@ -68,12 +69,6 @@ export function SaveSessionAsTreeModal({
               placeholder={defaultTreeName || "Auto-generated if left blank"}
               disabled={isSaving}
               maxLength={255}
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
             />
           </div>
 
@@ -82,19 +77,13 @@ export function SaveSessionAsTreeModal({
             <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
               Description <span className="text-muted-foreground">(optional)</span>
             </label>
-            <textarea
+            <Textarea
               id="description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Add a description for this tree"
               disabled={isSaving}
               rows={3}
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'disabled:opacity-50'
-              )}
             />
           </div>
 
diff --git a/frontend/src/components/session/SessionFilters.tsx b/frontend/src/components/session/SessionFilters.tsx
index 7f82b263..2548a062 100644
--- a/frontend/src/components/session/SessionFilters.tsx
+++ b/frontend/src/components/session/SessionFilters.tsx
@@ -160,7 +160,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           </button>
 
           {showDatePicker && (
-            <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-border bg-[#0a0a0a] p-4 shadow-lg">
+            <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-border bg-background p-4 shadow-lg">
               {/* Date Type Toggle */}
               <div className="mb-3 flex gap-2">
                 <button
diff --git a/frontend/src/components/session/ShareSessionModal.tsx b/frontend/src/components/session/ShareSessionModal.tsx
index d3ebd42b..fa271a51 100644
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -8,6 +8,7 @@ import { toast } from '@/lib/toast'
 import { Spinner } from '@/components/common/Spinner'
 import { Modal } from '@/components/common/Modal'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
 
 interface ShareSessionModalProps {
   sessionId: string
@@ -246,15 +247,11 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
             <label className="mb-2 block text-sm font-medium text-foreground">
               Share Name <span className="text-muted-foreground">(optional)</span>
             </label>
-            <input
+            <Input
               type="text"
               value={shareName}
               onChange={(e) => setShareName(e.target.value.slice(0, 100))}
               placeholder="e.g. Training link, Customer escalation"
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
-                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
-              )}
               maxLength={100}
             />
           </div>
diff --git a/frontend/src/components/session/StepRatingModal.tsx b/frontend/src/components/session/StepRatingModal.tsx
index 06966d72..f54f835c 100644
--- a/frontend/src/components/session/StepRatingModal.tsx
+++ b/frontend/src/components/session/StepRatingModal.tsx
@@ -4,6 +4,7 @@ import { StarRating } from '@/components/common/StarRating'
 import { cn } from '@/lib/utils'
 import type { Step } from '@/types'
 import { Button } from '@/components/ui/Button'
+import { Textarea } from '@/components/ui/Textarea'
 
 interface StepRatingData {
   rating: number
@@ -103,7 +104,7 @@ export function StepRatingModal({
             {librarySteps.map((step) => {
               const rating = getRating(step.id)
               return (
-                <div key={step.id} className="rounded-lg border border-border bg-[#0a0a0a] p-4">
+                <div key={step.id} className="rounded-lg border border-border bg-background p-4">
                   {/* Step Title */}
                   <h3 className="font-medium text-foreground">{step.title}</h3>
                   <p className="mt-1 text-sm text-muted-foreground capitalize">{step.step_type}</p>
@@ -164,7 +165,7 @@ export function StepRatingModal({
                     <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-foreground">
                       Review <span className="text-muted-foreground">(optional)</span>
                     </label>
-                    <textarea
+                    <Textarea
                       id={`review-${step.id}`}
                       value={rating?.review || ''}
                       onChange={(e) => handleReviewChange(step.id, e.target.value)}
@@ -172,12 +173,6 @@ export function StepRatingModal({
                       maxLength={500}
                       rows={2}
                       placeholder="Share your experience with this step..."
-                      className={cn(
-                        'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                        'placeholder:text-muted-foreground',
-                        'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                        'disabled:opacity-50'
-                      )}
                     />
                     <p className="mt-1 text-xs text-muted-foreground text-right">
                       {rating?.review?.length || 0}/500
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index 5dc01dd9..0611f5b6 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -4,6 +4,8 @@ import { cn } from '@/lib/utils'
 import { stepCategoriesApi } from '@/api/stepCategories'
 import type { StepCreate, StepCategory, StepCommand } from '@/types/step'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Textarea } from '@/components/ui/Textarea'
 
 interface StepFormProps {
   onSubmit: (data: StepCreate) => void
@@ -173,20 +175,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
         <label htmlFor="title" className="mb-2 block text-sm font-medium text-foreground">
           Title <span className="text-red-400">*</span>
         </label>
-        <input
+        <Input
           id="title"
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="Enter step title"
-          className={cn(
-            'w-full rounded-md border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20',
-            errors.title ? 'border-red-400/50' : 'border-border'
-          )}
+          error={errors.title}
         />
-        {errors.title && (
-          <p className="mt-1 text-xs text-red-400">{errors.title}</p>
-        )}
       </div>
 
       {/* Instructions */}
@@ -195,20 +191,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           Instructions <span className="text-red-400">*</span>
           <span className="ml-2 text-xs font-normal text-muted-foreground">(Markdown supported)</span>
         </label>
-        <textarea
+        <Textarea
           id="instructions"
           value={instructions}
           onChange={(e) => setInstructions(e.target.value)}
           placeholder="Describe what to do in this step..."
           rows={6}
-          className={cn(
-            'w-full rounded-md border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20',
-            errors.instructions ? 'border-red-400/50' : 'border-border'
-          )}
+          error={errors.instructions}
         />
-        {errors.instructions && (
-          <p className="mt-1 text-xs text-red-400">{errors.instructions}</p>
-        )}
       </div>
 
       {/* Help Text */}
@@ -216,13 +206,12 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
         <label htmlFor="helpText" className="mb-2 block text-sm font-medium text-foreground">
           Help Text <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
         </label>
-        <textarea
+        <Textarea
           id="helpText"
           value={helpText}
           onChange={(e) => setHelpText(e.target.value)}
           placeholder="Additional context or tips..."
           rows={3}
-          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
         />
       </div>
 
@@ -256,31 +245,22 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
                   </button>
                 </div>
                 <div className="space-y-2">
-                  <input
+                  <Input
                     type="text"
                     value={cmd.label}
                     onChange={(e) => updateCommand(index, 'label', e.target.value)}
                     placeholder="Command label (e.g., 'Restart service')"
-                    className={cn(
-                      'w-full rounded-md border bg-card px-3 py-1.5 text-sm text-foreground',
-                      errors[`command_${index}_label`] ? 'border-red-400/50' : 'border-border'
-                    )}
+                    className="py-1.5"
+                    error={errors[`command_${index}_label`]}
                   />
-                  <input
+                  <Input
                     type="text"
                     value={cmd.command}
                     onChange={(e) => updateCommand(index, 'command', e.target.value)}
                     placeholder="Command (e.g., 'systemctl restart nginx')"
-                    className={cn(
-                      'w-full rounded-md border bg-card px-3 py-1.5 font-mono text-sm text-foreground',
-                      errors[`command_${index}_command`] ? 'border-red-400/50' : 'border-border'
-                    )}
+                    className="py-1.5 font-mono"
+                    error={errors[`command_${index}_command`]}
                   />
-                  {(errors[`command_${index}_label`] || errors[`command_${index}_command`]) && (
-                    <p className="text-xs text-red-400">
-                      {errors[`command_${index}_label`] || errors[`command_${index}_command`]}
-                    </p>
-                  )}
                 </div>
               </div>
             ))}
@@ -312,14 +292,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           Tags <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
         </label>
         <div className="flex gap-2">
-          <input
+          <Input
             id="tagInput"
             type="text"
             value={tagInput}
             onChange={(e) => setTagInput(e.target.value)}
             onKeyDown={handleTagInputKeyDown}
             placeholder="Type tag and press Enter"
-            className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="flex-1"
           />
           <button
             type="button"
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index bf6a71a4..1f662ca2 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
         primary:
           'bg-gradient-brand text-brand-dark font-semibold shadow-lg shadow-primary/20 hover:opacity-90',
         secondary:
-          'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground hover:border-[rgba(255,255,255,0.12)] hover:bg-brand-border',
+          'bg-white/[0.04] border border-brand-border text-foreground hover:border-white/[0.12] hover:bg-brand-border',
         destructive:
           'bg-red-400/10 text-red-400 border border-red-400/20 hover:bg-red-400/20',
         ghost:
@@ -60,4 +60,5 @@ export function Button({
   )
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { buttonVariants }
diff --git a/frontend/src/components/ui/Input.tsx b/frontend/src/components/ui/Input.tsx
index f7ae46b0..98f75c83 100644
--- a/frontend/src/components/ui/Input.tsx
+++ b/frontend/src/components/ui/Input.tsx
@@ -12,7 +12,7 @@ export function Input({ className, error, id, ...props }: InputProps) {
         className={cn(
           'flex h-9 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
           'placeholder:text-muted-foreground',
-          'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+          'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',
           className
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
index 2ead45e7..288eb42b 100644
--- a/frontend/src/components/ui/Skeleton.tsx
+++ b/frontend/src/components/ui/Skeleton.tsx
@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils'
 
-interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+type SkeletonProps = React.HTMLAttributes<HTMLDivElement>
 
 export function Skeleton({ className, ...props }: SkeletonProps) {
   return (
@@ -27,6 +27,8 @@ export function CardSkeleton({ className }: { className?: string }) {
   )
 }
 
+const COL_WIDTHS = ['35%', '45%', '25%', '40%', '30%', '50%']
+
 export function TableRowSkeleton({ cols = 4 }: { cols?: number }) {
   return (
     <div className="flex items-center gap-4 px-4 py-3">
@@ -34,7 +36,7 @@ export function TableRowSkeleton({ cols = 4 }: { cols?: number }) {
         <Skeleton
           key={i}
           className="h-4"
-          style={{ width: `${20 + Math.random() * 30}%` }}
+          style={{ width: COL_WIDTHS[i % COL_WIDTHS.length] }}
         />
       ))}
     </div>
@@ -45,7 +47,7 @@ export function ListSkeleton({ count = 5, className }: { count?: number; classNa
   return (
     <div className={cn('space-y-3', className)}>
       {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg bg-[rgba(255,255,255,0.02)]">
+        <div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg bg-white/[0.02]">
           <Skeleton className="size-8 rounded-full shrink-0" />
           <div className="flex-1 space-y-2">
             <Skeleton className="h-4 w-2/3" />
diff --git a/frontend/src/components/ui/Textarea.tsx b/frontend/src/components/ui/Textarea.tsx
index 2d5c9a44..6109dd1b 100644
--- a/frontend/src/components/ui/Textarea.tsx
+++ b/frontend/src/components/ui/Textarea.tsx
@@ -12,7 +12,7 @@ export function Textarea({ className, error, id, ...props }: TextareaProps) {
         className={cn(
           'flex w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
           'placeholder:text-muted-foreground',
-          'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+          'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',
           className
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8f0ddb51..f5028a79 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -152,6 +152,11 @@
     80% { transform: rotate(-2deg); }
     100% { transform: rotate(0deg); }
   }
+
+  @keyframes stagger-fade-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
 }
 
 /* ── Root CSS variables (non-theme: glass, shadows, layout) ── */
@@ -254,6 +259,12 @@
   animation: breatheGlow 3s ease-in-out infinite alternate;
 }
 
+@utility stagger-item {
+  opacity: 0;
+  animation: stagger-fade-in 350ms var(--ease-out-smooth) forwards;
+  animation-delay: calc(var(--stagger-index, 0) * 50ms);
+}
+
 @utility rdp-custom {
   @apply text-foreground;
   & .rdp-month { @apply w-full; }
@@ -300,7 +311,8 @@
   .main-content {
     min-height: 0;
     min-width: 0;
-    overflow-y: auto;
+    /* Each page handles its own scrolling — full-height pages use
+       overflow-hidden, scrollable pages use overflow-y-auto */
   }
 
   @media (max-width: 767px) {
diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index 51bd8bdb..cbdd444f 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw, MessageSquareText, UserCog, AlertTriangle, Clock } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { accountsApi } from '@/api/accounts'
 import type { Account, AccountMember, AccountInvite } from '@/types'
 import { TransferOwnershipModal } from '@/components/account/TransferOwnershipModal'
@@ -159,6 +160,8 @@ export function AccountSettingsPage() {
   const sub = subscription?.subscription
 
   return (
+    <>
+    <PageMeta title="Account Settings" />
     <div>
       <div className="mb-8">
         <div className="flex items-center gap-3">
@@ -678,6 +681,7 @@ export function AccountSettingsPage() {
         <DeleteAccountModal onClose={() => setShowDeleteModal(false)} />
       )}
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/AssistantChatPage.tsx b/frontend/src/pages/AssistantChatPage.tsx
index 718c0182..ccdceba0 100644
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Sparkles, Send, Loader2, Flag } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { assistantChatApi } from '@/api/assistantChat'
 import { toast } from '@/lib/toast'
 import { ChatSidebar } from '@/components/assistant/ChatSidebar'
@@ -179,6 +180,8 @@ export default function AssistantChatPage() {
   }
 
   return (
+    <>
+    <PageMeta title="AI Assistant" />
     <div className="flex h-[calc(100vh-3.5rem)]">
       {/* Sidebar */}
       <ChatSidebar
@@ -223,7 +226,7 @@ export default function AssistantChatPage() {
                   <div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center">
                     <Sparkles size={14} className="text-primary" />
                   </div>
-                  <div className="bg-[rgba(255,255,255,0.04)] border border-brand-border rounded-2xl px-4 py-3">
+                  <div className="bg-white/[0.04] border border-brand-border rounded-2xl px-4 py-3">
                     <Loader2 size={16} className="animate-spin text-primary" />
                   </div>
                 </div>
@@ -242,7 +245,7 @@ export default function AssistantChatPage() {
                     onKeyDown={handleKeyDown}
                     placeholder="Ask about IT, networking, troubleshooting..."
                     rows={3}
-                    className="flex-1 resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
+                    className="flex-1 resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
                     style={{ borderColor: 'var(--glass-border)' }}
                     disabled={loading}
                   />
@@ -303,5 +306,6 @@ export default function AssistantChatPage() {
         chatTitle={chats.find(c => c.id === activeChatId)?.title ?? 'Chat'}
       />
     </div>
+    </>
   )
 }
diff --git a/frontend/src/pages/BatchStatusPage.tsx b/frontend/src/pages/BatchStatusPage.tsx
index 0bf98bc1..7d23a6b2 100644
--- a/frontend/src/pages/BatchStatusPage.tsx
+++ b/frontend/src/pages/BatchStatusPage.tsx
@@ -99,7 +99,7 @@ export default function BatchStatusPage() {
   const progressPercent = total > 0 ? Math.round((completed / total) * 100) : 0
 
   return (
-    <div className="container mx-auto max-w-3xl space-y-6 px-4 py-6 sm:px-6 sm:py-8">
+    <div className="overflow-y-auto h-full container mx-auto max-w-3xl space-y-6 px-4 py-6 sm:px-6 sm:py-8">
       {/* Breadcrumb */}
       <div className="flex items-center justify-between">
         <button
diff --git a/frontend/src/pages/FeedbackPage.tsx b/frontend/src/pages/FeedbackPage.tsx
index 385b17b7..271ff096 100644
--- a/frontend/src/pages/FeedbackPage.tsx
+++ b/frontend/src/pages/FeedbackPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from 'react'
 import { MessageSquareText, Send, CheckCircle2, ChevronDown } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { useAuthStore } from '@/store/authStore'
 import { feedbackApi } from '@/api'
 import { cn } from '@/lib/utils'
@@ -130,6 +131,8 @@ export function FeedbackPage() {
   }
 
   return (
+    <div className="overflow-y-auto h-full">
+    <PageMeta title="Feedback" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       {/* Page header */}
       <div className="mb-8">
@@ -273,6 +276,7 @@ export function FeedbackPage() {
         )}
       </div>
     </div>
+    </div>
   )
 }
 
diff --git a/frontend/src/pages/ForgotPasswordPage.tsx b/frontend/src/pages/ForgotPasswordPage.tsx
index 62058a8f..268225e8 100644
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { authApi } from '@/api/auth'
 import { BrandLogo } from '@/components/common/BrandLogo'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function ForgotPasswordPage() {
@@ -25,6 +26,8 @@ export function ForgotPasswordPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Forgot Password" description="Reset your ResolutionFlow password" />
     <div className="flex min-h-screen items-center justify-center bg-card px-4">
       <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
 
@@ -109,6 +112,7 @@ export function ForgotPasswordPage() {
         )}
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/GuideDetailPage.tsx b/frontend/src/pages/GuideDetailPage.tsx
index 95e7c84d..a096852a 100644
--- a/frontend/src/pages/GuideDetailPage.tsx
+++ b/frontend/src/pages/GuideDetailPage.tsx
@@ -9,7 +9,7 @@ export default function GuideDetailPage() {
 
   if (!guide) {
     return (
-      <div className="flex flex-col items-center justify-center h-full text-center p-6">
+      <div className="flex flex-col items-center justify-center h-full text-center p-6 overflow-y-auto">
         <h2 className="text-lg font-heading font-semibold text-foreground mb-2">Guide Not Found</h2>
         <p className="text-sm text-muted-foreground mb-4">The guide you're looking for doesn't exist.</p>
         <Link
@@ -25,7 +25,7 @@ export default function GuideDetailPage() {
   const Icon = guide.icon
 
   return (
-    <div className="p-6 max-w-3xl mx-auto">
+    <div className="overflow-y-auto h-full p-6 max-w-3xl mx-auto">
       {/* Breadcrumb */}
       <nav className="flex items-center gap-1.5 text-xs text-muted-foreground mb-6">
         <Link to="/guides" className="hover:text-primary transition-colors">
diff --git a/frontend/src/pages/GuidesHubPage.tsx b/frontend/src/pages/GuidesHubPage.tsx
index c4b20b6c..a0809c70 100644
--- a/frontend/src/pages/GuidesHubPage.tsx
+++ b/frontend/src/pages/GuidesHubPage.tsx
@@ -1,9 +1,12 @@
 import { BookOpen } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { guides } from '@/data/guides'
 import { GuideCard } from '@/components/guides/GuideCard'
 
 export default function GuidesHubPage() {
   return (
+    <div className="overflow-y-auto h-full">
+    <PageMeta title="Guides" />
     <div className="p-6 max-w-5xl mx-auto">
       {/* Header */}
       <div className="mb-8">
@@ -25,5 +28,6 @@ export default function GuidesHubPage() {
         ))}
       </div>
     </div>
+    </div>
   )
 }
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 0ec2b34f..b2e10059 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -3,6 +3,7 @@ import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { PasswordInput } from '@/components/common/PasswordInput'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function LoginPage() {
@@ -40,6 +41,8 @@ export function LoginPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Sign In" description="Sign in to your ResolutionFlow account" />
     <div className="flex min-h-screen items-center justify-center bg-background px-4">
       {/* Atmosphere orbs */}
       <div
@@ -106,7 +109,7 @@ export function LoginPage() {
                 className={cn(
                   'block w-full rounded-[10px] border border-border bg-card px-3 py-2.5',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+                  'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="you@example.com"
@@ -127,7 +130,7 @@ export function LoginPage() {
                 className={cn(
                   'block w-full rounded-[10px] border border-border bg-card px-3 py-2.5',
                   'text-foreground placeholder:text-muted-foreground',
-                  'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+                  'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="••••••••••"
@@ -164,6 +167,7 @@ export function LoginPage() {
         </form>
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/MaintenanceFlowDetailPage.tsx b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
index caec519c..12d388d0 100644
--- a/frontend/src/pages/MaintenanceFlowDetailPage.tsx
+++ b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
@@ -124,7 +124,7 @@ export default function MaintenanceFlowDetailPage() {
   const hasActiveBatch = recentSessions.some(s => s.started_at && !s.completed_at && s.batch_id)
 
   return (
-    <div className="container mx-auto max-w-4xl space-y-6 px-4 py-6 sm:px-6 sm:py-8">
+    <div className="overflow-y-auto h-full container mx-auto max-w-4xl space-y-6 px-4 py-6 sm:px-6 sm:py-8">
       {/* Active batch banner */}
       {hasActiveBatch && !bannerDismissed && (
         <ActiveBatchBanner
diff --git a/frontend/src/pages/MySharesPage.tsx b/frontend/src/pages/MySharesPage.tsx
index 020f7bfd..373ae67d 100644
--- a/frontend/src/pages/MySharesPage.tsx
+++ b/frontend/src/pages/MySharesPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Globe, Users, Copy, Check, Link2, ExternalLink, Trash2, ArrowLeft } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { Button } from '@/components/ui/Button'
 import { Spinner } from '@/components/common/Spinner'
 import { EmptyState } from '@/components/common/EmptyState'
@@ -121,6 +122,8 @@ export default function MySharesPage() {
   }
 
   return (
+    <div className="overflow-y-auto h-full">
+    <PageMeta title="My Shares" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       {/* Back link */}
       <Link
@@ -241,5 +244,6 @@ export default function MySharesPage() {
         confirmLabel="Revoke"
       />
     </div>
+    </div>
   )
 }
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index 44dabe7f..1be76b7d 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
+import { StaggerList } from '@/components/common/StaggerList'
 import { Button } from '@/components/ui/Button'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
@@ -116,6 +118,8 @@ export function MyTreesPage() {
   }
 
   return (
+    <div className="overflow-y-auto h-full">
+    <PageMeta title="My Flows" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-6 flex items-center justify-between sm:mb-8">
         <div>
@@ -214,7 +218,7 @@ export function MyTreesPage() {
           </div>
         </div>
       ) : (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <StaggerList className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {trees.map((tree) => (
             <div
               key={tree.id}
@@ -349,7 +353,7 @@ export function MyTreesPage() {
               </div>
             </div>
           ))}
-        </div>
+        </StaggerList>
       )}
 
       {/* Delete Confirmation */}
@@ -389,6 +393,7 @@ export function MyTreesPage() {
       )}
 
     </div>
+    </div>
   )
 }
 
diff --git a/frontend/src/pages/QuickStartPage.tsx b/frontend/src/pages/QuickStartPage.tsx
index c90a4b9b..b3149bea 100644
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Search, Loader2, Star, ChevronLeft, ChevronRight, GitBranch } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem, TreeFilters } from '@/types'
@@ -277,6 +278,8 @@ export function QuickStartPage() {
   ]
 
   return (
+    <div className="overflow-y-auto h-full">
+    <PageMeta title="Dashboard" />
     <div className="p-6 space-y-6">
       {/* Greeting */}
       <div className="fade-in" style={{ animationDelay: '100ms' }}>
@@ -646,6 +649,7 @@ export function QuickStartPage() {
       )}
 
     </div>
+    </div>
   )
 }
 
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 7b2eae0f..9565cffd 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -4,6 +4,7 @@ import { useAuthStore } from '@/store/authStore'
 import { inviteApi } from '@/api/invite'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { PasswordInput } from '@/components/common/PasswordInput'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function RegisterPage() {
@@ -76,6 +77,8 @@ export function RegisterPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Create Account" description="Create your ResolutionFlow account to start building guided troubleshooting flows" />
     <div className="flex min-h-screen items-center justify-center bg-black px-4">
       {/* Subtle radial overlay */}
       <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
@@ -251,6 +254,7 @@ export function RegisterPage() {
         </form>
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index afeb563b..eb20516d 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -4,6 +4,7 @@ import { authApi } from '@/api/auth'
 import { toast } from '@/lib/toast'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { PasswordInput } from '@/components/common/PasswordInput'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function ResetPasswordPage() {
@@ -72,6 +73,8 @@ export function ResetPasswordPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Reset Password" description="Set a new password for your ResolutionFlow account" />
     <div className="flex min-h-screen items-center justify-center bg-black px-4">
       <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
 
@@ -180,6 +183,7 @@ export function ResetPasswordPage() {
         )}
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/SessionDetailPage.tsx b/frontend/src/pages/SessionDetailPage.tsx
index 71710514..41e431fd 100644
--- a/frontend/src/pages/SessionDetailPage.tsx
+++ b/frontend/src/pages/SessionDetailPage.tsx
@@ -340,7 +340,7 @@ export function SessionDetailPage() {
   const outcomeConfig = session.outcome ? OUTCOME_CONFIG[session.outcome] : null
 
   return (
-    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+    <div className="overflow-y-auto h-full container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       {/* Back nav */}
       <button
         onClick={() => navigate('/sessions')}
diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx
index ec3d5e4e..c1dc8bfa 100644
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
+import { PageMeta } from '@/components/common/PageMeta'
+import { StaggerList } from '@/components/common/StaggerList'
 import { sessionsApi } from '@/api/sessions'
 import { treesApi } from '@/api/trees'
 import type { Session, TreeListItem } from '@/types'
@@ -154,6 +156,8 @@ export function SessionHistoryPage() {
   }
 
   return (
+    <div className="overflow-y-auto h-full">
+    <PageMeta title="Session History" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-8">
         <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Session History</h1>
@@ -210,7 +214,8 @@ export function SessionHistoryPage() {
           }
         />
       ) : (
-        <div className="space-y-4">
+        <>
+        <StaggerList className="space-y-4">
           {sessions.map((session) => (
             <div
               key={session.id}
@@ -298,18 +303,20 @@ export function SessionHistoryPage() {
               </div>
             </div>
           ))}
-          {hasMore ? (
-            <p className="text-center text-sm text-muted-foreground py-4">
-              Showing the 50 most recent sessions
-            </p>
-          ) : sessions.length > 0 ? (
-            <p className="text-center text-sm text-muted-foreground py-4">
-              Showing all {sessions.length} sessions
-            </p>
-          ) : null}
-        </div>
+        </StaggerList>
+        {hasMore ? (
+          <p className="text-center text-sm text-muted-foreground py-4">
+            Showing the 50 most recent sessions
+          </p>
+        ) : sessions.length > 0 ? (
+          <p className="text-center text-sm text-muted-foreground py-4">
+            Showing all {sessions.length} sessions
+          </p>
+        ) : null}
+        </>
       )}
     </div>
+    </div>
   )
 }
 
diff --git a/frontend/src/pages/StepLibraryPage.tsx b/frontend/src/pages/StepLibraryPage.tsx
index 27daa66a..c5e56aeb 100644
--- a/frontend/src/pages/StepLibraryPage.tsx
+++ b/frontend/src/pages/StepLibraryPage.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Bookmark, Trash2 } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { Button } from '@/components/ui/Button'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
@@ -87,6 +88,8 @@ export default function StepLibraryPage() {
   }
 
   return (
+    <>
+    <PageMeta title="Step Library" />
     <div className="flex h-full flex-col">
       {/* Page Header */}
       <div className="flex items-center justify-between border-b border-border px-6 py-4">
@@ -167,5 +170,6 @@ export default function StepLibraryPage() {
       )}
 
     </div>
+    </>
   )
 }
diff --git a/frontend/src/pages/SurveyPage.tsx b/frontend/src/pages/SurveyPage.tsx
index d70165d5..2accd04a 100644
--- a/frontend/src/pages/SurveyPage.tsx
+++ b/frontend/src/pages/SurveyPage.tsx
@@ -274,13 +274,13 @@ export default function SurveyPage() {
     return (
       <div className="min-h-screen bg-background text-foreground">
         <div className="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
-          <div className="absolute -top-32 right-0 h-[500px] w-[500px] rounded-full opacity-[0.03]" style={{ background: 'radial-gradient(circle, #06b6d4, transparent 70%)' }} />
+          <div className="absolute -top-32 right-0 h-[500px] w-[500px] rounded-full opacity-[0.03]" style={{ background: 'radial-gradient(circle, var(--color-primary), transparent 70%)' }} />
           <div className="absolute -bottom-32 left-0 h-[400px] w-[400px] rounded-full opacity-[0.02]" style={{ background: 'radial-gradient(circle, #a855f7, transparent 70%)' }} />
         </div>
         <div className="relative z-10 mx-auto max-w-[680px] px-4 sm:px-5">
           <div className="text-center pt-20 sm:pt-32 animate-fade-in-up">
             <div className="w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center" style={{ background: 'rgba(6, 182, 212, 0.1)' }}>
-              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
             </div>
             <h2 className="font-heading text-2xl font-bold mb-2.5">Already Submitted</h2>
             <p className="text-muted-foreground text-sm max-w-[440px] mx-auto leading-relaxed mb-3">
@@ -341,7 +341,7 @@ export default function SurveyPage() {
         {/* Hero — visible only on first slide */}
         {currentSlide === 0 && !isComplete && (
           <div className="text-center pt-10 pb-8 sm:pt-[72px] sm:pb-10 animate-fade-in-up">
-            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] sm:text-[11px] font-semibold font-label uppercase tracking-widest mb-4 sm:mb-5" style={{ background: 'rgba(6, 182, 212, 0.1)', border: '1px solid rgba(6, 182, 212, 0.15)', color: '#06b6d4' }}>
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] sm:text-[11px] font-semibold font-label uppercase tracking-widest mb-4 sm:mb-5" style={{ background: 'rgba(6, 182, 212, 0.1)', border: '1px solid rgba(6, 182, 212, 0.15)', color: 'var(--color-primary)' }}>
               <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
               FlowPilot Research
             </div>
@@ -353,15 +353,15 @@ export default function SurveyPage() {
             </p>
             <div className="flex flex-wrap justify-center gap-4 sm:gap-7 mt-4 sm:mt-5 text-[11px] sm:text-[12px] text-muted-foreground">
               <span className="flex items-center gap-1.5">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                 ~5 minutes
               </span>
               <span className="flex items-center gap-1.5">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                 Confidential
               </span>
               <span className="flex items-center gap-1.5">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" strokeWidth="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                 16 questions
               </span>
             </div>
@@ -376,7 +376,7 @@ export default function SurveyPage() {
                 key={i}
                 className="flex-1 h-1 sm:h-[3px] rounded-full transition-colors duration-300"
                 style={{
-                  background: i < currentSlide ? '#34d399' : i === currentSlide ? 'linear-gradient(90deg, #06b6d4, #22d3ee)' : 'var(--color-border)',
+                  background: i < currentSlide ? 'oklch(0.76 0.15 163)' : i === currentSlide ? 'linear-gradient(90deg, var(--color-primary), var(--color-brand-gradient-to))' : 'var(--color-border)',
                 }}
               />
             ))}
@@ -424,7 +424,7 @@ export default function SurveyPage() {
         {isComplete && (
           <div className="text-center pt-10 sm:pt-16 animate-fade-in-up">
             <div className="w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center" style={{ background: 'rgba(52, 211, 153, 0.1)' }}>
-              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#34d399" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="oklch(0.76 0.15 163)" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
             </div>
             <h2 className="font-heading text-2xl font-bold mb-2.5">Response Submitted!</h2>
             <p className="text-muted-foreground text-sm max-w-[440px] mx-auto mb-6 sm:mb-8 leading-relaxed">
@@ -445,7 +445,7 @@ export default function SurveyPage() {
                     placeholder="your@email.com"
                     className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-foreground placeholder:text-brand-text-muted focus:outline-hidden"
                     style={{ background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--glass-border)' }}
-                    onFocus={e => { e.currentTarget.style.borderColor = 'rgba(6, 182, 212, 0.4)' }}
+                    onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)' }}
                     onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)' }}
                     disabled={emailSending}
                   />
@@ -519,8 +519,8 @@ export default function SurveyPage() {
 
 function ScenarioBox({ scenario }: { scenario: { title: string; symptom: string; details: string } }) {
   return (
-    <div className="rounded-[10px] p-3.5 px-4 sm:p-4 sm:px-5 mb-4 text-[13px]" style={{ background: 'linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.03))', border: '1px solid rgba(6, 182, 212, 0.12)' }}>
-      <div className="font-label text-[10px] uppercase tracking-widest mb-2 font-semibold" style={{ color: '#06b6d4' }}>{scenario.title}</div>
+    <div className="rounded-[10px] p-3.5 px-4 sm:p-4 sm:px-5 mb-4 text-[13px]" style={{ background: 'linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.03))', border: '1px solid color-mix(in srgb, var(--color-primary) 12%, transparent)' }}>
+      <div className="font-label text-[10px] uppercase tracking-widest mb-2 font-semibold" style={{ color: 'var(--color-primary)' }}>{scenario.title}</div>
       <div className="sm:flex gap-2 mb-1">
         <span className="text-muted-foreground font-medium whitespace-nowrap">Symptom:</span>
         <span className="text-muted-foreground/80">{scenario.symptom}</span>
@@ -535,8 +535,8 @@ function ScenarioBox({ scenario }: { scenario: { title: string; symptom: string;
 
 function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQuestion; answer?: string | string[]; setAnswer: (id: string, val: string | string[]) => void }) {
   return (
-    <div className="glass-card-static p-4 sm:p-7 mb-3 sm:mb-4 transition-[border-color] duration-200 focus-within:border-[rgba(6,182,212,0.25)]!">
-      <div className="font-label text-[11px] mb-1.5 font-medium" style={{ color: '#06b6d4' }}>Q{q.num}</div>
+    <div className="glass-card-static p-4 sm:p-7 mb-3 sm:mb-4 transition-[border-color] duration-200 focus-within:border-primary/25!">
+      <div className="font-label text-[11px] mb-1.5 font-medium" style={{ color: 'var(--color-primary)' }}>Q{q.num}</div>
       <div className="font-heading text-[14px] sm:text-[15px] font-semibold text-foreground leading-snug mb-1">{q.text}</div>
       {q.hint && <div className="text-[12px] text-muted-foreground mb-3 sm:mb-4 leading-snug">{q.hint}</div>}
       {!q.hint && <div className="mb-3 sm:mb-4" />}
@@ -550,12 +550,12 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
               className="flex items-start gap-3 px-3.5 py-3 sm:px-4 rounded-[9px] text-left text-[13px] sm:text-sm transition-all duration-150 select-none"
               style={{
                 background: answer === opt ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
-                border: `1px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}`,
+                border: `1px solid ${answer === opt ? 'var(--color-primary)' : 'var(--glass-border)'}`,
                 color: answer === opt ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
               }}
             >
-              <div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}` }}>
-                {answer === opt && <div className="w-2 h-2 rounded-full" style={{ background: '#06b6d4' }} />}
+              <div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? 'var(--color-primary)' : 'var(--glass-border)'}` }}>
+                {answer === opt && <div className="w-2 h-2 rounded-full" style={{ background: 'var(--color-primary)' }} />}
               </div>
               <span className="leading-snug">{opt}</span>
             </button>
@@ -577,11 +577,11 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
                 className="flex items-start gap-3 px-3.5 py-3 sm:px-4 rounded-[9px] text-left text-[13px] sm:text-sm transition-all duration-150 select-none"
                 style={{
                   background: selected ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
-                  border: `1px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`,
+                  border: `1px solid ${selected ? 'var(--color-primary)' : 'var(--glass-border)'}`,
                   color: selected ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
                 }}
               >
-                <div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`, background: selected ? '#06b6d4' : 'transparent', color: selected ? 'white' : 'transparent' }}>
+                <div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? 'var(--color-primary)' : 'var(--glass-border)'}`, background: selected ? 'var(--color-primary)' : 'transparent', color: selected ? 'white' : 'transparent' }}>
                   {'\u2713'}
                 </div>
                 <span className="leading-snug">{opt}</span>
@@ -605,7 +605,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
             background: 'rgba(16, 17, 20, 0.6)',
             border: '1px solid var(--glass-border)',
           }}
-          onFocus={e => { e.currentTarget.style.borderColor = 'rgba(6, 182, 212, 0.4)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(6, 182, 212, 0.1)' }}
+          onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(6, 182, 212, 0.1)' }}
           onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)'; e.currentTarget.style.boxShadow = 'none' }}
         />
       )}
@@ -621,7 +621,7 @@ function RangeInput({ question: q, value, onChange }: { question: SurveyQuestion
   const numVal = value ? parseInt(value) : q.min || 0
   return (
     <div className="py-2">
-      <div className="text-center font-label text-2xl font-semibold mb-3" style={{ color: '#06b6d4' }}>
+      <div className="text-center font-label text-2xl font-semibold mb-3" style={{ color: 'var(--color-primary)' }}>
         {numVal}{q.suffix || ''}
       </div>
       <input
@@ -633,7 +633,7 @@ function RangeInput({ question: q, value, onChange }: { question: SurveyQuestion
         onChange={e => onChange(e.target.value + (q.suffix || ''))}
         className="w-full h-2 sm:h-1 rounded-full appearance-none cursor-pointer touch-none"
         style={{
-          background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) 100%)`,
+          background: `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) 100%)`,
         }}
       />
       <div className="flex justify-between text-[11px] text-muted-foreground mt-2.5">
@@ -730,7 +730,7 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
           className="flex items-center gap-2.5 sm:gap-3 px-3 py-3 sm:px-4 sm:py-2.5 rounded-[9px] text-[13px] sm:text-sm transition-all duration-150 select-none"
           style={{
             background: overIdx === idx ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
-            border: `1px solid ${overIdx === idx || draggingIdx === idx ? '#06b6d4' : 'var(--glass-border)'}`,
+            border: `1px solid ${overIdx === idx || draggingIdx === idx ? 'var(--color-primary)' : 'var(--glass-border)'}`,
             opacity: draggingIdx === idx ? 0.5 : 1,
             cursor: 'grab',
             color: 'var(--color-muted-foreground)',
@@ -739,7 +739,7 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
           <div className="shrink-0 text-brand-text-muted">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/></svg>
           </div>
-          <div className="font-label text-[11px] font-semibold w-5 text-center shrink-0" style={{ color: '#06b6d4' }}>{idx + 1}</div>
+          <div className="font-label text-[11px] font-semibold w-5 text-center shrink-0" style={{ color: 'var(--color-primary)' }}>{idx + 1}</div>
           <div className="flex-1 leading-snug">{item}</div>
         </div>
       ))}
diff --git a/frontend/src/pages/SurveyThankYouPage.tsx b/frontend/src/pages/SurveyThankYouPage.tsx
index 49398454..eb3527ae 100644
--- a/frontend/src/pages/SurveyThankYouPage.tsx
+++ b/frontend/src/pages/SurveyThankYouPage.tsx
@@ -1,7 +1,10 @@
 import { BrandLogo } from '@/components/common/BrandLogo'
+import { PageMeta } from '@/components/common/PageMeta'
 
 export default function SurveyThankYouPage() {
   return (
+    <>
+    <PageMeta title="Thank You" description="Thank you for your feedback on ResolutionFlow" />
     <div className="min-h-screen bg-background text-foreground">
       {/* Atmosphere orbs */}
       <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
@@ -29,7 +32,7 @@ export default function SurveyThankYouPage() {
         <div className="text-center pt-[120px] animate-fade-in-up">
           {/* Success icon */}
           <div className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style={{ background: 'rgba(52, 211, 153, 0.1)', border: '1px solid rgba(52, 211, 153, 0.15)' }}>
-            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#34d399" strokeWidth="2">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="oklch(0.76 0.15 163)" strokeWidth="2">
               <path d="M20 6L9 17l-5-5"/>
             </svg>
           </div>
@@ -52,7 +55,7 @@ export default function SurveyThankYouPage() {
             className="glass-card-static p-6 text-center max-w-[480px] mx-auto"
           >
             <div className="flex items-center justify-center gap-2 mb-3">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" strokeWidth="2">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
               </svg>
               <span className="font-label text-[0.625rem] uppercase tracking-widest text-primary font-semibold">
@@ -72,5 +75,6 @@ export default function SurveyThankYouPage() {
         </div>
       </div>
     </div>
+    </>
   )
 }
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 1865314c..76b0a67d 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback, useMemo } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { X, RotateCcw, Play, FileUp } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
 import { Button } from '@/components/ui/Button'
 import { treesApi } from '@/api/trees'
 import { categoriesApi } from '@/api/categories'
@@ -265,6 +266,8 @@ export function TreeLibraryPage() {
     selectedCategoryId || selectedTags.length > 0 || searchQuery || selectedFolderId
 
   return (
+    <div className="overflow-y-auto h-full">
+    <PageMeta title="Flow Library" />
     <div className="min-h-full">
       <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
           <div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
@@ -596,6 +599,7 @@ export function TreeLibraryPage() {
         />
       )}
     </div>
+    </div>
   )
 }
 
diff --git a/frontend/src/pages/VerifyEmailPage.tsx b/frontend/src/pages/VerifyEmailPage.tsx
index eb6e5ebb..c1b733e2 100644
--- a/frontend/src/pages/VerifyEmailPage.tsx
+++ b/frontend/src/pages/VerifyEmailPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { useSearchParams, Link } from 'react-router-dom'
 import { CheckCircle2, XCircle, Loader2 } from 'lucide-react'
 import { authApi } from '@/api/auth'
+import { PageMeta } from '@/components/common/PageMeta'
 import { cn } from '@/lib/utils'
 
 export function VerifyEmailPage() {
@@ -23,6 +24,8 @@ export function VerifyEmailPage() {
   }, [token])
 
   return (
+    <>
+    <PageMeta title="Verify Email" description="Verify your ResolutionFlow email address" />
     <div className="flex min-h-screen items-center justify-center bg-background p-4">
       <div className="glass-card-static w-full max-w-md p-8 text-center">
         {status === 'loading' && (
@@ -55,8 +58,8 @@ export function VerifyEmailPage() {
             <Link
               to="/"
               className={cn(
-                'mt-6 inline-flex items-center rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-brand-border px-6 py-2 text-sm font-medium text-foreground',
-                'hover:border-[rgba(255,255,255,0.12)]'
+                'mt-6 inline-flex items-center rounded-[10px] bg-white/[0.04] border border-brand-border px-6 py-2 text-sm font-medium text-foreground',
+                'hover:border-white/[0.12]'
               )}
             >
               Go to Dashboard
@@ -65,6 +68,7 @@ export function VerifyEmailPage() {
         )}
       </div>
     </div>
+    </>
   )
 }
 
diff --git a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
index 83e3cd53..56b52822 100644
--- a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
+++ b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
@@ -73,7 +73,7 @@ export default function ChatRetentionSettingsPage() {
               onChange={e => setRetentionDays(e.target.value)}
               min={1}
               max={365}
-              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
               style={{ borderColor: 'var(--glass-border)' }}
             />
             <p className="text-xs text-muted-foreground mt-1">
@@ -91,7 +91,7 @@ export default function ChatRetentionSettingsPage() {
               onChange={e => setMaxCount(e.target.value)}
               min={10}
               max={10000}
-              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
               style={{ borderColor: 'var(--glass-border)' }}
             />
             <p className="text-xs text-muted-foreground mt-1">
diff --git a/frontend/src/pages/account/ProfileSettingsPage.tsx b/frontend/src/pages/account/ProfileSettingsPage.tsx
index 33169e53..cb64b364 100644
--- a/frontend/src/pages/account/ProfileSettingsPage.tsx
+++ b/frontend/src/pages/account/ProfileSettingsPage.tsx
@@ -10,7 +10,7 @@ import type { UserUpdate } from '@/types'
 const inputClass = cn(
   'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
   'text-foreground placeholder:text-muted-foreground',
-  'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+  'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20'
 )
 
 export function ProfileSettingsPage() {
@@ -145,8 +145,8 @@ export function ProfileSettingsPage() {
               to="/change-password"
               className={cn(
                 'inline-flex items-center rounded-[10px] px-4 py-2 text-sm font-medium',
-                'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground',
-                'hover:border-[rgba(255,255,255,0.12)]'
+                'bg-white/[0.04] border border-brand-border text-foreground',
+                'hover:border-white/[0.12]'
               )}
             >
               Change Password
diff --git a/frontend/src/pages/account/TeamCategoriesPage.tsx b/frontend/src/pages/account/TeamCategoriesPage.tsx
index ffa5c3b9..480c9332 100644
--- a/frontend/src/pages/account/TeamCategoriesPage.tsx
+++ b/frontend/src/pages/account/TeamCategoriesPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
-import { cn } from '@/lib/utils'
+import { Input } from '@/components/ui/Input'
 import { toast } from '@/lib/toast'
 import { Modal } from '@/components/common/Modal'
 import { PageHeader } from '@/components/common/PageHeader'
@@ -79,8 +79,6 @@ export function TeamCategoriesPage() {
     setForm({ name: cat.name, slug: cat.slug, description: cat.description || '' })
   }
 
-  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
-
   return (
     <div className="space-y-6">
       <PageHeader
@@ -141,15 +139,15 @@ export function TeamCategoriesPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
-            <input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" className={inputCn} />
+            <Input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
-            <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inputCn} />
+            <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
-            <input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" className={inputCn} />
+            <Input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" />
           </div>
         </div>
       </Modal>
@@ -166,15 +164,15 @@ export function TeamCategoriesPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
-            <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className={inputCn} />
+            <Input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
-            <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inputCn} />
+            <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
-            <input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" className={inputCn} />
+            <Input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" />
           </div>
         </div>
       </Modal>
diff --git a/frontend/src/pages/admin/FeatureFlagsPage.tsx b/frontend/src/pages/admin/FeatureFlagsPage.tsx
index 42ecf482..d9438024 100644
--- a/frontend/src/pages/admin/FeatureFlagsPage.tsx
+++ b/frontend/src/pages/admin/FeatureFlagsPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, ToggleLeft } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
 import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -146,7 +147,7 @@ export function FeatureFlagsPage() {
     },
   ]
 
-  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
+  const selectClass = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="space-y-8">
@@ -197,15 +198,15 @@ export function FeatureFlagsPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Flag Key</label>
-            <input type="text" value={createForm.flag_key} onChange={(e) => setCreateForm({ ...createForm, flag_key: e.target.value })} placeholder="e.g. custom_branding" className={inputCn} />
+            <Input type="text" value={createForm.flag_key} onChange={(e) => setCreateForm({ ...createForm, flag_key: e.target.value })} placeholder="e.g. custom_branding" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Display Name</label>
-            <input type="text" value={createForm.display_name} onChange={(e) => setCreateForm({ ...createForm, display_name: e.target.value })} placeholder="e.g. Custom Branding" className={inputCn} />
+            <Input type="text" value={createForm.display_name} onChange={(e) => setCreateForm({ ...createForm, display_name: e.target.value })} placeholder="e.g. Custom Branding" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
-            <input type="text" value={createForm.description ?? ''} onChange={(e) => setCreateForm({ ...createForm, description: e.target.value || null })} placeholder="Optional description" className={inputCn} />
+            <Input type="text" value={createForm.description ?? ''} onChange={(e) => setCreateForm({ ...createForm, description: e.target.value || null })} placeholder="Optional description" />
           </div>
         </div>
       </Modal>
@@ -222,11 +223,11 @@ export function FeatureFlagsPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
-            <input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" className={inputCn} />
+            <Input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Feature Flag</label>
-            <select value={overrideForm.flag_id} onChange={(e) => setOverrideForm({ ...overrideForm, flag_id: e.target.value })} className={inputCn}>
+            <select value={overrideForm.flag_id} onChange={(e) => setOverrideForm({ ...overrideForm, flag_id: e.target.value })} className={selectClass}>
               <option value="">Select a flag...</option>
               {flags.map(f => <option key={f.id} value={f.id}>{f.display_name}</option>)}
             </select>
@@ -237,7 +238,7 @@ export function FeatureFlagsPage() {
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
-            <input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason" className={inputCn} />
+            <Input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason" />
           </div>
         </div>
       </Modal>
diff --git a/frontend/src/pages/admin/GlobalCategoriesPage.tsx b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
index aa1d8158..bf633381 100644
--- a/frontend/src/pages/admin/GlobalCategoriesPage.tsx
+++ b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
@@ -1,12 +1,12 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
 import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
 import { adminApi } from '@/api/admin'
 import { toast } from '@/lib/toast'
-import { cn } from '@/lib/utils'
 import type { AdminCategory, GlobalCategoryCreate } from '@/types/admin'
 
 export function GlobalCategoriesPage() {
@@ -88,8 +88,6 @@ export function GlobalCategoriesPage() {
     },
   ]
 
-  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
-
   return (
     <div className="space-y-6">
       <PageHeader
@@ -127,15 +125,15 @@ export function GlobalCategoriesPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
-            <input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" className={inputCn} />
+            <Input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
-            <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="e.g. networking" className={inputCn} />
+            <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="e.g. networking" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
-            <input type="text" value={form.description ?? ''} onChange={(e) => setForm({ ...form, description: e.target.value || null })} placeholder="Optional description" className={inputCn} />
+            <Input type="text" value={form.description ?? ''} onChange={(e) => setForm({ ...form, description: e.target.value || null })} placeholder="Optional description" />
           </div>
         </div>
       </Modal>
@@ -156,15 +154,15 @@ export function GlobalCategoriesPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
-            <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="e.g. Networking" className={inputCn} />
+            <Input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="e.g. Networking" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
-            <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="e.g. networking" className={inputCn} />
+            <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="e.g. networking" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
-            <input type="text" value={form.description ?? ''} onChange={(e) => setForm({ ...form, description: e.target.value || null })} placeholder="Optional description" className={inputCn} />
+            <Input type="text" value={form.description ?? ''} onChange={(e) => setForm({ ...form, description: e.target.value || null })} placeholder="Optional description" />
           </div>
         </div>
       </Modal>
diff --git a/frontend/src/pages/admin/InviteCodesPage.tsx b/frontend/src/pages/admin/InviteCodesPage.tsx
index d938d3b7..77057a9c 100644
--- a/frontend/src/pages/admin/InviteCodesPage.tsx
+++ b/frontend/src/pages/admin/InviteCodesPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Copy, Trash2, Ticket, Mail, MailCheck, RefreshCw } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
 import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -108,7 +109,7 @@ export function InviteCodesPage() {
     }
   }
 
-  const inputClass = cn(
+  const selectClass = cn(
     'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
     'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
@@ -254,12 +255,11 @@ export function InviteCodesPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Recipient Email</label>
-            <input
+            <Input
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="Optional — will send invite email"
-              className={inputClass}
             />
           </div>
 
@@ -273,7 +273,7 @@ export function InviteCodesPage() {
                 setAssignedPlan(plan)
                 if (plan === 'free') setTrialDays('')
               }}
-              className={inputClass}
+              className={selectClass}
             >
               {PLAN_OPTIONS.map(o => (
                 <option key={o.value} value={o.value}>{o.label}</option>
@@ -284,14 +284,13 @@ export function InviteCodesPage() {
           {assignedPlan !== 'free' && (
             <div>
               <label className="mb-1 block text-sm font-medium text-foreground">Trial Duration (days)</label>
-              <input
+              <Input
                 type="number"
                 value={trialDays}
                 onChange={(e) => setTrialDays(e.target.value)}
                 placeholder="e.g. 14 (1-90)"
                 min={1}
                 max={90}
-                className={inputClass}
               />
               <p className="mt-1 text-xs text-muted-foreground">Leave empty for no trial — account gets full plan immediately.</p>
             </div>
@@ -299,23 +298,21 @@ export function InviteCodesPage() {
 
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Expires in (days)</label>
-            <input
+            <Input
               type="number"
               value={expiresInDays}
               onChange={(e) => setExpiresInDays(e.target.value)}
               placeholder="Leave empty for no expiry"
-              className={inputClass}
             />
           </div>
 
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
-            <input
+            <Input
               type="text"
               value={note}
               onChange={(e) => setNote(e.target.value)}
               placeholder="Optional note (e.g. who this is for)"
-              className={inputClass}
             />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/PlanLimitsPage.tsx b/frontend/src/pages/admin/PlanLimitsPage.tsx
index a7778d1e..5e76aa0a 100644
--- a/frontend/src/pages/admin/PlanLimitsPage.tsx
+++ b/frontend/src/pages/admin/PlanLimitsPage.tsx
@@ -1,12 +1,12 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Plus, Trash2, Gauge } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
 import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
 import { adminApi } from '@/api/admin'
 import { toast } from '@/lib/toast'
-import { cn } from '@/lib/utils'
 import type { PlanLimitConfig, AccountOverrideResponse, AccountOverrideCreate } from '@/types/admin'
 
 export function PlanLimitsPage() {
@@ -109,11 +109,6 @@ export function PlanLimitsPage() {
     },
   ]
 
-  const inputCn = cn(
-    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-  )
-
   return (
     <div className="space-y-8">
       <PageHeader title="Plan Limits" description="Configure plan tier limits and account-specific overrides" />
@@ -161,15 +156,15 @@ export function PlanLimitsPage() {
           <div className="space-y-4">
             <div>
               <label className="mb-1 block text-sm font-medium text-foreground">Max Trees (empty = unlimited)</label>
-              <input type="number" value={editPlan.max_trees ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_trees: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
+              <Input type="number" value={editPlan.max_trees ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_trees: e.target.value ? parseInt(e.target.value) : null })} />
             </div>
             <div>
               <label className="mb-1 block text-sm font-medium text-foreground">Max Sessions/Month (empty = unlimited)</label>
-              <input type="number" value={editPlan.max_sessions_per_month ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
+              <Input type="number" value={editPlan.max_sessions_per_month ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} />
             </div>
             <div>
               <label className="mb-1 block text-sm font-medium text-foreground">Max Users (empty = unlimited)</label>
-              <input type="number" value={editPlan.max_users ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_users: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
+              <Input type="number" value={editPlan.max_users ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_users: e.target.value ? parseInt(e.target.value) : null })} />
             </div>
           </div>
         )}
@@ -191,23 +186,23 @@ export function PlanLimitsPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
-            <input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" className={inputCn} />
+            <Input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Max Trees Override</label>
-            <input type="number" value={overrideForm.override_max_trees ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_trees: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
+            <Input type="number" value={overrideForm.override_max_trees ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_trees: e.target.value ? parseInt(e.target.value) : null })} />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Max Sessions/Month Override</label>
-            <input type="number" value={overrideForm.override_max_sessions_per_month ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
+            <Input type="number" value={overrideForm.override_max_sessions_per_month ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Max Users Override</label>
-            <input type="number" value={overrideForm.override_max_users ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_users: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
+            <Input type="number" value={overrideForm.override_max_users ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_users: e.target.value ? parseInt(e.target.value) : null })} />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
-            <input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason for override" className={inputCn} />
+            <Input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason for override" />
           </div>
         </div>
       </Modal>
diff --git a/frontend/src/pages/admin/SettingsPage.tsx b/frontend/src/pages/admin/SettingsPage.tsx
index cf48822e..c2090bce 100644
--- a/frontend/src/pages/admin/SettingsPage.tsx
+++ b/frontend/src/pages/admin/SettingsPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { PageHeader } from '@/components/admin'
+import { Textarea } from '@/components/ui/Textarea'
 import { adminApi } from '@/api/admin'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
@@ -93,15 +94,11 @@ export function SettingsPage() {
         {maintenanceMode && (
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Maintenance Message</label>
-            <textarea
+            <Textarea
               value={maintenanceMessage}
               onChange={(e) => setSettings({ ...settings, maintenance_message: e.target.value })}
               rows={3}
               placeholder="We're performing scheduled maintenance. Please check back later."
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-              )}
             />
           </div>
         )}
diff --git a/frontend/src/pages/admin/SurveyInvitesPage.tsx b/frontend/src/pages/admin/SurveyInvitesPage.tsx
index 2928df50..d36fb402 100644
--- a/frontend/src/pages/admin/SurveyInvitesPage.tsx
+++ b/frontend/src/pages/admin/SurveyInvitesPage.tsx
@@ -82,7 +82,7 @@ export default function SurveyInvitesPage() {
               value={name}
               onChange={e => setName(e.target.value)}
               placeholder="John Smith"
-              className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden"
+              className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-hidden"
             />
           </div>
           <div className="flex-1">
@@ -94,7 +94,7 @@ export default function SurveyInvitesPage() {
               value={email}
               onChange={e => setEmail(e.target.value)}
               placeholder="john@example.com"
-              className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden"
+              className="w-full rounded-[10px] border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-hidden"
             />
           </div>
           <div className="flex gap-2">
@@ -109,7 +109,7 @@ export default function SurveyInvitesPage() {
             <button
               onClick={() => handleCreate(true)}
               disabled={creating || !name.trim() || !email.trim()}
-              className="inline-flex items-center gap-2 rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-brand-border px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] active:scale-[0.97] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              className="inline-flex items-center gap-2 rounded-[10px] bg-white/[0.04] border border-brand-border px-4 py-2 text-sm font-medium text-foreground hover:border-white/[0.12] active:scale-[0.97] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
             >
               {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
               Send Email
@@ -122,7 +122,7 @@ export default function SurveyInvitesPage() {
         )}
 
         {lastCreated && (
-          <div className="mt-4 rounded-[10px] border border-[rgba(6,182,212,0.15)] bg-[rgba(6,182,212,0.04)] p-4">
+          <div className="mt-4 rounded-[10px] border border-primary/[0.15] bg-primary/[0.04] p-4">
             <div className="flex items-center justify-between gap-3">
               <div className="min-w-0 flex-1">
                 <p className="text-xs text-muted-foreground mb-1">
@@ -163,7 +163,7 @@ export default function SurveyInvitesPage() {
                 <tr><td colSpan={7} className="px-4 py-8 text-center text-sm text-muted-foreground">No invites yet</td></tr>
               ) : (
                 invites.map(invite => (
-                  <tr key={invite.id} className="border-b border-border/50 hover:bg-[rgba(255,255,255,0.02)] transition-colors">
+                  <tr key={invite.id} className="border-b border-border/50 hover:bg-white/[0.02] transition-colors">
                     <td className="px-4 py-3 text-sm text-foreground">{invite.recipient_name}</td>
                     <td className="px-4 py-3 text-sm text-muted-foreground">{invite.recipient_email || '—'}</td>
                     <td className="px-4 py-3">
diff --git a/frontend/src/pages/admin/SurveyResponsesPage.tsx b/frontend/src/pages/admin/SurveyResponsesPage.tsx
index a3621190..9ca9e28c 100644
--- a/frontend/src/pages/admin/SurveyResponsesPage.tsx
+++ b/frontend/src/pages/admin/SurveyResponsesPage.tsx
@@ -152,7 +152,7 @@ function ResponseRow({
         className={cn(
           'border-b border-border/50 transition-colors cursor-pointer',
           !response.is_read && 'bg-primary/3',
-          'hover:bg-[rgba(255,255,255,0.02)]'
+          'hover:bg-white/[0.02]'
         )}
       >
         {/* Checkbox */}
@@ -227,14 +227,14 @@ function ResponseRow({
               >
                 <button
                   onClick={() => { onMarkRead(); setShowMenu(false) }}
-                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-white/[0.04] transition-colors"
                 >
                   {response.is_read ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
                   {response.is_read ? 'Mark Unread' : 'Mark Read'}
                 </button>
                 <button
                   onClick={() => { onArchive(); setShowMenu(false) }}
-                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-white/[0.04] transition-colors"
                 >
                   {response.archived_at ? <ArchiveRestore className="h-3.5 w-3.5" /> : <Archive className="h-3.5 w-3.5" />}
                   {response.archived_at ? 'Unarchive' : 'Archive'}
@@ -437,7 +437,7 @@ export default function SurveyResponsesPage() {
                 'inline-flex items-center gap-2 rounded-[10px] px-3 py-2 text-xs font-medium transition-colors border',
                 showArchived
                   ? 'bg-primary/10 text-primary border-primary/20'
-                  : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground border-brand-border hover:border-[rgba(255,255,255,0.12)]'
+                  : 'bg-white/[0.04] text-muted-foreground border-brand-border hover:border-white/[0.12]'
               )}
             >
               <Archive className="h-3.5 w-3.5" />
@@ -446,7 +446,7 @@ export default function SurveyResponsesPage() {
             <button
               onClick={handleExport}
               disabled={exporting || responses.length === 0}
-              className="inline-flex items-center gap-2 rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-brand-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-[rgba(255,255,255,0.12)] disabled:opacity-50"
+              className="inline-flex items-center gap-2 rounded-[10px] bg-white/[0.04] border border-brand-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-white/[0.12] disabled:opacity-50"
             >
               {exporting ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
diff --git a/frontend/src/pages/admin/UserDetailPage.tsx b/frontend/src/pages/admin/UserDetailPage.tsx
index 019e83ae..4a133e6d 100644
--- a/frontend/src/pages/admin/UserDetailPage.tsx
+++ b/frontend/src/pages/admin/UserDetailPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { ArrowLeft, Shield, Crown, UserCheck, UserX, Clock, Ticket, KeyRound, Copy, Check, Archive, ArchiveRestore, Trash2 } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
 import { StatusBadge } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
 import { Spinner } from '@/components/common/Spinner'
@@ -187,7 +188,7 @@ export function UserDetailPage() {
     }
   }
 
-  const inputClass = cn(
+  const selectClass = cn(
     'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
     'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
@@ -534,7 +535,7 @@ export function UserDetailPage() {
             aria-label="Subscription plan"
             value={selectedPlan}
             onChange={(e) => setSelectedPlan(e.target.value)}
-            className={inputClass}
+            className={selectClass}
           >
             {PLAN_OPTIONS.map(p => (
               <option key={p} value={p}>{p.charAt(0).toUpperCase() + p.slice(1)}</option>
@@ -646,13 +647,12 @@ export function UserDetailPage() {
       >
         <div>
           <label className="mb-1 block text-sm font-medium text-foreground">Days to add</label>
-          <input
+          <Input
             type="number"
             value={trialDays}
             onChange={(e) => setTrialDays(e.target.value)}
             min={1}
             max={90}
-            className={inputClass}
           />
           <p className="mt-1 text-xs text-muted-foreground">1-90 days. Will convert to trialing status if not already.</p>
         </div>
diff --git a/frontend/src/pages/admin/UsersPage.tsx b/frontend/src/pages/admin/UsersPage.tsx
index f982acef..10ed6fa1 100644
--- a/frontend/src/pages/admin/UsersPage.tsx
+++ b/frontend/src/pages/admin/UsersPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { UserCheck, UserX, Shield, ArrowRightLeft, ExternalLink, UserPlus, Copy, Check, Mail } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
 import { DataTable, Pagination, SearchInput, PageHeader, StatusBadge, ActionMenu } from '@/components/admin'
 import type { Column } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
@@ -361,15 +362,11 @@ export function UsersPage() {
           </p>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
-            <input
+            <Input
               type="text"
               value={displayCode}
               onChange={(e) => setDisplayCode(e.target.value)}
               placeholder="e.g. ABC-1234"
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-              )}
             />
           </div>
         </div>
@@ -393,28 +390,20 @@ export function UsersPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
-            <input
+            <Input
               type="text"
               value={createForm.name}
               onChange={(e) => setCreateForm(f => ({ ...f, name: e.target.value }))}
               placeholder="Full name"
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-              )}
             />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Email</label>
-            <input
+            <Input
               type="email"
               value={createForm.email}
               onChange={(e) => setCreateForm(f => ({ ...f, email: e.target.value }))}
               placeholder="user@example.com"
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-              )}
             />
           </div>
           <div>
@@ -435,15 +424,11 @@ export function UsersPage() {
             <>
               <div>
                 <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
-                <input
+                <Input
                   type="text"
                   value={createForm.account_display_code}
                   onChange={(e) => setCreateForm(f => ({ ...f, account_display_code: e.target.value }))}
                   placeholder="e.g. ABC12345"
-                  className={cn(
-                    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-                  )}
                 />
               </div>
               <div>
@@ -532,28 +517,20 @@ export function UsersPage() {
         <div className="space-y-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Email</label>
-            <input
+            <Input
               type="email"
               value={inviteForm.email}
               onChange={(e) => setInviteForm(f => ({ ...f, email: e.target.value }))}
               placeholder="user@example.com"
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-              )}
             />
           </div>
           <div>
             <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
-            <input
+            <Input
               type="text"
               value={inviteForm.account_display_code}
               onChange={(e) => setInviteForm(f => ({ ...f, account_display_code: e.target.value }))}
               placeholder="e.g. ABC12345"
-              className={cn(
-                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
-              )}
             />
           </div>
           <div>