From 0803fd7bc43282883e626c8b31259eb4ce0f4ee3 Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Fri, 17 Apr 2026 12:27:40 +0200
Subject: [PATCH] ui: Clean up empty states, modals, animations

---
 apps/web/src/components/ActivityFeed.tsx      |  13 +-
 apps/web/src/components/ApiKeyDisplay.tsx     |  37 +-
 .../components/CampaignSelectionDialog.tsx    |  54 +-
 apps/web/src/components/DashboardLayout.tsx   |  43 +-
 .../src/components/DataManagementSettings.tsx |   6 +-
 apps/web/src/components/DomainsSettings.tsx   | 123 +++--
 apps/web/src/components/EmptyState.tsx        |  22 +
 apps/web/src/components/QuickStart.tsx        |   5 +-
 .../src/components/SegmentFilterBuilder.tsx   |  20 +-
 apps/web/src/components/TeamSettings.tsx      |  56 ++-
 .../components/TemplateSelectionDialog.tsx    |  60 +--
 apps/web/src/components/WorkflowBuilder.tsx   |  37 +-
 .../web/src/components/WorkflowVisualizer.tsx |  10 +-
 apps/web/src/pages/analytics/index.tsx        |  14 +-
 apps/web/src/pages/campaigns/[id].tsx         |  84 ++--
 apps/web/src/pages/campaigns/create.tsx       | 470 ++++++------------
 apps/web/src/pages/campaigns/index.tsx        | 132 +++--
 apps/web/src/pages/contacts/[id].tsx          | 103 +++-
 apps/web/src/pages/contacts/index.tsx         | 187 +++----
 apps/web/src/pages/index.tsx                  |  19 +-
 apps/web/src/pages/segments/[id].tsx          |  14 +-
 apps/web/src/pages/segments/index.tsx         |  49 +-
 apps/web/src/pages/segments/new.tsx           |   6 +-
 apps/web/src/pages/templates/[id].tsx         |   8 +-
 apps/web/src/pages/templates/create.tsx       | 211 ++++----
 apps/web/src/pages/templates/index.tsx        |  33 +-
 apps/web/src/pages/workflows/[id].tsx         | 109 ++--
 apps/web/src/pages/workflows/index.tsx        |  46 +-
 packages/ui/src/components/atoms/Button.tsx   |   8 +-
 packages/ui/src/components/atoms/Card.tsx     |   2 +-
 packages/ui/src/components/atoms/Dialog.tsx   |  10 +-
 .../ui/src/components/atoms/DropdownMenu.tsx  |   2 +-
 32 files changed, 946 insertions(+), 1047 deletions(-)
 create mode 100644 apps/web/src/components/EmptyState.tsx

diff --git a/apps/web/src/components/ActivityFeed.tsx b/apps/web/src/components/ActivityFeed.tsx
index 2634175..9e19c29 100644
--- a/apps/web/src/components/ActivityFeed.tsx
+++ b/apps/web/src/components/ActivityFeed.tsx
@@ -2,7 +2,8 @@ import {Button} from '@plunk/ui';
 import type {Activity, CursorPaginatedResponse} from '@plunk/types';
 import {network} from '../lib/network';
 import {ActivityItem} from './ActivityItem';
-import {Loader2} from 'lucide-react';
+import {EmptyState} from './EmptyState';
+import {Activity as ActivityIcon, Loader2} from 'lucide-react';
 import {useCallback, useEffect, useMemo, useState} from 'react';
 
 export interface ActivityFeedProps {
@@ -186,11 +187,11 @@ export function ActivityFeed({typeFilter, dateRangeDays = 30, contactId}: Activi
 
   if (activities.length === 0 && upcomingActivities.length === 0) {
     return (
-      <div className="text-center py-12">
-        <p className="text-neutral-500 text-sm">
-          No activity found for the selected filters. Activities will appear here as they happen.
-        </p>
-      </div>
+      <EmptyState
+        icon={ActivityIcon}
+        title="No activity yet"
+        description="Events will appear here as contacts interact with your emails."
+      />
     );
   }
 
diff --git a/apps/web/src/components/ApiKeyDisplay.tsx b/apps/web/src/components/ApiKeyDisplay.tsx
index 2d35500..5cc98b7 100644
--- a/apps/web/src/components/ApiKeyDisplay.tsx
+++ b/apps/web/src/components/ApiKeyDisplay.tsx
@@ -1,6 +1,7 @@
+import {AnimatePresence, motion} from 'framer-motion';
+import {Check, Copy, Eye, EyeOff, RefreshCw} from 'lucide-react';
 import {useState} from 'react';
 import {Button} from '@plunk/ui';
-import {Check, Copy, Eye, EyeOff, RefreshCw} from 'lucide-react';
 
 interface ApiKeyDisplayProps {
   label: string;
@@ -28,8 +29,8 @@ export function ApiKeyDisplay({
       await navigator.clipboard.writeText(value);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (error) {
-      console.error('Failed to copy:', error);
+    } catch {
+      // clipboard API unavailable — silent
     }
   };
 
@@ -39,8 +40,8 @@ export function ApiKeyDisplay({
     try {
       setIsRegenerating(true);
       await onRegenerate();
-    } catch (error) {
-      console.error('Failed to regenerate:', error);
+    } catch {
+      // error surfaced via isRegenerating state reset
     } finally {
       setIsRegenerating(false);
     }
@@ -74,9 +75,31 @@ export function ApiKeyDisplay({
             size="icon"
             onClick={handleCopy}
             title="Copy to clipboard"
-            className="h-9 w-9"
+            className="h-9 w-9 overflow-hidden"
           >
-            {copied ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
+            <AnimatePresence mode="wait" initial={false}>
+              {copied ? (
+                <motion.span
+                  key="copied"
+                  initial={{opacity: 0, y: 6}}
+                  animate={{opacity: 1, y: 0}}
+                  exit={{opacity: 0, y: -6}}
+                  transition={{duration: 0.15}}
+                >
+                  <Check className="h-4 w-4 text-green-600" />
+                </motion.span>
+              ) : (
+                <motion.span
+                  key="idle"
+                  initial={{opacity: 0, y: 6}}
+                  animate={{opacity: 1, y: 0}}
+                  exit={{opacity: 0, y: -6}}
+                  transition={{duration: 0.15}}
+                >
+                  <Copy className="h-4 w-4" />
+                </motion.span>
+              )}
+            </AnimatePresence>
           </Button>
           {showRegenerate && onRegenerate && (
             <Button
diff --git a/apps/web/src/components/CampaignSelectionDialog.tsx b/apps/web/src/components/CampaignSelectionDialog.tsx
index 738d920..641cb56 100644
--- a/apps/web/src/components/CampaignSelectionDialog.tsx
+++ b/apps/web/src/components/CampaignSelectionDialog.tsx
@@ -198,7 +198,7 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
               {data?.data.map(campaign => (
                 <Card
                   key={campaign.id}
-                  className="cursor-pointer hover:border-primary/50 hover:shadow-md transition-all"
+                  className="cursor-pointer hover:border-neutral-400 transition-colors"
                   onClick={() => handleCampaignClick(campaign)}
                 >
                   <CardHeader className="pb-3">
@@ -266,30 +266,24 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
         ) : (
           <div className="flex-1 flex flex-col overflow-hidden">
             {/* Scrollable Content */}
-            <div className="flex-1 overflow-y-auto space-y-6 pr-2">
+            <div className="flex-1 overflow-y-auto pr-2">
               {/* Campaign Preview */}
               {selectedCampaign && (
-                <Card className="bg-neutral-50">
-                  <CardHeader className="pb-3">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-1">
-                          <CardTitle className="text-base">{selectedCampaign.name}</CardTitle>
-                          {getStatusBadge(selectedCampaign.status)}
-                        </div>
-                        {selectedCampaign.description && (
-                          <CardDescription className="text-xs">{selectedCampaign.description}</CardDescription>
-                        )}
-                      </div>
-                    </div>
-                  </CardHeader>
-                </Card>
+                <div className="pb-4 mb-1 border-b border-neutral-100">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-neutral-900">{selectedCampaign.name}</span>
+                    {getStatusBadge(selectedCampaign.status)}
+                  </div>
+                  {selectedCampaign.description && (
+                    <p className="text-xs text-neutral-500 mt-1">{selectedCampaign.description}</p>
+                  )}
+                </div>
               )}
 
               {/* Field Selection */}
-              <div className="space-y-3">
+              <div className="divide-y divide-neutral-100">
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('subject')}
                 >
                   <Checkbox
@@ -302,13 +296,13 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
                       Email Subject
                     </Label>
                     {selectedCampaign?.subject && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{selectedCampaign.subject}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5 truncate">{selectedCampaign.subject}</p>
                     )}
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('body')}
                 >
                   <Checkbox id="body" checked={selectedFields.body} onCheckedChange={() => toggleField('body')} />
@@ -316,12 +310,12 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
                     <Label htmlFor="body" className="text-sm font-medium cursor-pointer">
                       Email Body
                     </Label>
-                    <p className="text-xs text-neutral-500 mt-0.5">The full email content and design</p>
+                    <p className="text-xs text-neutral-400 mt-0.5">Full email content and design</p>
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('from')}
                 >
                   <Checkbox id="from" checked={selectedFields.from} onCheckedChange={() => toggleField('from')} />
@@ -330,13 +324,13 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
                       From Email
                     </Label>
                     {selectedCampaign?.from && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{selectedCampaign.from}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5">{selectedCampaign.from}</p>
                     )}
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('fromName')}
                 >
                   <Checkbox
@@ -349,13 +343,13 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
                       From Name
                     </Label>
                     {selectedCampaign?.fromName && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{selectedCampaign.fromName}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5">{selectedCampaign.fromName}</p>
                     )}
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('replyTo')}
                 >
                   <Checkbox
@@ -368,13 +362,13 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
                       Reply-To Email
                     </Label>
                     {selectedCampaign?.replyTo && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{selectedCampaign.replyTo}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5">{selectedCampaign.replyTo}</p>
                     )}
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('audience')}
                 >
                   <Checkbox
@@ -387,7 +381,7 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
                       Audience Settings
                     </Label>
                     {selectedCampaign && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{getAudienceLabel(selectedCampaign)}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5">{getAudienceLabel(selectedCampaign)}</p>
                     )}
                   </div>
                 </div>
diff --git a/apps/web/src/components/DashboardLayout.tsx b/apps/web/src/components/DashboardLayout.tsx
index 54666ba..625b3fa 100644
--- a/apps/web/src/components/DashboardLayout.tsx
+++ b/apps/web/src/components/DashboardLayout.tsx
@@ -15,7 +15,6 @@ import {
   Menu,
   Plus,
   Settings,
-  User,
   Users,
   Workflow,
 } from 'lucide-react';
@@ -57,7 +56,6 @@ const navigation: NavSection[] = [
     ],
   },
   {
-    title: 'Campaigns',
     items: [{name: 'Campaigns', href: '/campaigns', icon: Megaphone}],
   },
 ];
@@ -127,8 +125,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
 
       // Redirect to login
       await router.push('/auth/login');
-    } catch (error) {
-      console.error('Logout failed:', error);
+    } catch {
       // Even if the API call fails, try to redirect to login
       localStorage.removeItem('token');
       localStorage.removeItem('activeProjectId');
@@ -179,12 +176,14 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
               </div>
               <span className="font-medium text-neutral-900 truncate">{activeProject?.name || 'Select project'}</span>
             </div>
-            <ChevronDown className="h-4 w-4 text-neutral-500 flex-shrink-0" />
+            <ChevronDown
+              className={`h-4 w-4 text-neutral-500 flex-shrink-0 transition-transform duration-200 ${showProjectMenu ? 'rotate-180' : ''}`}
+            />
           </button>
 
           {/* Project Dropdown */}
           {showProjectMenu && (
-            <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1 max-h-[400px] overflow-y-auto min-w-full w-max">
+            <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-md z-50 py-1 max-h-[400px] overflow-y-auto min-w-full w-max">
               {sortedProjects.map(project => (
                 <button
                   key={project.id}
@@ -196,7 +195,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
                   }}
                   className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors whitespace-nowrap"
                 >
-                  <div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
+                  <div className="h-6 w-6 rounded-md bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
                     {project.name.charAt(0).toUpperCase()}
                   </div>
                   <span className="text-neutral-900 text-left flex-1">{project.name}</span>
@@ -230,15 +229,16 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
             )}
             <div className="space-y-1">
               {section.items.map(item => {
-                const isActive = router.pathname === item.href;
+                const isActive =
+                  item.href === '/' ? router.pathname === item.href : router.pathname.startsWith(item.href);
                 const Icon = item.icon;
                 return (
                   <Link
                     key={item.name}
                     href={item.href}
                     onClick={() => setShowMobileMenu(false)}
-                    className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700  ${
-                      isActive ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
+                    className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
+                      isActive ? 'bg-neutral-100 text-neutral-900' : 'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900'
                     }`}
                   >
                     <Icon className="h-5 w-5" />
@@ -257,7 +257,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
           href={WIKI_URI}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900"
+          className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900"
         >
           <BookOpen className="h-5 w-5" />
           Documentation
@@ -266,8 +266,10 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
         <Link
           href="/settings"
           onClick={() => setShowMobileMenu(false)}
-          className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700  ${
-            router.pathname.startsWith('/settings') ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
+          className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
+            router.pathname.startsWith('/settings')
+              ? 'bg-neutral-100 text-neutral-900'
+              : 'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900'
           }`}
         >
           <Settings className="h-5 w-5" />
@@ -277,16 +279,23 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
         <div className="relative" ref={userMenuRef}>
           <button
             onClick={handleToggleUserMenu}
-            className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
+            className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
           >
-            <User className="h-5 w-5" />
+            <div className="h-5 w-5 rounded-full bg-neutral-900 text-white flex items-center justify-center text-[10px] font-semibold flex-shrink-0">
+              {user?.email?.charAt(0).toUpperCase() ?? '?'}
+            </div>
             <span className="flex-1 text-left truncate">{user?.email}</span>
-            <ChevronDown className="h-4 w-4 text-neutral-500" />
+            <ChevronDown
+              className={`h-4 w-4 text-neutral-500 transition-transform duration-200 ${showUserMenu ? 'rotate-180' : ''}`}
+            />
           </button>
 
           {/* User Dropdown */}
           {showUserMenu && (
-            <div className="absolute bottom-full left-0 right-0 mb-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
+            <div className="absolute bottom-full left-0 right-0 mb-1 bg-white border border-neutral-200 rounded-lg shadow-md z-50 py-1">
+              <div className="px-3 py-2 border-b border-neutral-100">
+                <p className="text-xs text-neutral-500 truncate">{user?.email}</p>
+              </div>
               <button
                 onClick={handleLogoutClick}
                 className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-red-600"
diff --git a/apps/web/src/components/DataManagementSettings.tsx b/apps/web/src/components/DataManagementSettings.tsx
index 21ca3ba..e6f2f52 100644
--- a/apps/web/src/components/DataManagementSettings.tsx
+++ b/apps/web/src/components/DataManagementSettings.tsx
@@ -151,7 +151,7 @@ export function DataManagementSettings() {
         </CardHeader>
         <CardContent>
           {customFields.length === 0 ? (
-            <p className="text-sm text-muted-foreground">No custom fields found</p>
+            <p className="text-sm text-neutral-500">No custom fields found</p>
           ) : (
             <Table>
               <TableHeader>
@@ -170,7 +170,7 @@ export function DataManagementSettings() {
                       <Badge variant="secondary">{field.type}</Badge>
                     </TableCell>
                     <TableCell>
-                      <span className="text-sm text-muted-foreground">{field.coverage}%</span>
+                      <span className="text-sm text-neutral-500">{field.coverage}%</span>
                     </TableCell>
                     <TableCell className="text-right">
                       <Button variant="ghost" size="sm" onClick={() => openFieldDeleteDialog(field.field)}>
@@ -196,7 +196,7 @@ export function DataManagementSettings() {
         </CardHeader>
         <CardContent>
           {customEvents.length === 0 ? (
-            <p className="text-sm text-muted-foreground">No custom events found</p>
+            <p className="text-sm text-neutral-500">No custom events found</p>
           ) : (
             <Table>
               <TableHeader>
diff --git a/apps/web/src/components/DomainsSettings.tsx b/apps/web/src/components/DomainsSettings.tsx
index aab99e8..0771623 100644
--- a/apps/web/src/components/DomainsSettings.tsx
+++ b/apps/web/src/components/DomainsSettings.tsx
@@ -24,6 +24,34 @@ import {Check, CheckCircle2, ChevronDown, Copy, Loader2, RefreshCw, Trash2, XCir
 import {useConfig} from '../lib/hooks/useConfig';
 import {useAddDomain, useCheckDomainVerification, useDomains, useRemoveDomain} from '../lib/hooks/useDomains';
 
+function AnimatedCopyIcon({isCopied}: {isCopied: boolean}) {
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      {isCopied ? (
+        <motion.span
+          key="copied"
+          initial={{opacity: 0, y: 4}}
+          animate={{opacity: 1, y: 0}}
+          exit={{opacity: 0, y: -4}}
+          transition={{duration: 0.15}}
+        >
+          <Check className="h-3 w-3 text-green-600" />
+        </motion.span>
+      ) : (
+        <motion.span
+          key="idle"
+          initial={{opacity: 0, y: 4}}
+          animate={{opacity: 1, y: 0}}
+          exit={{opacity: 0, y: -4}}
+          transition={{duration: 0.15}}
+        >
+          <Copy className="h-3 w-3" />
+        </motion.span>
+      )}
+    </AnimatePresence>
+  );
+}
+
 interface DomainsSettingsProps {
   projectId: string;
 }
@@ -419,14 +447,13 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                               onClick={() =>
                                                 handleCopyToken(`${token}._domainkey.${domain.domain}`, index + 2000)
                                               }
-                                              className="shrink-0 h-6 w-6 p-0"
+                                              className="shrink-0 h-6 w-6 p-0 overflow-hidden"
                                             >
-                                              {copiedToken ===
-                                              `${token}._domainkey.${domain.domain}-${index + 2000}` ? (
-                                                <Check className="h-3 w-3 text-green-600" />
-                                              ) : (
-                                                <Copy className="h-3 w-3" />
-                                              )}
+                                              <AnimatedCopyIcon
+                                                isCopied={
+                                                  copiedToken === `${token}._domainkey.${domain.domain}-${index + 2000}`
+                                                }
+                                              />
                                             </Button>
                                           </div>
                                         </td>
@@ -439,13 +466,11 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                               variant="ghost"
                                               size="sm"
                                               onClick={() => handleCopyToken(`${token}.dkim.amazonses.com`, index)}
-                                              className="shrink-0 h-6 w-6 p-0"
+                                              className="shrink-0 h-6 w-6 p-0 overflow-hidden"
                                             >
-                                              {copiedToken === `${token}.dkim.amazonses.com-${index}` ? (
-                                                <Check className="h-3 w-3 text-green-600" />
-                                              ) : (
-                                                <Copy className="h-3 w-3" />
-                                              )}
+                                              <AnimatedCopyIcon
+                                                isCopied={copiedToken === `${token}.dkim.amazonses.com-${index}`}
+                                              />
                                             </Button>
                                           </div>
                                         </td>
@@ -500,13 +525,11 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                               variant="ghost"
                                               size="sm"
                                               onClick={() => handleCopyToken(`plunk.${domain.domain}`, 3000)}
-                                              className="shrink-0 h-6 w-6 p-0"
+                                              className="shrink-0 h-6 w-6 p-0 overflow-hidden"
                                             >
-                                              {copiedToken === `plunk.${domain.domain}-3000` ? (
-                                                <Check className="h-3 w-3 text-green-600" />
-                                              ) : (
-                                                <Copy className="h-3 w-3" />
-                                              )}
+                                              <AnimatedCopyIcon
+                                                isCopied={copiedToken === `plunk.${domain.domain}-3000`}
+                                              />
                                             </Button>
                                           </div>
                                         </td>
@@ -524,14 +547,14 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                                   1000,
                                                 )
                                               }
-                                              className="shrink-0 h-6 w-6 p-0"
+                                              className="shrink-0 h-6 w-6 p-0 overflow-hidden"
                                             >
-                                              {copiedToken ===
-                                              `10 feedback-smtp.${config.aws.sesRegion}.amazonses.com-1000` ? (
-                                                <Check className="h-3 w-3 text-green-600" />
-                                              ) : (
-                                                <Copy className="h-3 w-3" />
-                                              )}
+                                              <AnimatedCopyIcon
+                                                isCopied={
+                                                  copiedToken ===
+                                                  `10 feedback-smtp.${config.aws.sesRegion}.amazonses.com-1000`
+                                                }
+                                              />
                                             </Button>
                                           </div>
                                         </td>
@@ -551,13 +574,11 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                               variant="ghost"
                                               size="sm"
                                               onClick={() => handleCopyToken(`plunk.${domain.domain}`, 3001)}
-                                              className="shrink-0 h-6 w-6 p-0"
+                                              className="shrink-0 h-6 w-6 p-0 overflow-hidden"
                                             >
-                                              {copiedToken === `plunk.${domain.domain}-3001` ? (
-                                                <Check className="h-3 w-3 text-green-600" />
-                                              ) : (
-                                                <Copy className="h-3 w-3" />
-                                              )}
+                                              <AnimatedCopyIcon
+                                                isCopied={copiedToken === `plunk.${domain.domain}-3001`}
+                                              />
                                             </Button>
                                           </div>
                                         </td>
@@ -572,13 +593,11 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                               onClick={() =>
                                                 handleCopyToken('"v=spf1 include:amazonses.com ~all"', 1001)
                                               }
-                                              className="shrink-0 h-6 w-6 p-0"
+                                              className="shrink-0 h-6 w-6 p-0 overflow-hidden"
                                             >
-                                              {copiedToken === '"v=spf1 include:amazonses.com ~all"-1001' ? (
-                                                <Check className="h-3 w-3 text-green-600" />
-                                              ) : (
-                                                <Copy className="h-3 w-3" />
-                                              )}
+                                              <AnimatedCopyIcon
+                                                isCopied={copiedToken === '"v=spf1 include:amazonses.com ~all"-1001'}
+                                              />
                                             </Button>
                                           </div>
                                         </td>
@@ -632,13 +651,9 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                               variant="ghost"
                                               size="sm"
                                               onClick={() => handleCopyToken(domain.domain, 3002)}
-                                              className="shrink-0 h-6 w-6 p-0"
+                                              className="shrink-0 h-6 w-6 p-0 overflow-hidden"
                                             >
-                                              {copiedToken === `${domain.domain}-3002` ? (
-                                                <Check className="h-3 w-3 text-green-600" />
-                                              ) : (
-                                                <Copy className="h-3 w-3" />
-                                              )}
+                                              <AnimatedCopyIcon isCopied={copiedToken === `${domain.domain}-3002`} />
                                             </Button>
                                           </div>
                                         </td>
@@ -656,14 +671,14 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                                   1002,
                                                 )
                                               }
-                                              className="shrink-0 h-6 w-6 p-0"
+                                              className="shrink-0 h-6 w-6 p-0 overflow-hidden"
                                             >
-                                              {copiedToken ===
-                                              `10 inbound-smtp.${config.aws.sesRegion}.amazonaws.com-1002` ? (
-                                                <Check className="h-3 w-3 text-green-600" />
-                                              ) : (
-                                                <Copy className="h-3 w-3" />
-                                              )}
+                                              <AnimatedCopyIcon
+                                                isCopied={
+                                                  copiedToken ===
+                                                  `10 inbound-smtp.${config.aws.sesRegion}.amazonaws.com-1002`
+                                                }
+                                              />
                                             </Button>
                                           </div>
                                         </td>
@@ -674,8 +689,8 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                               </div>
                             )}
 
-                            <div className="flex items-start gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200 mt-3">
-                              <div className="text-blue-600 mt-0.5">
+                            <div className="flex items-start gap-2 p-3 bg-neutral-50 rounded-lg border border-neutral-200 mt-3">
+                              <div className="text-neutral-500 mt-0.5">
                                 <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                   <path
                                     fillRule="evenodd"
@@ -684,7 +699,7 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
                                   />
                                 </svg>
                               </div>
-                              <p className="text-xs text-blue-900">
+                              <p className="text-xs text-neutral-600">
                                 Click the copy icon to copy record values. After adding all records to your DNS
                                 provider, use the refresh button above to verify your domain.
                               </p>
diff --git a/apps/web/src/components/EmptyState.tsx b/apps/web/src/components/EmptyState.tsx
new file mode 100644
index 0000000..3c086a8
--- /dev/null
+++ b/apps/web/src/components/EmptyState.tsx
@@ -0,0 +1,22 @@
+import type {LucideIcon} from 'lucide-react';
+import type {ReactNode} from 'react';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({icon: Icon, title, description, action}: EmptyStateProps) {
+  return (
+    <div className="text-center py-14">
+      <div className="inline-flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 bg-neutral-50 mb-4">
+        <Icon className="h-5 w-5 text-neutral-400" />
+      </div>
+      <h3 className="text-sm font-semibold text-neutral-900 mb-1">{title}</h3>
+      <p className="text-sm text-neutral-500 max-w-xs mx-auto leading-relaxed mb-5">{description}</p>
+      {action}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/QuickStart.tsx b/apps/web/src/components/QuickStart.tsx
index 01b190b..2d1fcfc 100644
--- a/apps/web/src/components/QuickStart.tsx
+++ b/apps/web/src/components/QuickStart.tsx
@@ -51,7 +51,7 @@ function HelpResources() {
         <motion.button
           onClick={copyEmail}
           whileTap={{scale: 0.97}}
-          className="flex-1 relative flex items-center justify-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-700 overflow-hidden transition-colors hover:bg-neutral-50 hover:text-neutral-900 hover:border-neutral-300"
+          className="flex-1 relative flex items-center justify-center gap-1.5 h-9 rounded-md border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-700 overflow-hidden transition-colors hover:bg-neutral-50 hover:text-neutral-900 hover:border-neutral-300"
         >
           <AnimatePresence mode="wait" initial={false}>
             {copied ? (
@@ -230,8 +230,7 @@ export function QuickStart({setupState, isLoading}: QuickStartProps) {
             <div className="flex-1 pt-0.5">
               <p className="text-sm font-semibold text-green-900 mb-1">All set!</p>
               <p className="text-xs text-green-700 leading-relaxed">
-                Your project is fully configured and you&apos;re actively engaging your audience. Keep up the great
-                work!
+                Domain verified, contacts imported, campaigns running. Everything is set up correctly.
               </p>
             </div>
           </div>
diff --git a/apps/web/src/components/SegmentFilterBuilder.tsx b/apps/web/src/components/SegmentFilterBuilder.tsx
index 8b648b7..82d9d22 100644
--- a/apps/web/src/components/SegmentFilterBuilder.tsx
+++ b/apps/web/src/components/SegmentFilterBuilder.tsx
@@ -775,19 +775,9 @@ interface SegmentFilterBuilderProps {
 export function SegmentFilterBuilder({condition, onChange}: SegmentFilterBuilderProps) {
   const {fields, loading} = useAvailableOptions();
 
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold text-neutral-900">Filter Conditions</h3>
-          <p className="text-sm text-neutral-500 mt-1">Build complex audience filters with AND/OR logic</p>
-        </div>
-      </div>
-      {loading ? (
-        <div className="text-sm text-neutral-500 py-4">Loading available fields and events...</div>
-      ) : (
-        <FilterConditionComponent condition={condition} onChange={onChange} availableFields={fields} />
-      )}
-    </div>
-  );
+  if (loading) {
+    return <div className="text-sm text-neutral-500 py-4">Loading available fields and events...</div>;
+  }
+
+  return <FilterConditionComponent condition={condition} onChange={onChange} availableFields={fields} />;
 }
diff --git a/apps/web/src/components/TeamSettings.tsx b/apps/web/src/components/TeamSettings.tsx
index 2303fd5..292db15 100644
--- a/apps/web/src/components/TeamSettings.tsx
+++ b/apps/web/src/components/TeamSettings.tsx
@@ -1,7 +1,6 @@
 import {useState} from 'react';
 import useSWR from 'swr';
 import {
-  Alert,
   Badge,
   Button,
   Card,
@@ -40,7 +39,8 @@ import {
   TableRow,
 } from '@plunk/ui';
 import {MembershipSchemas} from '@plunk/shared';
-import {AlertTriangle, Mail, MoreVertical, Trash2, UserPlus} from 'lucide-react';
+import {MoreVertical, Trash2, UserPlus} from 'lucide-react';
+import {AnimatePresence, motion} from 'framer-motion';
 import {useForm} from 'react-hook-form';
 import {zodResolver} from '@hookform/resolvers/zod';
 import type {z} from 'zod';
@@ -173,23 +173,30 @@ export function TeamSettings({projectId, currentUserRole, currentUserId}: TeamSe
 
   return (
     <div className="space-y-6">
-      {success && (
-        <Alert>
-          <Mail className="h-4 w-4" />
-          <div className="ml-2">
-            <p className="text-sm font-medium">{success}</p>
-          </div>
-        </Alert>
-      )}
-
-      {error && (
-        <Alert variant="destructive">
-          <AlertTriangle className="h-4 w-4" />
-          <div className="ml-2">
-            <p className="text-sm font-medium">{error}</p>
-          </div>
-        </Alert>
-      )}
+      <AnimatePresence mode="wait">
+        {success && (
+          <motion.div
+            key="success"
+            initial={{opacity: 0, y: -10}}
+            animate={{opacity: 1, y: 0}}
+            exit={{opacity: 0}}
+            className="p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-800"
+          >
+            {success}
+          </motion.div>
+        )}
+        {error && (
+          <motion.div
+            key="error"
+            initial={{opacity: 0, y: -10}}
+            animate={{opacity: 1, y: 0}}
+            exit={{opacity: 0}}
+            className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800"
+          >
+            {error}
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       <Card>
         <CardHeader>
@@ -214,10 +221,10 @@ export function TeamSettings({projectId, currentUserRole, currentUserId}: TeamSe
         <CardContent>
           {isLoading ? (
             <div className="flex justify-center py-8">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600" />
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-900" />
             </div>
           ) : members.length === 0 ? (
-            <div className="py-8 text-center text-sm text-gray-500">No members found</div>
+            <div className="py-8 text-center text-sm text-neutral-500">No members found</div>
           ) : (
             <Table>
               <TableHeader>
@@ -314,12 +321,7 @@ export function TeamSettings({projectId, currentUserRole, currentUserId}: TeamSe
           <Form {...form}>
             <form onSubmit={form.handleSubmit(handleAddMember)} className="space-y-4">
               {error && (
-                <Alert variant="destructive">
-                  <AlertTriangle className="h-4 w-4" />
-                  <div className="ml-2">
-                    <p className="text-sm font-medium">{error}</p>
-                  </div>
-                </Alert>
+                <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800">{error}</div>
               )}
               <FormField
                 control={form.control}
diff --git a/apps/web/src/components/TemplateSelectionDialog.tsx b/apps/web/src/components/TemplateSelectionDialog.tsx
index 410a08c..08f9ae9 100644
--- a/apps/web/src/components/TemplateSelectionDialog.tsx
+++ b/apps/web/src/components/TemplateSelectionDialog.tsx
@@ -236,7 +236,7 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
               {data?.data.map(template => (
                 <Card
                   key={template.id}
-                  className="cursor-pointer hover:border-primary/50 hover:shadow-md transition-all"
+                  className="cursor-pointer hover:border-neutral-400 transition-colors"
                   onClick={() => handleTemplateClick(template)}
                 >
                   <CardHeader className="pb-3">
@@ -295,35 +295,29 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
         ) : (
           <div className="flex-1 flex flex-col overflow-hidden">
             {/* Scrollable Content */}
-            <div className="flex-1 overflow-y-auto space-y-6 pr-2">
+            <div className="flex-1 overflow-y-auto pr-2">
               {/* Template Preview */}
               {selectedTemplate && (
-                <Card className="bg-neutral-50">
-                  <CardHeader className="pb-3">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-1">
-                          <CardTitle className="text-base">{selectedTemplate.name}</CardTitle>
-                          <Badge
-                            className="capitalize"
-                            variant={selectedTemplate.type === 'MARKETING' ? 'info' : 'success'}
-                          >
-                            {selectedTemplate.type.toLowerCase()}
-                          </Badge>
-                        </div>
-                        {selectedTemplate.description && (
-                          <CardDescription className="text-xs">{selectedTemplate.description}</CardDescription>
-                        )}
-                      </div>
-                    </div>
-                  </CardHeader>
-                </Card>
+                <div className="pb-4 mb-1 border-b border-neutral-100">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-neutral-900">{selectedTemplate.name}</span>
+                    <Badge
+                      className="capitalize"
+                      variant={selectedTemplate.type === 'MARKETING' ? 'info' : 'success'}
+                    >
+                      {selectedTemplate.type.toLowerCase()}
+                    </Badge>
+                  </div>
+                  {selectedTemplate.description && (
+                    <p className="text-xs text-neutral-500 mt-1">{selectedTemplate.description}</p>
+                  )}
+                </div>
               )}
 
               {/* Field Selection */}
-              <div className="space-y-3">
+              <div className="divide-y divide-neutral-100">
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('subject')}
                 >
                   <Checkbox
@@ -336,13 +330,13 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
                       Email Subject
                     </Label>
                     {selectedTemplate?.subject && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{selectedTemplate.subject}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5 truncate">{selectedTemplate.subject}</p>
                     )}
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('body')}
                 >
                   <Checkbox id="body" checked={selectedFields.body} onCheckedChange={() => toggleField('body')} />
@@ -350,12 +344,12 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
                     <Label htmlFor="body" className="text-sm font-medium cursor-pointer">
                       Email Body
                     </Label>
-                    <p className="text-xs text-neutral-500 mt-0.5">The full email content and design</p>
+                    <p className="text-xs text-neutral-400 mt-0.5">Full email content and design</p>
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('from')}
                 >
                   <Checkbox id="from" checked={selectedFields.from} onCheckedChange={() => toggleField('from')} />
@@ -364,13 +358,13 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
                       From Email
                     </Label>
                     {selectedTemplate?.from && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{selectedTemplate.from}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5">{selectedTemplate.from}</p>
                     )}
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('fromName')}
                 >
                   <Checkbox
@@ -383,13 +377,13 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
                       From Name
                     </Label>
                     {selectedTemplate?.fromName && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{selectedTemplate.fromName}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5">{selectedTemplate.fromName}</p>
                     )}
                   </div>
                 </div>
 
                 <div
-                  className="flex items-center space-x-3 p-3 rounded-lg border border-neutral-200 hover:bg-neutral-50 transition-colors cursor-pointer"
+                  className="flex items-center gap-3 py-3 cursor-pointer hover:text-neutral-900 transition-colors"
                   onClick={() => toggleField('replyTo')}
                 >
                   <Checkbox
@@ -402,7 +396,7 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
                       Reply-To Email
                     </Label>
                     {selectedTemplate?.replyTo && (
-                      <p className="text-xs text-neutral-500 mt-0.5">{selectedTemplate.replyTo}</p>
+                      <p className="text-xs text-neutral-400 mt-0.5">{selectedTemplate.replyTo}</p>
                     )}
                   </div>
                 </div>
diff --git a/apps/web/src/components/WorkflowBuilder.tsx b/apps/web/src/components/WorkflowBuilder.tsx
index be2ba17..2f4d9b1 100644
--- a/apps/web/src/components/WorkflowBuilder.tsx
+++ b/apps/web/src/components/WorkflowBuilder.tsx
@@ -209,8 +209,8 @@ function AddStepNode({data}: {data: {label: string; onClick?: () => void}}) {
       />
 
       <div className="cursor-pointer hover:scale-105 transition-transform" onClick={data.onClick}>
-        <div className="w-16 h-16 rounded-full bg-gradient-to-br from-neutral-100 to-neutral-200 border-2 border-dashed border-neutral-400 hover:border-neutral-600 hover:from-blue-50 hover:to-blue-100 hover:border-blue-400 flex items-center justify-center shadow-md transition-all">
-          <Plus className="h-8 w-8 text-neutral-500 transition-colors" />
+        <div className="w-16 h-16 rounded-full bg-neutral-100 border-2 border-dashed border-neutral-400 hover:border-neutral-600 hover:bg-white flex items-center justify-center transition-all">
+          <Plus className="h-8 w-8 text-neutral-500 hover:text-neutral-700 transition-colors" />
         </div>
         {data.label && <div className="text-xs text-neutral-500 text-center mt-2 font-medium">{data.label}</div>}
       </div>
@@ -255,7 +255,7 @@ function CustomNode({
       />
 
       <div
-        className="px-5 py-4 rounded-xl border-2 bg-white shadow-lg hover:shadow-xl transition-all relative group"
+        className="px-5 py-4 rounded-xl border-2 bg-white shadow-sm hover:shadow-md transition-all relative group"
         style={{
           borderColor: color,
           minWidth: '280px',
@@ -274,7 +274,7 @@ function CustomNode({
               }}
               variant="outline"
               size="icon"
-              className="h-7 w-7 shadow-md"
+              className="h-7 w-7"
               title="Edit trigger settings"
             >
               <Settings className="h-3.5 w-3.5" />
@@ -290,7 +290,7 @@ function CustomNode({
               }}
               variant="outline"
               size="icon"
-              className="h-7 w-7 shadow-md"
+              className="h-7 w-7"
               title="Edit step"
             >
               <Settings className="h-3.5 w-3.5" />
@@ -302,7 +302,7 @@ function CustomNode({
               }}
               variant="outline"
               size="icon"
-              className="h-7 w-7 shadow-md hover:bg-red-50 hover:border-red-400"
+              className="h-7 w-7 hover:bg-red-50 hover:border-red-400"
               title="Delete step"
             >
               <Trash2 className="h-3.5 w-3.5" />
@@ -905,19 +905,19 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
           <Background color="#e5e7eb" gap={16} size={1} />
           <Controls
             showInteractive={false}
-            className="bg-white/90 backdrop-blur-sm border border-neutral-200 rounded-lg shadow-lg"
+            className="bg-white border border-neutral-200 rounded-lg shadow-md"
           />
           <MiniMap
             nodeColor={node => {
               const step = steps.find(s => s.id === node.id);
               return step ? STEP_TYPE_COLORS[step.type as keyof typeof STEP_TYPE_COLORS] : '#6b7280';
             }}
-            className="bg-white/90 backdrop-blur-sm border border-neutral-200 rounded-lg shadow-lg"
+            className="bg-white border border-neutral-200 rounded-lg shadow-md"
             maskColor="rgba(0, 0, 0, 0.05)"
           />
           <Panel
             position="top-left"
-            className="bg-white/95 backdrop-blur-sm px-4 py-2.5 rounded-lg shadow-lg border border-neutral-200"
+            className="bg-white px-4 py-2.5 rounded-lg shadow-md border border-neutral-200"
           >
             <div className="flex items-center gap-3">
               <GitBranch className="h-4 w-4 text-neutral-700" />
@@ -933,7 +933,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
           <Panel position="top-right" className="flex gap-2">
             <button
               onClick={handleAutoLayout}
-              className="bg-white/95 backdrop-blur-sm px-4 py-2 rounded-lg shadow-lg border border-neutral-200 text-sm font-medium text-neutral-700 hover:bg-white hover:text-neutral-900 transition-all"
+              className="bg-white px-4 py-2 rounded-lg shadow-md border border-neutral-200 text-sm font-medium text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
             >
               Auto Layout
             </button>
@@ -941,11 +941,11 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
           {rawEdges.length === 0 && steps.length > 1 && (
             <Panel
               position="bottom-center"
-              className="bg-blue-50 border border-blue-200 px-4 py-2.5 rounded-lg shadow-lg"
+              className="bg-white border border-neutral-200 px-4 py-2.5 rounded-lg shadow-sm"
             >
-              <div className="flex items-center gap-2 text-sm text-blue-900">
+              <div className="flex items-center gap-2 text-sm text-neutral-600">
                 <Lightbulb className="h-4 w-4" />
-                <span>Click the + buttons to add and connect steps!</span>
+                <span>Click the + buttons to add and connect steps.</span>
               </div>
             </Panel>
           )}
@@ -965,16 +965,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
                 <button
                   key={option.value}
                   onClick={() => handleCreateStep(option.value)}
-                  className="flex flex-col items-center gap-2 p-4 rounded-lg border-2 border-neutral-200 hover:border-neutral-400 hover:bg-neutral-50 transition-all group"
-                  style={{
-                    borderColor: 'transparent',
-                  }}
-                  onMouseEnter={e => {
-                    e.currentTarget.style.borderColor = option.color;
-                  }}
-                  onMouseLeave={e => {
-                    e.currentTarget.style.borderColor = 'transparent';
-                  }}
+                  className="flex flex-col items-center gap-2 p-4 rounded-lg border border-neutral-200 hover:border-neutral-400 hover:bg-neutral-50 transition-all group"
                 >
                   <div
                     className="w-12 h-12 rounded-lg flex items-center justify-center transition-transform group-hover:scale-110"
diff --git a/apps/web/src/components/WorkflowVisualizer.tsx b/apps/web/src/components/WorkflowVisualizer.tsx
index 4ece5af..73c14d3 100644
--- a/apps/web/src/components/WorkflowVisualizer.tsx
+++ b/apps/web/src/components/WorkflowVisualizer.tsx
@@ -143,7 +143,7 @@ function CustomNode({
       />
 
       <div
-        className="px-5 py-4 rounded-xl border-2 bg-white shadow-lg hover:shadow-xl transition-all cursor-grab active:cursor-grabbing"
+        className="px-5 py-4 rounded-xl border-2 bg-white shadow-sm hover:shadow-md transition-all cursor-grab active:cursor-grabbing"
         style={{
           borderColor: color,
           minWidth: '250px',
@@ -496,11 +496,11 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
         <Background color="#e5e7eb" gap={16} size={1} />
         <Controls
           showInteractive={false}
-          className="bg-white/90 backdrop-blur-sm border border-neutral-200 rounded-lg shadow-lg"
+          className="bg-white border border-neutral-200 rounded-lg shadow-md"
         />
         <Panel
           position="top-left"
-          className="bg-white/95 backdrop-blur-sm px-4 py-2.5 rounded-lg shadow-lg border border-neutral-200"
+          className="bg-white px-4 py-2.5 rounded-lg shadow-md border border-neutral-200"
         >
           <div className="flex items-center gap-3">
             <GitBranch className="h-4 w-4 text-neutral-700" />
@@ -516,9 +516,9 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
         {rawEdges.length === 0 && steps.length > 1 && (
           <Panel
             position="bottom-center"
-            className="bg-amber-50 border border-amber-200 px-4 py-2.5 rounded-lg shadow-lg"
+            className="bg-white border border-neutral-200 px-4 py-2.5 rounded-lg shadow-sm"
           >
-            <div className="flex items-center gap-2 text-sm text-amber-900">
+            <div className="flex items-center gap-2 text-sm text-neutral-600">
               <AlertTriangle className="h-4 w-4" />
               <span>No transitions found. Connect your steps to see the flow.</span>
             </div>
diff --git a/apps/web/src/pages/analytics/index.tsx b/apps/web/src/pages/analytics/index.tsx
index d725be4..1d4d5b1 100644
--- a/apps/web/src/pages/analytics/index.tsx
+++ b/apps/web/src/pages/analytics/index.tsx
@@ -271,9 +271,9 @@ export default function AnalyticsPage() {
               {!hasData ? (
                 <div className="flex h-[400px] w-full items-center justify-center">
                   <div className="text-center">
-                    <Mail className="mx-auto h-12 w-12 text-muted-foreground/50" />
-                    <h3 className="mt-4 text-sm font-semibold text-neutral-900">No email data yet</h3>
-                    <p className="mt-2 text-sm text-muted-foreground">Send your first email to see analytics here</p>
+                    <Mail className="mx-auto h-8 w-8 text-neutral-300" />
+                    <h3 className="mt-3 text-sm font-semibold text-neutral-900">No email data yet</h3>
+                    <p className="mt-1 text-sm text-neutral-500">Send your first email to see analytics here.</p>
                   </div>
                 </div>
               ) : (
@@ -380,10 +380,10 @@ export default function AnalyticsPage() {
               {!hasData ? (
                 <div className="flex h-[300px] w-full items-center justify-center">
                   <div className="text-center">
-                    <Eye className="mx-auto h-12 w-12 text-muted-foreground/50" />
-                    <h3 className="mt-4 text-sm font-semibold text-neutral-900">No engagement data</h3>
-                    <p className="mt-2 text-sm text-muted-foreground">
-                      Engagement metrics will appear once emails are opened
+                    <Eye className="mx-auto h-8 w-8 text-neutral-300" />
+                    <h3 className="mt-3 text-sm font-semibold text-neutral-900">No engagement data</h3>
+                    <p className="mt-1 text-sm text-neutral-500">
+                      Engagement metrics will appear once emails are opened.
                     </p>
                   </div>
                 </div>
diff --git a/apps/web/src/pages/campaigns/[id].tsx b/apps/web/src/pages/campaigns/[id].tsx
index 9b102c4..b12f10e 100644
--- a/apps/web/src/pages/campaigns/[id].tsx
+++ b/apps/web/src/pages/campaigns/[id].tsx
@@ -41,7 +41,6 @@ import {
   ArrowLeft,
   Calendar,
   ChevronDown,
-  Info,
   Mail,
   MousePointer,
   Save,
@@ -622,24 +621,20 @@ export default function CampaignDetailsPage() {
 
                 {/* Show recipient count */}
                 {draftRecipientCount > 0 && (
-                  <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg space-y-2">
+                  <div className="mt-4 p-3 bg-neutral-50 border border-neutral-200 rounded-lg space-y-1.5">
                     <div className="flex items-center gap-2">
-                      <Users className="h-4 w-4 text-blue-600" />
-                      <span className="text-sm font-medium text-blue-900">
+                      <Users className="h-4 w-4 text-neutral-400" />
+                      <span className="text-sm font-medium text-neutral-900">
                         {draftRecipientCount.toLocaleString()} recipients
                       </span>
                     </div>
-                    <div className="flex items-start gap-2">
-                      <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
-                      <p className="text-xs text-blue-800">
-                        This count will be recalculated right before sending to ensure accuracy. The final number may
-                        differ if contacts{' '}
-                        {(editedCampaign.type ?? c.type) === TemplateType.TRANSACTIONAL
-                          ? 'are added or removed, or segment membership changes.'
-                          : 'subscribe, unsubscribe, or segment membership changes.'
-                        }
-                      </p>
-                    </div>
+                    <p className="text-xs text-neutral-500 pl-6">
+                      Recalculated at send time. Final count may differ if contacts{' '}
+                      {(editedCampaign.type ?? c.type) === TemplateType.TRANSACTIONAL
+                        ? 'are added or removed, or segment membership changes.'
+                        : 'subscribe, unsubscribe, or segment membership changes.'
+                      }
+                    </p>
                   </div>
                 )}
               </CardContent>
@@ -792,12 +787,10 @@ export default function CampaignDetailsPage() {
                     className="mt-2"
                   />
                   {scheduledDateTime && (
-                    <div className="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
-                      <p className="text-xs font-medium text-blue-900 mb-1">Scheduled for:</p>
-                      <p className="text-sm text-blue-800">
-                        <span className="font-medium">{formatFullDateTime(new Date(scheduledDateTime))}</span>
-                      </p>
-                      <p className="text-xs text-blue-700 mt-1">
+                    <div className="mt-2 p-3 bg-neutral-50 border border-neutral-200 rounded-lg">
+                      <p className="text-xs font-medium text-neutral-500 mb-1">Scheduled for:</p>
+                      <p className="text-sm font-medium text-neutral-900">{formatFullDateTime(new Date(scheduledDateTime))}</p>
+                      <p className="text-xs text-neutral-500 mt-1">
                         UTC: {formatUTCDateTime(new Date(scheduledDateTime))}
                       </p>
                     </div>
@@ -884,30 +877,30 @@ export default function CampaignDetailsPage() {
 
         {/* Sending Progress Banner */}
         {c.status === CampaignStatus.SENDING && s && (
-          <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
+          <Card>
             <CardContent className="pt-6">
               <div className="space-y-4">
                 <div className="flex items-center justify-between">
                   <div>
                     <h3 className="font-semibold text-neutral-900 text-lg">Sending in progress</h3>
-                    <p className="text-sm text-neutral-600 mt-1">
+                    <p className="text-sm text-neutral-500 mt-1">
                       {s.sentCount.toLocaleString()} of {s.totalRecipients.toLocaleString()} emails sent
                     </p>
                   </div>
                   <div className="text-right">
-                    <div className="text-3xl font-bold text-blue-600">
+                    <div className="text-3xl font-bold text-neutral-900">
                       {((s.sentCount / s.totalRecipients) * 100).toFixed(0)}%
                     </div>
                     <p className="text-xs text-neutral-500 mt-1">Complete</p>
                   </div>
                 </div>
-                <div className="w-full bg-neutral-200 rounded-full h-3">
+                <div className="w-full bg-neutral-100 rounded-full h-2">
                   <div
-                    className="bg-blue-500 h-3 rounded-full transition-all duration-500"
+                    className="bg-neutral-900 h-2 rounded-full transition-all duration-500"
                     style={{width: `${(s.sentCount / s.totalRecipients) * 100}%`}}
                   />
                 </div>
-                <p className="text-xs text-neutral-500">This page updates automatically every 5 seconds</p>
+                <p className="text-xs text-neutral-400">This page updates automatically every 5 seconds</p>
               </div>
             </CardContent>
           </Card>
@@ -916,12 +909,10 @@ export default function CampaignDetailsPage() {
         {/* Stats Cards */}
         {s && (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <Card className="border-l-4 border-l-blue-500">
+            <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-neutral-600">Total Recipients</CardTitle>
-                <div className="p-2 bg-blue-100 rounded-lg">
-                  <Users className="h-4 w-4 text-blue-600" />
-                </div>
+                <CardTitle className="text-sm font-medium text-neutral-500">Total Recipients</CardTitle>
+                <Users className="h-4 w-4 text-neutral-400" />
               </CardHeader>
               <CardContent>
                 <div className="text-3xl font-bold text-neutral-900">{s.totalRecipients.toLocaleString()}</div>
@@ -931,12 +922,10 @@ export default function CampaignDetailsPage() {
               </CardContent>
             </Card>
 
-            <Card className="border-l-4 border-l-green-500">
+            <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-neutral-600">Delivery Rate</CardTitle>
-                <div className="p-2 bg-green-100 rounded-lg">
-                  <Mail className="h-4 w-4 text-green-600" />
-                </div>
+                <CardTitle className="text-sm font-medium text-neutral-500">Delivery Rate</CardTitle>
+                <Mail className="h-4 w-4 text-neutral-400" />
               </CardHeader>
               <CardContent>
                 <div className="text-3xl font-bold text-neutral-900">{s.deliveryRate.toFixed(1)}%</div>
@@ -947,12 +936,10 @@ export default function CampaignDetailsPage() {
               </CardContent>
             </Card>
 
-            <Card className="border-l-4 border-l-purple-500">
+            <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-neutral-600">Open Rate</CardTitle>
-                <div className="p-2 bg-purple-100 rounded-lg">
-                  <TrendingUp className="h-4 w-4 text-purple-600" />
-                </div>
+                <CardTitle className="text-sm font-medium text-neutral-500">Open Rate</CardTitle>
+                <TrendingUp className="h-4 w-4 text-neutral-400" />
               </CardHeader>
               <CardContent>
                 <div className="text-3xl font-bold text-neutral-900">{s.openRate.toFixed(1)}%</div>
@@ -960,12 +947,10 @@ export default function CampaignDetailsPage() {
               </CardContent>
             </Card>
 
-            <Card className="border-l-4 border-l-orange-500">
+            <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-neutral-600">Click Rate</CardTitle>
-                <div className="p-2 bg-orange-100 rounded-lg">
-                  <MousePointer className="h-4 w-4 text-orange-600" />
-                </div>
+                <CardTitle className="text-sm font-medium text-neutral-500">Click Rate</CardTitle>
+                <MousePointer className="h-4 w-4 text-neutral-400" />
               </CardHeader>
               <CardContent>
                 <div className="text-3xl font-bold text-neutral-900">{s.clickRate.toFixed(1)}%</div>
@@ -1063,10 +1048,7 @@ export default function CampaignDetailsPage() {
                         </p>
                       </div>
                       {c.status === CampaignStatus.SCHEDULED && (
-                        <div className="flex items-start gap-1.5 p-2 bg-blue-50 border border-blue-200 rounded">
-                          <Info className="h-3 w-3 text-blue-600 mt-0.5 flex-shrink-0" />
-                          <p className="text-xs text-blue-800">Recipient count will be recalculated at send time</p>
-                        </div>
+                        <p className="text-xs text-neutral-500">Recipient count will be recalculated at send time</p>
                       )}
                     </div>
                   </div>
diff --git a/apps/web/src/pages/campaigns/create.tsx b/apps/web/src/pages/campaigns/create.tsx
index 37396c2..bbcfc71 100644
--- a/apps/web/src/pages/campaigns/create.tsx
+++ b/apps/web/src/pages/campaigns/create.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   Card,
   CardContent,
+  CardDescription,
   CardHeader,
   CardTitle,
   Input,
@@ -12,7 +13,6 @@ import {
   SelectItemWithDescription,
   SelectTrigger,
   SelectValue,
-  Textarea,
 } from '@plunk/ui';
 import type {Segment, Template} from '@plunk/db';
 import {CampaignAudienceType, TemplateType} from '@plunk/db';
@@ -20,10 +20,9 @@ import {NextSeo} from 'next-seo';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {EmailSettings} from '../../components/EmailSettings';
 import {EmailEditor} from '../../components/EmailEditor';
-import {StepHeader} from '../../components/StepHeader';
 import {network} from '../../lib/network';
 import {EmailFormValidator} from '../../lib/validation';
-import {ArrowLeft, Save, TriangleAlert, Users} from 'lucide-react';
+import {ArrowLeft, TriangleAlert} from 'lucide-react';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {useEffect, useState} from 'react';
@@ -50,7 +49,6 @@ export default function CreateCampaignPage() {
 
   const {data: segments} = useSWR<Segment[]>('/segments', {revalidateOnFocus: false});
 
-  // Load template or campaign data if provided in query params
   useEffect(() => {
     const loadData = async () => {
       const {
@@ -65,36 +63,26 @@ export default function CreateCampaignPage() {
         segmentId: querySegmentId,
       } = router.query;
 
-      // Handle template loading
       if (templateId && typeof templateId === 'string') {
         setLoadingTemplate(true);
         try {
-          // Fetch the full template to get the body content
           const template = await network.fetch<Template>('GET', `/templates/${templateId}`);
-
-          // Pre-fill form with template data
           if (queryName && typeof queryName === 'string') setName(queryName);
           if (querySubject && typeof querySubject === 'string') setSubject(querySubject);
           if (queryFrom && typeof queryFrom === 'string') setFrom(queryFrom);
           if (queryFromName && typeof queryFromName === 'string') setFromName(queryFromName);
           if (queryReplyTo && typeof queryReplyTo === 'string') setReplyTo(queryReplyTo);
           setBody(template.body);
-
           toast.success('Template loaded successfully');
         } catch {
           toast.error('Failed to load template');
         } finally {
           setLoadingTemplate(false);
         }
-      }
-      // Handle campaign loading
-      else if (campaignId && typeof campaignId === 'string') {
+      } else if (campaignId && typeof campaignId === 'string') {
         setLoadingTemplate(true);
         try {
-          // Fetch the full campaign to get the body content
           const campaign = await network.fetch<{data: {body: string}}>('GET', `/campaigns/${campaignId}`);
-
-          // Pre-fill form with campaign data
           if (queryName && typeof queryName === 'string') setName(queryName);
           if (querySubject && typeof querySubject === 'string') setSubject(querySubject);
           if (queryFrom && typeof queryFrom === 'string') setFrom(queryFrom);
@@ -105,16 +93,13 @@ export default function CreateCampaignPage() {
           }
           if (querySegmentId && typeof querySegmentId === 'string') setSegmentId(querySegmentId);
           setBody(campaign.data.body);
-
           toast.success('Campaign loaded successfully');
         } catch {
           toast.error('Failed to load campaign');
         } finally {
           setLoadingTemplate(false);
         }
-      }
-      // Handle query params without template/campaign ID (direct field values)
-      else {
+      } else {
         if (queryName && typeof queryName === 'string') setName(queryName);
         if (querySubject && typeof querySubject === 'string') setSubject(querySubject);
         if (queryFrom && typeof queryFrom === 'string') setFrom(queryFrom);
@@ -166,13 +151,12 @@ export default function CreateCampaignPage() {
     }
   };
 
-  // Calculate estimated recipients
   const getEstimatedRecipients = () => {
     if (audienceType === CampaignAudienceType.SEGMENT && segmentId && segments) {
       const segment = segments.find(s => s.id === segmentId);
       return segment?.memberCount || 0;
     }
-    return 0; // We don't have total contact count here, but in a real scenario you'd fetch it
+    return 0;
   };
 
   const estimatedRecipients = getEstimatedRecipients();
@@ -217,19 +201,15 @@ export default function CreateCampaignPage() {
             </div>
           </div>
 
-          {/* Form */}
           <form onSubmit={handleSubmit}>
-            <div className="grid gap-6 lg:grid-cols-3">
-              {/* Left Column - Settings (2/3 width) */}
-              <div className="lg:col-span-2 space-y-6">
+            <div className="space-y-6">
+              {/* Row 1: Basic Info + Campaign Type */}
+              <div className="grid gap-6 md:grid-cols-2">
                 {/* Basic Information */}
                 <Card>
                   <CardHeader>
-                    <StepHeader
-                      stepNumber={1}
-                      title="Basic Information"
-                      description="Name and describe your campaign"
-                    />
+                    <CardTitle>Basic Information</CardTitle>
+                    <CardDescription>Name and describe your campaign</CardDescription>
                   </CardHeader>
                   <CardContent className="space-y-4">
                     <div className="space-y-2">
@@ -246,14 +226,12 @@ export default function CreateCampaignPage() {
                     </div>
 
                     <div className="space-y-2">
-                      <Label htmlFor="description">Description (Optional)</Label>
-                      <Textarea
+                      <Label htmlFor="description">Description</Label>
+                      <Input
                         id="description"
                         placeholder="Internal notes about this campaign"
                         value={description}
                         onChange={e => setDescription(e.target.value)}
-                        rows={2}
-                        className="resize-none"
                       />
                     </div>
                   </CardContent>
@@ -262,56 +240,30 @@ export default function CreateCampaignPage() {
                 {/* Campaign Type */}
                 <Card>
                   <CardHeader>
-                    <StepHeader
-                      stepNumber={2}
-                      title="Campaign Type"
-                      description="Choose how this campaign should be treated"
-                    />
+                    <CardTitle>Campaign Type</CardTitle>
+                    <CardDescription>Choose how this campaign should be treated</CardDescription>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid grid-cols-3 gap-3">
-                      <button
-                        type="button"
-                        onClick={() => setCampaignType(TemplateType.MARKETING)}
-                        className={`text-left p-4 rounded-lg border-2 transition-colors ${
-                          campaignType === TemplateType.MARKETING
-                            ? 'border-neutral-900 bg-neutral-50'
-                            : 'border-neutral-200 hover:border-neutral-300'
-                        }`}
-                      >
-                        <p className="font-medium text-sm text-neutral-900">Marketing</p>
-                        <p className="text-xs text-neutral-500 mt-1">
-                          Sent to subscribed contacts only. Includes unsubscribe link.
-                        </p>
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setCampaignType(TemplateType.TRANSACTIONAL)}
-                        className={`text-left p-4 rounded-lg border-2 transition-colors ${
-                          campaignType === TemplateType.TRANSACTIONAL
-                            ? 'border-neutral-900 bg-neutral-50'
-                            : 'border-neutral-200 hover:border-neutral-300'
-                        }`}
-                      >
-                        <p className="font-medium text-sm text-neutral-900">Transactional</p>
-                        <p className="text-xs text-neutral-500 mt-1">
-                          Sent to all contacts regardless of subscription status. No unsubscribe footer.
-                        </p>
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setCampaignType(TemplateType.HEADLESS)}
-                        className={`text-left p-4 rounded-lg border-2 transition-colors ${
-                          campaignType === TemplateType.HEADLESS
-                            ? 'border-neutral-900 bg-neutral-50'
-                            : 'border-neutral-200 hover:border-neutral-300'
-                        }`}
-                      >
-                        <p className="font-medium text-sm text-neutral-900">Headless</p>
-                        <p className="text-xs text-neutral-500 mt-1">
-                          Sent to subscribed contacts only. No Plunk footer — you provide the unsubscribe link.
-                        </p>
-                      </button>
+                    <div className="flex flex-col gap-2">
+                      {([
+                        {value: TemplateType.MARKETING, label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'},
+                        {value: TemplateType.TRANSACTIONAL, label: 'Transactional', description: 'All contacts, no subscription check or footer'},
+                        {value: TemplateType.HEADLESS, label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
+                      ] as const).map(({value, label, description}) => (
+                        <button
+                          key={value}
+                          type="button"
+                          onClick={() => setCampaignType(value)}
+                          className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
+                            campaignType === value
+                              ? 'border-neutral-900 bg-neutral-50'
+                              : 'border-neutral-200 hover:border-neutral-300'
+                          }`}
+                        >
+                          <span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
+                          <span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
+                        </button>
+                      ))}
                     </div>
                     {campaignType === TemplateType.HEADLESS && !detectUnsubscribeSignal(body) && (
                       <div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
@@ -336,249 +288,131 @@ export default function CreateCampaignPage() {
                     )}
                   </CardContent>
                 </Card>
-
-                {/* Email Settings */}
-                <Card>
-                  <CardHeader>
-                    <StepHeader
-                      stepNumber={3}
-                      title="Email Settings"
-                      description="Configure sender information and subject"
-                    />
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <EmailSettings
-                      from={from}
-                      fromName={fromName}
-                      replyTo={replyTo}
-                      onFromChange={setFrom}
-                      onFromNameChange={setFromName}
-                      onReplyToChange={setReplyTo}
-                      fromNamePlaceholder={activeProject?.name || 'Your Company'}
-                    />
-
-                    <div className="space-y-2">
-                      <Label htmlFor="subject">
-                        Email Subject <span className="text-red-500">*</span>
-                      </Label>
-                      <Input
-                        id="subject"
-                        placeholder="e.g., Introducing our Spring Sale!"
-                        value={subject}
-                        onChange={e => setSubject(e.target.value)}
-                        required
-                      />
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Email Content */}
-                <Card className="overflow-visible">
-                  <CardHeader>
-                    <StepHeader stepNumber={4} title="Email Content" description="Design your email message" />
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2">
-                      <Label htmlFor="body">
-                        Email Body <span className="text-red-500">*</span>
-                      </Label>
-                      <EmailEditor value={body} onChange={setBody} />
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Audience Selection */}
-                <Card>
-                  <CardHeader>
-                    <StepHeader stepNumber={5} title="Audience" description="Choose who will receive this campaign" />
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="audienceType">
-                        Audience Type <span className="text-red-500">*</span>
-                      </Label>
-                      <Select
-                        value={audienceType}
-                        onValueChange={value => setAudienceType(value as CampaignAudienceType)}
-                        required
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select audience type" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItemWithDescription
-                            value={CampaignAudienceType.ALL}
-                            title={campaignType === TemplateType.TRANSACTIONAL ? 'All Contacts' : 'All Subscribed Contacts'}
-                            description={campaignType === TemplateType.TRANSACTIONAL ? 'Send to all contacts regardless of subscription status' : "Send to everyone who hasn't unsubscribed"}
-                          />
-                          <SelectItemWithDescription
-                            value={CampaignAudienceType.SEGMENT}
-                            title="Specific Segment"
-                            description="Target a defined group of contacts"
-                          />
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    {audienceType === CampaignAudienceType.SEGMENT && (
-                      <div className="space-y-2">
-                        <Label htmlFor="segment">
-                          Select Segment <span className="text-red-500">*</span>
-                        </Label>
-                        <Select value={segmentId} onValueChange={setSegmentId} required>
-                          <SelectTrigger>
-                            <SelectValue placeholder="Choose a segment" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {segments?.map(segment => (
-                              <SelectItemWithDescription
-                                key={segment.id}
-                                value={segment.id}
-                                title={segment.name}
-                                description={`${segment.memberCount.toLocaleString()} contacts`}
-                              />
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        {segments?.length === 0 && (
-                          <p className="text-sm text-neutral-500 mt-2">
-                            No segments found.{' '}
-                            <Link href="/segments/new" className="text-primary hover:underline">
-                              Create one first
-                            </Link>
-                          </p>
-                        )}
-                      </div>
-                    )}
-
-                    {audienceType === CampaignAudienceType.SEGMENT && estimatedRecipients > 0 && (
-                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
-                        <Users className="h-5 w-5 text-blue-600 mt-0.5" />
-                        <div>
-                          <p className="text-sm font-medium text-blue-900">
-                            {estimatedRecipients.toLocaleString()} recipients
-                          </p>
-                          <p className="text-xs text-blue-700 mt-1">
-                            This campaign will be sent to all contacts in the selected segment
-                          </p>
-                        </div>
-                      </div>
-                    )}
-
-                    {audienceType === CampaignAudienceType.ALL && (
-                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
-                        <Users className="h-5 w-5 text-blue-600 mt-0.5" />
-                        <div>
-                          <p className="text-sm font-medium text-blue-900">
-                            {campaignType === TemplateType.TRANSACTIONAL ? 'All contacts' : 'All subscribed contacts'}
-                          </p>
-                          <p className="text-xs text-blue-700 mt-1">
-                            {campaignType === TemplateType.TRANSACTIONAL
-                              ? 'This campaign will be sent to all contacts regardless of subscription status'
-                              : "This campaign will be sent to all contacts who haven't unsubscribed"}
-                          </p>
-                        </div>
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
               </div>
 
-              {/* Right Column - Summary & Actions (1/3 width) */}
-              <div className="space-y-6">
-                {/* Campaign Summary */}
-                <Card className="sticky top-6">
-                  <CardHeader>
-                    <CardTitle className="text-lg">Campaign Summary</CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div className="space-y-3 text-sm">
-                      <div className="flex justify-between py-2 border-b border-neutral-100">
-                        <span className="text-neutral-500">Status</span>
-                        <span className="font-medium">Draft</span>
-                      </div>
+              {/* Email Settings */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Email Settings</CardTitle>
+                  <CardDescription>Configure sender information and subject</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <EmailSettings
+                    from={from}
+                    fromName={fromName}
+                    replyTo={replyTo}
+                    onFromChange={setFrom}
+                    onFromNameChange={setFromName}
+                    onReplyToChange={setReplyTo}
+                    fromNamePlaceholder={activeProject?.name || 'Your Company'}
+                  />
 
-                      {name && (
-                        <div className="flex justify-between py-2 border-b border-neutral-100">
-                          <span className="text-neutral-500">Name</span>
-                          <span className="font-medium text-right truncate ml-2" title={name}>
-                            {name}
-                          </span>
-                        </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="subject">
+                      Email Subject <span className="text-red-500">*</span>
+                    </Label>
+                    <Input
+                      id="subject"
+                      placeholder="e.g., Introducing our Spring Sale!"
+                      value={subject}
+                      onChange={e => setSubject(e.target.value)}
+                      required
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Email Content */}
+              <Card className="overflow-visible">
+                <CardHeader>
+                  <CardTitle>Email Content</CardTitle>
+                  <CardDescription>Design your email message</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <EmailEditor value={body} onChange={setBody} />
+                </CardContent>
+              </Card>
+
+              {/* Audience */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Audience</CardTitle>
+                  <CardDescription>Choose who will receive this campaign</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="audienceType">
+                      Audience Type <span className="text-red-500">*</span>
+                    </Label>
+                    <Select
+                      value={audienceType}
+                      onValueChange={value => setAudienceType(value as CampaignAudienceType)}
+                      required
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select audience type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItemWithDescription
+                          value={CampaignAudienceType.ALL}
+                          title={campaignType === TemplateType.TRANSACTIONAL ? 'All Contacts' : 'All Subscribed Contacts'}
+                          description={campaignType === TemplateType.TRANSACTIONAL ? 'Send to all contacts regardless of subscription status' : "Send to everyone who hasn't unsubscribed"}
+                        />
+                        <SelectItemWithDescription
+                          value={CampaignAudienceType.SEGMENT}
+                          title="Specific Segment"
+                          description="Target a defined group of contacts"
+                        />
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {audienceType === CampaignAudienceType.SEGMENT && (
+                    <div className="space-y-2">
+                      <Label htmlFor="segment">
+                        Select Segment <span className="text-red-500">*</span>
+                      </Label>
+                      <Select value={segmentId} onValueChange={setSegmentId} required>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Choose a segment" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {segments?.map(segment => (
+                            <SelectItemWithDescription
+                              key={segment.id}
+                              value={segment.id}
+                              title={segment.name}
+                              description={`${segment.memberCount.toLocaleString()} contacts`}
+                            />
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      {segments?.length === 0 && (
+                        <p className="text-sm text-neutral-500">
+                          No segments found.{' '}
+                          <Link href="/segments/new" className="underline">
+                            Create one first
+                          </Link>
+                        </p>
                       )}
-
-                      {subject && (
-                        <div className="py-2 border-b border-neutral-100">
-                          <span className="text-neutral-500 block mb-1">Subject</span>
-                          <span className="font-medium text-sm">{subject}</span>
-                        </div>
-                      )}
-
-                      {from && (
-                        <div className="flex justify-between py-2 border-b border-neutral-100">
-                          <span className="text-neutral-500">From</span>
-                          <span className="font-medium text-right truncate ml-2" title={from}>
-                            {from}
-                          </span>
-                        </div>
-                      )}
-
-                      <div className="flex justify-between py-2 border-b border-neutral-100">
-                        <span className="text-neutral-500">Type</span>
-                        <span className="font-medium">
-                          {campaignType === TemplateType.MARKETING ? 'Marketing' : campaignType === TemplateType.HEADLESS ? 'Headless' : 'Transactional'}
-                        </span>
-                      </div>
-
-                      <div className="flex justify-between py-2 border-b border-neutral-100">
-                        <span className="text-neutral-500">Audience</span>
-                        <span className="font-medium">
-                          {audienceType === CampaignAudienceType.ALL ? 'All Contacts' : 'Segment'}
-                        </span>
-                      </div>
-
-                      {audienceType === CampaignAudienceType.SEGMENT && estimatedRecipients > 0 && (
-                        <div className="flex justify-between py-2">
-                          <span className="text-neutral-500">Recipients</span>
-                          <span className="font-medium">{estimatedRecipients.toLocaleString()}</span>
-                        </div>
-                      )}
-
-                      {audienceType === CampaignAudienceType.ALL && (
-                        <div className="flex justify-between py-2">
-                          <span className="text-neutral-500">Recipients</span>
-                          <span className="font-medium">All subscribed</span>
-                        </div>
+                      {estimatedRecipients > 0 && (
+                        <p className="text-sm text-neutral-500">
+                          <span className="font-medium text-neutral-900">{estimatedRecipients.toLocaleString()} recipients</span> in this segment
+                        </p>
                       )}
                     </div>
+                  )}
+                </CardContent>
+              </Card>
 
-                    {/* Info Note */}
-                    <div className="bg-neutral-50 border border-neutral-200 rounded-lg p-3 mt-4">
-                      <p className="text-xs text-neutral-600 leading-relaxed">
-                        After creating this campaign, you&apos;ll be able to review it and choose when to send it.
-                      </p>
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex flex-col gap-2 pt-4">
-                      <Button type="submit" disabled={saving} className="w-full">
-                        {saving ? (
-                          <>Creating...</>
-                        ) : (
-                          <>
-                            <Save className="h-4 w-4" />
-                            Create Campaign
-                          </>
-                        )}
-                      </Button>
-                      <Link href="/campaigns" className="w-full">
-                        <Button type="button" variant="outline" className="w-full">
-                          Cancel
-                        </Button>
-                      </Link>
-                    </div>
-                  </CardContent>
-                </Card>
+              {/* Actions */}
+              <div className="flex justify-end gap-3">
+                <Link href="/campaigns">
+                  <Button type="button" variant="outline">Cancel</Button>
+                </Link>
+                <Button type="submit" disabled={saving}>
+                  {saving ? 'Creating...' : 'Create Campaign'}
+                </Button>
               </div>
             </div>
           </form>
diff --git a/apps/web/src/pages/campaigns/index.tsx b/apps/web/src/pages/campaigns/index.tsx
index 8c2443d..6af6974 100644
--- a/apps/web/src/pages/campaigns/index.tsx
+++ b/apps/web/src/pages/campaigns/index.tsx
@@ -21,6 +21,7 @@ import type {Campaign, Template} from '@plunk/db';
 import {CampaignStatus} from '@plunk/db';
 import type {PaginatedResponse} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
+import {EmptyState} from '../../components/EmptyState';
 import {TemplateSelectionDialog} from '../../components/TemplateSelectionDialog';
 import {CampaignSelectionDialog} from '../../components/CampaignSelectionDialog';
 import {network} from '../../lib/network';
@@ -301,74 +302,71 @@ export default function CampaignsPage() {
 
             {!isLoading && data?.data.length === 0 && (
               <Card>
-                <CardContent className="py-16 text-center">
-                  <div className="max-w-md mx-auto">
-                    <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                      <Mail className="h-8 w-8 text-primary" />
-                    </div>
-                    <h3 className="text-xl font-semibold text-neutral-900 mb-2">
-                      {statusFilter !== 'ALL' ? `No ${statusFilter.toLowerCase()} campaigns` : 'No campaigns yet'}
-                    </h3>
-                    <p className="text-neutral-500 mb-6">
-                      {statusFilter !== 'ALL'
-                        ? 'Try adjusting your filters or create a new campaign.'
-                        : 'Create your first campaign to send emails to your contacts.'}
-                    </p>
-                    {statusFilter === 'ALL' && (
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button size="lg">
+                <CardContent>
+                  <EmptyState
+                    icon={Mail}
+                    title={statusFilter !== 'ALL' ? `No ${statusFilter.toLowerCase()} campaigns` : 'No campaigns yet'}
+                    description={
+                      statusFilter !== 'ALL'
+                        ? 'Adjust your filters or create a new campaign.'
+                        : 'Send one-off emails to groups of contacts.'
+                    }
+                    action={
+                      statusFilter === 'ALL' ? (
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button>
+                              <Plus className="h-4 w-4" />
+                              Create Campaign
+                              <ChevronDown className="h-4 w-4 ml-1" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="center" className="w-80">
+                            <DropdownMenuItem asChild className="py-3 cursor-pointer">
+                              <Link href="/campaigns/create" className="flex items-start gap-3">
+                                <Mail className="h-4 w-4 mt-0.5 text-neutral-700" />
+                                <div className="flex flex-col gap-0.5 flex-1">
+                                  <span className="font-medium text-sm">Empty Campaign</span>
+                                  <span className="text-xs text-neutral-500 leading-snug">
+                                    Start from scratch with a blank canvas
+                                  </span>
+                                </div>
+                              </Link>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => setShowTemplateDialog(true)} className="py-3 cursor-pointer">
+                              <div className="flex items-start gap-3">
+                                <FileText className="h-4 w-4 mt-0.5 text-neutral-700" />
+                                <div className="flex flex-col gap-0.5 flex-1">
+                                  <span className="font-medium text-sm">From Template</span>
+                                  <span className="text-xs text-neutral-500 leading-snug">
+                                    Use an existing template as a starting point
+                                  </span>
+                                </div>
+                              </div>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => setShowCampaignDialog(true)} className="py-3 cursor-pointer">
+                              <div className="flex items-start gap-3">
+                                <RefreshCw className="h-4 w-4 mt-0.5 text-neutral-700" />
+                                <div className="flex flex-col gap-0.5 flex-1">
+                                  <span className="font-medium text-sm">From Previous Campaign</span>
+                                  <span className="text-xs text-neutral-500 leading-snug">
+                                    Copy content and settings from an existing campaign
+                                  </span>
+                                </div>
+                              </div>
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      ) : (
+                        <Link href="/campaigns/create">
+                          <Button>
                             <Plus className="h-4 w-4" />
-                            Create Your First Campaign
-                            <ChevronDown className="h-4 w-4 ml-1" />
+                            Create Campaign
                           </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="center" className="w-80">
-                          <DropdownMenuItem asChild className="py-3 cursor-pointer">
-                            <Link href="/campaigns/create" className="flex items-start gap-3">
-                              <Mail className="h-4 w-4 mt-0.5 text-neutral-700" />
-                              <div className="flex flex-col gap-0.5 flex-1">
-                                <span className="font-medium text-sm">Empty Campaign</span>
-                                <span className="text-xs text-neutral-500 leading-snug">
-                                  Start from scratch with a blank canvas
-                                </span>
-                              </div>
-                            </Link>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => setShowTemplateDialog(true)} className="py-3 cursor-pointer">
-                            <div className="flex items-start gap-3">
-                              <FileText className="h-4 w-4 mt-0.5 text-neutral-700" />
-                              <div className="flex flex-col gap-0.5 flex-1">
-                                <span className="font-medium text-sm">From Template</span>
-                                <span className="text-xs text-neutral-500 leading-snug">
-                                  Use an existing template as a starting point
-                                </span>
-                              </div>
-                            </div>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => setShowCampaignDialog(true)} className="py-3 cursor-pointer">
-                            <div className="flex items-start gap-3">
-                              <RefreshCw className="h-4 w-4 mt-0.5 text-neutral-700" />
-                              <div className="flex flex-col gap-0.5 flex-1">
-                                <span className="font-medium text-sm">From Previous Campaign</span>
-                                <span className="text-xs text-neutral-500 leading-snug">
-                                  Copy content and settings from an existing campaign
-                                </span>
-                              </div>
-                            </div>
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    )}
-                    {statusFilter !== 'ALL' && (
-                      <Link href="/campaigns/create">
-                        <Button size="lg">
-                          <Plus className="h-4 w-4" />
-                          Create Campaign
-                        </Button>
-                      </Link>
-                    )}
-                  </div>
+                        </Link>
+                      )
+                    }
+                  />
                 </CardContent>
               </Card>
             )}
@@ -380,7 +378,7 @@ export default function CampaignsPage() {
                 campaign.totalRecipients > 0 ? (campaign.sentCount / campaign.totalRecipients) * 100 : 0;
 
               return (
-                <Card key={campaign.id} className="hover:shadow-lg transition-all hover:border-primary/20">
+                <Card key={campaign.id} className="transition-colors hover:border-neutral-300">
                   <CardHeader className="pb-4">
                     <div className="flex items-start justify-between gap-4">
                       <div className="flex-1 min-w-0">
diff --git a/apps/web/src/pages/contacts/[id].tsx b/apps/web/src/pages/contacts/[id].tsx
index 4e8c4e1..4b21314 100644
--- a/apps/web/src/pages/contacts/[id].tsx
+++ b/apps/web/src/pages/contacts/[id].tsx
@@ -10,14 +10,15 @@ import {
   Label,
 } from '@plunk/ui';
 import type {Contact} from '@plunk/db';
+import {AnimatePresence, motion} from 'framer-motion';
+import {ArrowLeft, Check, Copy, Database, ExternalLink, Mail, Save, Settings, Trash2} from 'lucide-react';
+import Link from 'next/link';
+import {useRouter} from 'next/router';
+import {useEffect, useState} from 'react';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {KeyValueEditor} from '../../components/KeyValueEditor';
 import {ActivityFeed} from '../../components/ActivityFeed';
 import {network} from '../../lib/network';
-import {ArrowLeft, Copy, Database, ExternalLink, Mail, Save, Settings, Trash2} from 'lucide-react';
-import Link from 'next/link';
-import {useRouter} from 'next/router';
-import {useEffect, useState} from 'react';
 import {toast} from 'sonner';
 import useSWR from 'swr';
 import {ContactSchemas} from '@plunk/shared';
@@ -33,6 +34,7 @@ export default function ContactDetailPage() {
   const [customData, setCustomData] = useState<Record<string, string | number | boolean> | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
 
   // Initialize form when contact loads
   useEffect(() => {
@@ -73,9 +75,11 @@ export default function ContactDetailPage() {
     }
   };
 
-  const copyToClipboard = async (url: string, label: string) => {
+  const copyToClipboard = async (url: string, label: string, id: string) => {
     try {
       await navigator.clipboard.writeText(url);
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 2000);
       toast.success(`${label} link copied to clipboard`);
     } catch {
       toast.error('Failed to copy link');
@@ -325,9 +329,34 @@ export default function ContactDetailPage() {
                     <Button
                       variant="outline"
                       size="sm"
-                      onClick={() => copyToClipboard(`${window.location.origin}/subscribe/${contact.id}`, 'Subscribe')}
+                      className="overflow-hidden"
+                      onClick={() =>
+                        copyToClipboard(`${window.location.origin}/subscribe/${contact.id}`, 'Subscribe', 'subscribe')
+                      }
                     >
-                      <Copy className="h-3 w-3" />
+                      <AnimatePresence mode="wait" initial={false}>
+                        {copiedId === 'subscribe' ? (
+                          <motion.span
+                            key="copied"
+                            initial={{opacity: 0, y: 4}}
+                            animate={{opacity: 1, y: 0}}
+                            exit={{opacity: 0, y: -4}}
+                            transition={{duration: 0.15}}
+                          >
+                            <Check className="h-3 w-3 text-green-600" />
+                          </motion.span>
+                        ) : (
+                          <motion.span
+                            key="idle"
+                            initial={{opacity: 0, y: 4}}
+                            animate={{opacity: 1, y: 0}}
+                            exit={{opacity: 0, y: -4}}
+                            transition={{duration: 0.15}}
+                          >
+                            <Copy className="h-3 w-3" />
+                          </motion.span>
+                        )}
+                      </AnimatePresence>
                     </Button>
                   </div>
                 </div>
@@ -347,11 +376,38 @@ export default function ContactDetailPage() {
                     <Button
                       variant="outline"
                       size="sm"
+                      className="overflow-hidden"
                       onClick={() =>
-                        copyToClipboard(`${window.location.origin}/unsubscribe/${contact.id}`, 'Unsubscribe')
+                        copyToClipboard(
+                          `${window.location.origin}/unsubscribe/${contact.id}`,
+                          'Unsubscribe',
+                          'unsubscribe',
+                        )
                       }
                     >
-                      <Copy className="h-3 w-3" />
+                      <AnimatePresence mode="wait" initial={false}>
+                        {copiedId === 'unsubscribe' ? (
+                          <motion.span
+                            key="copied"
+                            initial={{opacity: 0, y: 4}}
+                            animate={{opacity: 1, y: 0}}
+                            exit={{opacity: 0, y: -4}}
+                            transition={{duration: 0.15}}
+                          >
+                            <Check className="h-3 w-3 text-green-600" />
+                          </motion.span>
+                        ) : (
+                          <motion.span
+                            key="idle"
+                            initial={{opacity: 0, y: 4}}
+                            animate={{opacity: 1, y: 0}}
+                            exit={{opacity: 0, y: -4}}
+                            transition={{duration: 0.15}}
+                          >
+                            <Copy className="h-3 w-3" />
+                          </motion.span>
+                        )}
+                      </AnimatePresence>
                     </Button>
                   </div>
                 </div>
@@ -371,9 +427,34 @@ export default function ContactDetailPage() {
                     <Button
                       variant="outline"
                       size="sm"
-                      onClick={() => copyToClipboard(`${window.location.origin}/manage/${contact.id}`, 'Manage')}
+                      className="overflow-hidden"
+                      onClick={() =>
+                        copyToClipboard(`${window.location.origin}/manage/${contact.id}`, 'Manage', 'manage')
+                      }
                     >
-                      <Copy className="h-3 w-3" />
+                      <AnimatePresence mode="wait" initial={false}>
+                        {copiedId === 'manage' ? (
+                          <motion.span
+                            key="copied"
+                            initial={{opacity: 0, y: 4}}
+                            animate={{opacity: 1, y: 0}}
+                            exit={{opacity: 0, y: -4}}
+                            transition={{duration: 0.15}}
+                          >
+                            <Check className="h-3 w-3 text-green-600" />
+                          </motion.span>
+                        ) : (
+                          <motion.span
+                            key="idle"
+                            initial={{opacity: 0, y: 4}}
+                            animate={{opacity: 1, y: 0}}
+                            exit={{opacity: 0, y: -4}}
+                            transition={{duration: 0.15}}
+                          >
+                            <Copy className="h-3 w-3" />
+                          </motion.span>
+                        )}
+                      </AnimatePresence>
                     </Button>
                   </div>
                 </div>
diff --git a/apps/web/src/pages/contacts/index.tsx b/apps/web/src/pages/contacts/index.tsx
index 0bde92e..baa55c8 100644
--- a/apps/web/src/pages/contacts/index.tsx
+++ b/apps/web/src/pages/contacts/index.tsx
@@ -19,6 +19,7 @@ import {
 import type {Contact} from '@plunk/db';
 import type {CursorPaginatedResponse} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
+import {EmptyState} from '../../components/EmptyState';
 import {KeyValueEditor} from '../../components/KeyValueEditor';
 import {network} from '../../lib/network';
 import {formatRelativeTime} from '../../lib/dateUtils';
@@ -282,19 +283,19 @@ export default function ContactsPage() {
                   </div>
                 </div>
               ) : contacts.length === 0 ? (
-                <div className="text-center py-12">
-                  <Mail className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-neutral-900 mb-2">No contacts found</h3>
-                  <p className="text-neutral-500 mb-6">
-                    {search ? 'Try adjusting your search terms' : 'Get started by creating your first contact'}
-                  </p>
-                  {!search && (
-                    <Button onClick={() => setShowCreateDialog(true)}>
-                      <Plus className="h-4 w-4" />
-                      Add Contact
-                    </Button>
-                  )}
-                </div>
+                <EmptyState
+                  icon={Mail}
+                  title={search ? 'No contacts match' : 'No contacts yet'}
+                  description={search ? 'Try a different search term.' : 'Add contacts to start tracking engagement.'}
+                  action={
+                    !search ? (
+                      <Button onClick={() => setShowCreateDialog(true)}>
+                        <Plus className="h-4 w-4" />
+                        Add Contact
+                      </Button>
+                    ) : undefined
+                  }
+                />
               ) : (
                 <>
                   {/* Desktop Table View - Hidden on mobile */}
@@ -547,7 +548,7 @@ function CreateContactDialog({open, onOpenChange, onSuccess}: CreateContactDialo
           <DialogTitle>Create New Contact</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
+          <div className="space-y-1.5">
             <Label htmlFor="email">Email Address *</Label>
             <Input
               id="email"
@@ -559,21 +560,19 @@ function CreateContactDialog({open, onOpenChange, onSuccess}: CreateContactDialo
             />
           </div>
 
-          <div className="flex items-start gap-3 p-4 bg-neutral-50 rounded-lg border border-neutral-200">
-            <Switch id="subscribed" checked={subscribed} onCheckedChange={setSubscribed} />
-            <div className="flex-1">
+          <div className="flex items-center justify-between gap-4">
+            <div>
               <Label htmlFor="subscribed" className="font-medium cursor-pointer">
                 Subscribed
               </Label>
-              <p className="text-xs text-neutral-500 mt-1">
-                When enabled, this contact will receive emails from your campaigns and workflows.
+              <p className="text-xs text-neutral-500 mt-0.5">
+                Receive emails from campaigns and workflows.
               </p>
             </div>
+            <Switch id="subscribed" checked={subscribed} onCheckedChange={setSubscribed} />
           </div>
 
-          <div>
-            <KeyValueEditor key={open ? 'create' : 'closed'} initialData={customData} onChange={setCustomData} />
-          </div>
+          <KeyValueEditor key={open ? 'create' : 'closed'} initialData={customData} onChange={setCustomData} />
 
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
@@ -778,19 +777,8 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
 
           <div className="space-y-4">
             {/* Instructions */}
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-              <h4 className="font-medium text-blue-900 mb-2">CSV Format Requirements</h4>
-              <ul className="text-sm text-blue-800 space-y-1 list-disc list-inside">
-                <li>First row must contain column headers</li>
-                <li>
-                  Required column: <code className="bg-blue-100 px-1 rounded">email</code>
-                </li>
-                <li>
-                  Optional: <code className="bg-blue-100 px-1 rounded">subscribed</code> (true/false, 1/0, yes/no)
-                </li>
-                <li>Optional: Add any custom fields (e.g., firstName, lastName, plan)</li>
-                <li>Maximum file size: 5MB</li>
-              </ul>
+            <div className="text-sm text-neutral-500 space-y-1">
+              <p>Required column: <code className="text-neutral-700 bg-neutral-100 px-1 py-0.5 rounded text-xs">email</code>. Optional: <code className="text-neutral-700 bg-neutral-100 px-1 py-0.5 rounded text-xs">subscribed</code> (true/false) and any custom fields. Max 5MB.</p>
             </div>
 
             {/* File Upload */}
@@ -828,9 +816,9 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
                   </span>
                   <span className="text-neutral-900 font-medium">{progress}%</span>
                 </div>
-                <div className="w-full bg-neutral-200 rounded-full h-2">
+                <div className="w-full bg-neutral-200 rounded-full h-1.5">
                   <div
-                    className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                    className="bg-neutral-900 h-1.5 rounded-full transition-all duration-300"
                     style={{width: `${progress}%`}}
                   />
                 </div>
@@ -840,50 +828,31 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
             {/* Results */}
             {status === 'completed' && result && (
               <div className="space-y-3">
-                <div className="grid grid-cols-4 gap-3">
-                  <div className="bg-neutral-50 rounded-lg p-4">
-                    <div className="text-2xl font-bold text-neutral-900">{result.totalRows}</div>
-                    <div className="text-sm text-neutral-600">Total</div>
-                  </div>
-                  <div className="bg-green-50 rounded-lg p-4">
-                    <div className="flex items-center gap-2">
-                      <CheckCircle className="h-5 w-5 text-green-600" />
-                      <div className="text-2xl font-bold text-green-900">{result.createdCount}</div>
-                    </div>
-                    <div className="text-sm text-green-700">Created</div>
-                  </div>
-                  <div className="bg-blue-50 rounded-lg p-4">
-                    <div className="flex items-center gap-2">
-                      <CheckCircle className="h-5 w-5 text-blue-600" />
-                      <div className="text-2xl font-bold text-blue-900">{result.updatedCount}</div>
-                    </div>
-                    <div className="text-sm text-blue-700">Updated</div>
-                  </div>
-                  <div className="bg-red-50 rounded-lg p-4">
-                    <div className="flex items-center gap-2">
-                      <XCircle className="h-5 w-5 text-red-600" />
-                      <div className="text-2xl font-bold text-red-900">{result.failureCount}</div>
-                    </div>
-                    <div className="text-sm text-red-700">Failed</div>
-                  </div>
+                <div className="flex items-center gap-1.5 text-sm text-neutral-600">
+                  <CheckCircle className="h-4 w-4 text-green-600 flex-shrink-0" />
+                  <span>
+                    <span className="font-medium text-neutral-900">{result.totalRows}</span> processed —{' '}
+                    <span className="text-neutral-900">{result.createdCount}</span> created,{' '}
+                    <span className="text-neutral-900">{result.updatedCount}</span> updated
+                    {result.failureCount > 0 && (
+                      <>, <span className="text-red-600">{result.failureCount}</span> failed</>
+                    )}
+                  </span>
                 </div>
 
                 {/* Error Details */}
                 {result.errors && result.errors.length > 0 && (
-                  <div className="bg-red-50 border border-red-200 rounded-lg p-4 max-h-48 overflow-y-auto">
-                    <h4 className="font-medium text-red-900 mb-2">Import Errors</h4>
-                    <div className="space-y-1 text-sm text-red-800">
+                  <div className="max-h-40 overflow-y-auto border border-neutral-200 rounded-md">
+                    <div className="space-y-0 text-xs text-neutral-600">
                       {result.errors.slice(0, 10).map((error, idx) => (
-                        <div key={idx} className="flex gap-2">
-                          <span className="font-mono text-xs">Row {error.row}:</span>
-                          <span>
-                            {error.email || 'N/A'} - {error.error}
-                          </span>
+                        <div key={idx} className="flex gap-3 px-3 py-2 border-b border-neutral-100 last:border-0">
+                          <span className="font-mono text-neutral-400 flex-shrink-0">Row {error.row}</span>
+                          <span className="text-red-600">{error.email || 'N/A'} — {error.error}</span>
                         </div>
                       ))}
                       {result.errors.length > 10 && (
-                        <div className="text-red-700 font-medium mt-2">
-                          ...and {result.errors.length - 10} more errors
+                        <div className="px-3 py-2 text-neutral-500">
+                          +{result.errors.length - 10} more errors
                         </div>
                       )}
                     </div>
@@ -893,14 +862,9 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
             )}
 
             {status === 'failed' && (
-              <div className="bg-red-50 border border-red-200 rounded-lg p-4">
-                <div className="flex items-center gap-2 text-red-900">
-                  <XCircle className="h-5 w-5" />
-                  <span className="font-medium">Import failed</span>
-                </div>
-                <p className="text-sm text-red-800 mt-1">
-                  {errorMessage || 'Please check your CSV file and try again.'}
-                </p>
+              <div className="flex items-start gap-2 text-sm">
+                <XCircle className="h-4 w-4 text-red-500 mt-0.5 flex-shrink-0" />
+                <p className="text-red-600">{errorMessage || 'Please check your CSV file and try again.'}</p>
               </div>
             )}
           </div>
@@ -1111,13 +1075,13 @@ function BulkActionsDialog({open, onOpenChange, operation, contactIds, onSuccess
 
           <div className="space-y-4">
             {status === 'idle' && (
-              <div className="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
-                <p className="text-sm text-neutral-900">
-                  Are you sure you want to {operation} {contactIds.length} contact
-                  {contactIds.length !== 1 ? 's' : ''}?
+              <div className="space-y-1">
+                <p className="text-sm text-neutral-700">
+                  {operation === 'delete' ? 'Permanently delete' : operation === 'subscribe' ? 'Subscribe' : 'Unsubscribe'}{' '}
+                  <span className="font-medium text-neutral-900">{contactIds.length} contact{contactIds.length !== 1 ? 's' : ''}</span>?
                 </p>
                 {operation === 'delete' && (
-                  <p className="text-sm text-red-600 mt-2 font-medium">This action cannot be undone.</p>
+                  <p className="text-xs text-red-500">This action cannot be undone.</p>
                 )}
               </div>
             )}
@@ -1128,9 +1092,9 @@ function BulkActionsDialog({open, onOpenChange, operation, contactIds, onSuccess
                   <span className="text-neutral-600">Processing contacts...</span>
                   <span className="text-neutral-900 font-medium">{progress}%</span>
                 </div>
-                <div className="w-full bg-neutral-200 rounded-full h-2">
+                <div className="w-full bg-neutral-200 rounded-full h-1.5">
                   <div
-                    className={`bg-${getOperationColor()}-600 h-2 rounded-full transition-all duration-300`}
+                    className="bg-neutral-900 h-1.5 rounded-full transition-all duration-300"
                     style={{width: `${progress}%`}}
                   />
                 </div>
@@ -1139,35 +1103,27 @@ function BulkActionsDialog({open, onOpenChange, operation, contactIds, onSuccess
 
             {status === 'completed' && result && (
               <div className="space-y-3">
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="bg-green-50 rounded-lg p-4">
-                    <div className="flex items-center gap-2">
-                      <CheckCircle className="h-5 w-5 text-green-600" />
-                      <div className="text-2xl font-bold text-green-900">{result.successCount}</div>
-                    </div>
-                    <div className="text-sm text-green-700">Succeeded</div>
-                  </div>
-                  {result.failureCount > 0 && (
-                    <div className="bg-red-50 rounded-lg p-4">
-                      <div className="flex items-center gap-2">
-                        <XCircle className="h-5 w-5 text-red-600" />
-                        <div className="text-2xl font-bold text-red-900">{result.failureCount}</div>
-                      </div>
-                      <div className="text-sm text-red-700">Failed</div>
-                    </div>
-                  )}
+                <div className="flex items-center gap-1.5 text-sm text-neutral-600">
+                  <CheckCircle className="h-4 w-4 text-green-600 flex-shrink-0" />
+                  <span>
+                    <span className="font-medium text-neutral-900">{result.successCount}</span> succeeded
+                    {result.failureCount > 0 && (
+                      <>, <span className="text-red-600">{result.failureCount}</span> failed</>
+                    )}
+                  </span>
                 </div>
 
                 {result.errors && result.errors.length > 0 && (
-                  <div className="bg-red-50 border border-red-200 rounded-lg p-4 max-h-48 overflow-y-auto">
-                    <h4 className="font-medium text-red-900 mb-2">Errors</h4>
-                    <div className="space-y-1 text-sm text-red-800">
+                  <div className="max-h-40 overflow-y-auto border border-neutral-200 rounded-md">
+                    <div className="text-xs text-neutral-600">
                       {result.errors.slice(0, 10).map((error, idx) => (
-                        <div key={idx}>{error.error}</div>
+                        <div key={idx} className="px-3 py-2 border-b border-neutral-100 last:border-0 text-red-600">
+                          {error.error}
+                        </div>
                       ))}
                       {result.errors.length > 10 && (
-                        <div className="text-red-700 font-medium mt-2">
-                          ...and {result.errors.length - 10} more errors
+                        <div className="px-3 py-2 text-neutral-500">
+                          +{result.errors.length - 10} more errors
                         </div>
                       )}
                     </div>
@@ -1177,12 +1133,9 @@ function BulkActionsDialog({open, onOpenChange, operation, contactIds, onSuccess
             )}
 
             {status === 'failed' && (
-              <div className="bg-red-50 border border-red-200 rounded-lg p-4">
-                <div className="flex items-center gap-2 text-red-900">
-                  <XCircle className="h-5 w-5" />
-                  <span className="font-medium">Operation failed</span>
-                </div>
-                <p className="text-sm text-red-800 mt-1">{errorMessage || 'Please try again.'}</p>
+              <div className="flex items-start gap-2 text-sm">
+                <XCircle className="h-4 w-4 text-red-500 mt-0.5 flex-shrink-0" />
+                <p className="text-red-600">{errorMessage || 'Please try again.'}</p>
               </div>
             )}
           </div>
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 4439884..06faecc 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -38,22 +38,22 @@ export default function Index() {
   const stats = [
     {
       name: 'Total Contacts',
-      value: isLoading ? '-' : totalContacts.toLocaleString(),
+      value: totalContacts.toLocaleString(),
       icon: Users,
     },
     {
       name: 'Emails Sent',
-      value: isLoading ? '-' : totalEmailsSent.toLocaleString(),
+      value: totalEmailsSent.toLocaleString(),
       icon: Mail,
     },
     {
       name: 'Campaigns',
-      value: isLoading ? '-' : totalCampaigns.toLocaleString(),
+      value: totalCampaigns.toLocaleString(),
       icon: Send,
     },
     {
       name: 'Open Rate',
-      value: isLoading ? '-' : `${openRate.toFixed(1)}%`,
+      value: `${openRate.toFixed(1)}%`,
       icon: TrendingUp,
     },
   ];
@@ -173,9 +173,6 @@ export default function Index() {
           {/* Header */}
           <div>
             <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Dashboard</h1>
-            <p className="text-neutral-500 mt-2 text-sm sm:text-base">
-              Welcome back to {activeProject?.name || 'Plunk'}. Here&apos;s what&apos;s happening with your emails.
-            </p>
           </div>
 
           {/* Stats Grid */}
@@ -189,7 +186,13 @@ export default function Index() {
                       <CardDescription>{stat.name}</CardDescription>
                       <Icon className="h-4 w-4 text-neutral-500" />
                     </div>
-                    <CardTitle className="text-2xl">{stat.value}</CardTitle>
+                    <CardTitle className="text-2xl tabular-nums">
+                      {isLoading ? (
+                        <div className="h-7 w-16 bg-neutral-100 rounded animate-pulse" />
+                      ) : (
+                        stat.value
+                      )}
+                    </CardTitle>
                   </CardHeader>
                 </Card>
               );
diff --git a/apps/web/src/pages/segments/[id].tsx b/apps/web/src/pages/segments/[id].tsx
index b6a5417..db00d3c 100644
--- a/apps/web/src/pages/segments/[id].tsx
+++ b/apps/web/src/pages/segments/[id].tsx
@@ -13,7 +13,7 @@ import type {Contact, Segment} from '@plunk/db';
 import type {PaginatedResponse} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {network} from '../../lib/network';
-import {ArrowLeft, Database, Filter, MailCheck, MailX, RefreshCw, Save, Trash2, UserMinus, Users} from 'lucide-react';
+import {ArrowLeft, Database, Filter, Layers, MailCheck, MailX, RefreshCw, Save, Trash2, UserMinus, Users} from 'lucide-react';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {useEffect, useState} from 'react';
@@ -310,7 +310,11 @@ export default function SegmentDetailPage() {
               {/* Filter Builder (DYNAMIC only) */}
               {!isStatic && (
                 <Card>
-                  <CardContent className="pt-6">
+                  <CardHeader>
+                    <CardTitle>Filter Conditions</CardTitle>
+                    <CardDescription>Build complex audience filters with AND/OR logic</CardDescription>
+                  </CardHeader>
+                  <CardContent>
                     <SegmentFilterBuilder condition={condition} onChange={setCondition} />
                   </CardContent>
                 </Card>
@@ -346,7 +350,9 @@ export default function SegmentDetailPage() {
                   >
                     {isAddingMembers
                       ? 'Adding...'
-                      : `Add ${pickedEmails.length > 0 ? pickedEmails.length : ''} Contact${pickedEmails.length !== 1 ? 's' : ''}`}
+                      : pickedEmails.length > 0
+                        ? `Add ${pickedEmails.length} Contact${pickedEmails.length !== 1 ? 's' : ''}`
+                        : 'Add Contacts'}
                   </Button>
                 </CardContent>
               </Card>
@@ -477,7 +483,7 @@ export default function SegmentDetailPage() {
                     </div>
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2">
-                        <Filter className="h-4 w-4 text-neutral-500" />
+                        <Layers className="h-4 w-4 text-neutral-500" />
                         <span className="text-sm text-neutral-600">Groups</span>
                       </div>
                       <span className="text-lg font-semibold text-neutral-900">
diff --git a/apps/web/src/pages/segments/index.tsx b/apps/web/src/pages/segments/index.tsx
index 318741f..8e94502 100644
--- a/apps/web/src/pages/segments/index.tsx
+++ b/apps/web/src/pages/segments/index.tsx
@@ -12,6 +12,7 @@ import {
 import type {Segment} from '@plunk/db';
 import type {FilterCondition} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
+import {EmptyState} from '../../components/EmptyState';
 import {network} from '../../lib/network';
 import {formatRelativeTime} from '../../lib/dateUtils';
 import {AlertTriangle, Calendar, Edit, Filter, Plus, Trash2, Users} from 'lucide-react';
@@ -123,20 +124,20 @@ export default function SegmentsPage() {
             </div>
           ) : segments?.length === 0 ? (
             <Card>
-              <CardContent className="py-12">
-                <div className="text-center">
-                  <Filter className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-neutral-900 mb-2">No segments yet</h3>
-                  <p className="text-neutral-500 mb-6">
-                    Create your first segment to group contacts based on attributes and behaviors
-                  </p>
-                  <Link href="/segments/new">
-                    <Button>
-                      <Plus className="h-4 w-4" />
-                      Create Segment
-                    </Button>
-                  </Link>
-                </div>
+              <CardContent>
+                <EmptyState
+                  icon={Filter}
+                  title="No segments yet"
+                  description="Group contacts by attributes to target specific audiences."
+                  action={
+                    <Link href="/segments/new">
+                      <Button>
+                        <Plus className="h-4 w-4" />
+                        Create Segment
+                      </Button>
+                    </Link>
+                  }
+                />
               </CardContent>
             </Card>
           ) : (
@@ -175,17 +176,17 @@ export default function SegmentsPage() {
                         <span className="text-lg font-semibold text-neutral-900">{segment.memberCount}</span>
                       </div>
 
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2">
-                          <Filter className="h-4 w-4 text-neutral-500" />
-                          <span className="text-sm text-neutral-600">Filters</span>
+                      {(segment as unknown as {type: string}).type !== 'STATIC' && (
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <Filter className="h-4 w-4 text-neutral-500" />
+                            <span className="text-sm text-neutral-600">Filters</span>
+                          </div>
+                          <span className="text-sm font-medium text-neutral-900">
+                            {countFiltersInCondition(segment.condition)}
+                          </span>
                         </div>
-                        <span className="text-sm font-medium text-neutral-900">
-                          {(segment as unknown as {type: string}).type === 'STATIC'
-                            ? '—'
-                            : countFiltersInCondition(segment.condition)}
-                        </span>
-                      </div>
+                      )}
 
                       {/* Actions */}
                       <div className="flex items-center gap-2 pt-2 border-t border-neutral-200">
diff --git a/apps/web/src/pages/segments/new.tsx b/apps/web/src/pages/segments/new.tsx
index 720ae51..97605e2 100644
--- a/apps/web/src/pages/segments/new.tsx
+++ b/apps/web/src/pages/segments/new.tsx
@@ -176,7 +176,11 @@ export default function NewSegmentPage() {
             {/* Filter Builder or Contact Picker */}
             {segmentType === 'DYNAMIC' ? (
               <Card>
-                <CardContent className="pt-6">
+                <CardHeader>
+                  <CardTitle>Filter Conditions</CardTitle>
+                  <CardDescription>Build complex audience filters with AND/OR logic</CardDescription>
+                </CardHeader>
+                <CardContent>
                   <SegmentFilterBuilder condition={condition} onChange={setCondition} />
                 </CardContent>
               </Card>
diff --git a/apps/web/src/pages/templates/[id].tsx b/apps/web/src/pages/templates/[id].tsx
index 3d5f2e8..f6a1fb9 100644
--- a/apps/web/src/pages/templates/[id].tsx
+++ b/apps/web/src/pages/templates/[id].tsx
@@ -185,8 +185,7 @@ export default function TemplateEditorPage() {
         {/* Template Editor */}
         <div className="space-y-6">
           {/* Template Settings */}
-          <div>
-            <Card>
+          <Card>
               <CardHeader>
                 <CardTitle>Template Settings</CardTitle>
                 <CardDescription>Configure the basic settings for your template</CardDescription>
@@ -287,11 +286,9 @@ export default function TemplateEditorPage() {
                 />
               </CardContent>
             </Card>
-          </div>
 
           {/* Email Body */}
-          <div>
-            <Card className="overflow-visible">
+          <Card className="overflow-visible">
               <CardHeader>
                 <CardTitle>Email Body</CardTitle>
                 <CardDescription>Create your email using the visual editor or paste custom HTML</CardDescription>
@@ -303,7 +300,6 @@ export default function TemplateEditorPage() {
                 />
               </CardContent>
             </Card>
-          </div>
         </div>
       </form>
 
diff --git a/apps/web/src/pages/templates/create.tsx b/apps/web/src/pages/templates/create.tsx
index 316ab98..900ad73 100644
--- a/apps/web/src/pages/templates/create.tsx
+++ b/apps/web/src/pages/templates/create.tsx
@@ -14,7 +14,7 @@ import {EmailSettings} from '../../components/EmailSettings';
 import {EmailEditor} from '../../components/EmailEditor';
 import {network} from '../../lib/network';
 import {EmailFormValidator} from '../../lib/validation';
-import {ArrowLeft, Save, TriangleAlert} from 'lucide-react';
+import {ArrowLeft, TriangleAlert} from 'lucide-react';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {useState} from 'react';
@@ -44,7 +44,6 @@ export default function CreateTemplatePage() {
       return;
     }
 
-
     setSaving(true);
 
     try {
@@ -71,110 +70,117 @@ export default function CreateTemplatePage() {
     <>
       <NextSeo title="Create Template" />
       <DashboardLayout>
-        <div className="max-w-5xl mx-auto space-y-6">
+        <div className="space-y-6">
           {/* Header */}
-          <div className="space-y-4">
-            <div className="flex items-center gap-3 sm:gap-4">
-              <Link href="/templates">
-                <Button variant="ghost" size="sm">
-                  <ArrowLeft className="h-4 w-4" />
-                </Button>
-              </Link>
-              <div className="flex-1 min-w-0">
-                <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Template</h1>
-                <p className="text-neutral-500 mt-1 text-sm sm:text-base">
-                  Create a reusable email template for campaigns and workflows
-                </p>
-              </div>
-            </div>
-            <div className="flex justify-end">
-              <Button onClick={handleSubmit} disabled={saving} className="w-full sm:w-auto">
-                <Save className="h-4 w-4" />
-                <span className="hidden sm:inline">{saving ? 'Creating...' : 'Create Template'}</span>
-                <span className="sm:hidden">{saving ? 'Creating...' : 'Create'}</span>
+          <div className="flex items-center gap-3 sm:gap-4">
+            <Link href="/templates">
+              <Button variant="ghost" size="sm">
+                <ArrowLeft className="h-4 w-4" />
               </Button>
+            </Link>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Template</h1>
+              <p className="text-neutral-500 mt-1 text-sm sm:text-base">
+                Create a reusable email template for campaigns and workflows
+              </p>
             </div>
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-6">
-            {/* Template Settings */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Template Settings</CardTitle>
-                <CardDescription>Configure your template details and email settings</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="name">Template Name *</Label>
-                  <Input
-                    id="name"
-                    type="text"
-                    value={name}
-                    onChange={e => setName(e.target.value)}
-                    required
-                    placeholder="Welcome Email"
-                  />
-                </div>
-
-                <div>
-                  <Label>Template Type *</Label>
-                    <div className="flex flex-col gap-2 mt-2">
-                      {([
-                        {value: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'} ,
-                        {value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
-                        {value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
-                      ] as const).map(({value, label, description}) => (
-                        <button
-                          key={value}
-                          type="button"
-                          onClick={() => setType(value)}
-                          className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
-                            type === value
-                              ? 'border-neutral-900 bg-neutral-50'
-                              : 'border-neutral-200 hover:border-neutral-300'
-                          }`}
-                        >
-                          <span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
-                          <span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
-                        </button>
-                      ))}
-                    </div>
-                    {type === 'HEADLESS' && !detectUnsubscribeSignal(body) && (
-                      <div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
-                        <div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
-                          <TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
-                          <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
-                        </div>
-                        <div className="px-3 py-2.5 space-y-2">
-                          <p className="text-xs text-amber-800 leading-relaxed">
-                            You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
-                          </p>
-                          <div className="flex flex-wrap gap-1.5">
-                            <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
-                              {'{{unsubscribeUrl}}'}
-                            </code>
-                            <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
-                              {'{{manageUrl}}'}
-                            </code>
-                          </div>
-                        </div>
-                      </div>
-                    )}
+            {/* Row 1: Basic Info + Template Type */}
+            <div className="grid gap-6 md:grid-cols-2">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Basic Information</CardTitle>
+                  <CardDescription>Name and describe your template</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="name">Template Name <span className="text-red-500">*</span></Label>
+                    <Input
+                      id="name"
+                      type="text"
+                      value={name}
+                      onChange={e => setName(e.target.value)}
+                      required
+                      placeholder="Welcome Email"
+                    />
                   </div>
 
-                <div>
-                  <Label htmlFor="description">Description</Label>
-                  <Input
-                    id="description"
-                    type="text"
-                    value={description}
-                    onChange={e => setDescription(e.target.value)}
-                    placeholder="Sent to new subscribers"
-                  />
-                </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="description">Description</Label>
+                    <Input
+                      id="description"
+                      type="text"
+                      value={description}
+                      onChange={e => setDescription(e.target.value)}
+                      placeholder="Sent to new subscribers"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
 
-                <div>
-                  <Label htmlFor="subject">Subject Line *</Label>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Template Type</CardTitle>
+                  <CardDescription>Choose how this template should be treated</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex flex-col gap-2">
+                    {([
+                      {value: 'MARKETING', label: 'Marketing', description: 'Subscribed contacts, includes unsubscribe link'},
+                      {value: 'TRANSACTIONAL', label: 'Transactional', description: 'All contacts, no subscription check or footer'},
+                      {value: 'HEADLESS', label: 'Headless', description: 'Subscribed contacts, no Plunk footer'},
+                    ] as const).map(({value, label, description}) => (
+                      <button
+                        key={value}
+                        type="button"
+                        onClick={() => setType(value)}
+                        className={`flex items-center justify-between w-full min-h-[44px] px-4 py-3 rounded-lg border-2 text-left transition-colors ${
+                          type === value
+                            ? 'border-neutral-900 bg-neutral-50'
+                            : 'border-neutral-200 hover:border-neutral-300'
+                        }`}
+                      >
+                        <span className="font-medium text-sm text-neutral-900 shrink-0">{label}</span>
+                        <span className="text-xs text-neutral-500 ml-4 text-right">{description}</span>
+                      </button>
+                    ))}
+                  </div>
+                  {type === 'HEADLESS' && !detectUnsubscribeSignal(body) && (
+                    <div className="mt-3 rounded-lg border border-amber-200 bg-amber-50 overflow-hidden">
+                      <div className="flex items-center gap-2 border-b border-amber-200 bg-amber-100/60 px-3 py-2">
+                        <TriangleAlert className="h-3.5 w-3.5 text-amber-600 shrink-0" />
+                        <p className="text-xs font-semibold text-amber-900">No unsubscribe link detected</p>
+                      </div>
+                      <div className="px-3 py-2.5 space-y-2">
+                        <p className="text-xs text-amber-800 leading-relaxed">
+                          You are responsible for providing recipients a way to opt out. Use the Plunk variables below to build your own footer.
+                        </p>
+                        <div className="flex flex-wrap gap-1.5">
+                          <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                            {'{{unsubscribeUrl}}'}
+                          </code>
+                          <code className="inline-flex items-center rounded bg-amber-100 border border-amber-200 px-1.5 py-0.5 font-mono text-[11px] text-amber-900">
+                            {'{{manageUrl}}'}
+                          </code>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Email Settings */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Email Settings</CardTitle>
+                <CardDescription>Configure sender information and subject</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="subject">Subject Line <span className="text-red-500">*</span></Label>
                   <Input
                     id="subject"
                     type="text"
@@ -183,6 +189,7 @@ export default function CreateTemplatePage() {
                     required
                     placeholder="Welcome to our platform!"
                   />
+                  <p className="text-xs text-neutral-500">Use {'{{variableName}}'} for dynamic content</p>
                 </div>
 
                 <EmailSettings
@@ -207,6 +214,16 @@ export default function CreateTemplatePage() {
                 <EmailEditor value={body} onChange={setBody} />
               </CardContent>
             </Card>
+
+            {/* Actions */}
+            <div className="flex justify-end gap-3">
+              <Link href="/templates">
+                <Button type="button" variant="outline">Cancel</Button>
+              </Link>
+              <Button type="submit" disabled={saving}>
+                {saving ? 'Creating...' : 'Create Template'}
+              </Button>
+            </div>
           </form>
         </div>
       </DashboardLayout>
diff --git a/apps/web/src/pages/templates/index.tsx b/apps/web/src/pages/templates/index.tsx
index 6b4cc2c..63bc0fe 100644
--- a/apps/web/src/pages/templates/index.tsx
+++ b/apps/web/src/pages/templates/index.tsx
@@ -12,6 +12,7 @@ import {
 import type {Template} from '@plunk/db';
 import type {PaginatedResponse} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
+import {EmptyState} from '../../components/EmptyState';
 import {network} from '../../lib/network';
 import {formatRelativeTime} from '../../lib/dateUtils';
 import {Calendar, Copy, Edit, FileText, Plus, Search, Trash2} from 'lucide-react';
@@ -185,22 +186,22 @@ export default function TemplatesPage() {
               </Card>
             ) : data?.data.length === 0 ? (
               <Card>
-                <CardContent className="pt-6">
-                  <div className="text-center py-12">
-                    <FileText className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                    <h3 className="text-lg font-medium text-neutral-900 mb-2">No templates found</h3>
-                    <p className="text-neutral-500 mb-6">
-                      {search ? 'Try adjusting your search terms' : 'Get started by creating your first template'}
-                    </p>
-                    {!search && (
-                      <Link href="/templates/create">
-                        <Button>
-                          <Plus className="h-4 w-4" />
-                          Create Template
-                        </Button>
-                      </Link>
-                    )}
-                  </div>
+                <CardContent>
+                  <EmptyState
+                    icon={FileText}
+                    title={search ? 'No templates match' : 'No templates yet'}
+                    description={search ? 'Try a different search term.' : 'Create reusable email designs for campaigns.'}
+                    action={
+                      !search ? (
+                        <Link href="/templates/create">
+                          <Button>
+                            <Plus className="h-4 w-4" />
+                            Create Template
+                          </Button>
+                        </Link>
+                      ) : undefined
+                    }
+                  />
                 </CardContent>
               </Card>
             ) : (
diff --git a/apps/web/src/pages/workflows/[id].tsx b/apps/web/src/pages/workflows/[id].tsx
index 4288b89..c2c3915 100644
--- a/apps/web/src/pages/workflows/[id].tsx
+++ b/apps/web/src/pages/workflows/[id].tsx
@@ -35,6 +35,7 @@ import {
 import type {Template, Workflow, WorkflowExecution, WorkflowStep, WorkflowTransition} from '@plunk/db';
 import type {PaginatedResponse} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
+import {EmptyState} from '../../components/EmptyState';
 import {network} from '../../lib/network';
 import {
   AlertTriangle,
@@ -597,13 +598,11 @@ export default function WorkflowEditorPage() {
             </CardHeader>
             <CardContent>
               {!executionsData?.executions.length ? (
-                <div className="text-center py-12">
-                  <Users className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-neutral-900 mb-2">No executions yet</h3>
-                  <p className="text-neutral-500 mb-6">
-                    This workflow hasn&apos;t been executed yet. Enable it to start processing contacts.
-                  </p>
-                </div>
+                <EmptyState
+                  icon={Users}
+                  title="No executions yet"
+                  description="This workflow hasn't been executed yet. Enable it to start processing contacts."
+                />
               ) : (
                 <div className="overflow-x-auto">
                   <table className="w-full">
@@ -1254,8 +1253,7 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
         <form onSubmit={handleSubmit} className="space-y-6">
           {/* Basic Information Section */}
           <div className="space-y-4">
-            <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-              <div className="w-1 h-4 bg-blue-500 rounded-full" />
+            <div className="pb-2 border-b border-neutral-200">
               <h3 className="text-sm font-semibold text-neutral-900">Basic Information</h3>
             </div>
 
@@ -1330,12 +1328,11 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
           {/* SEND_EMAIL Configuration */}
           {type === 'SEND_EMAIL' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Email Configuration</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 <div>
                   <Label htmlFor="template" className="text-sm font-medium">
                     Email Template *
@@ -1386,7 +1383,7 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
                 </div>
 
                 {recipientType === 'CUSTOM' && (
-                  <div className="pl-3 border-l-2 border-blue-200 bg-blue-50/50 -ml-3 py-3 pr-3">
+                  <div className="p-3 bg-neutral-50 rounded-lg border border-neutral-200">
                     <Label htmlFor="customEmail" className="text-sm font-medium">
                       Email Address *
                     </Label>
@@ -1411,12 +1408,11 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
           {/* DELAY Configuration */}
           {type === 'DELAY' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Delay Configuration</h3>
               </div>
 
-              <div className="grid grid-cols-2 gap-4 pl-3">
+              <div className="grid grid-cols-2 gap-4">
                 <div>
                   <Label htmlFor="delayAmount" className="text-sm font-medium">
                     Amount *
@@ -1459,22 +1455,21 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
                   </Select>
                 </div>
               </div>
-              <p className="text-xs text-neutral-500 pl-3">Maximum delay: 365 days</p>
+              <p className="text-xs text-neutral-500">Maximum delay: 365 days</p>
             </div>
           )}
 
           {/* CONDITION Configuration */}
           {type === 'CONDITION' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Condition Configuration</h3>
               </div>
-              <p className="text-sm text-neutral-600 pl-3">
+              <p className="text-sm text-neutral-600">
                 Define the condition that determines which path contacts will follow
               </p>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 <div>
                   <Label htmlFor="conditionField" className="text-sm font-medium">
                     Field to Check *
@@ -1628,12 +1623,11 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
           {/* WAIT_FOR_EVENT Configuration */}
           {type === 'WAIT_FOR_EVENT' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Wait for Event Configuration</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 <div>
                   <Label htmlFor="eventName" className="text-sm font-medium">
                     Event Name *
@@ -1736,12 +1730,11 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
           {/* WEBHOOK Configuration */}
           {type === 'WEBHOOK' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Webhook Configuration</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 <div>
                   <Label htmlFor="webhookUrl" className="text-sm font-medium">
                     Webhook URL *
@@ -1799,12 +1792,11 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
           {/* UPDATE_CONTACT Configuration */}
           {type === 'UPDATE_CONTACT' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Contact Update Configuration</h3>
               </div>
 
-              <div className="pl-3">
+              <div>
                 <Label htmlFor="contactUpdates" className="text-sm font-medium">
                   Contact Data Updates (JSON) *
                 </Label>
@@ -1827,12 +1819,11 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
           {/* EXIT Configuration */}
           {type === 'EXIT' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Exit Configuration</h3>
               </div>
 
-              <div className="pl-3">
+              <div>
                 <Label htmlFor="exitReason" className="text-sm font-medium">
                   Exit Reason
                 </Label>
@@ -2322,12 +2313,11 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
         <form onSubmit={handleSubmit} className="space-y-6">
           {/* Basic Information */}
           <div className="space-y-4">
-            <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-              <div className="w-1 h-4 bg-blue-500 rounded-full" />
+            <div className="pb-2 border-b border-neutral-200">
               <h3 className="text-sm font-semibold text-neutral-900">Basic Information</h3>
             </div>
 
-            <div className="pl-3">
+            <div>
               <Label htmlFor="editStepName" className="text-sm font-medium">
                 Step Name *
               </Label>
@@ -2349,12 +2339,11 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
           {/* SEND_EMAIL Configuration */}
           {step.type === 'SEND_EMAIL' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Email Configuration</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 <div>
                   <Label htmlFor="editTemplate" className="text-sm font-medium">
                     Email Template *
@@ -2405,7 +2394,7 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
                 </div>
 
                 {recipientType === 'CUSTOM' && (
-                  <div className="pl-3 border-l-2 border-blue-200 bg-blue-50/50 -ml-3 py-3 pr-3">
+                  <div className="p-3 bg-neutral-50 rounded-lg border border-neutral-200">
                     <Label htmlFor="editCustomEmail" className="text-sm font-medium">
                       Email Address *
                     </Label>
@@ -2430,12 +2419,11 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
           {/* DELAY Configuration */}
           {step.type === 'DELAY' && (
             <div className="space-y-4">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Delay Configuration</h3>
               </div>
 
-              <div className="grid grid-cols-2 gap-4 pl-3">
+              <div className="grid grid-cols-2 gap-4">
                 <div>
                   <Label htmlFor="editDelayAmount" className="text-sm font-medium">
                     Amount *
@@ -2478,19 +2466,18 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
                   </Select>
                 </div>
               </div>
-              <p className="text-xs text-neutral-500 pl-3">Maximum delay: 365 days</p>
+              <p className="text-xs text-neutral-500">Maximum delay: 365 days</p>
             </div>
           )}
 
           {/* CONDITION Configuration */}
           {step.type === 'CONDITION' && (
             <div className="space-y-6">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Condition Configuration</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 {/* Mode toggle */}
                 <div>
                   <Label className="text-sm font-medium mb-2 block">Condition Mode</Label>
@@ -2501,10 +2488,10 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
                       disabled={conditionMode === 'multi' && hasMultiBranchConnections()}
                       className={`flex-1 px-3 py-2 rounded-lg border-2 text-sm font-medium transition-all ${
                         conditionMode === 'binary'
-                          ? 'border-purple-500 bg-purple-50 text-purple-700'
+                          ? 'border-neutral-900 bg-neutral-900 text-white'
                           : conditionMode === 'multi' && hasMultiBranchConnections()
                             ? 'border-neutral-200 text-neutral-400 bg-neutral-50 cursor-not-allowed opacity-50'
-                            : 'border-neutral-200 text-neutral-600 hover:border-neutral-300'
+                            : 'border-neutral-200 text-neutral-700 hover:border-neutral-400 hover:bg-neutral-50'
                       }`}
                     >
                       Simple (If/Else)
@@ -2515,10 +2502,10 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
                       disabled={conditionMode === 'binary' && hasBinaryConnections()}
                       className={`flex-1 px-3 py-2 rounded-lg border-2 text-sm font-medium transition-all ${
                         conditionMode === 'multi'
-                          ? 'border-purple-500 bg-purple-50 text-purple-700'
+                          ? 'border-neutral-900 bg-neutral-900 text-white'
                           : conditionMode === 'binary' && hasBinaryConnections()
                             ? 'border-neutral-200 text-neutral-400 bg-neutral-50 cursor-not-allowed opacity-50'
-                            : 'border-neutral-200 text-neutral-600 hover:border-neutral-300'
+                            : 'border-neutral-200 text-neutral-700 hover:border-neutral-400 hover:bg-neutral-50'
                       }`}
                     >
                       Multi-branch (Switch)
@@ -2832,12 +2819,11 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
           {/* WAIT_FOR_EVENT Configuration */}
           {step.type === 'WAIT_FOR_EVENT' && (
             <div className="space-y-6">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Event Configuration</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 <div>
                   <Label htmlFor="editEventName">Event Name *</Label>
                   <div className="relative">
@@ -2937,12 +2923,11 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
           {/* WEBHOOK Configuration */}
           {step.type === 'WEBHOOK' && (
             <div className="space-y-6">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Webhook Configuration</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 {/* Info Alert about webhook body */}
                 <Alert>
                   <Info className="h-4 w-4" />
@@ -3097,12 +3082,11 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
           {/* UPDATE_CONTACT Configuration */}
           {step.type === 'UPDATE_CONTACT' && (
             <div className="space-y-6">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Contact Updates</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 <div>
                   <Label htmlFor="editContactUpdates">Contact Data Updates (JSON) *</Label>
                   <textarea
@@ -3136,12 +3120,11 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
           {/* EXIT Configuration */}
           {step.type === 'EXIT' && (
             <div className="space-y-6">
-              <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-                <div className="w-1 h-4 bg-blue-500 rounded-full" />
+              <div className="pb-2 border-b border-neutral-200">
                 <h3 className="text-sm font-semibold text-neutral-900">Exit Configuration</h3>
               </div>
 
-              <div className="space-y-4 pl-3">
+              <div className="space-y-4">
                 <div>
                   <Label htmlFor="editExitReason">Exit Reason (optional)</Label>
                   <Select value={exitReason} onValueChange={setExitReason}>
diff --git a/apps/web/src/pages/workflows/index.tsx b/apps/web/src/pages/workflows/index.tsx
index e225b32..9e89060 100644
--- a/apps/web/src/pages/workflows/index.tsx
+++ b/apps/web/src/pages/workflows/index.tsx
@@ -22,6 +22,7 @@ import {
 import type {Workflow} from '@plunk/db';
 import type {PaginatedResponse} from '@plunk/types';
 import {DashboardLayout} from '../../components/DashboardLayout';
+import {EmptyState} from '../../components/EmptyState';
 import {network} from '../../lib/network';
 import {formatRelativeTime} from '../../lib/dateUtils';
 import {Calendar, Edit, Plus, Power, PowerOff, Search, Trash2, Workflow as WorkflowIcon} from 'lucide-react';
@@ -157,20 +158,20 @@ export default function WorkflowsPage() {
               </Card>
             ) : data?.data.length === 0 ? (
               <Card>
-                <CardContent className="pt-6">
-                  <div className="text-center py-12">
-                    <WorkflowIcon className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                    <h3 className="text-lg font-medium text-neutral-900 mb-2">No workflows found</h3>
-                    <p className="text-neutral-500 mb-6">
-                      {search ? 'Try adjusting your search terms' : 'Get started by creating your first workflow'}
-                    </p>
-                    {!search && (
-                      <Button onClick={() => setShowCreateDialog(true)}>
-                        <Plus className="h-4 w-4" />
-                        Create Workflow
-                      </Button>
-                    )}
-                  </div>
+                <CardContent>
+                  <EmptyState
+                    icon={WorkflowIcon}
+                    title={search ? 'No workflows match' : 'No workflows yet'}
+                    description={search ? 'Try a different search term.' : 'Automate emails triggered by contact events.'}
+                    action={
+                      !search ? (
+                        <Button onClick={() => setShowCreateDialog(true)}>
+                          <Plus className="h-4 w-4" />
+                          Create Workflow
+                        </Button>
+                      ) : undefined
+                    }
+                  />
                 </CardContent>
               </Card>
             ) : (
@@ -366,7 +367,7 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
           <DialogTitle>Create New Workflow</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
+          <div className="space-y-1.5">
             <Label htmlFor="name">Name *</Label>
             <Input
               id="name"
@@ -378,19 +379,19 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
             />
           </div>
 
-          <div>
+          <div className="space-y-1.5">
             <Label htmlFor="description">Description</Label>
             <textarea
               id="description"
               value={description}
               onChange={e => setDescription(e.target.value)}
               placeholder="Send a series of welcome emails to new subscribers"
-              className="w-full px-3 py-2 border border-neutral-200 rounded-lg text-sm"
+              className="w-full px-3 py-2 border border-neutral-200 rounded-md text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               rows={3}
             />
           </div>
 
-          <div>
+          <div className="space-y-1.5">
             <Label htmlFor="createEventName">Trigger Event *</Label>
             {/* Combobox: 可自由輸入 event name，同時提供已追蹤 event 的下拉建議 */}
             <div className="relative">
@@ -453,21 +454,20 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
             </p>
           </div>
 
-          <div className="flex items-start gap-3 p-4 bg-neutral-50 rounded-lg border border-neutral-200">
+          <div className="flex items-start gap-3">
             <input
               id="allowReentry"
               type="checkbox"
               checked={allowReentry}
               onChange={e => setAllowReentry(e.target.checked)}
-              className="mt-1 h-4 w-4 text-neutral-900 focus:ring-neutral-900 border-neutral-300 rounded"
+              className="mt-0.5 h-4 w-4 text-neutral-900 focus:ring-neutral-900 border-neutral-300 rounded"
             />
             <div className="flex-1">
               <Label htmlFor="allowReentry" className="font-medium cursor-pointer">
                 Allow Re-entry
               </Label>
-              <p className="text-xs text-neutral-500 mt-1">
-                When enabled, contacts can enter this workflow multiple times. When disabled, contacts can only enter
-                once, ever.
+              <p className="text-xs text-neutral-500 mt-0.5">
+                When enabled, contacts can enter this workflow multiple times.
               </p>
             </div>
           </div>
diff --git a/packages/ui/src/components/atoms/Button.tsx b/packages/ui/src/components/atoms/Button.tsx
index 75596f5..2875e0a 100644
--- a/packages/ui/src/components/atoms/Button.tsx
+++ b/packages/ui/src/components/atoms/Button.tsx
@@ -9,10 +9,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 hover:shadow-md',
-        destructive: 'bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 hover:shadow-md',
-        outline: 'border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 hover:shadow-md',
-        secondary: 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 hover:shadow-md',
+        default: 'bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90',
+        destructive: 'bg-red-500 text-neutral-50 hover:bg-red-500/90',
+        outline: 'border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-neutral-900',
+        secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80',
         ghost: 'hover:bg-neutral-100 hover:text-neutral-900',
         link: 'text-neutral-900 underline-offset-4 hover:underline',
       },
diff --git a/packages/ui/src/components/atoms/Card.tsx b/packages/ui/src/components/atoms/Card.tsx
index 04fe525..13211c7 100644
--- a/packages/ui/src/components/atoms/Card.tsx
+++ b/packages/ui/src/components/atoms/Card.tsx
@@ -5,7 +5,7 @@ import {cn} from '../../lib';
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
   <div
     ref={ref}
-    className={cn('rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow overflow-hidden', className)}
+    className={cn('rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow-sm overflow-hidden', className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/components/atoms/Dialog.tsx b/packages/ui/src/components/atoms/Dialog.tsx
index 0451c1f..c06eb4d 100644
--- a/packages/ui/src/components/atoms/Dialog.tsx
+++ b/packages/ui/src/components/atoms/Dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[90vh] overflow-y-auto',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-5 border border-neutral-200 bg-white p-6 shadow-md duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[90vh] overflow-y-auto',
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-2.5 top-2.5 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 p-1 sm:p-1.5">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-60 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 p-1.5">
         <X className="h-5 w-5 sm:h-5 sm:w-5" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -52,12 +52,12 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+  <div className={cn('flex flex-col space-y-1', className)} {...props} />
 );
 DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)} {...props} />
 );
 DialogFooter.displayName = 'DialogFooter';
 
diff --git a/packages/ui/src/components/atoms/DropdownMenu.tsx b/packages/ui/src/components/atoms/DropdownMenu.tsx
index 816d02c..9dec651 100644
--- a/packages/ui/src/components/atoms/DropdownMenu.tsx
+++ b/packages/ui/src/components/atoms/DropdownMenu.tsx
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className,
     )}
     {...props}