diff --git a/resources/css/app.css b/resources/css/app.css
index 1e5e0af..64167e9 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -167,6 +167,119 @@ html.qr-mobile-page body {
         pointer-events: none;
     }
 
+    .btn-warning {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(252 211 77);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(180 83 9);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-warning:hover {
+        background-color: rgb(255 251 235);
+        border-color: rgb(245 158 11);
+    }
+
+    .btn-warning:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-danger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(254 202 202);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(185 28 28);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-danger:hover {
+        background-color: rgb(254 242 242);
+        border-color: rgb(252 165 165);
+    }
+
+    .btn-danger:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-danger-plain {
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+        font-weight: 500;
+    }
+
+    .btn-danger-plain:hover {
+        background: transparent;
+        text-decoration: underline;
+    }
+
+    .btn-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+        border-radius: 9999px;
+        border: 1px solid transparent;
+        background-color: transparent;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(67 56 202);
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+
+    .btn-link:hover {
+        background-color: rgb(238 242 255);
+        color: rgb(55 48 163);
+    }
+
+    .btn-link:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-link-plain {
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+        font-weight: 500;
+    }
+
+    .btn-link-plain:hover {
+        background: transparent;
+        text-decoration: underline;
+    }
+
+    .btn-sm {
+        padding: 0.25rem 0.625rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
     .btn-group {
         display: flex;
         flex-wrap: wrap;
diff --git a/resources/views/components/btn.blade.php b/resources/views/components/btn.blade.php
new file mode 100644
index 0000000..ca40175
--- /dev/null
+++ b/resources/views/components/btn.blade.php
@@ -0,0 +1,34 @@
+@props([
+    'variant' => 'primary',
+    'href' => null,
+    'type' => 'button',
+    'size' => null,
+    'plain' => false,
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+
+    $variantClass = match ($variant) {
+        'secondary' => 'btn-secondary',
+        'warning' => 'btn-warning',
+        'danger' => 'btn-danger',
+        'link' => 'btn-link',
+        default => 'btn-primary',
+    };
+
+    $classes = collect([
+        $variantClass,
+        $size === 'sm' ? 'btn-sm' : null,
+        ($plain && $variant === 'link') ? 'btn-link-plain' : null,
+        ($plain && $variant === 'danger') ? 'btn-danger-plain' : null,
+    ])->filter()->implode(' ');
+@endphp
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class([$classes]) }}
+>
+    {{ $slot }}
+</{{ $tag }}>
diff --git a/resources/views/components/danger-zone.blade.php b/resources/views/components/danger-zone.blade.php
new file mode 100644
index 0000000..c24603b
--- /dev/null
+++ b/resources/views/components/danger-zone.blade.php
@@ -0,0 +1,12 @@
+@props([
+    'title' => null,
+])
+
+<div {{ $attributes->class(['mt-6 space-y-3 rounded-2xl border border-slate-200 bg-slate-50/80 p-4']) }}>
+    @if ($title)
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $title }}</p>
+    @endif
+    <div class="flex flex-col items-start gap-2 sm:flex-row sm:flex-wrap sm:gap-3">
+        {{ $slot }}
+    </div>
+</div>
diff --git a/resources/views/frontdesk/admin/branches/index.blade.php b/resources/views/frontdesk/admin/branches/index.blade.php
index 92ee23d..9165f4c 100644
--- a/resources/views/frontdesk/admin/branches/index.blade.php
+++ b/resources/views/frontdesk/admin/branches/index.blade.php
@@ -37,7 +37,7 @@
                         <p class="text-sm text-slate-500">{{ $branch->address ?? 'No address' }} · {{ $branch->buildings_count }} building(s)</p>
                     </div>
                     <div class="flex gap-2">
-                        <a href="{{ route('frontdesk.buildings.index', $branch) }}" class="text-sm text-indigo-600 hover:text-indigo-700">Buildings</a>
+                        <x-btn href="{{ route('frontdesk.buildings.index', $branch) }}" variant="link" size="sm" plain>Buildings</x-btn>
                         <a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm text-slate-600 hover:text-slate-800">Edit</a>
                     </div>
                 </div>
diff --git a/resources/views/frontdesk/admin/buildings/index.blade.php b/resources/views/frontdesk/admin/buildings/index.blade.php
index e51fd31..e8145f8 100644
--- a/resources/views/frontdesk/admin/buildings/index.blade.php
+++ b/resources/views/frontdesk/admin/buildings/index.blade.php
@@ -1,7 +1,7 @@
 <x-app-layout :title="$branch->name.' buildings'">
     <div class="flex items-center justify-between">
         <div>
-            <a href="{{ route('frontdesk.branches.index') }}" class="text-sm text-indigo-600">← Branches</a>
+            <x-btn href="{{ route('frontdesk.branches.index') }}" variant="link" size="sm" plain>← Branches</x-btn>
             <h1 class="mt-1 text-xl font-semibold text-slate-900">{{ $branch->name }}</h1>
         </div>
     </div>
@@ -20,11 +20,11 @@
                     <p class="font-medium">{{ $building->name }}</p>
                     <p class="text-xs text-slate-500">{{ $building->reception_desks_count }} desk(s)</p>
                 </div>
-                <div class="flex gap-3">
-                    <a href="{{ route('frontdesk.desks.index', $building) }}" class="text-sm text-indigo-600">Desks</a>
+                <div class="btn-group">
+                    <x-btn href="{{ route('frontdesk.desks.index', $building) }}" variant="link" size="sm" plain>Desks</x-btn>
                     <form method="POST" action="{{ route('frontdesk.buildings.destroy', [$branch, $building]) }}" onsubmit="return confirm('Remove this building?')">
                         @csrf @method('DELETE')
-                        <button type="submit" class="text-sm text-red-600">Remove</button>
+                        <x-btn type="submit" variant="danger" size="sm">Remove</x-btn>
                     </form>
                 </div>
             </div>
diff --git a/resources/views/frontdesk/admin/desks/index.blade.php b/resources/views/frontdesk/admin/desks/index.blade.php
index a014f5b..dc68976 100644
--- a/resources/views/frontdesk/admin/desks/index.blade.php
+++ b/resources/views/frontdesk/admin/desks/index.blade.php
@@ -1,5 +1,5 @@
 <x-app-layout :title="$building->name.' desks'">
-    <a href="{{ route('frontdesk.buildings.index', $building->branch) }}" class="text-sm text-indigo-600">← Buildings</a>
+    <x-btn href="{{ route('frontdesk.buildings.index', $building->branch) }}" variant="link" size="sm" plain class="mb-1">← Buildings</x-btn>
     <h1 class="mt-1 text-xl font-semibold text-slate-900">{{ $building->name }}</h1>
 
     <form method="POST" action="{{ route('frontdesk.desks.store', $building) }}" class="mt-6 flex gap-2 rounded-2xl border border-slate-200 bg-white p-4">
@@ -18,7 +18,7 @@
                 </div>
                 <form method="POST" action="{{ route('frontdesk.desks.destroy', [$building, $desk]) }}" onsubmit="return confirm('Remove this desk?')">
                     @csrf @method('DELETE')
-                    <button type="submit" class="text-sm text-red-600">Remove</button>
+                    <x-btn type="submit" variant="danger" size="sm">Remove</x-btn>
                 </form>
             </div>
         @empty
diff --git a/resources/views/frontdesk/admin/members/index.blade.php b/resources/views/frontdesk/admin/members/index.blade.php
index 2995bc1..3d94dcf 100644
--- a/resources/views/frontdesk/admin/members/index.blade.php
+++ b/resources/views/frontdesk/admin/members/index.blade.php
@@ -40,7 +40,7 @@
                                 @if ($member->user_ref !== auth()->user()->public_id)
                                     <form method="POST" action="{{ route('frontdesk.members.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this member?')">
                                         @csrf @method('DELETE')
-                                        <button type="submit" class="text-red-600">Remove</button>
+                                        <x-btn type="submit" variant="danger" size="sm">Remove</x-btn>
                                     </form>
                                 @endif
                             </td>
diff --git a/resources/views/frontdesk/audit/index.blade.php b/resources/views/frontdesk/audit/index.blade.php
index 3501dea..512103f 100644
--- a/resources/views/frontdesk/audit/index.blade.php
+++ b/resources/views/frontdesk/audit/index.blade.php
@@ -5,7 +5,7 @@
             <p class="text-sm text-slate-500">Security and compliance activity</p>
         </div>
         @if ($canExport)
-            <a href="{{ route('frontdesk.audit.export', request()->query()) }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Export CSV</a>
+            <x-btn href="{{ route('frontdesk.audit.export', request()->query()) }}" variant="secondary" size="sm">Export CSV</x-btn>
         @endif
     </div>
 
@@ -19,7 +19,7 @@
         </select>
         <input type="date" name="from" value="{{ request('from') }}" class="rounded-lg border-slate-300 text-sm">
         <input type="date" name="to" value="{{ request('to') }}" class="rounded-lg border-slate-300 text-sm">
-        <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm sm:col-span-4 sm:w-fit">Filter</button>
+        <x-btn type="submit" variant="secondary" size="sm" class="sm:col-span-4 sm:w-fit">Filter</x-btn>
     </form>
 
     <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
diff --git a/resources/views/frontdesk/compliance/recovery.blade.php b/resources/views/frontdesk/compliance/recovery.blade.php
index a3ed5ba..4f50c6d 100644
--- a/resources/views/frontdesk/compliance/recovery.blade.php
+++ b/resources/views/frontdesk/compliance/recovery.blade.php
@@ -15,7 +15,7 @@
                     </div>
                     <form method="POST" action="{{ route('frontdesk.compliance.visitors.restore', $visitor->id) }}">
                         @csrf
-                        <button type="submit" class="text-sm text-indigo-600 hover:text-indigo-800">Restore</button>
+                        <x-btn type="submit" variant="link" size="sm">Restore</x-btn>
                     </form>
                 </div>
             @empty
@@ -35,7 +35,7 @@
                     </div>
                     <form method="POST" action="{{ route('frontdesk.compliance.visits.restore', $visit->id) }}">
                         @csrf
-                        <button type="submit" class="text-sm text-indigo-600 hover:text-indigo-800">Restore</button>
+                        <x-btn type="submit" variant="link" size="sm">Restore</x-btn>
                     </form>
                 </div>
             @empty
diff --git a/resources/views/frontdesk/devices/edit.blade.php b/resources/views/frontdesk/devices/edit.blade.php
index 539f671..265c16b 100644
--- a/resources/views/frontdesk/devices/edit.blade.php
+++ b/resources/views/frontdesk/devices/edit.blade.php
@@ -40,7 +40,14 @@
                     <p class="text-xs font-medium uppercase text-slate-500">Device token</p>
                     <code class="mt-1 block break-all text-xs text-slate-700">{{ $device->device_token }}</code>
                     @if ($device->type === 'kiosk')
-                        <a href="{{ route('frontdesk.kiosk.device', $device->device_token) }}" target="_blank" class="mt-2 inline-block text-sm text-indigo-700 hover:underline">Open kiosk URL</a>
+                        <x-btn
+                            :href="route('frontdesk.kiosk.device', $device->device_token)"
+                            target="_blank"
+                            variant="link"
+                            size="sm"
+                            plain
+                            class="mt-2"
+                        >Open kiosk URL</x-btn>
                         @if (! empty($kioskQrSvg))
                             <div class="mt-4 rounded-xl border border-slate-200 bg-white p-4 text-center">
                                 <p class="text-sm font-medium text-slate-900">Provision Ladill Kiosk app</p>
@@ -53,21 +60,33 @@
             @endif
 
             <div class="flex gap-3 pt-2">
-                <a href="{{ route('frontdesk.devices.index') }}" class="flex-1 rounded-lg border border-slate-200 py-2 text-center text-sm">Back</a>
-                <button type="submit" class="btn-primary flex-1">Save</button>
+                <x-btn href="{{ route('frontdesk.devices.index') }}" variant="secondary" class="flex-1 justify-center">Back</x-btn>
+                <x-btn type="submit" class="flex-1">Save</x-btn>
             </div>
         </form>
 
         @if ($device->device_token)
-            <form method="POST" action="{{ route('frontdesk.devices.regenerate-token', $device) }}" class="mt-3">
-                @csrf
-                <button type="submit" class="text-sm text-amber-700 hover:underline" onclick="return confirm('Regenerate token? Existing kiosk sessions will stop working.')">Regenerate token</button>
+            <x-danger-zone title="Device actions" class="mt-4">
+                <form method="POST" action="{{ route('frontdesk.devices.regenerate-token', $device) }}" class="inline">
+                    @csrf
+                    <x-btn
+                        type="submit"
+                        variant="warning"
+                        onclick="return confirm('Regenerate token? Existing kiosk sessions will stop working.')"
+                    >Regenerate token</x-btn>
+                </form>
+                <form method="POST" action="{{ route('frontdesk.devices.destroy', $device) }}" class="inline" onsubmit="return confirm('Remove this device?')">
+                    @csrf @method('DELETE')
+                    <x-btn type="submit" variant="danger">Remove device</x-btn>
+                </form>
+            </x-danger-zone>
+        @else
+            <form method="POST" action="{{ route('frontdesk.devices.destroy', $device) }}" class="mt-4" onsubmit="return confirm('Remove this device?')">
+                @csrf @method('DELETE')
+                <x-danger-zone title="Device actions">
+                    <x-btn type="submit" variant="danger">Remove device</x-btn>
+                </x-danger-zone>
             </form>
         @endif
-
-        <form method="POST" action="{{ route('frontdesk.devices.destroy', $device) }}" class="mt-4" onsubmit="return confirm('Remove this device?')">
-            @csrf @method('DELETE')
-            <button type="submit" class="text-sm text-red-600 hover:underline">Remove device</button>
-        </form>
     </div>
 </x-app-layout>
diff --git a/resources/views/frontdesk/devices/index.blade.php b/resources/views/frontdesk/devices/index.blade.php
index 6b19099..283cd5f 100644
--- a/resources/views/frontdesk/devices/index.blade.php
+++ b/resources/views/frontdesk/devices/index.blade.php
@@ -53,10 +53,18 @@
                             <td class="px-4 py-3 text-slate-500">{{ $device->last_online_at?->diffForHumans() ?? 'Never' }}</td>
                             <td class="px-4 py-3 text-right">
                                 @if ($canManage)
-                                    <a href="{{ route('frontdesk.devices.edit', $device) }}" class="text-indigo-700 hover:underline">Edit</a>
-                                @endif
-                                @if ($device->type === 'kiosk' && $device->device_token)
-                                    <a href="{{ route('frontdesk.kiosk.device', $device->device_token) }}" target="_blank" class="ml-3 text-indigo-700 hover:underline">Open kiosk</a>
+                                <div class="btn-group justify-end">
+                                    <x-btn href="{{ route('frontdesk.devices.edit', $device) }}" variant="link" size="sm" plain>Edit</x-btn>
+                                    @if ($device->type === 'kiosk' && $device->device_token)
+                                        <x-btn
+                                            :href="route('frontdesk.kiosk.device', $device->device_token)"
+                                            target="_blank"
+                                            variant="link"
+                                            size="sm"
+                                            plain
+                                        >Open kiosk</x-btn>
+                                    @endif
+                                </div>
                                 @endif
                             </td>
                         </tr>
diff --git a/resources/views/frontdesk/employee-portal/index.blade.php b/resources/views/frontdesk/employee-portal/index.blade.php
index 2890396..4952043 100644
--- a/resources/views/frontdesk/employee-portal/index.blade.php
+++ b/resources/views/frontdesk/employee-portal/index.blade.php
@@ -51,7 +51,7 @@
                 <form method="POST" action="{{ route('frontdesk.employee.portal.action') }}" class="mt-3">
                     @csrf
                     <input type="hidden" name="action" value="sign_out">
-                    <button type="submit" class="w-full rounded-lg border border-slate-200 py-2.5 text-sm font-medium text-slate-700">Sign out for the day</button>
+                    <x-btn type="submit" variant="secondary" class="w-full">Sign out for the day</x-btn>
                 </form>
             @endif
 
@@ -64,7 +64,7 @@
                 <form method="POST" action="{{ route('frontdesk.employee.portal.action') }}" class="mt-3">
                     @csrf
                     <input type="hidden" name="action" value="sign_out">
-                    <button type="submit" class="w-full rounded-lg border border-slate-200 py-2.5 text-sm font-medium text-slate-700">Sign out for the day</button>
+                    <x-btn type="submit" variant="secondary" class="w-full">Sign out for the day</x-btn>
                 </form>
             @endif
         </div>
diff --git a/resources/views/frontdesk/employees/edit.blade.php b/resources/views/frontdesk/employees/edit.blade.php
index 65154e5..a2698b8 100644
--- a/resources/views/frontdesk/employees/edit.blade.php
+++ b/resources/views/frontdesk/employees/edit.blade.php
@@ -64,13 +64,15 @@
                 </div>
             @endif
             <div class="flex gap-3 pt-2">
-                <a href="{{ route('frontdesk.employees.index') }}" class="flex-1 rounded-lg border border-slate-200 py-2 text-center text-sm">Back</a>
-                <button type="submit" class="btn-primary flex-1">Save</button>
+                <x-btn href="{{ route('frontdesk.employees.index') }}" variant="secondary" class="flex-1 justify-center">Back</x-btn>
+                <x-btn type="submit" class="flex-1">Save</x-btn>
             </div>
         </form>
-        <form method="POST" action="{{ route('frontdesk.employees.destroy', $employee) }}" class="mt-4" onsubmit="return confirm('Remove this employee?')">
+        <form method="POST" action="{{ route('frontdesk.employees.destroy', $employee) }}" onsubmit="return confirm('Remove this employee?')">
             @csrf @method('DELETE')
-            <button type="submit" class="text-sm text-red-600 hover:underline">Remove employee</button>
+            <x-danger-zone title="Employee actions">
+                <x-btn type="submit" variant="danger">Remove employee</x-btn>
+            </x-danger-zone>
         </form>
     </div>
 </x-app-layout>
diff --git a/resources/views/frontdesk/employees/index.blade.php b/resources/views/frontdesk/employees/index.blade.php
index 6294c93..51fd138 100644
--- a/resources/views/frontdesk/employees/index.blade.php
+++ b/resources/views/frontdesk/employees/index.blade.php
@@ -55,7 +55,7 @@
                             </td>
                             <td class="px-4 py-3 text-right">
                                 <a href="{{ route('frontdesk.employees.badge', $employee) }}" target="_blank" class="text-sm text-slate-600">Badge</a>
-                                <a href="{{ route('frontdesk.employees.edit', $employee) }}" class="ml-3 text-sm text-indigo-600">Edit</a>
+                                <x-btn href="{{ route('frontdesk.employees.edit', $employee) }}" variant="link" size="sm" plain class="ml-3">Edit</x-btn>
                             </td>
                         </tr>
                     @empty
diff --git a/resources/views/frontdesk/host-portal/index.blade.php b/resources/views/frontdesk/host-portal/index.blade.php
index e84a07f..5cbe653 100644
--- a/resources/views/frontdesk/host-portal/index.blade.php
+++ b/resources/views/frontdesk/host-portal/index.blade.php
@@ -7,9 +7,7 @@
         <div class="flex flex-wrap gap-2">
             <form method="POST" action="{{ route('frontdesk.host.availability') }}">
                 @csrf
-                <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium hover:bg-slate-50">
-                    {{ $host->is_available ? 'Mark unavailable' : 'Mark available' }}
-                </button>
+                <x-btn type="submit" variant="secondary">{{ $host->is_available ? 'Mark unavailable' : 'Mark available' }}</x-btn>
             </form>
             <a href="{{ route('frontdesk.host.schedule') }}" class="btn-primary">Pre-register visitor</a>
         </div>
diff --git a/resources/views/frontdesk/host-portal/schedule.blade.php b/resources/views/frontdesk/host-portal/schedule.blade.php
index d0a0718..862b94a 100644
--- a/resources/views/frontdesk/host-portal/schedule.blade.php
+++ b/resources/views/frontdesk/host-portal/schedule.blade.php
@@ -47,8 +47,8 @@
                 <textarea name="notes" rows="3" class="mt-1 w-full rounded-lg border-slate-300 text-sm">{{ old('notes') }}</textarea>
             </div>
             <div class="flex gap-3">
-                <a href="{{ route('frontdesk.host.index') }}" class="flex-1 rounded-lg border border-slate-200 py-2 text-center text-sm font-medium">Cancel</a>
-                <button type="submit" class="btn-primary flex-1">Schedule visit</button>
+                <x-btn href="{{ route('frontdesk.host.index') }}" variant="secondary" class="flex-1 justify-center">Cancel</x-btn>
+                <x-btn type="submit" class="flex-1">Schedule visit</x-btn>
             </div>
         </form>
     </div>
diff --git a/resources/views/frontdesk/hosts/index.blade.php b/resources/views/frontdesk/hosts/index.blade.php
index c21d5c3..8c4c98c 100644
--- a/resources/views/frontdesk/hosts/index.blade.php
+++ b/resources/views/frontdesk/hosts/index.blade.php
@@ -39,7 +39,7 @@
                             <td class="px-4 py-3 text-slate-600">{{ $host->office ?? '—' }}</td>
                             <td class="px-4 py-3 text-slate-600">{{ $host->email ?? $host->phone ?? '—' }}</td>
                             <td class="px-4 py-3 text-right">
-                                <a href="{{ route('frontdesk.hosts.edit', $host) }}" class="text-sm text-indigo-600">Edit</a>
+                                <x-btn href="{{ route('frontdesk.hosts.edit', $host) }}" variant="link" size="sm" plain>Edit</x-btn>
                             </td>
                         </tr>
                     @empty
diff --git a/resources/views/frontdesk/reports/index.blade.php b/resources/views/frontdesk/reports/index.blade.php
index f9a99a6..ccdf331 100644
--- a/resources/views/frontdesk/reports/index.blade.php
+++ b/resources/views/frontdesk/reports/index.blade.php
@@ -12,7 +12,7 @@
     <form method="GET" class="mt-4 flex flex-wrap gap-2">
         <input type="date" name="from" value="{{ $from }}" class="rounded-lg border-slate-300 text-sm">
         <input type="date" name="to" value="{{ $to }}" class="rounded-lg border-slate-300 text-sm">
-        <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Apply</button>
+        <x-btn type="submit" variant="secondary" size="sm">Apply</x-btn>
     </form>
 
     <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
@@ -76,7 +76,7 @@
         <div class="flex flex-wrap items-center justify-between gap-3">
             <h2 class="text-lg font-semibold text-slate-900">Staff attendance</h2>
             @if ($canExport)
-                <a href="{{ route('frontdesk.employees.export.attendance', request()->query()) }}" class="text-sm font-medium text-indigo-600">Export HR CSV</a>
+                <x-btn href="{{ route('frontdesk.employees.export.attendance', request()->query()) }}" variant="link" size="sm" plain>Export HR CSV</x-btn>
             @endif
         </div>
         <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
diff --git a/resources/views/frontdesk/security/index.blade.php b/resources/views/frontdesk/security/index.blade.php
index 225ad07..b1cb3e2 100644
--- a/resources/views/frontdesk/security/index.blade.php
+++ b/resources/views/frontdesk/security/index.blade.php
@@ -5,12 +5,8 @@
             <p class="text-sm text-slate-500">{{ $occupancy->count() }} visitors · {{ $staffOnSite->where('status', 'on_site')->count() }} staff on site · {{ $staffOnSite->where('status', 'stepped_out')->count() }} stepped out</p>
         </div>
         <div class="flex flex-wrap gap-2">
-            <a href="{{ route('frontdesk.security.evacuation') }}" class="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100">
-                Evacuation report
-            </a>
-            <a href="{{ route('frontdesk.security.verify') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
-                Verify badge
-            </a>
+            <x-btn href="{{ route('frontdesk.security.evacuation') }}" variant="danger">Evacuation report</x-btn>
+            <x-btn href="{{ route('frontdesk.security.verify') }}" variant="secondary">Verify badge</x-btn>
         </div>
     </div>
 
@@ -45,7 +41,7 @@
                             @if ($canCheckout)
                                 <form method="POST" action="{{ route('frontdesk.security.checkout', $visit) }}">
                                     @csrf
-                                    <button type="submit" class="text-sm text-indigo-600 hover:text-indigo-800">Check out</button>
+                                    <x-btn type="submit" variant="link" size="sm">Check out</x-btn>
                                 </form>
                             @endif
                         </td>
diff --git a/resources/views/frontdesk/security/verify.blade.php b/resources/views/frontdesk/security/verify.blade.php
index 55363f7..5daa499 100644
--- a/resources/views/frontdesk/security/verify.blade.php
+++ b/resources/views/frontdesk/security/verify.blade.php
@@ -36,7 +36,7 @@
                         <div class="flex justify-between"><dt class="text-slate-500">Watchlist</dt><dd class="capitalize">{{ str_replace('_', ' ', $visit->visitor->watchlist_status) }}</dd></div>
                     </dl>
 
-                    <a href="{{ route('frontdesk.visits.show', $visit) }}" class="mt-4 inline-block text-sm font-medium text-indigo-600 hover:text-indigo-700">View full visit record</a>
+                    <x-btn href="{{ route('frontdesk.visits.show', $visit) }}" variant="link" size="sm" plain class="mt-4">View full visit record</x-btn>
                 </div>
             @else
                 <p class="mt-6 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-800">No matching visit found for “{{ $lookup }}”.</p>
diff --git a/resources/views/frontdesk/service-queues/console.blade.php b/resources/views/frontdesk/service-queues/console.blade.php
index ff01946..a41f932 100644
--- a/resources/views/frontdesk/service-queues/console.blade.php
+++ b/resources/views/frontdesk/service-queues/console.blade.php
@@ -9,7 +9,7 @@
 <x-app-layout title="Console · {{ $counter['name'] ?? 'Counter' }}">
   <div class="flex flex-wrap items-start justify-between gap-4">
     <div>
-      <a href="{{ route('frontdesk.service-queues.index') }}" class="text-sm font-medium text-indigo-600">← Service queues</a>
+      <x-btn href="{{ route('frontdesk.service-queues.index') }}" variant="link" size="sm" plain>← Service queues</x-btn>
       <h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $counter['name'] ?? 'Counter' }}</h1>
       <p class="mt-1 text-sm text-slate-500">{{ $counter['branch'] ?? '' }} · Ladill Queue console</p>
     </div>
diff --git a/resources/views/frontdesk/visitors/show.blade.php b/resources/views/frontdesk/visitors/show.blade.php
index 6c03387..6e2759e 100644
--- a/resources/views/frontdesk/visitors/show.blade.php
+++ b/resources/views/frontdesk/visitors/show.blade.php
@@ -5,11 +5,13 @@
             <p class="text-sm text-slate-500">{{ $visitor->company }} · {{ $visitor->visit_count }} visits · {{ ucfirst(str_replace('_', ' ', $visitor->watchlist_status)) }}</p>
         </div>
         @if ($canManage)
-            <a href="{{ route('frontdesk.visitors.check-in', $visitor) }}" class="btn-primary">Quick check-in</a>
-            <form method="POST" action="{{ route('frontdesk.visitors.destroy', $visitor) }}" onsubmit="return confirm('Archive this visitor?')">
-                @csrf @method('DELETE')
-                <button type="submit" class="rounded-lg border border-red-200 px-4 py-2 text-sm text-red-700 hover:bg-red-50">Archive</button>
-            </form>
+            <div class="btn-group">
+                <x-btn href="{{ route('frontdesk.visitors.check-in', $visitor) }}">Quick check-in</x-btn>
+                <form method="POST" action="{{ route('frontdesk.visitors.destroy', $visitor) }}" onsubmit="return confirm('Archive this visitor?')">
+                    @csrf @method('DELETE')
+                    <x-btn type="submit" variant="danger">Archive</x-btn>
+                </form>
+            </div>
         @endif
     </div>
 
@@ -69,7 +71,7 @@
                     @endforeach
                 </select>
             </div>
-            <button type="submit" class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm text-slate-700">Update watchlist</button>
+            <x-btn type="submit" variant="secondary" size="sm">Update watchlist</x-btn>
         </form>
     @endif
 
diff --git a/resources/views/frontdesk/visits/create.blade.php b/resources/views/frontdesk/visits/create.blade.php
index ae26970..bf44461 100644
--- a/resources/views/frontdesk/visits/create.blade.php
+++ b/resources/views/frontdesk/visits/create.blade.php
@@ -20,7 +20,7 @@
                                 <span class="rounded bg-indigo-50 px-2 py-0.5 text-xs text-indigo-700">Frequent</span>
                             @endif
                         </button>
-                        <a href="{{ route('frontdesk.visitors.check-in', $visitor) }}" class="shrink-0 text-xs font-medium text-indigo-600 hover:text-indigo-700">Quick check-in</a>
+                        <x-btn href="{{ route('frontdesk.visitors.check-in', $visitor) }}" variant="link" size="sm" plain class="shrink-0">Quick check-in</x-btn>
                     </div>
                 @endforeach
             </div>
diff --git a/resources/views/frontdesk/visits/index.blade.php b/resources/views/frontdesk/visits/index.blade.php
index d1cbe9e..af8248b 100644
--- a/resources/views/frontdesk/visits/index.blade.php
+++ b/resources/views/frontdesk/visits/index.blade.php
@@ -26,7 +26,7 @@
                     <option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
                 @endforeach
             </select>
-            <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Filter</button>
+        <x-btn type="submit" variant="secondary" size="sm">Filter</x-btn>
         </form>
 
         <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
diff --git a/resources/views/frontdesk/visits/show.blade.php b/resources/views/frontdesk/visits/show.blade.php
index 6afafbb..52460fa 100644
--- a/resources/views/frontdesk/visits/show.blade.php
+++ b/resources/views/frontdesk/visits/show.blade.php
@@ -5,32 +5,32 @@
                 <h1 class="text-xl font-semibold text-slate-900">{{ $visit->visitor->full_name }}</h1>
                 <p class="text-sm text-slate-500">{{ ucfirst(str_replace('_', ' ', $visit->visitor_type)) }} · Badge {{ $visit->badge_code }}</p>
             </div>
-            <div class="flex flex-wrap gap-2">
+            <div class="btn-group">
                 @if ($visit->isInside())
-                    <a href="{{ route('frontdesk.visits.badge', $visit) }}" target="_blank" class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Print badge</a>
-                    <a href="{{ route('frontdesk.visits.badge.preview', $visit) }}" target="_blank" class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Preview</a>
+                    <x-btn href="{{ route('frontdesk.visits.badge', $visit) }}" target="_blank" variant="secondary" size="sm">Print badge</x-btn>
+                    <x-btn href="{{ route('frontdesk.visits.badge.preview', $visit) }}" target="_blank" variant="secondary" size="sm">Preview</x-btn>
                     <form method="POST" action="{{ route('frontdesk.visits.checkout', $visit) }}">
                         @csrf
-                        <button type="submit" class="rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white hover:bg-slate-800">Check out</button>
+                        <x-btn type="submit" size="sm">Check out</x-btn>
                     </form>
                 @elseif ($canManage && $visit->awaitingApproval())
                     <form method="POST" action="{{ route('frontdesk.visits.approve', $visit) }}">
                         @csrf
-                        <button type="submit" class="btn-primary">Approve & check in</button>
+                        <x-btn type="submit">Approve & check in</x-btn>
                     </form>
                 @elseif ($canManage && $visit->canActivateCheckIn())
-                    <form method="POST" action="{{ route('frontdesk.visits.activate', $visit) }}" class="flex items-center gap-2">
+                    <form method="POST" action="{{ route('frontdesk.visits.activate', $visit) }}" class="flex flex-wrap items-center gap-2">
                         @csrf
                         <label class="flex items-center gap-1 text-xs text-slate-600">
                             <input type="checkbox" name="policies_accepted" value="1" required class="rounded border-slate-300 text-indigo-600">
                             Policies accepted
                         </label>
-                        <button type="submit" class="btn-primary">Check in</button>
+                        <x-btn type="submit">Check in</x-btn>
                     </form>
                 @elseif ($canManage && ! $visit->isInside())
                     <form method="POST" action="{{ route('frontdesk.visits.destroy', $visit) }}" onsubmit="return confirm('Archive this visit?')">
                         @csrf @method('DELETE')
-                        <button type="submit" class="rounded-lg border border-red-200 px-3 py-2 text-sm text-red-700 hover:bg-red-50">Archive</button>
+                        <x-btn type="submit" variant="danger" size="sm">Archive</x-btn>
                     </form>
                 @endif
             </div>
@@ -41,17 +41,17 @@
         @endif
 
         @if ($canManage && $visit->isPending() && ! $visit->awaitingApproval())
-            <div class="mt-4 flex flex-wrap gap-2">
+            <div class="btn-group mt-4">
                 @if (in_array($visit->status, ['expected', 'scheduled', 'overdue'], true))
                     <form method="POST" action="{{ route('frontdesk.visits.waiting', $visit) }}">
                         @csrf
-                        <button type="submit" class="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">Mark waiting</button>
+                        <x-btn type="submit" variant="secondary" size="sm">Mark waiting</x-btn>
                     </form>
                 @endif
                 <form method="POST" action="{{ route('frontdesk.visits.cancel', $visit) }}" onsubmit="return confirm('Cancel this visit?')">
                     @csrf
                     <input type="hidden" name="reason" value="Cancelled by reception">
-                    <button type="submit" class="rounded-lg border border-red-200 px-3 py-2 text-sm text-red-700 hover:bg-red-50">Cancel visit</button>
+                    <x-btn type="submit" variant="danger" size="sm">Cancel visit</x-btn>
                 </form>
             </div>
         @endif
diff --git a/resources/views/frontdesk/watchlist/index.blade.php b/resources/views/frontdesk/watchlist/index.blade.php
index ab0dfc4..624640a 100644
--- a/resources/views/frontdesk/watchlist/index.blade.php
+++ b/resources/views/frontdesk/watchlist/index.blade.php
@@ -30,7 +30,7 @@
                     @endif
                 @endforeach
             </select>
-            <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Filter</button>
+            <x-btn type="submit" variant="secondary" size="sm">Filter</x-btn>
         </form>
 
         <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
@@ -52,7 +52,7 @@
                         <tr>
                             <td class="px-4 py-3 font-medium">
                                 @if ($entry->visitor)
-                                    <a href="{{ route('frontdesk.visitors.show', $entry->visitor) }}" class="text-indigo-700">{{ $entry->full_name }}</a>
+                                    <a href="{{ route('frontdesk.visitors.show', $entry->visitor) }}" class="btn-link btn-link-plain font-medium text-slate-900 hover:text-indigo-700">{{ $entry->full_name }}</a>
                                 @else
                                     {{ $entry->full_name }}
                                 @endif
@@ -64,7 +64,7 @@
                                 @if ($canManage)
                                     <form method="POST" action="{{ route('frontdesk.watchlist.destroy', $entry) }}" onsubmit="return confirm('Remove this watchlist entry?')">
                                         @csrf @method('DELETE')
-                                        <button type="submit" class="text-sm text-red-600 hover:text-red-800">Remove</button>
+                                        <x-btn type="submit" variant="danger" size="sm">Remove</x-btn>
                                     </form>
                                 @endif
                             </td>