diff --git a/resources/views/livewire/public/fuel-finder.blade.php b/resources/views/livewire/public/fuel-finder.blade.php
index 354ab7d..f51d656 100644
--- a/resources/views/livewire/public/fuel-finder.blade.php
+++ b/resources/views/livewire/public/fuel-finder.blade.php
@@ -1,3 +1,106 @@
-<div>
-    <input type="text" name="search" wire:model="search" />
+<div class="flex h-dvh flex-col bg-[#f5ede5]">
+
+    <x-mobile-header />
+
+    {{-- Scrollable main content, offset for fixed header (~80px) and footer (~80px) --}}
+    <main
+        class="flex-1 overflow-y-auto pt-[80px] pb-[80px]"
+        style="-ms-overflow-style:none;scrollbar-width:none;"
+    >
+
+        {{-- #search --}}
+        <section class="space-y-3 px-5 pt-5 pb-4">
+            <form wire:submit="findStations">
+                <div class="relative mb-3">
+                    <iconify-icon
+                        icon="lucide:map-pin"
+                        class="absolute left-4 top-1/2 -translate-y-1/2 text-xl text-[#89726c] pointer-events-none"
+                    ></iconify-icon>
+                    <input
+                        wire:model="search"
+                        type="text"
+                        name="search"
+                        placeholder="Postcode, town or city"
+                        class="h-14 w-full rounded-xl border border-[#e5ded7] bg-[#faf6f3] pl-12 pr-4 text-base font-semibold text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e] focus:border-transparent"
+                    />
+                </div>
+                @error('search')
+                    <p class="mb-2 text-sm text-red-600">{{ $message }}</p>
+                @enderror
+
+                {{-- Filter pills (scrollable row) --}}
+                <div class="flex gap-2 overflow-x-auto pb-1" style="-ms-overflow-style:none;scrollbar-width:none;">
+                    <div class="shrink-0">
+                        <x-fuel.type-select wire:model.live="fuelType" />
+                    </div>
+                    <div class="shrink-0">
+                        <x-fuel.radius-select wire:model.live="radius" />
+                    </div>
+                    <div class="shrink-0">
+                        <x-fuel.sort-select wire:model.live="sort" />
+                    </div>
+                </div>
+
+                <button
+                    type="submit"
+                    wire:loading.attr="disabled"
+                    class="mt-3 w-full rounded-xl bg-[#bb5b3e] py-3.5 text-sm font-bold text-white shadow-md disabled:opacity-60"
+                >
+                    <span wire:loading.remove wire:target="findStations">Find Stations</span>
+                    <span wire:loading wire:target="findStations">Searching…</span>
+                </button>
+            </form>
+
+            @if ($apiError)
+                <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                    {{ $apiError }}
+                </div>
+            @endif
+        </section>
+
+        {{-- #recommendation --}}
+        @if ($prediction)
+            <section class="px-5 pb-5">
+                <x-fuel.recommendation :prediction="$prediction" />
+            </section>
+        @endif
+
+        {{-- #map --}}
+        <section class="mb-4">
+            <x-fuel.station-map :results="$results" />
+        </section>
+
+        {{-- #stations --}}
+        @if ($hasSearched)
+            <section class="px-5 pb-5">
+                @if (! empty($meta))
+                    <div class="mb-3 flex items-center justify-between">
+                        <h3 class="text-base font-bold text-[#4a3f3b]">Stations Nearby</h3>
+                        <span class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">
+                            {{ $meta['count'] ?? 0 }} {{ str('Result')->plural($meta['count'] ?? 0) }}
+                        </span>
+                    </div>
+                @endif
+
+                @forelse ($results as $station)
+                    <div class="mb-2">
+                        <x-fuel.station-card :station="$station" />
+                    </div>
+                @empty
+                    <p class="text-sm text-[#89726c]">
+                        No stations found within {{ $radius }} {{ str('mile')->plural($radius) }} of "{{ $search }}".
+                    </p>
+                @endforelse
+            </section>
+        @endif
+
+        {{-- #forecast --}}
+        <section class="px-5 pb-8">
+            <x-fuel.forecast />
+        </section>
+
+    </main>
+
+    <x-mobile-footer />
+
 </div>