diff --git a/app/Http/Controllers/Frontdesk/VisitorController.php b/app/Http/Controllers/Frontdesk/VisitorController.php
index 23a7c36..0b02675 100644
--- a/app/Http/Controllers/Frontdesk/VisitorController.php
+++ b/app/Http/Controllers/Frontdesk/VisitorController.php
@@ -33,7 +33,19 @@ class VisitorController extends Controller
             ->paginate(25)
             ->withQueryString();
 
-        return view('frontdesk.visitors.index', compact('visitors', 'organization'));
+        $statsQuery = Visitor::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+
+        $heroStats = [
+            'total' => (clone $statsQuery)->count(),
+            'frequent' => (clone $statsQuery)->where('is_frequent', true)->count(),
+            'flagged' => (clone $statsQuery)->whereIn('watchlist_status', [
+                Visitor::WATCHLIST_REQUIRES_APPROVAL,
+                Visitor::WATCHLIST_BLACKLISTED,
+            ])->count(),
+        ];
+
+        return view('frontdesk.visitors.index', compact('visitors', 'organization', 'heroStats'));
     }
 
     public function show(Request $request, Visitor $visitor): View
diff --git a/resources/views/frontdesk/reports/index.blade.php b/resources/views/frontdesk/reports/index.blade.php
index 95a9666..f9a99a6 100644
--- a/resources/views/frontdesk/reports/index.blade.php
+++ b/resources/views/frontdesk/reports/index.blade.php
@@ -1,8 +1,8 @@
 <x-app-layout title="Reports">
     <div class="flex flex-wrap items-start justify-between gap-4">
         <div>
-            <h1 class="text-xl font-semibold text-slate-900 dark:text-slate-100">Reports</h1>
-            <p class="text-sm text-slate-500 dark:text-slate-400">{{ $organization->name }}</p>
+            <h1 class="text-xl font-semibold text-slate-900">Reports</h1>
+            <p class="text-sm text-slate-500">{{ $organization->name }}</p>
         </div>
         @if ($canExport)
             <a href="{{ route('frontdesk.reports.export', request()->query()) }}" class="btn-primary">Export CSV</a>
@@ -10,23 +10,23 @@
     </div>
 
     <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 dark:border-slate-600 dark:bg-slate-800">
-        <input type="date" name="to" value="{{ $to }}" class="rounded-lg border-slate-300 text-sm dark:border-slate-600 dark:bg-slate-800">
-        <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm dark:border-slate-600">Apply</button>
+        <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>
     </form>
 
     <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         @foreach ($summary as $key => $value)
-            <div class="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
+            <div class="rounded-2xl border border-slate-200 bg-white p-4">
                 <p class="text-xs uppercase tracking-wide text-slate-500">{{ str_replace('_', ' ', $key) }}</p>
-                <p class="mt-1 text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ $value }}</p>
+                <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $value }}</p>
             </div>
         @endforeach
     </div>
 
     <div class="mt-8 grid gap-6 lg:grid-cols-2">
-        <section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
-            <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Peak check-in hours</h2>
+        <section class="rounded-2xl border border-slate-200 bg-white p-5">
+            <h2 class="text-sm font-semibold text-slate-900">Peak check-in hours</h2>
             <div class="mt-4 flex items-end gap-1 h-40">
                 @php $maxPeak = max(1, collect($peakHours)->max('count')); @endphp
                 @foreach ($peakHours as $row)
@@ -38,8 +38,8 @@
             </div>
         </section>
 
-        <section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
-            <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Security incidents</h2>
+        <section class="rounded-2xl border border-slate-200 bg-white p-5">
+            <h2 class="text-sm font-semibold text-slate-900">Security incidents</h2>
             <dl class="mt-4 space-y-2 text-sm">
                 @foreach ($security as $key => $count)
                     <div class="flex justify-between"><dt class="text-slate-500">{{ str_replace('_', ' ', $key) }}</dt><dd class="font-medium">{{ $count }}</dd></div>
@@ -49,19 +49,19 @@
     </div>
 
     <div class="mt-8 grid gap-6 lg:grid-cols-2">
-        <section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
-            <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Visits by department</h2>
+        <section class="rounded-2xl border border-slate-200 bg-white p-5">
+            <h2 class="text-sm font-semibold text-slate-900">Visits by department</h2>
             <table class="mt-4 min-w-full text-sm">
                 @forelse ($departments as $row)
-                    <tr class="border-t border-slate-100 dark:border-slate-800"><td class="py-2">{{ $row->department }}</td><td class="py-2 text-right font-medium">{{ $row->count }}</td></tr>
+                    <tr class="border-t border-slate-100"><td class="py-2">{{ $row->department }}</td><td class="py-2 text-right font-medium">{{ $row->count }}</td></tr>
                 @empty
                     <tr><td class="py-4 text-slate-500">No data for this period.</td></tr>
                 @endforelse
             </table>
         </section>
 
-        <section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
-            <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Frequent visitors</h2>
+        <section class="rounded-2xl border border-slate-200 bg-white p-5">
+            <h2 class="text-sm font-semibold text-slate-900">Frequent visitors</h2>
             <ul class="mt-4 space-y-2 text-sm">
                 @forelse ($frequentVisitors as $visitor)
                     <li class="flex justify-between"><span>{{ $visitor->full_name }}</span><span class="text-slate-500">{{ $visitor->visit_count }} visits</span></li>
@@ -74,25 +74,25 @@
 
     <div class="mt-8">
         <div class="flex flex-wrap items-center justify-between gap-3">
-            <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Staff attendance</h2>
+            <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>
             @endif
         </div>
         <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
             @foreach ($employeeSummary as $key => $value)
-                <div class="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
+                <div class="rounded-2xl border border-slate-200 bg-white p-4">
                     <p class="text-xs uppercase tracking-wide text-slate-500">{{ str_replace('_', ' ', $key) }}</p>
-                    <p class="mt-1 text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ $value }}</p>
+                    <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $value }}</p>
                 </div>
             @endforeach
         </div>
         <div class="mt-6 grid gap-6 lg:grid-cols-2">
-            <section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
-                <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Recent staff events</h3>
+            <section class="rounded-2xl border border-slate-200 bg-white p-5">
+                <h3 class="text-sm font-semibold text-slate-900">Recent staff events</h3>
                 <table class="mt-4 min-w-full text-sm">
                     @forelse ($employeeAttendance->take(10) as $event)
-                        <tr class="border-t border-slate-100 dark:border-slate-800">
+                        <tr class="border-t border-slate-100">
                             <td class="py-2">{{ $event->employee->full_name }}</td>
                             <td class="py-2 text-slate-500">{{ config('frontdesk.employee_presence_events.'.$event->event, $event->event) }}</td>
                             <td class="py-2 text-right text-slate-400">{{ $event->created_at->format('M j, g:i A') }}</td>
@@ -102,8 +102,8 @@
                     @endforelse
                 </table>
             </section>
-            <section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
-                <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Step-out log</h3>
+            <section class="rounded-2xl border border-slate-200 bg-white p-5">
+                <h3 class="text-sm font-semibold text-slate-900">Step-out log</h3>
                 <ul class="mt-4 space-y-2 text-sm">
                     @forelse ($employeeStepOuts as $event)
                         <li>
diff --git a/resources/views/frontdesk/visitors/index.blade.php b/resources/views/frontdesk/visitors/index.blade.php
index 80369d4..402d51a 100644
--- a/resources/views/frontdesk/visitors/index.blade.php
+++ b/resources/views/frontdesk/visitors/index.blade.php
@@ -1,35 +1,56 @@
 <x-app-layout title="Visitors">
-    <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-slate-900">Visitor database</h1>
-    </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Profiles · Return visits · Watchlist"
+            title="Visitors"
+            description="Search returning guests, review visit history, and manage watchlist status for people who check in at your sites."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Visitors'],
+                ['value' => number_format($heroStats['frequent']), 'label' => 'Frequent'],
+                ['value' => number_format($heroStats['flagged']), 'label' => 'Flagged'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.watchlist.index') }}" class="btn-secondary">Watchlist</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">
-        <input type="search" name="q" value="{{ request('q') }}" placeholder="Search by name…" class="w-full max-w-md rounded-lg border-slate-300 text-sm">
-    </form>
+        <form method="GET" class="flex flex-wrap gap-2">
+            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search by name…" class="w-full max-w-md rounded-lg border-slate-300 text-sm">
+        </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">Name</th>
-                    <th class="px-4 py-3">Company</th>
-                    <th class="px-4 py-3">Visits</th>
-                    <th class="px-4 py-3">Status</th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-slate-50">
-                @forelse ($visitors as $visitor)
-                    <tr class="hover:bg-slate-50">
-                        <td class="px-4 py-3"><a href="{{ route('frontdesk.visitors.show', $visitor) }}" class="font-medium text-indigo-700">{{ $visitor->full_name }}</a></td>
-                        <td class="px-4 py-3 text-slate-600">{{ $visitor->company ?? '—' }}</td>
-                        <td class="px-4 py-3 text-slate-600">{{ $visitor->visit_count }}</td>
-                        <td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visitor->watchlist_status) }}</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">Visitor database</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">Company</th>
+                        <th class="px-4 py-3">Visits</th>
+                        <th class="px-4 py-3">Status</th>
                     </tr>
-                @empty
-                    <tr><td colspan="4" class="px-4 py-8 text-center text-slate-400">No visitors yet.</td></tr>
-                @endforelse
-            </tbody>
-        </table>
+                </thead>
+                <tbody class="divide-y divide-slate-50">
+                    @forelse ($visitors as $visitor)
+                        <tr class="hover:bg-slate-50">
+                            <td class="px-4 py-3"><a href="{{ route('frontdesk.visitors.show', $visitor) }}" class="font-medium text-indigo-700">{{ $visitor->full_name }}</a></td>
+                            <td class="px-4 py-3 text-slate-600">{{ $visitor->company ?? '—' }}</td>
+                            <td class="px-4 py-3 text-slate-600">{{ $visitor->visit_count }}</td>
+                            <td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visitor->watchlist_status) }}</td>
+                        </tr>
+                    @empty
+                        <tr><td colspan="4" class="px-4 py-8 text-center text-slate-400">No visitors yet.</td></tr>
+                    @endforelse
+                </tbody>
+            </table>
+            @if ($visitors->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $visitors->links() }}</div>
+            @endif
+        </div>
     </div>
-    <div class="mt-4">{{ $visitors->links() }}</div>
 </x-app-layout>