diff --git a/resources/css/app.css b/resources/css/app.css
index ed9643f..ec30ddf 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -76,3 +76,57 @@ html.qr-mobile-page body {
         width: auto;
     }
 }
+
+@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/components/user/service-topup-modal.blade.php b/resources/views/components/user/service-topup-modal.blade.php
index 8a80cd0..f9a5675 100644
--- a/resources/views/components/user/service-topup-modal.blade.php
+++ b/resources/views/components/user/service-topup-modal.blade.php
@@ -113,7 +113,7 @@
                     Cancel
                 </button>
                 <button type="submit" :disabled="loading"
-                        class="w-full rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-60 sm:w-auto">
+                        class="btn-primary w-full sm:w-auto">
                     <span x-text="loading ? 'Processing…' : 'Add credits'">Add credits</span>
                 </button>
             </div>
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/events/attendees-hub.blade.php b/resources/views/events/attendees-hub.blade.php
index ef73b95..3d7129f 100644
--- a/resources/views/events/attendees-hub.blade.php
+++ b/resources/views/events/attendees-hub.blade.php
@@ -18,7 +18,7 @@
                 <div class="px-6 py-14 text-center">
                     <p class="text-sm text-slate-500">{{ $search ? 'No events match your search.' : 'No events yet.' }}</p>
                     @unless($search)
-                        <a href="{{ route('events.create') }}" class="mt-4 inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700 transition">
+                        <a href="{{ route('events.create') }}" class="mt-4 btn-primary">
                             Create your first event
                         </a>
                     @endunless
diff --git a/resources/views/events/attendees.blade.php b/resources/views/events/attendees.blade.php
index 34f85d2..99ed4ca 100644
--- a/resources/views/events/attendees.blade.php
+++ b/resources/views/events/attendees.blade.php
@@ -59,7 +59,7 @@
                   class="shrink-0">
                 @csrf
                 <button type="submit" :disabled="busy"
-                        class="w-full rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700 disabled:opacity-60 sm:w-auto">
+                        class="btn-primary w-full sm:w-auto">
                     <span x-text="busy ? 'Sending…' : 'Share with attendees'">Share with attendees</span>
                 </button>
             </form>
diff --git a/resources/views/events/badge-printing.blade.php b/resources/views/events/badge-printing.blade.php
index 9babc8f..b5cd0f3 100644
--- a/resources/views/events/badge-printing.blade.php
+++ b/resources/views/events/badge-printing.blade.php
@@ -24,7 +24,7 @@
             <div class="flex flex-wrap items-center gap-2">
                 <span x-show="selected.length" x-cloak class="text-xs font-medium text-slate-500"><span x-text="selected.length"></span> selected</span>
                 <button type="button" x-show="selected.length" x-cloak @click="printSelected()"
-                        class="rounded-xl bg-indigo-600 px-3.5 py-2 text-xs font-semibold text-white hover:bg-indigo-700 transition">Print selected</button>
+                        class="btn-primary btn-primary-sm">Print selected</button>
                 <button type="button" x-show="selected.length" x-cloak @click="zplSelected()"
                         class="rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 transition">ZPL selected</button>
                 <a href="{{ route('events.badges', $qrCode) }}?auto=1" target="_blank"
diff --git a/resources/views/events/badges-hub.blade.php b/resources/views/events/badges-hub.blade.php
index 14dfb78..9ab9632 100644
--- a/resources/views/events/badges-hub.blade.php
+++ b/resources/views/events/badges-hub.blade.php
@@ -18,7 +18,7 @@
                 <div class="px-6 py-14 text-center">
                     <p class="text-sm text-slate-500">{{ $search ? 'No events match your search.' : 'No events yet.' }}</p>
                     @unless($search)
-                        <a href="{{ route('events.create') }}" class="mt-4 inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700 transition">
+                        <a href="{{ route('events.create') }}" class="mt-4 btn-primary">
                             Create your first event
                         </a>
                     @endunless
diff --git a/resources/views/events/programmes.blade.php b/resources/views/events/programmes.blade.php
index dd81d9d..96ee4b4 100644
--- a/resources/views/events/programmes.blade.php
+++ b/resources/views/events/programmes.blade.php
@@ -6,7 +6,7 @@
                 <h1 class="text-xl font-semibold text-slate-900">Programmes</h1>
                 <p class="mt-1 text-sm text-slate-500">Itinerary and schedule outlines you can attach to events and share with attendees.</p>
             </div>
-            <a href="{{ route('programmes.create') }}" class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">
+            <a href="{{ route('programmes.create') }}" 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>
                 New programme
             </a>
diff --git a/resources/views/partials/afia.blade.php b/resources/views/partials/afia.blade.php
index dbbd5ed..f016a61 100644
--- a/resources/views/partials/afia.blade.php
+++ b/resources/views/partials/afia.blade.php
@@ -96,7 +96,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/public/qr/landing.blade.php b/resources/views/public/qr/landing.blade.php
index f4a6755..a7a9d74 100644
--- a/resources/views/public/qr/landing.blade.php
+++ b/resources/views/public/qr/landing.blade.php
@@ -160,7 +160,7 @@
             {{-- Save contact button --}}
             <div class="px-6 pb-6 pt-2">
                 <a href="{{ route('qr.public.vcard', $qrCode->short_code) }}"
-                   class="flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-3.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                   class="btn-primary w-full">
                     <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="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
                     Save Contact
                 </a>
diff --git a/resources/views/qr-codes/attendees.blade.php b/resources/views/qr-codes/attendees.blade.php
index 0a21b68..0cb596f 100644
--- a/resources/views/qr-codes/attendees.blade.php
+++ b/resources/views/qr-codes/attendees.blade.php
@@ -56,7 +56,7 @@
                   class="shrink-0">
                 @csrf
                 <button type="submit" :disabled="busy"
-                        class="w-full rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700 disabled:opacity-60 sm:w-auto">
+                        class="btn-primary w-full sm:w-auto">
                     <span x-text="busy ? 'Sending…' : 'Share with attendees'">Share with attendees</span>
                 </button>
             </form>
@@ -96,7 +96,7 @@
             <div class="flex flex-wrap items-center gap-2">
                 <span x-show="selected.length" x-cloak class="text-xs font-medium text-slate-500"><span x-text="selected.length"></span> selected</span>
                 <button type="button" x-show="selected.length" x-cloak @click="printSelected()"
-                        class="rounded-xl bg-indigo-600 px-3.5 py-2 text-xs font-semibold text-white hover:bg-indigo-700 transition">Print selected</button>
+                        class="btn-primary btn-primary-sm">Print selected</button>
                 <button type="button" x-show="selected.length" x-cloak @click="zplSelected()"
                         class="rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 transition">ZPL selected</button>
                 <a href="{{ route('events.badges', $qrCode) }}?auto=1" target="_blank"
diff --git a/resources/views/qr-codes/create.blade.php b/resources/views/qr-codes/create.blade.php
index 431a3d6..7214105 100644
--- a/resources/views/qr-codes/create.blade.php
+++ b/resources/views/qr-codes/create.blade.php
@@ -212,11 +212,11 @@
                         Back
                     </button>
                     <button type="button" x-show="wizard && step < 3" x-cloak @click="nextStep()"
-                            class="flex-1 rounded-xl bg-indigo-600 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                            class="btn-primary flex-1">
                         Continue
                     </button>
                     <button type="button" x-show="!wizard || step === 3" @click="wizardSubmit($event)"
-                            class="flex-1 rounded-xl bg-indigo-600 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                            class="btn-primary flex-1">
                         {{ $isProgramme ? 'Create programme' : 'Create event' }}
                     </button>
                 </div>
@@ -240,11 +240,11 @@
                     Preview
                 </button>
                 <button type="button" x-show="wizard && step < 3" x-cloak @click="nextStep()"
-                        class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-indigo-600 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                        class="btn-primary flex-1">
                     Continue
                 </button>
                 <button type="button" x-show="!wizard || step === 3" @click="wizardSubmit($event)"
-                        class="flex flex-1 items-center justify-center gap-2 rounded-xl bg-indigo-600 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
+                        class="btn-primary flex-1">
                     Create
                 </button>
             </div>
diff --git a/resources/views/qr-codes/index.blade.php b/resources/views/qr-codes/index.blade.php
index 3ffff64..bf27ed9 100644
--- a/resources/views/qr-codes/index.blade.php
+++ b/resources/views/qr-codes/index.blade.php
@@ -31,7 +31,7 @@
                         <div class="mt-6">
                             <button type="button"
                                     @click="goOrTopup($event)"
-                                    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">
                                 <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 event
                             </button>
diff --git a/resources/views/qr/account/billing.blade.php b/resources/views/qr/account/billing.blade.php
index c7210c5..56c1dd3 100644
--- a/resources/views/qr/account/billing.blade.php
+++ b/resources/views/qr/account/billing.blade.php
@@ -7,7 +7,7 @@
         <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-6">
             <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Current balance</p>
             <p class="mt-1 text-3xl font-semibold text-slate-900">{{ $fmt($balanceMinor) }}</p>
-            <a href="{{ $topupUrl }}" class="mt-4 inline-flex rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Top up wallet</a>
+            <a href="{{ $topupUrl }}" class="mt-4 btn-primary">Top up wallet</a>
         </div>
     </div>
 </x-user-layout>
diff --git a/resources/views/qr/account/developers.blade.php b/resources/views/qr/account/developers.blade.php
index 5185811..d506b9a 100644
--- a/resources/views/qr/account/developers.blade.php
+++ b/resources/views/qr/account/developers.blade.php
@@ -28,7 +28,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/qr/account/settings.blade.php b/resources/views/qr/account/settings.blade.php
index 2a24f93..ace0e9f 100644
--- a/resources/views/qr/account/settings.blade.php
+++ b/resources/views/qr/account/settings.blade.php
@@ -247,7 +247,7 @@
                 </div>
             </details>
 
-            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">
+            <button type="submit" class="btn-primary">
                 Save settings
             </button>
         </form>
diff --git a/resources/views/qr/account/team.blade.php b/resources/views/qr/account/team.blade.php
index b19b907..cd3ec45 100644
--- a/resources/views/qr/account/team.blade.php
+++ b/resources/views/qr/account/team.blade.php
@@ -22,7 +22,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 QR codes and the team. Members can manage QR codes. Invitees join by signing in with that email.</p>
             </div>