From 92c67da0de555d63cf8c78d6ba3f4083bc6b9f5b Mon Sep 17 00:00:00 2001
From: Jaydams <John89Isaac@gmail.com>
Date: Tue, 26 May 2026 19:59:17 +0100
Subject: [PATCH] refactor(css): extract repeated Tailwind patterns into @layer
 components

---
 .claude/settings.local.json        | 15 ++++++++++++-
 app/activity/page.tsx              |  6 +++---
 app/auth/2fa/page.tsx              |  2 +-
 app/auth/error.tsx                 |  6 +++---
 app/auth/signin/page.tsx           |  4 ++--
 app/auth/signup/page.tsx           |  6 +++---
 app/auth/wallet-setup/page.tsx     |  4 ++--
 app/bills/catalog/page.tsx         |  8 +++----
 app/bills/error.tsx                |  6 +++---
 app/bills/page.tsx                 |  4 ++--
 app/bills/pay/page.tsx             |  8 +++----
 app/burn/page.tsx                  |  8 +++----
 app/business/sme/page.tsx          |  4 ++--
 app/currency/page.tsx              | 12 +++++------
 app/error.tsx                      |  6 +++---
 app/globals.css                    | 34 ++++++++++++++++++++++++++++++
 app/help/page.tsx                  |  8 +++----
 app/lending/admin/page.tsx         |  4 ++--
 app/lending/page.tsx               |  4 ++--
 app/me/activity/page.tsx           |  8 +++----
 app/me/error.tsx                   |  6 +++---
 app/me/page.tsx                    |  4 ++--
 app/me/settings/contacts/page.tsx  | 12 +++++------
 app/me/settings/guardians/page.tsx | 12 +++++------
 app/me/settings/page.tsx           |  6 +++---
 app/me/settings/receive/page.tsx   | 18 ++++++++--------
 app/me/settings/security/page.tsx  |  6 +++---
 app/me/settings/wallet/page.tsx    |  8 +++----
 app/mint/page.tsx                  | 12 +++++------
 app/page.tsx                       |  2 +-
 app/rates/page.tsx                 |  8 +++----
 app/recovery/page.tsx              |  2 +-
 app/reserves/page.tsx              |  8 +++----
 app/savings/deposit/page.tsx       | 12 +++++------
 app/savings/error.tsx              |  6 +++---
 app/savings/page.tsx               |  8 +++----
 app/savings/withdraw/page.tsx      | 12 +++++------
 app/send/[id]/page.tsx             | 24 ++++++++++-----------
 app/send/error.tsx                 |  6 +++---
 app/send/page.tsx                  |  4 ++--
 app/transactions/[id]/page.tsx     | 24 ++++++++++-----------
 app/transactions/error.tsx         |  6 +++---
 app/wallet/error.tsx               |  6 +++---
 app/wallet/page.tsx                |  4 ++--
 components/error-boundary.tsx      |  4 ++--
 45 files changed, 212 insertions(+), 165 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 6708181..1a83ec3 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,7 +1,20 @@
 {
   "permissions": {
     "allow": [
-      "Bash(git merge *)"
+      "Bash(git merge *)",
+      "Bash(grep -oP '`[^`]*`')",
+      "Bash(sed 's/`//g')",
+      "Bash(xargs perl -i -pe 's/sticky top-0 z-10 border-b border-border bg-card\\\\/95 backdrop-blur-sm/page-header/g')",
+      "Bash(xargs perl -i -pe 's/px-4 py-3 flex items-center gap-3/page-header-row/g')",
+      "Bash(xargs perl -i -pe 's/text-lg font-bold text-foreground/page-title/g')",
+      "Bash(xargs perl -i -pe 's/text-sm font-medium text-foreground mb-2 block/form-label/g')",
+      "Bash(xargs perl -i -pe 's/flex min-h-\\\\[400px\\\\] flex-col items-center justify-center gap-4 p-6 text-center/error-state/g')",
+      "Bash(xargs perl -i -pe 's/rounded-full bg-red-100 dark:bg-red-900\\\\/30 p-3/error-icon-wrapper/g')",
+      "Bash(xargs perl -i -pe 's/h-8 w-8 text-red-600 dark:text-red-400/error-icon/g')",
+      "Bash(xargs perl -i -pe 's/flex items-center justify-center min-w-\\\\[44px\\\\] min-h-\\\\[44px\\\\] -m-2/touch-target/g')",
+      "Bash(npx tsc *)",
+      "Bash(git -C /Users/user/Documents/Phanta/acbu-frontend diff app/burn/page.tsx)",
+      "Bash(git -C /Users/user/Documents/Phanta/acbu-frontend diff app/send/page.tsx)"
     ]
   }
 }
diff --git a/app/activity/page.tsx b/app/activity/page.tsx
index 9d66e52..8d35724 100644
--- a/app/activity/page.tsx
+++ b/app/activity/page.tsx
@@ -40,10 +40,10 @@ export default function ActivityPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link href="/me"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">Activity</h1>
+          <h1 className="page-title">Activity</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/auth/2fa/page.tsx b/app/auth/2fa/page.tsx
index 28e126c..0c8e27c 100644
--- a/app/auth/2fa/page.tsx
+++ b/app/auth/2fa/page.tsx
@@ -104,7 +104,7 @@ function TwoFactorForm() {
             <div>
               <label
                 htmlFor="auth-code"
-                className="text-sm font-medium text-foreground mb-2 block"
+                className="form-label"
               >
                 Authentication Code
               </label>
diff --git a/app/auth/error.tsx b/app/auth/error.tsx
index 854eae6..acf7050 100644
--- a/app/auth/error.tsx
+++ b/app/auth/error.tsx
@@ -29,9 +29,9 @@ export default function AuthError({
   };
 
   return (
-    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
-      <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-        <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+    <div className="error-state">
+      <div className="error-icon-wrapper">
+        <AlertTriangle className="error-icon" />
       </div>
       
       <div className="space-y-2">
diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
index c2d0f41..072c371 100644
--- a/app/auth/signin/page.tsx
+++ b/app/auth/signin/page.tsx
@@ -121,7 +121,7 @@ function SignInForm() {
                         <div>
                             <label
                                 htmlFor="signin-detail"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Username, email, or phone
                             </label>
@@ -138,7 +138,7 @@ function SignInForm() {
                         </div>
 
             <div>
-              <label className="text-sm font-medium text-foreground mb-2 block">
+              <label className="form-label">
                 Passcode
               </label>
               <div className="relative">
diff --git a/app/auth/signup/page.tsx b/app/auth/signup/page.tsx
index fc5e3fa..bf7a84d 100644
--- a/app/auth/signup/page.tsx
+++ b/app/auth/signup/page.tsx
@@ -149,7 +149,7 @@ export default function SignUpPage() {
                         <div>
                             <label
                                 htmlFor="signup-username"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Username
                             </label>
@@ -168,7 +168,7 @@ export default function SignUpPage() {
                         <div>
                             <label
                                 htmlFor="signup-passcode"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Passcode (min 12 characters)
                             </label>
@@ -229,7 +229,7 @@ export default function SignUpPage() {
                         <div>
                             <label
                                 htmlFor="confirm-passcode"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Confirm passcode
                             </label>
diff --git a/app/auth/wallet-setup/page.tsx b/app/auth/wallet-setup/page.tsx
index 67439b4..d6ab213 100644
--- a/app/auth/wallet-setup/page.tsx
+++ b/app/auth/wallet-setup/page.tsx
@@ -214,9 +214,9 @@ export default function WalletSetupPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
+      <div className="page-header">
         <div className="px-4 py-3">
-          <h1 className="text-lg font-bold text-foreground">Finish Wallet Setup</h1>
+          <h1 className="page-title">Finish Wallet Setup</h1>
           <p className="text-xs text-muted-foreground">Complete your wallet activation</p>
         </div>
       </div>
diff --git a/app/bills/catalog/page.tsx b/app/bills/catalog/page.tsx
index dee942c..5b5c6eb 100644
--- a/app/bills/catalog/page.tsx
+++ b/app/bills/catalog/page.tsx
@@ -9,10 +9,10 @@ import { ArrowLeft } from 'lucide-react';
 export default function BillsCatalogPage() {
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
-          <Link href="/bills" className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">Bill catalog</h1>
+      <div className="page-header">
+        <div className="page-header-row">
+          <Link href="/bills" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
+          <h1 className="page-title">Bill catalog</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/bills/error.tsx b/app/bills/error.tsx
index a54a49b..adc3802 100644
--- a/app/bills/error.tsx
+++ b/app/bills/error.tsx
@@ -29,9 +29,9 @@ export default function BillsError({
   };
 
   return (
-    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
-      <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-        <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+    <div className="error-state">
+      <div className="error-icon-wrapper">
+        <AlertTriangle className="error-icon" />
       </div>
       
       <div className="space-y-2">
diff --git a/app/bills/page.tsx b/app/bills/page.tsx
index d1533e9..b16f557 100644
--- a/app/bills/page.tsx
+++ b/app/bills/page.tsx
@@ -353,7 +353,7 @@ export default function BillsPage() {
                                 <div>
                                     <label
                                         htmlFor="payment-amount"
-                                        className="text-sm font-medium text-foreground mb-2 block"
+                                        className="form-label"
                                     >
                                         Amount
                                     </label>
@@ -387,7 +387,7 @@ export default function BillsPage() {
                                 <div>
                                     <label
                                         htmlFor="payment-reference"
-                                        className="text-sm font-medium text-foreground mb-2 block"
+                                        className="form-label"
                                     >
                                         Reference (optional)
                                     </label>
diff --git a/app/bills/pay/page.tsx b/app/bills/pay/page.tsx
index 7450194..27c35ec 100644
--- a/app/bills/pay/page.tsx
+++ b/app/bills/pay/page.tsx
@@ -9,10 +9,10 @@ import { ArrowLeft } from 'lucide-react';
 export default function BillsPayPage() {
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
-          <Link href="/bills" className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">Pay bill</h1>
+      <div className="page-header">
+        <div className="page-header-row">
+          <Link href="/bills" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
+          <h1 className="page-title">Pay bill</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/burn/page.tsx b/app/burn/page.tsx
index 9de86c7..4f22e0d 100644
--- a/app/burn/page.tsx
+++ b/app/burn/page.tsx
@@ -194,16 +194,16 @@ function BurnPageContent() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link
             href="/mint"
             aria-label="Go back to Mint page" 
-            className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"
+            className="touch-target"
           >
             <ArrowLeft className="w-5 h-5 text-primary" />
           </Link>
-          <h1 className="text-lg font-bold text-foreground">Withdraw (Burn)</h1>
+          <h1 className="page-title">Withdraw (Burn)</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/business/sme/page.tsx b/app/business/sme/page.tsx
index 5cfb21e..c359d0b 100644
--- a/app/business/sme/page.tsx
+++ b/app/business/sme/page.tsx
@@ -18,12 +18,12 @@ export default function SmePage() {
   return (
     <>
       <div className="border-b border-border bg-card/95 backdrop-blur-sm sticky top-0 z-10">
-        <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header-row">
           <Link href="/business" className="text-primary">
             <ArrowLeft className="w-5 h-5" />
           </Link>
           <div>
-            <h1 className="text-lg font-bold text-foreground">SME Services</h1>
+            <h1 className="page-title">SME Services</h1>
             <p className="text-sm text-muted-foreground">Apply for business banking, transfers, and statements.</p>
           </div>
         </div>
diff --git a/app/currency/page.tsx b/app/currency/page.tsx
index 573b10f..a63a1b9 100644
--- a/app/currency/page.tsx
+++ b/app/currency/page.tsx
@@ -297,7 +297,7 @@ export default function CurrencyPage() {
               </Card>
 
               <div className="mb-4">
-                <Label className="text-sm font-medium text-foreground mb-2 block">
+                <Label className="form-label">
                   Amount to Mint
                 </Label>
                 <div className="flex gap-2">
@@ -323,7 +323,7 @@ export default function CurrencyPage() {
               </div>
 
               <div>
-                <Label className="text-sm font-medium text-foreground mb-2 block">
+                <Label className="form-label">
                   Destination Wallet Address
                 </Label>
                 <Input
@@ -391,7 +391,7 @@ export default function CurrencyPage() {
               </Card>
 
               <div>
-                <Label className="text-sm font-medium text-foreground mb-2 block">
+                <Label className="form-label">
                   Amount to Burn
                 </Label>
                 <div className="flex gap-2">
@@ -507,7 +507,7 @@ export default function CurrencyPage() {
 
               <div className="space-y-4">
                 <div>
-                  <label className="text-sm font-medium text-foreground mb-2 block">
+                  <label className="form-label">
                     Recipient Country
                   </label>
                   <select
@@ -524,7 +524,7 @@ export default function CurrencyPage() {
                 </div>
 
                 <div>
-                  <label className="text-sm font-medium text-foreground mb-2 block">
+                  <label className="form-label">
                     Currency
                   </label>
                   <select
@@ -541,7 +541,7 @@ export default function CurrencyPage() {
                 </div>
 
                 <div>
-                  <label className="text-sm font-medium text-foreground mb-2 block">
+                  <label className="form-label">
                     Amount (ACBU)
                   </label>
                   <div className="flex gap-2">
diff --git a/app/error.tsx b/app/error.tsx
index d92c878..ac61b98 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -22,9 +22,9 @@ export default function Error({
   };
 
   return (
-    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
-      <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-        <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+    <div className="error-state">
+      <div className="error-icon-wrapper">
+        <AlertTriangle className="error-icon" />
       </div>
       
       <div className="space-y-2">
diff --git a/app/globals.css b/app/globals.css
index 2ad91e9..0ff67a7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -123,3 +123,37 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .page-header {
+    @apply sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm;
+  }
+
+  .page-header-row {
+    @apply px-4 py-3 flex items-center gap-3;
+  }
+
+  .page-title {
+    @apply text-lg font-bold text-foreground;
+  }
+
+  .form-label {
+    @apply text-sm font-medium text-foreground mb-2 block;
+  }
+
+  .error-state {
+    @apply flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center;
+  }
+
+  .error-icon-wrapper {
+    @apply rounded-full bg-red-100 dark:bg-red-900/30 p-3;
+  }
+
+  .error-icon {
+    @apply h-8 w-8 text-red-600 dark:text-red-400;
+  }
+
+  .touch-target {
+    @apply flex items-center justify-center min-w-[44px] min-h-[44px] -m-2;
+  }
+}
diff --git a/app/help/page.tsx b/app/help/page.tsx
index df7cd1b..210c84d 100644
--- a/app/help/page.tsx
+++ b/app/help/page.tsx
@@ -236,7 +236,7 @@ export default function HelpPage() {
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div>
-                <label className="text-sm font-medium text-foreground mb-2 block">
+                <label className="form-label">
                   Name
                 </label>
                 <Input
@@ -252,7 +252,7 @@ export default function HelpPage() {
               </div>
 
               <div>
-                <label className="text-sm font-medium text-foreground mb-2 block">
+                <label className="form-label">
                   Email
                 </label>
                 <Input
@@ -269,7 +269,7 @@ export default function HelpPage() {
             </div>
 
             <div>
-              <label className="text-sm font-medium text-foreground mb-2 block">
+              <label className="form-label">
                 Subject
               </label>
               <Input
@@ -285,7 +285,7 @@ export default function HelpPage() {
             </div>
 
             <div>
-              <label className="text-sm font-medium text-foreground mb-2 block">
+              <label className="form-label">
                 Message
               </label>
               <Textarea
diff --git a/app/lending/admin/page.tsx b/app/lending/admin/page.tsx
index 526ea57..7320f57 100644
--- a/app/lending/admin/page.tsx
+++ b/app/lending/admin/page.tsx
@@ -42,13 +42,13 @@ export default function LendingAdminPage() {
 
   return (
     <>
-      <header className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
+      <header className="page-header">
         <div className="mx-auto max-w-md px-4 py-4 flex items-center gap-3">
           <Link href="/lending" className="p-2 hover:bg-muted rounded transition-colors" aria-label="Back to lending">
             <ArrowLeft className="w-5 h-5" />
           </Link>
           <div className="flex-1">
-            <h1 className="text-lg font-bold text-foreground">Lending · Backoffice</h1>
+            <h1 className="page-title">Lending · Backoffice</h1>
             <p className="text-xs text-muted-foreground">Review loan applications</p>
           </div>
           <Button
diff --git a/app/lending/page.tsx b/app/lending/page.tsx
index a757908..80be400 100644
--- a/app/lending/page.tsx
+++ b/app/lending/page.tsx
@@ -231,13 +231,13 @@ export default function LendingPage() {
 
   return (
     <>
-      <header className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
+      <header className="page-header">
         <div className="mx-auto max-w-md px-4 py-4 flex items-center gap-3">
           <Link href="/" className="p-2 hover:bg-muted rounded transition-colors" aria-label="Go back">
             <ArrowLeft className="w-5 h-5" />
           </Link>
           <div className="flex-1">
-            <h1 className="text-lg font-bold text-foreground">Lending</h1>
+            <h1 className="page-title">Lending</h1>
             <p className="text-xs text-muted-foreground">Apply for a loan</p>
           </div>
           <Link
diff --git a/app/me/activity/page.tsx b/app/me/activity/page.tsx
index ed0445a..7ba0251 100644
--- a/app/me/activity/page.tsx
+++ b/app/me/activity/page.tsx
@@ -11,10 +11,10 @@ export default function MeActivityPage() {
   const router = useRouter();
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
-          <Link href="/me" className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">My activity</h1>
+      <div className="page-header">
+        <div className="page-header-row">
+          <Link href="/me" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
+          <h1 className="page-title">My activity</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/me/error.tsx b/app/me/error.tsx
index e87ad8b..4dbc95a 100644
--- a/app/me/error.tsx
+++ b/app/me/error.tsx
@@ -29,9 +29,9 @@ export default function ProfileError({
   };
 
   return (
-    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
-      <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-        <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+    <div className="error-state">
+      <div className="error-icon-wrapper">
+        <AlertTriangle className="error-icon" />
       </div>
       
       <div className="space-y-2">
diff --git a/app/me/page.tsx b/app/me/page.tsx
index 549a162..da35edf 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -200,7 +200,7 @@ export default function MePage() {
             <div className="w-14 h-14 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0 text-white text-lg font-bold">{initials}</div>
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2 mb-0.5">
-                <h1 className="text-lg font-bold text-foreground truncate">{displayName}</h1>
+                <h1 className="page-title truncate">{displayName}</h1>
                 <KycBadge status={user?.kyc_status} />
               </div>
               <p className="text-xs text-muted-foreground truncate">{user?.email || user?.phone_e164 || '—'}</p>
@@ -262,7 +262,7 @@ export default function MePage() {
       {showLogoutConfirm && (
         <div className="fixed inset-0 z-50 flex items-end bg-black/50">
           <div className="w-full max-w-md bg-card p-6 rounded-t-xl border-t border-border">
-            <h3 className="text-lg font-bold text-foreground mb-2">Sign Out</h3>
+            <h3 className="page-title mb-2">Sign Out</h3>
             <p className="text-sm text-muted-foreground mb-6">You'll be logged out of your account. You can log back in anytime.</p>
             <div className="flex gap-3">
               <Button variant="outline" className="flex-1 border-border bg-transparent" onClick={() => setShowLogoutConfirm(false)}>Cancel</Button>
diff --git a/app/me/settings/contacts/page.tsx b/app/me/settings/contacts/page.tsx
index e589661..8101fe7 100644
--- a/app/me/settings/contacts/page.tsx
+++ b/app/me/settings/contacts/page.tsx
@@ -65,10 +65,10 @@ export default function ContactsPage() {
   if (loading) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/me/settings"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-            <h1 className="text-lg font-bold text-foreground">Contacts</h1>
+            <h1 className="page-title">Contacts</h1>
           </div>
         </div>
         <PageContainer>
@@ -80,10 +80,10 @@ export default function ContactsPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link href="/me/settings"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">Contacts</h1>
+          <h1 className="page-title">Contacts</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/me/settings/guardians/page.tsx b/app/me/settings/guardians/page.tsx
index 8e2b60f..ef862a2 100644
--- a/app/me/settings/guardians/page.tsx
+++ b/app/me/settings/guardians/page.tsx
@@ -63,10 +63,10 @@ export default function GuardiansPage() {
   if (loading) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/me/settings"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-            <h1 className="text-lg font-bold text-foreground">Guardians</h1>
+            <h1 className="page-title">Guardians</h1>
           </div>
         </div>
         <PageContainer>
@@ -78,10 +78,10 @@ export default function GuardiansPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link href="/me/settings"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">Guardians</h1>
+          <h1 className="page-title">Guardians</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/me/settings/page.tsx b/app/me/settings/page.tsx
index 56c015f..510ea89 100644
--- a/app/me/settings/page.tsx
+++ b/app/me/settings/page.tsx
@@ -20,10 +20,10 @@ export default function SettingsPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link href="/me"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">Settings</h1>
+          <h1 className="page-title">Settings</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/me/settings/receive/page.tsx b/app/me/settings/receive/page.tsx
index 42a079d..7dadd0b 100644
--- a/app/me/settings/receive/page.tsx
+++ b/app/me/settings/receive/page.tsx
@@ -51,10 +51,10 @@ export default function ReceivePage() {
   if (loading) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/me/settings"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-            <h1 className="text-lg font-bold text-foreground">Receive</h1>
+            <h1 className="page-title">Receive</h1>
           </div>
         </div>
         <PageContainer>
@@ -67,10 +67,10 @@ export default function ReceivePage() {
   if (error && !toCopy) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/me/settings"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-            <h1 className="text-lg font-bold text-foreground">Receive</h1>
+            <h1 className="page-title">Receive</h1>
           </div>
         </div>
         <PageContainer>
@@ -82,10 +82,10 @@ export default function ReceivePage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link href="/me/settings"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">Receive</h1>
+          <h1 className="page-title">Receive</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/me/settings/security/page.tsx b/app/me/settings/security/page.tsx
index c175d85..f14e559 100644
--- a/app/me/settings/security/page.tsx
+++ b/app/me/settings/security/page.tsx
@@ -63,13 +63,13 @@ export default function SecurityPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link href="/me/settings">
             <ArrowLeft className="w-5 h-5 text-primary" />
           </Link>
           <div>
-            <h1 className="text-lg font-bold text-foreground">Security</h1>
+            <h1 className="page-title">Security</h1>
             <p className="text-sm text-muted-foreground">Manage account protection, sessions, and API access.</p>
           </div>
         </div>
diff --git a/app/me/settings/wallet/page.tsx b/app/me/settings/wallet/page.tsx
index ee1d71d..487f7ee 100644
--- a/app/me/settings/wallet/page.tsx
+++ b/app/me/settings/wallet/page.tsx
@@ -82,15 +82,15 @@ export default function WalletPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link
             href="/me/settings"
-            className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"
+            className="touch-target"
           >
             <ArrowLeft className="w-5 h-5 text-primary" />
           </Link>
-          <h1 className="text-lg font-bold text-foreground">Wallet Settings</h1>
+          <h1 className="page-title">Wallet Settings</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/mint/page.tsx b/app/mint/page.tsx
index 784f9b1..a920b81 100644
--- a/app/mint/page.tsx
+++ b/app/mint/page.tsx
@@ -409,13 +409,13 @@ export default function MintPage() {
 
   return (
     <>
-      <header className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
+      <header className="page-header">
         <div className="px-4 py-4 flex items-center gap-3">
           <Link href="/" className="p-2 hover:bg-muted rounded transition-colors" aria-label="Go back">
             <ArrowLeft className="w-5 h-5" />
           </Link>
           <div className="flex-1">
-            <h1 className="text-lg font-bold text-foreground">Mint & Burn</h1>
+            <h1 className="page-title">Mint & Burn</h1>
             <p className="text-xs text-muted-foreground">Create and redeem ACBU</p>
           </div>
         </div>
@@ -478,7 +478,7 @@ export default function MintPage() {
                             <div>
                                 <label
                                     htmlFor="fiat-account"
-                                    className="text-sm font-medium text-foreground mb-2 block"
+                                    className="form-label"
                                 >
                                     Basket currency (demo fiat path)
                                 </label>
@@ -502,7 +502,7 @@ export default function MintPage() {
                             <div className="mt-4">
                                 <label
                                     htmlFor="fiat-amount"
-                                    className="text-sm font-medium text-foreground mb-2 block"
+                                    className="form-label"
                                 >
                                     Amount to Exchange
                                 </label>
@@ -571,7 +571,7 @@ export default function MintPage() {
                             <div>
                                 <label
                                     htmlFor="burn-fiat-account"
-                                    className="text-sm font-medium text-foreground mb-2 block"
+                                    className="form-label"
                                 >
                                     Basket currency (burn slice)
                                 </label>
@@ -595,7 +595,7 @@ export default function MintPage() {
                             <div className="mt-4">
                                 <label
                                     htmlFor="burn-amount"
-                                    className="text-sm font-medium text-foreground mb-2 block"
+                                    className="form-label"
                                 >
                                     Amount to Burn
                                 </label>
diff --git a/app/page.tsx b/app/page.tsx
index 950ffdb..447749a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -178,7 +178,7 @@ export default function Home() {
 
   return (
     <>
-      <header className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
+      <header className="page-header">
         <div className="px-4 py-3">
           <div className="flex items-center justify-between gap-2">
             <div className="flex-1">
diff --git a/app/rates/page.tsx b/app/rates/page.tsx
index e52a679..a21b971 100644
--- a/app/rates/page.tsx
+++ b/app/rates/page.tsx
@@ -52,16 +52,16 @@ export default function RatesPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link
             href="/me"
             aria-label="Go back" 
-            className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"
+            className="touch-target"
           >
             <ArrowLeft className="w-5 h-5 text-primary" />
           </Link>
-          <h1 className="text-lg font-bold text-foreground">Rates</h1>
+          <h1 className="page-title">Rates</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/recovery/page.tsx b/app/recovery/page.tsx
index 3c30242..92ddb69 100644
--- a/app/recovery/page.tsx
+++ b/app/recovery/page.tsx
@@ -72,7 +72,7 @@ export default function RecoveryUnlockPage() {
                         <div>
                             <label
                                 htmlFor="recovery-code"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Recovery code
                             </label>
diff --git a/app/reserves/page.tsx b/app/reserves/page.tsx
index 5bfb693..609b407 100644
--- a/app/reserves/page.tsx
+++ b/app/reserves/page.tsx
@@ -67,10 +67,10 @@ export default function ReservesPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
-          <Link href="/me" className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
-          <h1 className="text-lg font-bold text-foreground">Reserves</h1>
+      <div className="page-header">
+        <div className="page-header-row">
+          <Link href="/me" className="touch-target"><ArrowLeft className="w-5 h-5 text-primary" /></Link>
+          <h1 className="page-title">Reserves</h1>
         </div>
       </div>
       <PageContainer>
diff --git a/app/savings/deposit/page.tsx b/app/savings/deposit/page.tsx
index d897de1..3feb691 100644
--- a/app/savings/deposit/page.tsx
+++ b/app/savings/deposit/page.tsx
@@ -68,12 +68,12 @@ export default function SavingsDepositPage() {
 
     return (
         <>
-            <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-                <div className="px-4 py-3 flex items-center gap-3">
+            <div className="page-header">
+                <div className="page-header-row">
                     <Link href="/savings">
                         <ArrowLeft className="w-5 h-5 text-primary" />
                     </Link>
-                    <h1 className="text-lg font-bold text-foreground">
+                    <h1 className="page-title">
                         Deposit
                     </h1>
                 </div>
@@ -93,7 +93,7 @@ export default function SavingsDepositPage() {
                         <div>
                             <label
                                 htmlFor="deposit-account"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Your account
                             </label>
@@ -112,7 +112,7 @@ export default function SavingsDepositPage() {
                         <div>
                             <label
                                 htmlFor="deposit-amount"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Amount
                             </label>
@@ -129,7 +129,7 @@ export default function SavingsDepositPage() {
                         <div>
                             <label
                                 htmlFor="deposit-term"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Term (seconds)
                             </label>
diff --git a/app/savings/error.tsx b/app/savings/error.tsx
index f0a375e..a6ba5c6 100644
--- a/app/savings/error.tsx
+++ b/app/savings/error.tsx
@@ -29,9 +29,9 @@ export default function SavingsError({
   };
 
   return (
-    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
-      <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-        <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+    <div className="error-state">
+      <div className="error-icon-wrapper">
+        <AlertTriangle className="error-icon" />
       </div>
       
       <div className="space-y-2">
diff --git a/app/savings/page.tsx b/app/savings/page.tsx
index 67b8c8d..badb89f 100644
--- a/app/savings/page.tsx
+++ b/app/savings/page.tsx
@@ -157,13 +157,13 @@ export default function SavingsPage() {
 
   return (
     <>
-      <header className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
+      <header className="page-header">
         <div className="mx-auto max-w-md px-4 py-4 flex items-center gap-3">
           <Link href="/" className="p-2 hover:bg-muted rounded transition-colors" aria-label="Go back">
             <ArrowLeft className="w-5 h-5" />
           </Link>
           <div className="flex-1">
-            <h1 className="text-lg font-bold text-foreground">Savings</h1>
+            <h1 className="page-title">Savings</h1>
             <p className="text-xs text-muted-foreground">Grow your wealth</p>
           </div>
         </div>
@@ -180,7 +180,7 @@ export default function SavingsPage() {
 
           <Card className="border-border bg-gradient-to-br from-green-500/10 to-green-600/10 p-5">
             <div className="flex items-center justify-between mb-2">
-              <h2 className="text-lg font-bold text-foreground">Savings balance (API)</h2>
+              <h2 className="page-title">Savings balance (API)</h2>
               <PiggyBank className="w-5 h-5 text-green-600" />
             </div>
             <p className="text-3xl font-bold text-foreground mb-1">
@@ -199,7 +199,7 @@ export default function SavingsPage() {
           {/* Overview Card */}
           <Card className="border-border bg-gradient-to-br from-green-500/10 to-green-600/10 p-5">
             <div className="flex items-center justify-between mb-2">
-              <h2 className="text-lg font-bold text-foreground">
+              <h2 className="page-title">
                 Total Savings
               </h2>
               <PiggyBank className="w-5 h-5 text-green-600" />
diff --git a/app/savings/withdraw/page.tsx b/app/savings/withdraw/page.tsx
index 2095525..5377d53 100644
--- a/app/savings/withdraw/page.tsx
+++ b/app/savings/withdraw/page.tsx
@@ -127,12 +127,12 @@ export default function SavingsWithdrawPage() {
 
     return (
         <>
-            <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-                <div className="px-4 py-3 flex items-center gap-3">
+            <div className="page-header">
+                <div className="page-header-row">
                     <Link href="/savings">
                         <ArrowLeft className="w-5 h-5 text-primary" />
                     </Link>
-                    <h1 className="text-lg font-bold text-foreground">
+                    <h1 className="page-title">
                         Withdraw
                     </h1>
                 </div>
@@ -153,7 +153,7 @@ export default function SavingsWithdrawPage() {
                             <div className="flex items-center justify-between gap-3">
                                 <label
                                     htmlFor="withdraw-recipient"
-                                    className="text-sm font-medium text-foreground mb-2 block"
+                                    className="form-label"
                                 >
                                     Recipient
                                 </label>
@@ -181,7 +181,7 @@ export default function SavingsWithdrawPage() {
                         <div>
                             <label
                                 htmlFor="withdraw-term"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Term (seconds)
                             </label>
@@ -197,7 +197,7 @@ export default function SavingsWithdrawPage() {
                         <div>
                             <label
                                 htmlFor="withdraw-amount"
-                                className="text-sm font-medium text-foreground mb-2 block"
+                                className="form-label"
                             >
                                 Amount
                             </label>
diff --git a/app/send/[id]/page.tsx b/app/send/[id]/page.tsx
index 6e94c1c..a621dda 100644
--- a/app/send/[id]/page.tsx
+++ b/app/send/[id]/page.tsx
@@ -55,12 +55,12 @@ export default function TransferDetailPage() {
   if (!id) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/send" aria-label="Back to transfers">
               <ArrowLeft className="w-5 h-5 text-primary" />
             </Link>
-            <h1 className="text-lg font-bold text-foreground">Transfer</h1>
+            <h1 className="page-title">Transfer</h1>
           </div>
         </div>
         <PageContainer>
@@ -73,12 +73,12 @@ export default function TransferDetailPage() {
   if (loading) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/send" aria-label="Back to transfers">
               <ArrowLeft className="w-5 h-5 text-primary" />
             </Link>
-            <h1 className="text-lg font-bold text-foreground">Transfer</h1>
+            <h1 className="page-title">Transfer</h1>
           </div>
         </div>
         <PageContainer>
@@ -91,12 +91,12 @@ export default function TransferDetailPage() {
   if (error || !data) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/send" aria-label="Back to transfers">
               <ArrowLeft className="w-5 h-5 text-primary" />
             </Link>
-            <h1 className="text-lg font-bold text-foreground">Transfer</h1>
+            <h1 className="page-title">Transfer</h1>
           </div>
         </div>
         <PageContainer>
@@ -119,12 +119,12 @@ export default function TransferDetailPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link href="/send" aria-label="Back to transfers">
             <ArrowLeft className="w-5 h-5 text-primary" />
           </Link>
-          <h1 className="text-lg font-bold text-foreground truncate">
+          <h1 className="page-title truncate">
             {isFiatRecord ? "Faucet" : "Transfer"}
           </h1>
         </div>
diff --git a/app/send/error.tsx b/app/send/error.tsx
index 639569c..c8338de 100644
--- a/app/send/error.tsx
+++ b/app/send/error.tsx
@@ -29,9 +29,9 @@ export default function SendError({
   };
 
   return (
-    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
-      <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-        <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+    <div className="error-state">
+      <div className="error-icon-wrapper">
+        <AlertTriangle className="error-icon" />
       </div>
       
       <div className="space-y-2">
diff --git a/app/send/page.tsx b/app/send/page.tsx
index c46b9ba..927298a 100644
--- a/app/send/page.tsx
+++ b/app/send/page.tsx
@@ -314,9 +314,9 @@ export default function SendPage() {
 
   return (
     <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-      <header className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
+      <header className="page-header">
         <div className="px-4 py-3">
-          <h1 className="text-lg font-bold text-foreground mb-3">
+          <h1 className="page-title mb-3">
             Send Money
           </h1>
           <TabsList className="bg-muted inline-flex h-10 items-center justify-start rounded-lg p-1 text-muted-foreground">
diff --git a/app/transactions/[id]/page.tsx b/app/transactions/[id]/page.tsx
index afa41c3..afc36f9 100644
--- a/app/transactions/[id]/page.tsx
+++ b/app/transactions/[id]/page.tsx
@@ -58,12 +58,12 @@ export default function TransactionDetailPage() {
   if (!id) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/activity">
               <ArrowLeft className="w-5 h-5 text-primary" />
             </Link>
-            <h1 className="text-lg font-bold text-foreground">Transaction</h1>
+            <h1 className="page-title">Transaction</h1>
           </div>
         </div>
         <PageContainer>
@@ -76,12 +76,12 @@ export default function TransactionDetailPage() {
   if (loading) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/activity">
               <ArrowLeft className="w-5 h-5 text-primary" />
             </Link>
-            <h1 className="text-lg font-bold text-foreground">Transaction</h1>
+            <h1 className="page-title">Transaction</h1>
           </div>
         </div>
         <PageContainer>
@@ -94,12 +94,12 @@ export default function TransactionDetailPage() {
   if (error || !data) {
     return (
       <>
-        <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-          <div className="px-4 py-3 flex items-center gap-3">
+        <div className="page-header">
+          <div className="page-header-row">
             <Link href="/activity">
               <ArrowLeft className="w-5 h-5 text-primary" />
             </Link>
-            <h1 className="text-lg font-bold text-foreground">Transaction</h1>
+            <h1 className="page-title">Transaction</h1>
           </div>
         </div>
         <PageContainer>
@@ -115,12 +115,12 @@ export default function TransactionDetailPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
-        <div className="px-4 py-3 flex items-center gap-3">
+      <div className="page-header">
+        <div className="page-header-row">
           <Link href="/activity">
             <ArrowLeft className="w-5 h-5 text-primary" />
           </Link>
-          <h1 className="text-lg font-bold text-foreground truncate">
+          <h1 className="page-title truncate">
             Transaction
           </h1>
         </div>
diff --git a/app/transactions/error.tsx b/app/transactions/error.tsx
index 1099bad..a645333 100644
--- a/app/transactions/error.tsx
+++ b/app/transactions/error.tsx
@@ -29,9 +29,9 @@ export default function TransactionsError({
   };
 
   return (
-    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
-      <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-        <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+    <div className="error-state">
+      <div className="error-icon-wrapper">
+        <AlertTriangle className="error-icon" />
       </div>
       
       <div className="space-y-2">
diff --git a/app/wallet/error.tsx b/app/wallet/error.tsx
index 3d040d5..250c109 100644
--- a/app/wallet/error.tsx
+++ b/app/wallet/error.tsx
@@ -29,9 +29,9 @@ export default function WalletError({
   };
 
   return (
-    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
-      <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-        <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+    <div className="error-state">
+      <div className="error-icon-wrapper">
+        <AlertTriangle className="error-icon" />
       </div>
       
       <div className="space-y-2">
diff --git a/app/wallet/page.tsx b/app/wallet/page.tsx
index bfbad9e..c059894 100644
--- a/app/wallet/page.tsx
+++ b/app/wallet/page.tsx
@@ -185,9 +185,9 @@ export default function WalletPage() {
 
   return (
     <>
-      <div className="sticky top-0 z-10 border-b border-border bg-card/95 backdrop-blur-sm">
+      <div className="page-header">
         <div className="px-4 py-3">
-          <h1 className="text-lg font-bold text-foreground">Wallet Management</h1>
+          <h1 className="page-title">Wallet Management</h1>
           <p className="text-xs text-muted-foreground">Manage your Stellar wallet</p>
         </div>
       </div>
diff --git a/components/error-boundary.tsx b/components/error-boundary.tsx
index b226017..c8d7c2b 100644
--- a/components/error-boundary.tsx
+++ b/components/error-boundary.tsx
@@ -55,8 +55,8 @@ export class ErrorBoundary extends Component<Props, State> {
         <div className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${
           isAppLevel ? 'min-h-screen' : isPageLevel ? 'min-h-[400px]' : 'min-h-[200px]'
         }`}>
-          <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3">
-            <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+          <div className="error-icon-wrapper">
+            <AlertTriangle className="error-icon" />
           </div>
           
           <div className="space-y-2">