diff --git a/app/Http/Controllers/Frontdesk/BranchController.php b/app/Http/Controllers/Frontdesk/BranchController.php
index 40e664d..c5ac166 100644
--- a/app/Http/Controllers/Frontdesk/BranchController.php
+++ b/app/Http/Controllers/Frontdesk/BranchController.php
@@ -24,7 +24,13 @@ class BranchController extends Controller
             ->orderBy('name')
             ->get();
 
-        return view('frontdesk.admin.branches.index', compact('branches', 'organization'));
+        $heroStats = [
+            'total' => $branches->count(),
+            'active' => $branches->where('is_active', true)->count(),
+            'buildings' => $branches->sum('buildings_count'),
+        ];
+
+        return view('frontdesk.admin.branches.index', compact('branches', 'organization', 'heroStats'));
     }
 
     public function create(Request $request): View
diff --git a/app/Http/Controllers/Frontdesk/DeviceController.php b/app/Http/Controllers/Frontdesk/DeviceController.php
index 52f5d90..31eb963 100644
--- a/app/Http/Controllers/Frontdesk/DeviceController.php
+++ b/app/Http/Controllers/Frontdesk/DeviceController.php
@@ -27,10 +27,23 @@ class DeviceController extends Controller
             ->orderBy('name')
             ->paginate(25);
 
+        $statsQuery = Device::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+
+        $heroStats = [
+            'total' => (clone $statsQuery)->count(),
+            'online' => (clone $statsQuery)
+                ->where('status', 'online')
+                ->where('last_online_at', '>=', now()->subMinutes(10))
+                ->count(),
+            'kiosks' => (clone $statsQuery)->where('type', 'kiosk')->count(),
+        ];
+
         return view('frontdesk.devices.index', [
             'organization' => $organization,
             'devices' => $devices,
             'deviceTypes' => config('frontdesk.device_types'),
+            'heroStats' => $heroStats,
             'canManage' => app(\App\Services\Frontdesk\FrontdeskPermissions::class)
                 ->can($this->member($request), 'devices.manage'),
         ]);
diff --git a/app/Http/Controllers/Frontdesk/EmployeeController.php b/app/Http/Controllers/Frontdesk/EmployeeController.php
index 845a724..57bfc1c 100644
--- a/app/Http/Controllers/Frontdesk/EmployeeController.php
+++ b/app/Http/Controllers/Frontdesk/EmployeeController.php
@@ -6,6 +6,7 @@ use App\Http\Controllers\Controller;
 use App\Http\Controllers\Frontdesk\Concerns\ScopesToAccount;
 use App\Models\Branch;
 use App\Models\Employee;
+use App\Models\EmployeePresence;
 use App\Models\EmployeePresenceEvent;
 use App\Models\Host;
 use App\Models\Member;
@@ -35,7 +36,17 @@ class EmployeeController extends Controller
         $this->scopeToBranch($request, $employees);
         $employees = $employees->paginate(25);
 
-        return view('frontdesk.employees.index', compact('employees', 'organization'));
+        $statsQuery = Employee::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+        $this->scopeToBranch($request, $statsQuery);
+
+        $heroStats = [
+            'total' => (clone $statsQuery)->count(),
+            'on_site' => (clone $statsQuery)->whereHas('presence', fn ($q) => $q->where('status', EmployeePresence::STATUS_ON_SITE))->count(),
+            'active' => (clone $statsQuery)->where('active', true)->count(),
+        ];
+
+        return view('frontdesk.employees.index', compact('employees', 'organization', 'heroStats'));
     }
 
     public function create(Request $request): View
diff --git a/app/Http/Controllers/Frontdesk/HostController.php b/app/Http/Controllers/Frontdesk/HostController.php
index 67366a8..a62289f 100644
--- a/app/Http/Controllers/Frontdesk/HostController.php
+++ b/app/Http/Controllers/Frontdesk/HostController.php
@@ -25,7 +25,17 @@ class HostController extends Controller
         $this->scopeToBranch($request, $hosts);
         $hosts = $hosts->orderBy('name')->paginate(25);
 
-        return view('frontdesk.hosts.index', compact('hosts', 'organization'));
+        $statsQuery = Host::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+        $this->scopeToBranch($request, $statsQuery);
+
+        $heroStats = [
+            'total' => (clone $statsQuery)->count(),
+            'available' => (clone $statsQuery)->where('is_available', true)->count(),
+            'departments' => (clone $statsQuery)->whereNotNull('department')->where('department', '!=', '')->distinct()->count('department'),
+        ];
+
+        return view('frontdesk.hosts.index', compact('hosts', 'organization', 'heroStats'));
     }
 
     public function create(Request $request): View
diff --git a/app/Http/Controllers/Frontdesk/MemberController.php b/app/Http/Controllers/Frontdesk/MemberController.php
index a5c7eae..0fe8dde 100644
--- a/app/Http/Controllers/Frontdesk/MemberController.php
+++ b/app/Http/Controllers/Frontdesk/MemberController.php
@@ -26,10 +26,19 @@ class MemberController extends Controller
             ->orderBy('created_at')
             ->get();
 
+        $adminRoles = ['super_admin', 'org_admin', 'branch_admin'];
+
+        $heroStats = [
+            'total' => $members->count(),
+            'admins' => $members->whereIn('role', $adminRoles)->count(),
+            'branch_scoped' => $members->whereNotNull('branch_id')->count(),
+        ];
+
         return view('frontdesk.admin.members.index', [
             'members' => $members,
             'organization' => $organization,
             'roles' => config('frontdesk.roles'),
+            'heroStats' => $heroStats,
         ]);
     }
 
diff --git a/app/Http/Controllers/Frontdesk/VisitController.php b/app/Http/Controllers/Frontdesk/VisitController.php
index 808e6e1..4e3e57d 100644
--- a/app/Http/Controllers/Frontdesk/VisitController.php
+++ b/app/Http/Controllers/Frontdesk/VisitController.php
@@ -42,7 +42,17 @@ class VisitController extends Controller
             ->paginate(25)
             ->withQueryString();
 
-        return view('frontdesk.visits.index', compact('visits', 'organization'));
+        $statsQuery = Visit::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+        $this->scopeToBranch($request, $statsQuery);
+
+        $heroStats = [
+            'on_site' => (clone $statsQuery)->whereIn('status', Visit::ACTIVE_STATUSES)->count(),
+            'today' => (clone $statsQuery)->whereDate('checked_in_at', today())->count(),
+            'total' => (clone $statsQuery)->count(),
+        ];
+
+        return view('frontdesk.visits.index', compact('visits', 'organization', 'heroStats'));
     }
 
     public function calendar(Request $request): View
diff --git a/resources/views/components/frontdesk/page-hero.blade.php b/resources/views/components/frontdesk/page-hero.blade.php
new file mode 100644
index 0000000..a8ea8f0
--- /dev/null
+++ b/resources/views/components/frontdesk/page-hero.blade.php
@@ -0,0 +1,39 @@
+@props([
+    'badge',
+    'title',
+    'description' => null,
+    'stats' => [],
+])
+
+<div {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-2xl border border-slate-200 bg-white']) }}>
+    <div class="absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-violet-50/60"></div>
+    <div class="relative px-6 py-8 sm:px-10">
+        <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+            <div class="max-w-xl">
+                <div class="inline-flex items-center gap-1.5 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">
+                    {{ $badge }}
+                </div>
+                <h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">{{ $title }}</h1>
+                @if ($description)
+                    <p class="mt-2 text-sm leading-6 text-slate-600">{{ $description }}</p>
+                @endif
+                @isset($actions)
+                    <div class="mt-6 flex flex-wrap items-center gap-2">
+                        {{ $actions }}
+                    </div>
+                @endisset
+            </div>
+
+            @if (count($stats) > 0)
+                <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                    @foreach ($stats as $stat)
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $stat['value'] }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">{{ $stat['label'] }}</p>
+                        </div>
+                    @endforeach
+                </div>
+            @endif
+        </div>
+    </div>
+</div>
diff --git a/resources/views/frontdesk/admin/branches/index.blade.php b/resources/views/frontdesk/admin/branches/index.blade.php
index c86ebce..92ee23d 100644
--- a/resources/views/frontdesk/admin/branches/index.blade.php
+++ b/resources/views/frontdesk/admin/branches/index.blade.php
@@ -1,25 +1,49 @@
-<x-app-layout title="Branches">
-    <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-slate-900">Branches</h1>
-        @if (app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null, 'admin.branches.manage'))
-            <a href="{{ route('frontdesk.branches.create') }}" class="btn-primary">Add branch</a>
-        @endif
-    </div>
+@php
+    $canManageBranches = app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(
+        auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null,
+        'admin.branches.manage'
+    );
+@endphp
 
-    <div class="mt-4 space-y-3">
-        @forelse ($branches as $branch)
-            <div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-4">
-                <div>
-                    <p class="font-medium text-slate-900">{{ $branch->name }}</p>
-                    <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>
-                    <a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm text-slate-600 hover:text-slate-800">Edit</a>
-                </div>
+<x-app-layout title="Branches">
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Locations · Buildings · Reception desks"
+            title="Branches"
+            description="Organize your sites, buildings, and reception desks so visits and devices stay scoped to the right location."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Branches'],
+                ['value' => number_format($heroStats['active']), 'label' => 'Active'],
+                ['value' => number_format($heroStats['buildings']), 'label' => 'Buildings'],
+            ]">
+            @if ($canManageBranches)
+                <x-slot name="actions">
+                    <a href="{{ route('frontdesk.branches.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>
+                        Add branch
+                    </a>
+                </x-slot>
+            @endif
+        </x-frontdesk.page-hero>
+
+        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="border-b border-slate-100 px-6 py-4">
+                <h2 class="text-sm font-semibold text-slate-900">All branches</h2>
             </div>
-        @empty
-            <p class="text-sm text-slate-500">No branches yet.</p>
-        @endforelse
+            @forelse ($branches as $branch)
+                <div class="flex items-center justify-between border-b border-slate-50 px-6 py-4 last:border-b-0">
+                    <div>
+                        <p class="font-medium text-slate-900">{{ $branch->name }}</p>
+                        <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>
+                        <a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm text-slate-600 hover:text-slate-800">Edit</a>
+                    </div>
+                </div>
+            @empty
+                <p class="px-6 py-10 text-center text-sm text-slate-500">No branches yet.</p>
+            @endforelse
+        </div>
     </div>
 </x-app-layout>
diff --git a/resources/views/frontdesk/admin/members/index.blade.php b/resources/views/frontdesk/admin/members/index.blade.php
index 273b786..2995bc1 100644
--- a/resources/views/frontdesk/admin/members/index.blade.php
+++ b/resources/views/frontdesk/admin/members/index.blade.php
@@ -1,36 +1,53 @@
-<x-app-layout title="Team members">
-    <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-slate-900">Team members</h1>
-        <a href="{{ route('frontdesk.members.create') }}" class="btn-primary">Add member</a>
-    </div>
+<x-app-layout title="Team">
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Roles · Access · Branch scope"
+            title="Team"
+            description="Invite colleagues, assign Frontdesk roles, and limit branch access for reception and security staff."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Members'],
+                ['value' => number_format($heroStats['admins']), 'label' => 'Administrators'],
+                ['value' => number_format($heroStats['branch_scoped']), 'label' => 'Branch-scoped'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.members.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>
+                    Add member
+                </a>
+            </x-slot>
+        </x-frontdesk.page-hero>
 
-    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
-        <table class="min-w-full text-sm">
-            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
-                <tr><th class="px-4 py-3">Member</th><th class="px-4 py-3">Role</th><th class="px-4 py-3">Branch</th><th class="px-4 py-3"></th></tr>
-            </thead>
-            <tbody class="divide-y divide-slate-50">
-                @foreach ($members as $member)
-                    @php
-                        $display = str_contains($member->user_ref, '@')
-                            ? $member->user_ref
-                            : (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
-                    @endphp
-                    <tr>
-                        <td class="px-4 py-3 text-sm">{{ $display }}</td>
-                        <td class="px-4 py-3">{{ $roles[$member->role] ?? $member->role }}</td>
-                        <td class="px-4 py-3">{{ $member->branch?->name ?? 'All branches' }}</td>
-                        <td class="px-4 py-3 text-right">
-                            @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>
-                                </form>
-                            @endif
-                        </td>
-                    </tr>
-                @endforeach
-            </tbody>
-        </table>
+        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="border-b border-slate-100 px-6 py-4">
+                <h2 class="text-sm font-semibold text-slate-900">Team members</h2>
+            </div>
+            <table class="min-w-full text-sm">
+                <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
+                    <tr><th class="px-4 py-3">Member</th><th class="px-4 py-3">Role</th><th class="px-4 py-3">Branch</th><th class="px-4 py-3"></th></tr>
+                </thead>
+                <tbody class="divide-y divide-slate-50">
+                    @foreach ($members as $member)
+                        @php
+                            $display = str_contains($member->user_ref, '@')
+                                ? $member->user_ref
+                                : (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
+                        @endphp
+                        <tr>
+                            <td class="px-4 py-3 text-sm">{{ $display }}</td>
+                            <td class="px-4 py-3">{{ $roles[$member->role] ?? $member->role }}</td>
+                            <td class="px-4 py-3">{{ $member->branch?->name ?? 'All branches' }}</td>
+                            <td class="px-4 py-3 text-right">
+                                @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>
+                                    </form>
+                                @endif
+                            </td>
+                        </tr>
+                    @endforeach
+                </tbody>
+            </table>
+        </div>
     </div>
 </x-app-layout>
diff --git a/resources/views/frontdesk/devices/index.blade.php b/resources/views/frontdesk/devices/index.blade.php
index 48af78d..6b19099 100644
--- a/resources/views/frontdesk/devices/index.blade.php
+++ b/resources/views/frontdesk/devices/index.blade.php
@@ -1,58 +1,73 @@
 <x-app-layout title="Devices">
-    <div class="flex items-center justify-between">
-        <div>
-            <h1 class="text-xl font-semibold text-slate-900">Devices</h1>
-            <p class="text-sm text-slate-500">Kiosks, printers, and reception hardware</p>
-        </div>
-        @if ($canManage)
-            <a href="{{ route('frontdesk.devices.create') }}" class="btn-primary">Add device</a>
-        @endif
-    </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Kiosks · Printers · Reception hardware"
+            title="Devices"
+            description="Register and monitor kiosks, badge printers, and reception hardware across your branches."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Devices'],
+                ['value' => number_format($heroStats['online']), 'label' => 'Online'],
+                ['value' => number_format($heroStats['kiosks']), 'label' => 'Kiosks'],
+            ]">
+            @if ($canManage)
+                <x-slot name="actions">
+                    <a href="{{ route('frontdesk.devices.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>
+                        Add device
+                    </a>
+                </x-slot>
+            @endif
+        </x-frontdesk.page-hero>
 
-    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
-        <table class="min-w-full divide-y divide-slate-100 text-sm">
-            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
-                <tr>
-                    <th class="px-4 py-3">Name</th>
-                    <th class="px-4 py-3">Type</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3">Desk / branch</th>
-                    <th class="px-4 py-3">Last online</th>
-                    <th class="px-4 py-3"></th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-slate-50">
-                @forelse ($devices as $device)
+        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="border-b border-slate-100 px-6 py-4">
+                <h2 class="text-sm font-semibold text-slate-900">All devices</h2>
+            </div>
+            <table class="min-w-full divide-y divide-slate-100 text-sm">
+                <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                     <tr>
-                        <td class="px-4 py-3 font-medium">{{ $device->name }}</td>
-                        <td class="px-4 py-3 text-slate-600">{{ $deviceTypes[$device->type] ?? $device->type }}</td>
-                        <td class="px-4 py-3">
-                            <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $device->isOnline() ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-600' }}">
-                                {{ $device->isOnline() ? 'Online' : ucfirst($device->status) }}
-                            </span>
-                        </td>
-                        <td class="px-4 py-3 text-slate-600">
-                            {{ $device->receptionDesk?->name ?? '—' }}
-                            @if ($device->branch)
-                                <span class="text-slate-400">· {{ $device->branch->name }}</span>
-                            @endif
-                        </td>
-                        <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>
-                            @endif
-                        </td>
+                        <th class="px-4 py-3">Name</th>
+                        <th class="px-4 py-3">Type</th>
+                        <th class="px-4 py-3">Status</th>
+                        <th class="px-4 py-3">Desk / branch</th>
+                        <th class="px-4 py-3">Last online</th>
+                        <th class="px-4 py-3"></th>
                     </tr>
-                @empty
-                    <tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No devices registered yet.</td></tr>
-                @endforelse
-            </tbody>
-        </table>
+                </thead>
+                <tbody class="divide-y divide-slate-50">
+                    @forelse ($devices as $device)
+                        <tr>
+                            <td class="px-4 py-3 font-medium">{{ $device->name }}</td>
+                            <td class="px-4 py-3 text-slate-600">{{ $deviceTypes[$device->type] ?? $device->type }}</td>
+                            <td class="px-4 py-3">
+                                <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $device->isOnline() ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-600' }}">
+                                    {{ $device->isOnline() ? 'Online' : ucfirst($device->status) }}
+                                </span>
+                            </td>
+                            <td class="px-4 py-3 text-slate-600">
+                                {{ $device->receptionDesk?->name ?? '—' }}
+                                @if ($device->branch)
+                                    <span class="text-slate-400">· {{ $device->branch->name }}</span>
+                                @endif
+                            </td>
+                            <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>
+                                @endif
+                            </td>
+                        </tr>
+                    @empty
+                        <tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No devices registered yet.</td></tr>
+                    @endforelse
+                </tbody>
+            </table>
+            @if ($devices->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $devices->links() }}</div>
+            @endif
+        </div>
     </div>
-
-    {{ $devices->links() }}
 </x-app-layout>
diff --git a/resources/views/frontdesk/employees/index.blade.php b/resources/views/frontdesk/employees/index.blade.php
index f3af7d3..6294c93 100644
--- a/resources/views/frontdesk/employees/index.blade.php
+++ b/resources/views/frontdesk/employees/index.blade.php
@@ -1,54 +1,71 @@
 <x-app-layout title="Employees">
-    <div class="flex flex-wrap items-center justify-between gap-3">
-        <h1 class="text-xl font-semibold text-slate-900">Employees</h1>
-        <div class="flex gap-2">
-            <a href="{{ route('frontdesk.employees.export.attendance') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Export attendance</a>
-            <a href="{{ route('frontdesk.employees.import') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Import CSV</a>
-            <a href="{{ route('frontdesk.employees.create') }}" class="btn-primary">Add employee</a>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Staff sign-in · Presence · Attendance"
+            title="Employees"
+            description="Register staff who sign in at the kiosk, track on-site presence, and export attendance records."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Employees'],
+                ['value' => number_format($heroStats['on_site']), 'label' => 'On site'],
+                ['value' => number_format($heroStats['active']), 'label' => 'Active'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.employees.export.attendance') }}" class="btn-secondary">Export attendance</a>
+                <a href="{{ route('frontdesk.employees.import') }}" class="btn-secondary">Import CSV</a>
+                <a href="{{ route('frontdesk.employees.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>
+                    Add employee
+                </a>
+            </x-slot>
+        </x-frontdesk.page-hero>
+
+        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="border-b border-slate-100 px-6 py-4">
+                <h2 class="text-sm font-semibold text-slate-900">All employees</h2>
+            </div>
+            <table class="min-w-full divide-y divide-slate-100 text-sm">
+                <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
+                    <tr>
+                        <th class="px-4 py-3">Name</th>
+                        <th class="px-4 py-3">Code</th>
+                        <th class="px-4 py-3">Department</th>
+                        <th class="px-4 py-3">Status</th>
+                        <th class="px-4 py-3"></th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-50">
+                    @forelse ($employees as $employee)
+                        @php
+                            $presence = $employee->presence;
+                            $status = $presence?->status ?? 'off_site';
+                            $statusLabel = config('frontdesk.employee_presence_statuses.'.$status, $status);
+                        @endphp
+                        <tr>
+                            <td class="px-4 py-3 font-medium">{{ $employee->full_name }}</td>
+                            <td class="px-4 py-3 font-mono text-slate-600">{{ $employee->employee_code }}</td>
+                            <td class="px-4 py-3 text-slate-600">{{ $employee->department ?? '—' }}</td>
+                            <td class="px-4 py-3">
+                                <span class="rounded-full px-2.5 py-0.5 text-xs font-medium
+                                    {{ $status === 'on_site' ? 'bg-emerald-50 text-emerald-700' : ($status === 'stepped_out' ? 'bg-amber-50 text-amber-800' : 'bg-slate-100 text-slate-600') }}">
+                                    {{ $statusLabel }}
+                                </span>
+                                @if ($presence?->destination)
+                                    <span class="mt-0.5 block text-xs text-slate-400">{{ $presence->destination }}</span>
+                                @endif
+                            </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>
+                            </td>
+                        </tr>
+                    @empty
+                        <tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No employees yet. Add staff who will sign in at the kiosk.</td></tr>
+                    @endforelse
+                </tbody>
+            </table>
+            @if ($employees->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $employees->links() }}</div>
+            @endif
         </div>
     </div>
-
-    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
-        <table class="min-w-full divide-y divide-slate-100 text-sm">
-            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
-                <tr>
-                    <th class="px-4 py-3">Name</th>
-                    <th class="px-4 py-3">Code</th>
-                    <th class="px-4 py-3">Department</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3"></th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-slate-50">
-                @forelse ($employees as $employee)
-                    @php
-                        $presence = $employee->presence;
-                        $status = $presence?->status ?? 'off_site';
-                        $statusLabel = config('frontdesk.employee_presence_statuses.'.$status, $status);
-                    @endphp
-                    <tr>
-                        <td class="px-4 py-3 font-medium">{{ $employee->full_name }}</td>
-                        <td class="px-4 py-3 font-mono text-slate-600">{{ $employee->employee_code }}</td>
-                        <td class="px-4 py-3 text-slate-600">{{ $employee->department ?? '—' }}</td>
-                        <td class="px-4 py-3">
-                            <span class="rounded-full px-2.5 py-0.5 text-xs font-medium
-                                {{ $status === 'on_site' ? 'bg-emerald-50 text-emerald-700' : ($status === 'stepped_out' ? 'bg-amber-50 text-amber-800' : 'bg-slate-100 text-slate-600') }}">
-                                {{ $statusLabel }}
-                            </span>
-                            @if ($presence?->destination)
-                                <span class="mt-0.5 block text-xs text-slate-400">{{ $presence->destination }}</span>
-                            @endif
-                        </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>
-                        </td>
-                    </tr>
-                @empty
-                    <tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No employees yet. Add staff who will sign in at the kiosk.</td></tr>
-                @endforelse
-            </tbody>
-        </table>
-    </div>
-    <div class="mt-4">{{ $employees->links() }}</div>
 </x-app-layout>
diff --git a/resources/views/frontdesk/hosts/index.blade.php b/resources/views/frontdesk/hosts/index.blade.php
index 2254d85..c21d5c3 100644
--- a/resources/views/frontdesk/hosts/index.blade.php
+++ b/resources/views/frontdesk/hosts/index.blade.php
@@ -1,36 +1,55 @@
 <x-app-layout title="Host directory">
-    <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-slate-900">Host directory</h1>
-        <a href="{{ route('frontdesk.hosts.create') }}" class="btn-primary">Add host</a>
-    </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Host directory · Notifications · Departments"
+            title="Hosts"
+            description="Manage the people visitors come to see — hosts receive arrival alerts and approve visits."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Hosts'],
+                ['value' => number_format($heroStats['available']), 'label' => 'Available'],
+                ['value' => number_format($heroStats['departments']), 'label' => 'Departments'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.hosts.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>
+                    Add host
+                </a>
+            </x-slot>
+        </x-frontdesk.page-hero>
 
-    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
-        <table class="min-w-full divide-y divide-slate-100 text-sm">
-            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
-                <tr>
-                    <th class="px-4 py-3">Name</th>
-                    <th class="px-4 py-3">Department</th>
-                    <th class="px-4 py-3">Office</th>
-                    <th class="px-4 py-3">Contact</th>
-                    <th class="px-4 py-3"></th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-slate-50">
-                @forelse ($hosts as $host)
+        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="border-b border-slate-100 px-6 py-4">
+                <h2 class="text-sm font-semibold text-slate-900">All hosts</h2>
+            </div>
+            <table class="min-w-full divide-y divide-slate-100 text-sm">
+                <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                     <tr>
-                        <td class="px-4 py-3 font-medium">{{ $host->name }}</td>
-                        <td class="px-4 py-3 text-slate-600">{{ $host->department ?? '—' }}</td>
-                        <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>
-                        </td>
+                        <th class="px-4 py-3">Name</th>
+                        <th class="px-4 py-3">Department</th>
+                        <th class="px-4 py-3">Office</th>
+                        <th class="px-4 py-3">Contact</th>
+                        <th class="px-4 py-3"></th>
                     </tr>
-                @empty
-                    <tr><td colspan="4" class="px-4 py-8 text-center text-slate-400">No hosts yet. Add your first host to enable visitor notifications.</td></tr>
-                @endforelse
-            </tbody>
-        </table>
+                </thead>
+                <tbody class="divide-y divide-slate-50">
+                    @forelse ($hosts as $host)
+                        <tr>
+                            <td class="px-4 py-3 font-medium">{{ $host->name }}</td>
+                            <td class="px-4 py-3 text-slate-600">{{ $host->department ?? '—' }}</td>
+                            <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>
+                            </td>
+                        </tr>
+                    @empty
+                        <tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No hosts yet. Add your first host to enable visitor notifications.</td></tr>
+                    @endforelse
+                </tbody>
+            </table>
+            @if ($hosts->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $hosts->links() }}</div>
+            @endif
+        </div>
     </div>
-    <div class="mt-4">{{ $hosts->links() }}</div>
 </x-app-layout>
diff --git a/resources/views/frontdesk/visits/index.blade.php b/resources/views/frontdesk/visits/index.blade.php
index 3ca3e28..d1cbe9e 100644
--- a/resources/views/frontdesk/visits/index.blade.php
+++ b/resources/views/frontdesk/visits/index.blade.php
@@ -1,51 +1,65 @@
 <x-app-layout title="Visit history">
-    <div class="flex items-center justify-between gap-3">
-        <h1 class="min-w-0 flex-1 truncate text-lg font-semibold text-slate-900 lg:text-xl">Visits</h1>
-        @include('frontdesk.partials.reception-quick-actions', [
-            'desktopSchedule' => 'Schedule',
-            'desktopCheckIn' => 'Check in',
-            'scheduleLabel' => 'Schedule visit',
-            'checkInLabel' => 'Check in visitor',
-        ])
-    </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Check-in · Badges · Visit history"
+            title="Visits"
+            description="Track visitor arrivals, scheduled appointments, and on-site activity across your locations."
+            :stats="[
+                ['value' => number_format($heroStats['on_site']), 'label' => 'On site now'],
+                ['value' => number_format($heroStats['today']), 'label' => 'Checked in today'],
+                ['value' => number_format($heroStats['total']), 'label' => 'All visits'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.visits.schedule') }}" class="btn-secondary">Schedule visit</a>
+                <a href="{{ route('frontdesk.visits.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>
+                    Check in visitor
+                </a>
+            </x-slot>
+        </x-frontdesk.page-hero>
 
-    <form method="GET" class="mt-4 flex gap-2">
-        <input type="search" name="q" value="{{ request('q') }}" placeholder="Search visitors…" class="rounded-lg border-slate-300 text-sm">
-        <select name="status" class="rounded-lg border-slate-300 text-sm">
-            <option value="">All statuses</option>
-            @foreach (config('frontdesk.visit_statuses') as $key => $label)
-                <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>
-    </form>
+        <form method="GET" class="flex flex-wrap gap-2">
+            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search visitors…" class="rounded-lg border-slate-300 text-sm">
+            <select name="status" class="rounded-lg border-slate-300 text-sm">
+                <option value="">All statuses</option>
+                @foreach (config('frontdesk.visit_statuses') as $key => $label)
+                    <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>
+        </form>
 
-    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
-        <table class="min-w-full divide-y divide-slate-100 text-sm">
-            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
-                <tr>
-                    <th class="px-4 py-3">Visitor</th>
-                    <th class="px-4 py-3">Host</th>
-                    <th class="px-4 py-3">Type</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3">Time</th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-slate-50">
-                @forelse ($visits as $visit)
-                    <tr class="hover:bg-slate-50">
-                        <td class="px-4 py-3"><a href="{{ route('frontdesk.visits.show', $visit) }}" class="font-medium text-indigo-700">{{ $visit->visitor->full_name }}</a></td>
-                        <td class="px-4 py-3 text-slate-600">{{ $visit->host?->name ?? '—' }}</td>
-                        <td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visit->visitor_type) }}</td>
-                        <td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visit->status) }}</td>
-                        <td class="px-4 py-3 text-slate-500">{{ $visit->checked_in_at?->format('M j, g:i A') ?? $visit->scheduled_at?->format('M j, g:i A') ?? $visit->created_at->format('M j, g:i A') }}</td>
+        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="border-b border-slate-100 px-6 py-4">
+                <h2 class="text-sm font-semibold text-slate-900">Visit history</h2>
+            </div>
+            <table class="min-w-full divide-y divide-slate-100 text-sm">
+                <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
+                    <tr>
+                        <th class="px-4 py-3">Visitor</th>
+                        <th class="px-4 py-3">Host</th>
+                        <th class="px-4 py-3">Type</th>
+                        <th class="px-4 py-3">Status</th>
+                        <th class="px-4 py-3">Time</th>
                     </tr>
-                @empty
-                    <tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No visits yet.</td></tr>
-                @endforelse
-            </tbody>
-        </table>
+                </thead>
+                <tbody class="divide-y divide-slate-50">
+                    @forelse ($visits as $visit)
+                        <tr class="hover:bg-slate-50">
+                            <td class="px-4 py-3"><a href="{{ route('frontdesk.visits.show', $visit) }}" class="font-medium text-indigo-700">{{ $visit->visitor->full_name }}</a></td>
+                            <td class="px-4 py-3 text-slate-600">{{ $visit->host?->name ?? '—' }}</td>
+                            <td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visit->visitor_type) }}</td>
+                            <td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visit->status) }}</td>
+                            <td class="px-4 py-3 text-slate-500">{{ $visit->checked_in_at?->format('M j, g:i A') ?? $visit->scheduled_at?->format('M j, g:i A') ?? $visit->created_at->format('M j, g:i A') }}</td>
+                        </tr>
+                    @empty
+                        <tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No visits yet.</td></tr>
+                    @endforelse
+                </tbody>
+            </table>
+            @if ($visits->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $visits->links() }}</div>
+            @endif
+        </div>
     </div>
-
-    <div class="mt-4">{{ $visits->links() }}</div>
 </x-app-layout>