diff --git a/resources/css/app.css b/resources/css/app.css
index 3f3c8d4..46a1e4b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -14,3 +14,57 @@
 [x-cloak] {
     display: none !important;
 }
+
+@layer components {
+    .btn-primary {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        background-image: linear-gradient(to right, rgb(79 70 229), rgb(124 58 237));
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: #fff;
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: filter 0.15s ease;
+    }
+
+    .btn-primary:hover {
+        filter: brightness(0.92);
+    }
+
+    .btn-primary:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-primary-sm {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
+    .btn-primary-lg {
+        padding: 0.625rem 1.25rem;
+    }
+
+    .btn-fab {
+        display: inline-flex;
+        height: 2.75rem;
+        width: 2.75rem;
+        align-items: center;
+        justify-content: center;
+        border-radius: 9999px;
+        background-image: linear-gradient(to right, rgb(79 70 229), rgb(124 58 237));
+        color: #fff;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        transition: filter 0.15s ease;
+    }
+
+    .btn-fab:hover {
+        filter: brightness(0.92);
+    }
+}
diff --git a/resources/views/components/btn/create.blade.php b/resources/views/components/btn/create.blade.php
new file mode 100644
index 0000000..caa7d06
--- /dev/null
+++ b/resources/views/components/btn/create.blade.php
@@ -0,0 +1,17 @@
+@props([
+    'href' => null,
+    'type' => 'button',
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+@endphp
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class(['btn-primary']) }}
+>
+    <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+    {{ $slot }}
+</{{ $tag }}>
diff --git a/resources/views/components/btn/primary.blade.php b/resources/views/components/btn/primary.blade.php
new file mode 100644
index 0000000..b9cb905
--- /dev/null
+++ b/resources/views/components/btn/primary.blade.php
@@ -0,0 +1,16 @@
+@props([
+    'href' => null,
+    'type' => 'button',
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+@endphp
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class(['btn-primary']) }}
+>
+    {{ $slot }}
+</{{ $tag }}>
diff --git a/resources/views/email/account/developers.blade.php b/resources/views/email/account/developers.blade.php
index ea2649a..d7fa0cd 100644
--- a/resources/views/email/account/developers.blade.php
+++ b/resources/views/email/account/developers.blade.php
@@ -30,7 +30,7 @@
                        class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                 @error('name')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
             </div>
-            <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Generate token</button>
+            <button class="btn-primary">Generate token</button>
         </form>
     </div>
 
diff --git a/resources/views/email/account/settings.blade.php b/resources/views/email/account/settings.blade.php
index 54b854a..8d4e4b1 100644
--- a/resources/views/email/account/settings.blade.php
+++ b/resources/views/email/account/settings.blade.php
@@ -63,7 +63,7 @@
                                 </select>
                                 @error('mailbox_address')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                             </div>
-                            <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">Link mailbox</button>
+                            <button class="btn-primary">Link mailbox</button>
                         </form>
                     @endif
                 </div>
@@ -104,7 +104,7 @@
             </label>
         </div>
 
-        <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">Save settings</button>
+        <button class="btn-primary">Save settings</button>
     </form>
 </div>
 @endsection
diff --git a/resources/views/email/account/team.blade.php b/resources/views/email/account/team.blade.php
index 70c9fef..c1baeaa 100644
--- a/resources/views/email/account/team.blade.php
+++ b/resources/views/email/account/team.blade.php
@@ -23,7 +23,7 @@
                         <option value="admin">Admin</option>
                     </select>
                 </div>
-                <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Send invite</button>
+                <button class="btn-primary">Send invite</button>
             </form>
             <p class="mt-2 text-[11px] text-slate-400">Admins can manage mailboxes and the team. Members can manage mailboxes. Invitees join by signing in with that email.</p>
         </div>
diff --git a/resources/views/email/dashboard.blade.php b/resources/views/email/dashboard.blade.php
index d48d16b..34d9b43 100644
--- a/resources/views/email/dashboard.blade.php
+++ b/resources/views/email/dashboard.blade.php
@@ -7,7 +7,7 @@
             <h1 class="text-xl font-semibold tracking-tight text-slate-900">Overview</h1>
             <p class="mt-0.5 text-sm text-slate-500">Your mailboxes at a glance.</p>
         </div>
-        <a href="{{ route('email.mailboxes.create') }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-700">New mailbox</a>
+        <x-btn.create :href="route('email.mailboxes.create')">New mailbox</x-btn.create>
     </div>
 
     @if($error)<div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ $error }}</div>@endif
diff --git a/resources/views/email/domains/index.blade.php b/resources/views/email/domains/index.blade.php
index 6ae7e6c..f77bd26 100644
--- a/resources/views/email/domains/index.blade.php
+++ b/resources/views/email/domains/index.blade.php
@@ -9,7 +9,7 @@
     <form method="POST" action="{{ route('email.domains.store') }}" class="mt-5 flex gap-2 rounded-2xl border border-slate-200 bg-white p-2">
         @csrf
         <input name="domain" required placeholder="yourdomain.com" class="flex-1 rounded-xl border-0 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-0">
-        <button class="rounded-xl bg-indigo-600 px-5 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Add domain</button>
+        <button class="btn-primary">Add domain</button>
     </form>
 
     @if(!empty($domains))
diff --git a/resources/views/email/domains/show.blade.php b/resources/views/email/domains/show.blade.php
index 0d4c453..f1c75b5 100644
--- a/resources/views/email/domains/show.blade.php
+++ b/resources/views/email/domains/show.blade.php
@@ -40,7 +40,7 @@
         </div>
         <form method="POST" action="{{ route('email.domains.verify', $domain['id']) }}" class="mt-4">
             @csrf
-            <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">Verify domain</button>
+            <button class="btn-primary">Verify domain</button>
             <span class="ml-2 text-xs text-slate-400">DNS changes can take time to propagate.</span>
         </form>
     @else
diff --git a/resources/views/email/mailboxes/create.blade.php b/resources/views/email/mailboxes/create.blade.php
index ec3f8ba..539c947 100644
--- a/resources/views/email/mailboxes/create.blade.php
+++ b/resources/views/email/mailboxes/create.blade.php
@@ -86,7 +86,7 @@
                 </div>
                 @error('password')<p class="text-xs text-rose-600">{{ $message }}</p>@enderror
 
-                <button class="w-full rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700"
+                <button class="btn-primary w-full btn-primary-lg"
                         x-text="free ? 'Create free mailbox' : ('Create mailbox — ' + fmt(price) + '/mo')">Create mailbox</button>
             </form>
         </div>
diff --git a/resources/views/email/mailboxes/index.blade.php b/resources/views/email/mailboxes/index.blade.php
index 284eeac..f3a9f24 100644
--- a/resources/views/email/mailboxes/index.blade.php
+++ b/resources/views/email/mailboxes/index.blade.php
@@ -4,7 +4,7 @@
 <div class="mx-auto max-w-4xl">
     <div class="flex items-center justify-between">
         <h1 class="text-xl font-semibold tracking-tight text-slate-900">Mailboxes</h1>
-        <a href="{{ route('email.mailboxes.create') }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">New mailbox</a>
+        <x-btn.create :href="route('email.mailboxes.create')">New mailbox</x-btn.create>
     </div>
     @if($error)<div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ $error }}</div>@endif
 
@@ -12,7 +12,7 @@
         <div class="mt-6 rounded-2xl border border-dashed border-slate-300 bg-white p-12 text-center">
             <p class="text-sm font-semibold text-slate-700">No mailboxes yet</p>
             <p class="mx-auto mt-1 max-w-sm text-xs text-slate-400">Verify a domain, then create a mailbox like you@yourdomain.com.</p>
-            <a href="{{ route('email.mailboxes.create') }}" class="mt-4 inline-block rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Create mailbox</a>
+            <x-btn.create :href="route('email.mailboxes.create')" class="mt-4">Create mailbox</x-btn.create>
         </div>
     @else
         <div class="mt-6 divide-y divide-slate-100 overflow-hidden rounded-2xl border border-slate-200 bg-white">
diff --git a/resources/views/email/mailboxes/show.blade.php b/resources/views/email/mailboxes/show.blade.php
index e5ee875..6d6fc6a 100644
--- a/resources/views/email/mailboxes/show.blade.php
+++ b/resources/views/email/mailboxes/show.blade.php
@@ -20,7 +20,7 @@
             <div class="flex justify-between"><dt class="text-slate-500">IMAP</dt><dd class="font-mono text-slate-800">{{ $host }}:993 (SSL)</dd></div>
             <div class="flex justify-between"><dt class="text-slate-500">SMTP</dt><dd class="font-mono text-slate-800">{{ $host }}:587 (STARTTLS)</dd></div>
         </dl>
-        <a href="https://{{ $host }}" class="mt-4 inline-block rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Open Webmail ↗</a>
+        <a href="https://{{ $host }}" class="mt-4 inline-block btn-primary">Open Webmail ↗</a>
     </div>
 
     @php
@@ -46,7 +46,7 @@
                 </p>
             </div>
             @if($quotaMb < $maxMb)
-                <a href="{{ route('email.mailboxes.upgrade', $mailbox['id']) }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Upgrade</a>
+                <a href="{{ route('email.mailboxes.upgrade', $mailbox['id']) }}" class="btn-primary">Upgrade</a>
             @else
                 <span class="rounded-lg bg-slate-100 px-3 py-2 text-xs font-medium text-slate-500">Top plan</span>
             @endif
diff --git a/resources/views/email/mailboxes/upgrade.blade.php b/resources/views/email/mailboxes/upgrade.blade.php
index e6c6a4d..ef6211d 100644
--- a/resources/views/email/mailboxes/upgrade.blade.php
+++ b/resources/views/email/mailboxes/upgrade.blade.php
@@ -44,7 +44,7 @@
                 </div>
                 @error('quota_mb')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
             </div>
-            <button class="w-full rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700"
+            <button class="btn-primary w-full btn-primary-lg"
                     x-text="'Upgrade — ' + fmt(price) + '/mo'">Upgrade</button>
         </form>
     </div>
diff --git a/resources/views/hosting/account.blade.php b/resources/views/hosting/account.blade.php
index f2a9431..9cd2d28 100644
--- a/resources/views/hosting/account.blade.php
+++ b/resources/views/hosting/account.blade.php
@@ -176,7 +176,7 @@
                         </button>
                     @endif
                         <button @click="panelModal = true" type="button"
-                            class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 transition">
+                            class="btn-primary">
                         <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
                         Control Panel
                     </button>
@@ -557,7 +557,7 @@
                             <div class="flex items-center justify-end gap-3 pt-1">
                                 <button @click="domainModal = false" type="button" class="rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition">Cancel</button>
                                 <button type="submit"
-                                        class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 transition">
+                                        class="btn-primary">
                                     Add Domain
                                 </button>
                             </div>
@@ -624,7 +624,7 @@
                             <div class="flex items-center justify-end gap-3 border-t border-slate-100 px-6 py-4">
                                 <button @click="renewModal = false" type="button" class="rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition">Cancel</button>
                                 <button type="button" @click="submitRenewal()" :disabled="!selectedDuration || renewLoading"
-                                        class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
+                                        class="btn-primary disabled:opacity-50 disabled:cursor-not-allowed">
                                     <svg x-show="renewLoading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                                     <svg x-show="!renewLoading" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/></svg>
                                     <span x-text="renewLoading ? 'Processing…' : 'Proceed to Payment'">Proceed to Payment</span>
@@ -677,7 +677,7 @@
                             </div>
                         </div>
                         <div class="grid gap-3">
-                            <a href="{{ $panelIndexUrl }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 transition">
+                            <a href="{{ $panelIndexUrl }}" class="btn-primary">
                                 <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                 Open Control Panel
                             </a>
diff --git a/resources/views/hosting/account/developers.blade.php b/resources/views/hosting/account/developers.blade.php
index 214f429..6b1dce9 100644
--- a/resources/views/hosting/account/developers.blade.php
+++ b/resources/views/hosting/account/developers.blade.php
@@ -27,7 +27,7 @@
                        class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                 @error('name')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
             </div>
-            <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Generate token</button>
+            <button class="btn-primary">Generate token</button>
         </form>
     </div>
 
diff --git a/resources/views/hosting/account/settings.blade.php b/resources/views/hosting/account/settings.blade.php
index ac142d8..ce20254 100644
--- a/resources/views/hosting/account/settings.blade.php
+++ b/resources/views/hosting/account/settings.blade.php
@@ -28,7 +28,7 @@
             </label>
         </div>
 
-        <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">Save settings</button>
+        <button class="btn-primary">Save settings</button>
     </form>
 </div>
 @endsection
diff --git a/resources/views/hosting/account/team.blade.php b/resources/views/hosting/account/team.blade.php
index 1045ce8..fbd5732 100644
--- a/resources/views/hosting/account/team.blade.php
+++ b/resources/views/hosting/account/team.blade.php
@@ -21,7 +21,7 @@
                         <option value="admin">Admin</option>
                     </select>
                 </div>
-                <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Send invite</button>
+                <button class="btn-primary">Send invite</button>
             </form>
             <p class="mt-2 text-[11px] text-slate-400">Admins can manage hosting and the team. Members can manage hosting. Invitees join by signing in with that email.</p>
         </div>
diff --git a/resources/views/hosting/dashboard.blade.php b/resources/views/hosting/dashboard.blade.php
index a363eb7..7404d1d 100644
--- a/resources/views/hosting/dashboard.blade.php
+++ b/resources/views/hosting/dashboard.blade.php
@@ -7,7 +7,7 @@
             <h1 class="text-xl font-semibold tracking-tight text-slate-900">Overview</h1>
             <p class="mt-0.5 text-sm text-slate-500">Your shared hosting at a glance.</p>
         </div>
-        <a href="{{ route('hosting.single-domain') }}" class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-700">
+        <a href="{{ route('hosting.single-domain') }}" class="inline-flex items-center justify-center btn-primary">
             New hosting
         </a>
     </div>
diff --git a/resources/views/hosting/panel/apps.blade.php b/resources/views/hosting/panel/apps.blade.php
index c252e98..b306be9 100644
--- a/resources/views/hosting/panel/apps.blade.php
+++ b/resources/views/hosting/panel/apps.blade.php
@@ -310,7 +310,7 @@
                         <p class="mt-1.5 text-xs text-slate-500">Install in a subfolder instead of the domain root.</p>
                     </div>
                     <div class="flex items-center gap-3 pt-2">
-                        <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition shadow-sm">
+                        <button type="submit" class="btn-primary shadow-sm">
                             <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                             Install Application
                         </button>
diff --git a/resources/views/hosting/panel/cron.blade.php b/resources/views/hosting/panel/cron.blade.php
index 9ab3d6c..386337e 100644
--- a/resources/views/hosting/panel/cron.blade.php
+++ b/resources/views/hosting/panel/cron.blade.php
@@ -51,7 +51,7 @@
                     <input type="text" name="command" required placeholder="/usr/bin/php /home/{{ $account->username }}/public_html/artisan schedule:run" class="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-mono focus:border-indigo-500 focus:ring-indigo-500">
                     <p class="mt-1 text-xs text-slate-500">Use full paths for commands and scripts</p>
                 </div>
-                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition">
+                <button type="submit" class="btn-primary">
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                     Add Cron Job
                 </button>
diff --git a/resources/views/hosting/panel/databases.blade.php b/resources/views/hosting/panel/databases.blade.php
index 11686e7..7979f61 100644
--- a/resources/views/hosting/panel/databases.blade.php
+++ b/resources/views/hosting/panel/databases.blade.php
@@ -26,7 +26,7 @@
                         <input type="text" name="name" required pattern="[a-zA-Z0-9_]+" maxlength="24" placeholder="mydb" class="flex-1 rounded-r-lg border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                     </div>
                 </div>
-                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition">
+                <button type="submit" class="btn-primary">
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                     Create Database
                 </button>
diff --git a/resources/views/hosting/panel/domains.blade.php b/resources/views/hosting/panel/domains.blade.php
index d342dda..ee0be0a 100644
--- a/resources/views/hosting/panel/domains.blade.php
+++ b/resources/views/hosting/panel/domains.blade.php
@@ -136,7 +136,7 @@
                     <p class="mt-1 text-xs text-slate-500">Leave empty to use default: public_html/domain.com</p>
                 </div>
 
-                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition">
+                <button type="submit" class="btn-primary">
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                     Add Domain
                 </button>
diff --git a/resources/views/hosting/panel/files.blade.php b/resources/views/hosting/panel/files.blade.php
index 7512933..9d873b6 100644
--- a/resources/views/hosting/panel/files.blade.php
+++ b/resources/views/hosting/panel/files.blade.php
@@ -57,7 +57,7 @@
 
         {{-- Toolbar --}}
         <div class="flex flex-wrap items-center gap-3 rounded-xl border border-slate-200 bg-white p-4">
-            <button @click="createModal = true; createType = 'folder'" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition">
+            <button @click="createModal = true; createType = 'folder'" class="btn-primary">
                 <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/></svg>
                 New Folder
             </button>
@@ -203,7 +203,7 @@
                         <input type="text" x-model="createName" placeholder="Enter name..." class="mt-4 w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                         <div class="mt-4 flex justify-end gap-3">
                             <button type="button" @click="createModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
-                            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Create</button>
+                            <button type="submit" class="btn-primary" :disabled="loading">Create</button>
                         </div>
                     </form>
                 </div>
@@ -221,7 +221,7 @@
                     <div class="flex-1 p-4"><textarea x-model="editContent" class="w-full h-full font-mono text-sm border border-slate-200 rounded-lg p-4 focus:border-indigo-500 focus:ring-indigo-500 resize-none"></textarea></div>
                     <div class="flex justify-end gap-3 border-t border-slate-200 px-6 py-4">
                         <button @click="editModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
-                        <button @click="saveEditedFile" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Save</button>
+                        <button @click="saveEditedFile" class="btn-primary" :disabled="loading">Save</button>
                     </div>
                 </div>
             </div>
@@ -236,7 +236,7 @@
                         <input type="text" x-model="renameName" class="mt-4 w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                         <div class="mt-4 flex justify-end gap-3">
                             <button type="button" @click="renameModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
-                            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Rename</button>
+                            <button type="submit" class="btn-primary" :disabled="loading">Rename</button>
                         </div>
                     </form>
                 </div>
@@ -255,7 +255,7 @@
                         <p class="mt-1 text-xs text-slate-400">Relative to home directory, e.g. /public_html/backup</p>
                         <div class="mt-4 flex justify-end gap-3">
                             <button type="button" @click="moveModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
-                            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading" x-text="moveAction === 'move' ? 'Move' : 'Copy'"></button>
+                            <button type="submit" class="btn-primary" :disabled="loading" x-text="moveAction === 'move' ? 'Move' : 'Copy'"></button>
                         </div>
                     </form>
                 </div>
@@ -273,7 +273,7 @@
                         <input type="text" x-model="archiveName" placeholder="archive.zip" class="mt-1 w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                         <div class="mt-4 flex justify-end gap-3">
                             <button type="button" @click="compressModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
-                            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Compress</button>
+                            <button type="submit" class="btn-primary" :disabled="loading">Compress</button>
                         </div>
                     </form>
                 </div>
@@ -298,7 +298,7 @@
                         </div>
                         <div class="mt-4 flex justify-end gap-3">
                             <button type="button" @click="chmodModal = false" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
-                            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700" :disabled="loading">Apply</button>
+                            <button type="submit" class="btn-primary" :disabled="loading">Apply</button>
                         </div>
                     </form>
                 </div>
diff --git a/resources/views/hosting/panel/php.blade.php b/resources/views/hosting/panel/php.blade.php
index 7e2c0a6..e68f646 100644
--- a/resources/views/hosting/panel/php.blade.php
+++ b/resources/views/hosting/panel/php.blade.php
@@ -36,7 +36,7 @@
                         </label>
                     @endforeach
                 </div>
-                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition">
+                <button type="submit" class="btn-primary">
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                     Change PHP Version
                 </button>
@@ -75,7 +75,7 @@
                         <p class="mt-1 text-xs text-slate-500">Maximum number of input variables (1000-10000)</p>
                     </div>
                 </div>
-                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 transition">
+                <button type="submit" class="btn-primary">
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                     Save PHP Settings
                 </button>
diff --git a/resources/views/hosting/panel/settings.blade.php b/resources/views/hosting/panel/settings.blade.php
index 035dbbd..0b89a0d 100644
--- a/resources/views/hosting/panel/settings.blade.php
+++ b/resources/views/hosting/panel/settings.blade.php
@@ -34,7 +34,7 @@
                         <label class="mb-1 block text-sm font-medium text-slate-700">Confirm Password</label>
                         <input type="password" name="password_confirmation" required minlength="8" class="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                     </div>
-                    <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-700">
+                    <button type="submit" class="btn-primary">
                         <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
                         Change Password
                     </button>
@@ -70,7 +70,7 @@
                         <x-input-error :messages="$errors->get('ssh_public_key')" class="mt-2" />
                     </div>
 
-                    <button type="submit" class="inline-flex items-center rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-700">
+                    <button type="submit" class="btn-primary">
                         Save SFTP Key
                     </button>
 
@@ -117,7 +117,7 @@
             <div class="mb-5 rounded-lg border border-slate-200 bg-slate-50 p-4">
                 <div class="flex items-center justify-between gap-4">
                     <code class="flex-1 overflow-x-auto font-mono text-sm text-slate-800">{{ $sftpCommand }}</code>
-                    <button type="button" onclick="navigator.clipboard.writeText('{{ $sftpCommand }}'); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 1500);" class="flex-shrink-0 rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white transition hover:bg-indigo-700">Copy</button>
+                    <button type="button" onclick="navigator.clipboard.writeText('{{ $sftpCommand }}'); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 1500);" class="btn-primary btn-primary-sm flex-shrink-0">Copy</button>
                 </div>
             </div>
 
diff --git a/resources/views/hosting/panel/ssl.blade.php b/resources/views/hosting/panel/ssl.blade.php
index 3750528..7371d45 100644
--- a/resources/views/hosting/panel/ssl.blade.php
+++ b/resources/views/hosting/panel/ssl.blade.php
@@ -55,7 +55,7 @@
                                     @if(!$site->ssl_enabled)
                                         <form action="{{ route('hosting.panel.ssl.request', [$account, $site]) }}" method="POST" class="inline">
                                             @csrf
-                                            <button type="submit" class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 transition">
+                                            <button type="submit" class="btn-primary btn-primary-sm">
                                                 <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
                                                 Issue SSL
                                             </button>
@@ -72,7 +72,7 @@
                 <div class="px-6 py-12 text-center">
                     @include('components.icons.domain-globe', ['class' => 'mx-auto h-12 w-12 text-slate-300'])
                     <p class="mt-4 text-sm text-slate-500">No domains configured. Add a domain first to enable SSL.</p>
-                    <a href="{{ route('hosting.panel.domains', $account) }}" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition">
+                    <a href="{{ route('hosting.panel.domains', $account) }}" class="mt-4 btn-primary">
                         Add Domain
                     </a>
                 </div>
diff --git a/resources/views/partials/afia.blade.php b/resources/views/partials/afia.blade.php
index adc2c23..67eebd1 100644
--- a/resources/views/partials/afia.blade.php
+++ b/resources/views/partials/afia.blade.php
@@ -92,7 +92,7 @@
                 <input type="text" x-ref="input" x-model="input" :disabled="loading" placeholder="Message Afia…"
                        class="flex-1 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm text-slate-700 placeholder-slate-400 focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                 <button type="submit" :disabled="loading || !input.trim()"
-                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-white transition hover:bg-indigo-700 disabled:opacity-40">
+                        class="btn-fab shrink-0 disabled:opacity-40">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"/></svg>
                 </button>
             </form>
diff --git a/resources/views/partials/mobile-bottom-nav.blade.php b/resources/views/partials/mobile-bottom-nav.blade.php
index 98d9b82..8a2e2b2 100644
--- a/resources/views/partials/mobile-bottom-nav.blade.php
+++ b/resources/views/partials/mobile-bottom-nav.blade.php
@@ -33,7 +33,7 @@
                 <div class="flex items-center justify-center">
                     <button type="button"
                             @click="$dispatch('compose-open')"
-                            class="flex h-11 w-11 -translate-y-1 items-center justify-center rounded-full bg-indigo-600 text-white shadow-md ring-4 ring-white transition hover:bg-indigo-700"
+                            class="btn-fab -translate-y-1 ring-4 ring-white shadow-md"
                             aria-label="Compose">
                         <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"/></svg>
                     </button>
diff --git a/resources/views/partials/topbar.blade.php b/resources/views/partials/topbar.blade.php
index 4225528..9fb06e8 100644
--- a/resources/views/partials/topbar.blade.php
+++ b/resources/views/partials/topbar.blade.php
@@ -84,7 +84,7 @@
             </div>
             @include('partials.afia-button', ['compact' => true])
         @else
-            <a href="{{ route('login') }}" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Sign in</a>
+            <a href="{{ route('login') }}" class="btn-primary">Sign in</a>
         @endauth
 
         @include('partials.launcher')