diff --git a/apps/web/src/components/ActivityItem.tsx b/apps/web/src/components/ActivityItem.tsx
index b66892d..dbd5aca 100644
--- a/apps/web/src/components/ActivityItem.tsx
+++ b/apps/web/src/components/ActivityItem.tsx
@@ -353,7 +353,7 @@ export const ActivityItem = memo(function ActivityItem({activity, isUpcoming = f
     <div className={`flex items-start gap-4 ${isUpcoming ? 'opacity-80' : ''}`}>
       {/* Icon */}
       <div
-        className={`h-10 w-10 rounded-lg ${config.bgColor} flex items-center justify-center flex-shrink-0 ${isUpcoming ? 'ring-2 ring-offset-2 ring-neutral-300' : ''}`}
+        className={`h-10 w-10 rounded-lg ${config.bgColor} flex items-center justify-center flex-shrink-0 ${isUpcoming ? 'border-2 border-dashed border-neutral-300' : ''}`}
       >
         <Icon className={`h-5 w-5 ${config.color}`} />
       </div>
diff --git a/apps/web/src/components/ContactPicker.tsx b/apps/web/src/components/ContactPicker.tsx
index 8407ce9..8dfeaf0 100644
--- a/apps/web/src/components/ContactPicker.tsx
+++ b/apps/web/src/components/ContactPicker.tsx
@@ -62,7 +62,7 @@ export function ContactPicker({
             type="button"
             role="combobox"
             aria-expanded={open}
-            className="flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-500 hover:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-0 transition-colors"
+            className="flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-500 hover:border-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors"
           >
             <span>{placeholder}</span>
             <ChevronsUpDown className="h-4 w-4 opacity-40 shrink-0" />
diff --git a/apps/web/src/components/DashboardLayout.tsx b/apps/web/src/components/DashboardLayout.tsx
index e5cdb72..e127437 100644
--- a/apps/web/src/components/DashboardLayout.tsx
+++ b/apps/web/src/components/DashboardLayout.tsx
@@ -169,7 +169,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
         <div className="relative" ref={projectMenuRef}>
           <button
             onClick={handleToggleProjectMenu}
-            className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-neutral-50 transition-colors"
+            className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-neutral-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           >
             <div className="flex items-center gap-2 flex-1 min-w-0">
               <div className="h-8 w-8 rounded-lg bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
@@ -194,7 +194,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
                     setActiveProject(project);
                     setShowProjectMenu(false);
                   }}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors whitespace-nowrap"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 >
                   <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()}
@@ -209,7 +209,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
               <Link
                 href="/projects/create"
                 onClick={() => setShowProjectMenu(false)}
-                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700 whitespace-nowrap"
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700 whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
                 <Plus className="h-4 w-4" />
                 <span>Create project</span>
@@ -238,7 +238,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
                     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 ${
+                    className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
                       isActive ? 'bg-neutral-100 text-neutral-900' : 'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900'
                     }`}
                   >
@@ -258,7 +258,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-600 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         >
           <BookOpen className="h-5 w-5" />
           Documentation
@@ -267,7 +267,7 @@ 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 ${
+          className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
             router.pathname.startsWith('/settings')
               ? 'bg-neutral-100 text-neutral-900'
               : 'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900'
@@ -280,7 +280,7 @@ 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-600 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           >
             <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() ?? '?'}
@@ -299,7 +299,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
               </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"
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-red-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
                 <LogOut className="h-4 w-4" />
                 <span>Log out</span>
@@ -340,7 +340,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
         <div className="lg:hidden h-16 bg-white border-b border-neutral-200 flex items-center px-4">
           <button
             onClick={() => setShowMobileMenu(true)}
-            className="p-2 rounded-lg hover:bg-neutral-100 transition-colors"
+            className="p-2 rounded-lg hover:bg-neutral-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             aria-label="Open menu"
           >
             <Menu className="h-6 w-6 text-neutral-900" />
diff --git a/apps/web/src/components/EmailEditor/EmailEditor.tsx b/apps/web/src/components/EmailEditor/EmailEditor.tsx
index 2660bf2..36dd2cf 100644
--- a/apps/web/src/components/EmailEditor/EmailEditor.tsx
+++ b/apps/web/src/components/EmailEditor/EmailEditor.tsx
@@ -894,8 +894,8 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
           border: 1px solid #e5e7eb;
           border-radius: 8px;
           box-shadow:
-            0 10px 15px -3px rgba(0, 0, 0, 0.1),
-            0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            0 4px 6px -1px rgba(0, 0, 0, 0.07),
+            0 2px 4px -1px rgba(0, 0, 0, 0.04);
           padding: 4px;
           max-height: 320px;
           overflow-y: auto;
diff --git a/apps/web/src/components/EmailEditor/Toolbar.tsx b/apps/web/src/components/EmailEditor/Toolbar.tsx
index c1cf4ba..7c9ebd5 100644
--- a/apps/web/src/components/EmailEditor/Toolbar.tsx
+++ b/apps/web/src/components/EmailEditor/Toolbar.tsx
@@ -427,7 +427,7 @@ export function Toolbar({editor, onInsertVariable, onInsertImage, canUploadImage
         </Button>
         {showColorPicker && (
           <div
-            className="absolute top-10 left-0 bg-white border border-neutral-200 rounded-lg shadow-lg p-3 z-50 max-h-96 overflow-y-auto"
+            className="absolute top-10 left-0 bg-white border border-neutral-200 rounded-lg shadow-md p-3 z-50 max-h-96 overflow-y-auto"
             style={{width: '280px'}}
           >
             {/* Custom color input */}
@@ -483,7 +483,7 @@ export function Toolbar({editor, onInsertVariable, onInsertImage, canUploadImage
                         >
                           {selectedColor === color && (
                             <div className="absolute inset-0 flex items-center justify-center">
-                              <div className="w-2 h-2 rounded-full bg-white shadow-lg" />
+                              <div className="w-2 h-2 rounded-full bg-white shadow-sm" />
                             </div>
                           )}
                         </button>
@@ -511,7 +511,7 @@ export function Toolbar({editor, onInsertVariable, onInsertImage, canUploadImage
           <Link className="h-4 w-4" />
         </Button>
         {showLinkInput && (
-          <div className="absolute top-10 right-0 bg-white border border-neutral-200 rounded-lg shadow-lg p-2 z-50 min-w-max">
+          <div className="absolute top-10 right-0 bg-white border border-neutral-200 rounded-lg shadow-md p-2 z-50 min-w-max">
             <div className="flex gap-2 mb-2">
               <input
                 type="url"
diff --git a/apps/web/src/components/QuickStart.tsx b/apps/web/src/components/QuickStart.tsx
index 2d1fcfc..7602377 100644
--- a/apps/web/src/components/QuickStart.tsx
+++ b/apps/web/src/components/QuickStart.tsx
@@ -36,22 +36,22 @@ function HelpResources() {
     <div className="mt-4 pt-4 border-t border-neutral-200">
       <p className="text-xs font-medium text-neutral-500 mb-3">Need help?</p>
       <div className="flex flex-col sm:flex-row gap-2">
-        <Link href={WIKI_URI} target="_blank" className="flex-1">
-          <Button variant="outline" size="sm" className="w-full">
+        <Button asChild variant="outline" size="sm" className="flex-1">
+          <Link href={WIKI_URI} target="_blank">
             <BookOpen className="h-3.5 w-3.5" />
             Documentation
-          </Button>
-        </Link>
-        <Link href={`${LANDING_URI}/discord`} target="_blank" className="flex-1">
-          <Button variant="outline" size="sm" className="w-full">
+          </Link>
+        </Button>
+        <Button asChild variant="outline" size="sm" className="flex-1">
+          <Link href={`${LANDING_URI}/discord`} target="_blank">
             <MessageCircle className="h-3.5 w-3.5" />
             Join Discord
-          </Button>
-        </Link>
+          </Link>
+        </Button>
         <motion.button
           onClick={copyEmail}
           whileTap={{scale: 0.97}}
-          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"
+          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-xs font-medium text-neutral-700 overflow-hidden transition-colors hover:bg-neutral-50 hover:text-neutral-900 hover:border-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         >
           <AnimatePresence mode="wait" initial={false}>
             {copied ? (
@@ -274,11 +274,9 @@ export function QuickStart({setupState, isLoading}: QuickStartProps) {
                   </div>
                   <p className="text-xs text-neutral-600 leading-relaxed">{step.description}</p>
                 </div>
-                <Link href={step.link} className="flex-shrink-0">
-                  <Button size="sm" variant={step.isCompleted ? 'outline' : 'default'}>
-                    {step.linkText}
-                  </Button>
-                </Link>
+                <Button asChild size="sm" variant={step.isCompleted ? 'outline' : 'default'} className="flex-shrink-0">
+                  <Link href={step.link}>{step.linkText}</Link>
+                </Button>
               </div>
             );
           })}
diff --git a/apps/web/src/components/SecurityWarningBanner.tsx b/apps/web/src/components/SecurityWarningBanner.tsx
index 00167c2..2b0852c 100644
--- a/apps/web/src/components/SecurityWarningBanner.tsx
+++ b/apps/web/src/components/SecurityWarningBanner.tsx
@@ -33,11 +33,9 @@ export function SecurityWarningBanner({status}: SecurityWarningBannerProps) {
               : 'Your bounce or complaint rates are approaching limits. Review your contact lists and remove invalid addresses to maintain good standing.'}
           </p>
         </div>
-        <Link href="/settings?tab=security">
-          <Button size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
-            View Details
-          </Button>
-        </Link>
+        <Button asChild size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
+          <Link href="/settings?tab=security">View Details</Link>
+        </Button>
       </AlertDescription>
     </Alert>
   );
diff --git a/apps/web/src/components/onboarding/OnboardingBanner.tsx b/apps/web/src/components/onboarding/OnboardingBanner.tsx
index 460253e..940e84b 100644
--- a/apps/web/src/components/onboarding/OnboardingBanner.tsx
+++ b/apps/web/src/components/onboarding/OnboardingBanner.tsx
@@ -196,7 +196,7 @@ export function OnboardingBanner() {
                 const Icon = step.icon;
                 const isCurrent = step.id === currentStepId;
                 const base =
-                  'group relative inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900 focus-visible:ring-offset-2';
+                  'group relative inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
                 const variant = step.done
                   ? 'border-green-200 bg-green-50 text-green-900 hover:border-green-300'
                   : isCurrent
diff --git a/apps/web/src/pages/auth/reset-password.tsx b/apps/web/src/pages/auth/reset-password.tsx
index 818529e..3f0e515 100644
--- a/apps/web/src/pages/auth/reset-password.tsx
+++ b/apps/web/src/pages/auth/reset-password.tsx
@@ -105,9 +105,9 @@ export default function ResetPassword() {
                       This link is invalid or has expired. Request a new one from the login page.
                     </p>
                   </div>
-                  <Link href="/auth/login" className="mt-2">
-                    <Button>Back to login</Button>
-                  </Link>
+                  <Button asChild className="mt-2">
+                    <Link href="/auth/login">Back to login</Link>
+                  </Button>
                 </div>
               </CardContent>
             </Card>
diff --git a/apps/web/src/pages/auth/verify-email.tsx b/apps/web/src/pages/auth/verify-email.tsx
index 03f22c8..23a8f58 100644
--- a/apps/web/src/pages/auth/verify-email.tsx
+++ b/apps/web/src/pages/auth/verify-email.tsx
@@ -190,11 +190,9 @@ export default function VerifyEmail() {
                           </p>
                         )}
 
-                        <Link href="/auth/login">
-                          <Button variant="outline" className="w-full">
-                            Back to login
-                          </Button>
-                        </Link>
+                        <Button asChild variant="outline" className="w-full">
+                          <Link href="/auth/login">Back to login</Link>
+                        </Button>
                       </div>
                     </motion.div>
                   )}
@@ -273,11 +271,9 @@ export default function VerifyEmail() {
                           </p>
                         )}
 
-                        <Link href="/auth/login">
-                          <Button variant="outline" className="w-full">
-                            Back to login
-                          </Button>
-                        </Link>
+                        <Button asChild variant="outline" className="w-full">
+                          <Link href="/auth/login">Back to login</Link>
+                        </Button>
                       </div>
                     </motion.div>
                   )}
diff --git a/apps/web/src/pages/campaigns/[id].tsx b/apps/web/src/pages/campaigns/[id].tsx
index 699a98f..1aa696a 100644
--- a/apps/web/src/pages/campaigns/[id].tsx
+++ b/apps/web/src/pages/campaigns/[id].tsx
@@ -342,11 +342,9 @@ export default function CampaignDetailsPage() {
           {/* Header */}
           <div className="space-y-4">
             <div className="flex items-center gap-3 sm:gap-4">
-              <Link href="/campaigns">
-                <Button type="button" variant="ghost" size="sm">
-                  <ArrowLeft className="h-4 w-4" />
-                </Button>
-              </Link>
+              <Button asChild variant="ghost" size="sm">
+                <Link href="/campaigns"><ArrowLeft className="h-4 w-4" /></Link>
+              </Button>
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 sm:gap-3">
                   <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
@@ -848,11 +846,9 @@ export default function CampaignDetailsPage() {
         {/* Header */}
         <div className="space-y-4">
           <div className="flex items-center gap-3 sm:gap-4">
-            <Link href="/campaigns">
-              <Button variant="ghost" size="sm">
-                <ArrowLeft className="h-4 w-4" />
-              </Button>
-            </Link>
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/campaigns"><ArrowLeft className="h-4 w-4" /></Link>
+            </Button>
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2 sm:gap-3 mb-2">
                 <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
diff --git a/apps/web/src/pages/campaigns/create.tsx b/apps/web/src/pages/campaigns/create.tsx
index 6e31bb1..9219d61 100644
--- a/apps/web/src/pages/campaigns/create.tsx
+++ b/apps/web/src/pages/campaigns/create.tsx
@@ -177,11 +177,9 @@ export default function CreateCampaignPage() {
         <div className="space-y-6">
           {/* Header */}
           <div className="flex items-center gap-3 sm:gap-4">
-            <Link href="/campaigns">
-              <Button variant="ghost" size="sm">
-                <ArrowLeft className="h-4 w-4" />
-              </Button>
-            </Link>
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/campaigns"><ArrowLeft className="h-4 w-4" /></Link>
+            </Button>
             <div className="flex-1 min-w-0">
               <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Campaign</h1>
               <p className="text-neutral-500 mt-1 text-sm sm:text-base">
@@ -396,9 +394,9 @@ export default function CreateCampaignPage() {
 
               {/* Actions */}
               <div className="flex justify-end gap-3">
-                <Link href="/campaigns">
-                  <Button type="button" variant="outline">Cancel</Button>
-                </Link>
+                <Button asChild variant="outline">
+                  <Link href="/campaigns">Cancel</Link>
+                </Button>
                 <Button type="submit" disabled={saving}>
                   {saving ? 'Creating...' : 'Create Campaign'}
                 </Button>
diff --git a/apps/web/src/pages/campaigns/index.tsx b/apps/web/src/pages/campaigns/index.tsx
index 5579fcb..d2edb17 100644
--- a/apps/web/src/pages/campaigns/index.tsx
+++ b/apps/web/src/pages/campaigns/index.tsx
@@ -328,12 +328,12 @@ export default function CampaignsPage() {
                           </DropdownMenuContent>
                         </DropdownMenu>
                       ) : (
-                        <Link href="/campaigns/create">
-                          <Button>
+                        <Button asChild>
+                          <Link href="/campaigns/create">
                             <Plus className="h-4 w-4" />
                             Create Campaign
-                          </Button>
-                        </Link>
+                          </Link>
+                        </Button>
                       )
                     }
                   />
@@ -347,10 +347,11 @@ export default function CampaignsPage() {
               const deliveryPct = campaign.totalRecipients > 0 ? (campaign.sentCount / campaign.totalRecipients) * 100 : 0;
 
               return (
-                <Card key={campaign.id} className="transition-colors hover:border-neutral-300 flex flex-col">
+                <Card key={campaign.id} className="transition-colors hover:border-neutral-300 flex flex-col [&:has([data-card-link]:focus-visible)]:ring-2 [&:has([data-card-link]:focus-visible)]:ring-ring [&:has([data-card-link]:focus-visible)]:ring-offset-2">
                   <Link
                     href={`/campaigns/${campaign.id}`}
-                    className="flex-1 block p-6 pb-4 hover:bg-neutral-50/50 transition-colors rounded-t-xl"
+                    data-card-link=""
+                    className="flex-1 block p-6 pb-4 hover:bg-neutral-50/50 transition-colors rounded-t-xl focus-visible:outline-none"
                     aria-label={`Open ${campaign.name}`}
                   >
                     <div className="flex items-start justify-between gap-3 mb-3">
@@ -432,17 +433,15 @@ export default function CampaignsPage() {
                       <Calendar className="h-3 w-3" />
                       <div className="group relative inline-block cursor-help">
                         <span>Updated {formatRelativeTime(campaign.updatedAt)}</span>
-                        <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                        <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                           {dayjs(campaign.updatedAt).format('DD MMMM YYYY, hh:mm')}
                         </div>
                       </div>
                     </div>
                     <div className="flex items-center gap-1">
-                      <Link href={`/campaigns/${campaign.id}`} aria-label={campaign.status === 'DRAFT' ? 'Edit campaign' : 'View campaign'}>
-                        <Button variant="ghost" size="sm" title={campaign.status === 'DRAFT' ? 'Edit campaign' : 'View campaign'}>
-                          <Edit className="h-4 w-4" />
-                        </Button>
-                      </Link>
+                      <Button asChild variant="ghost" size="sm" title={campaign.status === 'DRAFT' ? 'Edit campaign' : 'View campaign'}>
+                        <Link href={`/campaigns/${campaign.id}`} aria-label={campaign.status === 'DRAFT' ? 'Edit campaign' : 'View campaign'}><Edit className="h-4 w-4" /></Link>
+                      </Button>
                       <Button variant="ghost" size="sm" title="Duplicate campaign" onClick={() => handleDuplicate(campaign.id)}>
                         <Copy className="h-4 w-4" />
                       </Button>
diff --git a/apps/web/src/pages/contacts/[id].tsx b/apps/web/src/pages/contacts/[id].tsx
index b850fc4..799d5e8 100644
--- a/apps/web/src/pages/contacts/[id].tsx
+++ b/apps/web/src/pages/contacts/[id].tsx
@@ -105,12 +105,12 @@ export default function ContactDetailPage() {
           <p className="text-neutral-500 mb-6">
             The contact you&apos;re looking for doesn&apos;t exist or has been deleted.
           </p>
-          <Link href="/contacts">
-            <Button>
+          <Button asChild>
+            <Link href="/contacts">
               <ArrowLeft className="h-4 w-4" />
               Back to Contacts
-            </Button>
-          </Link>
+            </Link>
+          </Button>
         </div>
       </DashboardLayout>
     );
@@ -124,11 +124,9 @@ export default function ContactDetailPage() {
           {/* Header */}
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 sm:gap-4 min-w-0">
-              <Link href="/contacts">
-                <Button variant="outline" size="sm">
-                  <ArrowLeft className="h-4 w-4" />
-                </Button>
-              </Link>
+              <Button asChild variant="outline" size="sm">
+                <Link href="/contacts"><ArrowLeft className="h-4 w-4" /></Link>
+              </Button>
               <div className="min-w-0">
                 <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{contact.email}</h1>
                 <p className="mt-1">
@@ -261,7 +259,7 @@ export default function ContactDetailPage() {
                     <p className="text-sm font-medium text-neutral-900">Created</p>
                     <div className="group relative inline-block cursor-help">
                       <p className="text-sm text-neutral-500">{dayjs(contact.createdAt).fromNow()}</p>
-                      <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                      <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                         {dayjs(contact.createdAt).format('DD MMMM YYYY, hh:mm')}
                       </div>
                     </div>
@@ -271,7 +269,7 @@ export default function ContactDetailPage() {
                     <p className="text-sm font-medium text-neutral-900">Last Updated</p>
                     <div className="group relative inline-block cursor-help">
                       <p className="text-sm text-neutral-500">{dayjs(contact.updatedAt).fromNow()}</p>
-                      <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                      <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                         {dayjs(contact.updatedAt).format('DD MMMM YYYY, hh:mm')}
                       </div>
                     </div>
diff --git a/apps/web/src/pages/contacts/index.tsx b/apps/web/src/pages/contacts/index.tsx
index c61cada..2b16292 100644
--- a/apps/web/src/pages/contacts/index.tsx
+++ b/apps/web/src/pages/contacts/index.tsx
@@ -338,18 +338,16 @@ export default function ContactsPage() {
                             <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-500">
                               <div className="group relative inline-block cursor-help">
                                 {formatRelativeTime(contact.createdAt)}
-                                <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-1/2 transform -translate-x-1/2 mb-1 whitespace-nowrap">
+                                <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-1/2 transform -translate-x-1/2 mb-1 whitespace-nowrap">
                                   {dayjs(contact.createdAt).format('DD MMMM YYYY, hh:mm')}
                                 </div>
                               </div>
                             </td>
                             <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                               <div className="flex items-center justify-end gap-2">
-                                <Link href={`/contacts/${contact.id}`}>
-                                  <Button variant="ghost" size="sm">
-                                    <Edit className="h-4 w-4" />
-                                  </Button>
-                                </Link>
+                                <Button asChild variant="ghost" size="sm">
+                                  <Link href={`/contacts/${contact.id}`}><Edit className="h-4 w-4" /></Link>
+                                </Button>
                                 <Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
                                   <Trash2 className="h-4 w-4" />
                                 </Button>
@@ -388,16 +386,14 @@ export default function ContactsPage() {
                         <div className="flex items-center justify-between">
                           <div className="group relative inline-block cursor-help">
                             <span className="text-xs text-neutral-500">{formatRelativeTime(contact.createdAt)}</span>
-                            <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                            <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                               {dayjs(contact.createdAt).format('Do MMMM YYYY, h:mm A')}
                             </div>
                           </div>
                           <div className="flex items-center gap-1">
-                            <Link href={`/contacts/${contact.id}`}>
-                              <Button variant="ghost" size="sm">
-                                <Edit className="h-4 w-4" />
-                              </Button>
-                            </Link>
+                            <Button asChild variant="ghost" size="sm">
+                              <Link href={`/contacts/${contact.id}`}><Edit className="h-4 w-4" /></Link>
+                            </Button>
                             <Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
                               <Trash2 className="h-4 w-4" />
                             </Button>
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 79755ad..8b5f8bc 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -113,11 +113,9 @@ export default function Index() {
                     Please contact support to resolve this issue and get your project re-enabled.
                   </p>
                 </div>
-                <Link href="/settings?tab=security">
-                  <Button size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
-                    View Details
-                  </Button>
-                </Link>
+                <Button asChild size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
+                  <Link href="/settings?tab=security">View Details</Link>
+                </Button>
               </AlertDescription>
             </Alert>
           )}
@@ -167,11 +165,9 @@ export default function Index() {
                   <span className="text-sm">
                     Your emails currently include Plunk branding. Upgrade to a subscription to remove it.
                   </span>
-                  <Link href="/settings?tab=billing">
-                    <Button size="sm" className="w-full sm:w-auto">
-                      Upgrade Now
-                    </Button>
-                  </Link>
+                  <Button asChild size="sm" className="w-full sm:w-auto">
+                    <Link href="/settings?tab=billing">Upgrade Now</Link>
+                  </Button>
                 </AlertDescription>
               </Alert>
             )}
diff --git a/apps/web/src/pages/manage/[id].tsx b/apps/web/src/pages/manage/[id].tsx
index b0f7d72..6e233eb 100644
--- a/apps/web/src/pages/manage/[id].tsx
+++ b/apps/web/src/pages/manage/[id].tsx
@@ -165,7 +165,7 @@ export default function Manage() {
                   <button
                     onClick={() => void handleToggleSubscription()}
                     disabled={updating}
-                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ${
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
                       contact?.subscribed ? 'bg-neutral-900' : 'bg-neutral-200'
                     } ${updating ? 'opacity-50 cursor-not-allowed' : ''}`}
                   >
diff --git a/apps/web/src/pages/onboarding/index.tsx b/apps/web/src/pages/onboarding/index.tsx
index 63b67a2..1ded3a9 100644
--- a/apps/web/src/pages/onboarding/index.tsx
+++ b/apps/web/src/pages/onboarding/index.tsx
@@ -80,7 +80,7 @@ export default function OnboardingWelcome() {
                   transition={{duration: 0.35, delay: 0.08 + index * 0.06, ease: [0.22, 1, 0.36, 1]}}
                   whileHover={{y: -2}}
                   whileTap={{scale: 0.995}}
-                  className="group flex flex-col gap-5 rounded-xl border border-neutral-200 bg-white p-6 text-left shadow-sm transition-colors hover:border-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900 focus-visible:ring-offset-2"
+                  className="group flex flex-col gap-5 rounded-xl border border-neutral-200 bg-white p-6 text-left shadow-sm transition-colors hover:border-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 >
                   <div className="flex items-center justify-between">
                     <span className="flex h-10 w-10 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-900">
diff --git a/apps/web/src/pages/segments/[id].tsx b/apps/web/src/pages/segments/[id].tsx
index 0742a42..6f5e57d 100644
--- a/apps/web/src/pages/segments/[id].tsx
+++ b/apps/web/src/pages/segments/[id].tsx
@@ -7,6 +7,7 @@ import {
   CardHeader,
   CardTitle,
   ConfirmDialog,
+  EmptyState,
   IconSpinner,
   Input,
   Label,
@@ -194,12 +195,12 @@ export default function SegmentDetailPage() {
           <p className="text-neutral-500 mb-6">
             The segment you&apos;re looking for doesn&apos;t exist or has been deleted.
           </p>
-          <Link href="/segments">
-            <Button>
+          <Button asChild>
+            <Link href="/segments">
               <ArrowLeft className="h-4 w-4" />
               Back to Segments
-            </Button>
-          </Link>
+            </Link>
+          </Button>
         </div>
       </DashboardLayout>
     );
@@ -213,11 +214,9 @@ export default function SegmentDetailPage() {
         {/* Header */}
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <Link href="/segments">
-              <Button variant="outline" size="sm">
-                <ArrowLeft className="h-4 w-4" />
-              </Button>
-            </Link>
+            <Button asChild variant="outline" size="sm">
+              <Link href="/segments"><ArrowLeft className="h-4 w-4" /></Link>
+            </Button>
             <div>
               <div className="flex items-center gap-2">
                 <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">{segment.name}</h1>
@@ -276,7 +275,7 @@ export default function SegmentDetailPage() {
                       type="checkbox"
                       checked={trackMembership}
                       onChange={e => setTrackMembership(e.target.checked)}
-                      className="mt-1 h-4 w-4 text-neutral-900 focus:ring-neutral-900 border-neutral-300 rounded"
+                      className="mt-1 h-4 w-4 text-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border-neutral-300 rounded"
                     />
                     <div className="flex-1">
                       <Label htmlFor="trackMembership" className="font-medium cursor-pointer">
@@ -365,12 +364,11 @@ export default function SegmentDetailPage() {
                     <p className="text-sm text-neutral-500">Loading contacts...</p>
                   </div>
                 ) : contactsData?.data.length === 0 ? (
-                  <div className="text-center py-8">
-                    <Users className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                    <p className="text-neutral-500">
-                      {isStatic ? 'No members in this segment yet' : 'No contacts match this segment'}
-                    </p>
-                  </div>
+                  <EmptyState
+                    icon={Users}
+                    title={isStatic ? 'No members yet' : 'No contacts match'}
+                    description={isStatic ? 'Add contacts to this segment to get started.' : 'No contacts currently match these filter conditions.'}
+                  />
                 ) : (
                   <>
                     <div className="space-y-2">
@@ -385,11 +383,9 @@ export default function SegmentDetailPage() {
                             <span className="text-sm font-medium">{contact.email}</span>
                           </div>
                           <div className="flex items-center gap-2">
-                            <Link href={`/contacts/${contact.id}`}>
-                              <Button variant="ghost" size="sm">
-                                View
-                              </Button>
-                            </Link>
+                            <Button asChild variant="ghost" size="sm">
+                              <Link href={`/contacts/${contact.id}`}>View</Link>
+                            </Button>
                             {isStatic && (
                               <Button
                                 variant="destructiveGhost"
@@ -494,7 +490,7 @@ export default function SegmentDetailPage() {
                   <p className="text-sm font-medium text-neutral-900">Created</p>
                   <div className="group relative inline-block cursor-help">
                     <p className="text-sm text-neutral-500">{dayjs(segment.createdAt).fromNow()}</p>
-                    <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                    <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                       {dayjs(segment.createdAt).format('DD MMMM YYYY, hh:mm')}
                     </div>
                   </div>
@@ -504,7 +500,7 @@ export default function SegmentDetailPage() {
                   <p className="text-sm font-medium text-neutral-900">Last Updated</p>
                   <div className="group relative inline-block cursor-help">
                     <p className="text-sm text-neutral-500">{dayjs(segment.updatedAt).fromNow()}</p>
-                    <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                    <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                       {dayjs(segment.updatedAt).format('DD MMMM YYYY, hh:mm')}
                     </div>
                   </div>
diff --git a/apps/web/src/pages/segments/index.tsx b/apps/web/src/pages/segments/index.tsx
index 6290399..b182dd8 100644
--- a/apps/web/src/pages/segments/index.tsx
+++ b/apps/web/src/pages/segments/index.tsx
@@ -90,13 +90,13 @@ export default function SegmentsPage() {
                 Create dynamic audience groups based on contact attributes and behaviors
               </p>
             </div>
-            <Link href="/segments/new" className="w-full sm:w-auto">
-              <Button className="w-full sm:w-auto">
+            <Button asChild className="w-full sm:w-auto">
+              <Link href="/segments/new">
                 <Plus className="h-4 w-4" />
                 <span className="hidden sm:inline">Create Segment</span>
                 <span className="sm:hidden">Create</span>
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </div>
 
           {/* Search */}
@@ -145,12 +145,12 @@ export default function SegmentsPage() {
                   description={searchInput ? 'Try a different search term.' : 'Group contacts by attributes to target specific audiences.'}
                   action={
                     !searchInput ? (
-                      <Link href="/segments/new">
-                        <Button>
+                      <Button asChild>
+                        <Link href="/segments/new">
                           <Plus className="h-4 w-4" />
                           Create Segment
-                        </Button>
-                      </Link>
+                        </Link>
+                      </Button>
                     ) : undefined
                   }
                 />
@@ -162,10 +162,11 @@ export default function SegmentsPage() {
                 const isDynamic = (segment as unknown as {type: string}).type !== 'STATIC';
                 const filterCount = isDynamic ? countFiltersInCondition(segment.condition) : 0;
                 return (
-                  <Card key={segment.id} className="transition-colors hover:border-neutral-300 flex flex-col">
+                  <Card key={segment.id} className="transition-colors hover:border-neutral-300 flex flex-col [&:has([data-card-link]:focus-visible)]:ring-2 [&:has([data-card-link]:focus-visible)]:ring-ring [&:has([data-card-link]:focus-visible)]:ring-offset-2">
                     <Link
                       href={`/segments/${segment.id}`}
-                      className="flex-1 block p-6 pb-4 hover:bg-neutral-50/50 transition-colors rounded-t-xl"
+                      data-card-link=""
+                      className="flex-1 block p-6 pb-4 hover:bg-neutral-50/50 transition-colors rounded-t-xl focus-visible:outline-none"
                       aria-label={`Open ${segment.name}`}
                     >
                       <div className="flex items-start justify-between gap-3 mb-3">
@@ -195,17 +196,15 @@ export default function SegmentsPage() {
                         <Calendar className="h-3 w-3" />
                         <div className="group relative inline-block cursor-help">
                           <span>Updated {formatRelativeTime(segment.updatedAt)}</span>
-                          <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                          <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                             {dayjs(segment.updatedAt).format('DD MMMM YYYY, hh:mm')}
                           </div>
                         </div>
                       </div>
                       <div className="flex items-center gap-1">
-                        <Link href={`/segments/${segment.id}`} aria-label="Edit segment">
-                          <Button variant="ghost" size="sm" title="Edit segment">
-                            <Edit className="h-4 w-4" />
-                          </Button>
-                        </Link>
+                        <Button asChild variant="ghost" size="sm" title="Edit segment">
+                          <Link href={`/segments/${segment.id}`} aria-label="Edit segment"><Edit className="h-4 w-4" /></Link>
+                        </Button>
                         <Button
                           variant="ghost"
                           size="sm"
diff --git a/apps/web/src/pages/segments/new.tsx b/apps/web/src/pages/segments/new.tsx
index c5ad4b8..e1d09f9 100644
--- a/apps/web/src/pages/segments/new.tsx
+++ b/apps/web/src/pages/segments/new.tsx
@@ -79,11 +79,9 @@ export default function NewSegmentPage() {
         <div className="space-y-6">
           {/* Header */}
           <div className="flex items-center gap-4">
-            <Link href="/segments">
-              <Button variant="outline" size="sm">
-                <ArrowLeft className="h-4 w-4" />
-              </Button>
-            </Link>
+            <Button asChild variant="outline" size="sm">
+              <Link href="/segments"><ArrowLeft className="h-4 w-4" /></Link>
+            </Button>
             <div>
               <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Segment</h1>
               <p className="text-neutral-500 mt-1">
@@ -159,7 +157,7 @@ export default function NewSegmentPage() {
                     type="checkbox"
                     checked={trackMembership}
                     onChange={e => setTrackMembership(e.target.checked)}
-                    className="mt-1 h-4 w-4 text-neutral-900 focus:ring-neutral-900 border-neutral-300 rounded"
+                    className="mt-1 h-4 w-4 text-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border-neutral-300 rounded"
                   />
                   <div className="flex-1">
                     <Label htmlFor="trackMembership" className="font-medium cursor-pointer">
@@ -204,11 +202,9 @@ export default function NewSegmentPage() {
 
             {/* Actions */}
             <div className="flex items-center justify-end gap-2">
-              <Link href="/segments">
-                <Button type="button" variant="outline" disabled={isSubmitting}>
-                  Cancel
-                </Button>
-              </Link>
+              <Button asChild variant="outline" disabled={isSubmitting}>
+                <Link href="/segments">Cancel</Link>
+              </Button>
               <Button type="submit" disabled={isSubmitting}>
                 <Save className="h-4 w-4 mr-2" />
                 {isSubmitting ? 'Creating...' : 'Create Segment'}
diff --git a/apps/web/src/pages/templates/[id].tsx b/apps/web/src/pages/templates/[id].tsx
index b15f3fa..96d17db 100644
--- a/apps/web/src/pages/templates/[id].tsx
+++ b/apps/web/src/pages/templates/[id].tsx
@@ -130,11 +130,9 @@ export default function TemplateEditorPage() {
         {/* Header */}
         <div className="space-y-4">
           <div className="flex items-center gap-3 sm:gap-4">
-            <Link href="/templates">
-              <Button type="button" variant="ghost" size="sm">
-                <ArrowLeft className="h-4 w-4" />
-              </Button>
-            </Link>
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/templates"><ArrowLeft className="h-4 w-4" /></Link>
+            </Button>
             <div className="flex-1 min-w-0">
               <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1>
               <p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your email template</p>
diff --git a/apps/web/src/pages/templates/create.tsx b/apps/web/src/pages/templates/create.tsx
index 900ad73..8e3ee64 100644
--- a/apps/web/src/pages/templates/create.tsx
+++ b/apps/web/src/pages/templates/create.tsx
@@ -73,11 +73,9 @@ export default function CreateTemplatePage() {
         <div className="space-y-6">
           {/* Header */}
           <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>
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/templates"><ArrowLeft className="h-4 w-4" /></Link>
+            </Button>
             <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">
@@ -217,9 +215,9 @@ export default function CreateTemplatePage() {
 
             {/* Actions */}
             <div className="flex justify-end gap-3">
-              <Link href="/templates">
-                <Button type="button" variant="outline">Cancel</Button>
-              </Link>
+              <Button asChild variant="outline">
+                <Link href="/templates">Cancel</Link>
+              </Button>
               <Button type="submit" disabled={saving}>
                 {saving ? 'Creating...' : 'Create Template'}
               </Button>
diff --git a/apps/web/src/pages/templates/index.tsx b/apps/web/src/pages/templates/index.tsx
index 1499286..963fb4a 100644
--- a/apps/web/src/pages/templates/index.tsx
+++ b/apps/web/src/pages/templates/index.tsx
@@ -80,13 +80,13 @@ export default function TemplatesPage() {
                 {data?.total ? `${data.total} total templates` : ''}
               </p>
             </div>
-            <Link href="/templates/create" className="w-full sm:w-auto">
-              <Button className="w-full sm:w-auto">
+            <Button asChild className="w-full sm:w-auto">
+              <Link href="/templates/create">
                 <Plus className="h-4 w-4" />
                 <span className="hidden sm:inline">Create Template</span>
                 <span className="sm:hidden">Create</span>
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </div>
 
           {/* Search & Filters */}
@@ -149,12 +149,12 @@ export default function TemplatesPage() {
                     description={search ? 'Try a different search term.' : 'Create reusable email designs for campaigns.'}
                     action={
                       !search ? (
-                        <Link href="/templates/create">
-                          <Button>
+                        <Button asChild>
+                          <Link href="/templates/create">
                             <Plus className="h-4 w-4" />
                             Create Template
-                          </Button>
-                        </Link>
+                          </Link>
+                        </Button>
                       ) : undefined
                     }
                   />
@@ -164,10 +164,11 @@ export default function TemplatesPage() {
               <>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {data?.data.map(template => (
-                    <Card key={template.id} className="transition-colors hover:border-neutral-300 flex flex-col">
+                    <Card key={template.id} className="transition-colors hover:border-neutral-300 flex flex-col [&:has([data-card-link]:focus-visible)]:ring-2 [&:has([data-card-link]:focus-visible)]:ring-ring [&:has([data-card-link]:focus-visible)]:ring-offset-2">
                       <Link
                         href={`/templates/${template.id}`}
-                        className="flex-1 block p-6 pb-4 hover:bg-neutral-50/50 transition-colors rounded-t-xl"
+                        data-card-link=""
+                        className="flex-1 block p-6 pb-4 hover:bg-neutral-50/50 transition-colors rounded-t-xl focus-visible:outline-none"
                         aria-label={`Edit ${template.name}`}
                       >
                         <div className="flex items-start justify-between gap-3 mb-3">
@@ -186,17 +187,15 @@ export default function TemplatesPage() {
                           <Calendar className="h-3 w-3" />
                           <div className="group relative inline-block cursor-help">
                             <span>Updated {formatRelativeTime(template.updatedAt)}</span>
-                            <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                            <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                               {dayjs(template.updatedAt).format('DD MMMM YYYY, hh:mm')}
                             </div>
                           </div>
                         </div>
                         <div className="flex items-center gap-1">
-                          <Link href={`/templates/${template.id}`} aria-label="Edit template">
-                            <Button variant="ghost" size="sm" title="Edit template">
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                          </Link>
+                          <Button asChild variant="ghost" size="sm" title="Edit template">
+                            <Link href={`/templates/${template.id}`} aria-label="Edit template"><Edit className="h-4 w-4" /></Link>
+                          </Button>
                           <Button variant="ghost" size="sm" title="Duplicate template" onClick={() => handleDuplicate(template.id)}>
                             <Copy className="h-4 w-4" />
                           </Button>
diff --git a/apps/web/src/pages/workflows/[id].tsx b/apps/web/src/pages/workflows/[id].tsx
index bc7889b..9e63f47 100644
--- a/apps/web/src/pages/workflows/[id].tsx
+++ b/apps/web/src/pages/workflows/[id].tsx
@@ -443,11 +443,9 @@ export default function WorkflowEditorPage() {
       <div className="space-y-6">
         {/* Header */}
         <div className="flex items-center gap-3 sm:gap-4">
-          <Link href="/workflows">
-            <Button variant="ghost" size="sm">
-              <ArrowLeft className="h-4 w-4" />
-            </Button>
-          </Link>
+          <Button asChild variant="ghost" size="sm">
+            <Link href="/workflows"><ArrowLeft className="h-4 w-4" /></Link>
+          </Button>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 sm:gap-3">
               <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{workflow.name}</h1>
@@ -573,7 +571,7 @@ export default function WorkflowEditorPage() {
           <nav className="-mb-px flex space-x-8">
             <button
               onClick={() => setActiveTab('builder')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+              className={`py-2 px-1 border-b-2 font-medium text-sm rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
                 activeTab === 'builder'
                   ? 'border-neutral-900 text-neutral-900'
                   : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300'
@@ -583,7 +581,7 @@ export default function WorkflowEditorPage() {
             </button>
             <button
               onClick={() => setActiveTab('executions')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+              className={`py-2 px-1 border-b-2 font-medium text-sm rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
                 activeTab === 'executions'
                   ? 'border-neutral-900 text-neutral-900'
                   : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300'
@@ -682,7 +680,7 @@ export default function WorkflowEditorPage() {
                           <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-500">
                             <div className="group relative inline-block cursor-help">
                               {dayjs(execution.startedAt).fromNow()}
-                              <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-1/2 transform -translate-x-1/2 mb-1 whitespace-nowrap">
+                              <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-1/2 transform -translate-x-1/2 mb-1 whitespace-nowrap">
                                 {dayjs(execution.startedAt).format('DD MMMM YYYY, hh:mm')}
                               </div>
                             </div>
diff --git a/apps/web/src/pages/workflows/index.tsx b/apps/web/src/pages/workflows/index.tsx
index 1a6d5e0..01d2226 100644
--- a/apps/web/src/pages/workflows/index.tsx
+++ b/apps/web/src/pages/workflows/index.tsx
@@ -157,10 +157,11 @@ export default function WorkflowsPage() {
               <>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {data?.data.map(workflow => (
-                    <Card key={workflow.id} className="transition-colors hover:border-neutral-300 flex flex-col">
+                    <Card key={workflow.id} className="transition-colors hover:border-neutral-300 flex flex-col [&:has([data-card-link]:focus-visible)]:ring-2 [&:has([data-card-link]:focus-visible)]:ring-ring [&:has([data-card-link]:focus-visible)]:ring-offset-2">
                       <Link
                         href={`/workflows/${workflow.id}`}
-                        className="flex-1 block p-6 pb-4 hover:bg-neutral-50/50 transition-colors rounded-t-xl"
+                        data-card-link=""
+                        className="flex-1 block p-6 pb-4 hover:bg-neutral-50/50 transition-colors rounded-t-xl focus-visible:outline-none"
                         aria-label={`Open ${workflow.name}`}
                       >
                         <div className="flex items-start justify-between gap-3 mb-3">
@@ -201,7 +202,7 @@ export default function WorkflowsPage() {
                           <Calendar className="h-3 w-3" />
                           <div className="group relative inline-block cursor-help">
                             <span>Updated {formatRelativeTime(workflow.updatedAt)}</span>
-                            <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-0 mb-1 whitespace-nowrap">
+                            <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-md bottom-full left-0 mb-1 whitespace-nowrap">
                               {dayjs(workflow.updatedAt).format('DD MMMM YYYY, hh:mm')}
                             </div>
                           </div>
@@ -215,11 +216,9 @@ export default function WorkflowsPage() {
                           >
                             {workflow.enabled ? <PowerOff className="h-4 w-4" /> : <Power className="h-4 w-4" />}
                           </Button>
-                          <Link href={`/workflows/${workflow.id}`} aria-label="Edit workflow">
-                            <Button variant="ghost" size="sm" title="Edit workflow">
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                          </Link>
+                          <Button asChild variant="ghost" size="sm" title="Edit workflow">
+                            <Link href={`/workflows/${workflow.id}`} aria-label="Edit workflow"><Edit className="h-4 w-4" /></Link>
+                          </Button>
                           <Button
                             variant="ghost"
                             size="sm"
@@ -359,7 +358,7 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
               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-md text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              className="w-full px-3 py-2 border border-neutral-200 rounded-md text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               rows={3}
             />
           </div>
@@ -433,7 +432,7 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
               type="checkbox"
               checked={allowReentry}
               onChange={e => setAllowReentry(e.target.checked)}
-              className="mt-0.5 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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border-neutral-300 rounded"
             />
             <div className="flex-1">
               <Label htmlFor="allowReentry" className="font-medium cursor-pointer">
diff --git a/packages/ui/src/components/atoms/Badge.tsx b/packages/ui/src/components/atoms/Badge.tsx
index 317a1ac..5b2546b 100644
--- a/packages/ui/src/components/atoms/Badge.tsx
+++ b/packages/ui/src/components/atoms/Badge.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import {cn} from '../../lib';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   {
     variants: {
       variant: {
diff --git a/packages/ui/src/components/atoms/Button.tsx b/packages/ui/src/components/atoms/Button.tsx
index cc0ccf9..fc99408 100644
--- a/packages/ui/src/components/atoms/Button.tsx
+++ b/packages/ui/src/components/atoms/Button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import {cn} from '../../lib';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
   {
     variants: {
       variant: {
diff --git a/packages/ui/src/components/atoms/Chart.tsx b/packages/ui/src/components/atoms/Chart.tsx
index 1b38638..f9cd765 100644
--- a/packages/ui/src/components/atoms/Chart.tsx
+++ b/packages/ui/src/components/atoms/Chart.tsx
@@ -169,7 +169,7 @@ const ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContent
       <div
         ref={ref}
         className={cn(
-          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-md',
           className,
         )}
       >
diff --git a/packages/ui/src/components/atoms/Dialog.tsx b/packages/ui/src/components/atoms/Dialog.tsx
index 9adb067..5e014f7 100644
--- a/packages/ui/src/components/atoms/Dialog.tsx
+++ b/packages/ui/src/components/atoms/Dialog.tsx
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-md opacity-60 ring-offset-white transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 p-1.5">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-md opacity-60 ring-offset-white transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible: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>
diff --git a/packages/ui/src/components/atoms/Input.tsx b/packages/ui/src/components/atoms/Input.tsx
index cf89a4c..65fb982 100644
--- a/packages/ui/src/components/atoms/Input.tsx
+++ b/packages/ui/src/components/atoms/Input.tsx
@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
     <input
       type={type}
       className={cn(
-        'flex h-9 w-full rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'flex h-9 w-full rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         className,
       )}
       ref={ref}
diff --git a/packages/ui/src/components/atoms/Select.tsx b/packages/ui/src/components/atoms/Select.tsx
index 7c78387..00cfadf 100644
--- a/packages/ui/src/components/atoms/Select.tsx
+++ b/packages/ui/src/components/atoms/Select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}
diff --git a/packages/ui/src/components/atoms/Switch.tsx b/packages/ui/src/components/atoms/Switch.tsx
index 8cd3966..efe226c 100644
--- a/packages/ui/src/components/atoms/Switch.tsx
+++ b/packages/ui/src/components/atoms/Switch.tsx
@@ -16,7 +16,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+        'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/packages/ui/src/components/atoms/Textarea.tsx b/packages/ui/src/components/atoms/Textarea.tsx
index e8258f0..772e3ab 100644
--- a/packages/ui/src/components/atoms/Textarea.tsx
+++ b/packages/ui/src/components/atoms/Textarea.tsx
@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({classNam
   return (
     <textarea
       className={cn(
-        'flex min-h-[80px] w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex min-h-[80px] w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       ref={ref}