diff --git a/composer.json b/composer.json
index bb336fb..ca1982a 100644
--- a/composer.json
+++ b/composer.json
@@ -12,7 +12,7 @@
         "laravel/framework": "^13.0",
         "laravel/sanctum": "^4.0",
         "laravel/tinker": "^3.0",
-        "livewire/flux": "^2.12.0",
+        "livewire/flux": "^2.13",
         "livewire/livewire": "^4.1"
     },
     "require-dev": {
diff --git a/composer.lock b/composer.lock
index 190d8ed..eed7129 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "017a8badf2a8b99d8c2de9909475415f",
+    "content-hash": "789a2e6b542a1e2f263dc8e9c973423b",
     "packages": [
         {
             "name": "bacon/bacon-qr-code",
@@ -11776,7 +11776,7 @@
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
-        "php": "^8.3"
+        "php": "^8.4"
     },
     "platform-dev": {},
     "plugin-api-version": "2.9.0"
diff --git a/resources/views/components/fuel/radius-select.blade.php b/resources/views/components/fuel/radius-select.blade.php
index f8ab78a..ef966ce 100644
--- a/resources/views/components/fuel/radius-select.blade.php
+++ b/resources/views/components/fuel/radius-select.blade.php
@@ -1,7 +1,31 @@
-<flux:select {{ $attributes }} size="sm">
-    <flux:select.option value="1">1 mile</flux:select.option>
-    <flux:select.option value="2">2 miles</flux:select.option>
-    <flux:select.option value="5">5 miles</flux:select.option>
-    <flux:select.option value="10">10 miles</flux:select.option>
-    <flux:select.option value="20">20 miles</flux:select.option>
-</flux:select>
+<div
+    x-data="{
+        value: '',
+        labels: {
+            1: '1 mile',
+            2: '2 miles',
+            5: '5 miles',
+            10: '10 miles',
+            20: '20 miles',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Radius';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Radius</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 1">1 mile</flux:menu.item>
+            <flux:menu.item @click="value = 2">2 miles</flux:menu.item>
+            <flux:menu.item @click="value = 5">5 miles</flux:menu.item>
+            <flux:menu.item @click="value = 10">10 miles</flux:menu.item>
+            <flux:menu.item @click="value = 20">20 miles</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>
diff --git a/resources/views/components/fuel/sort-select.blade.php b/resources/views/components/fuel/sort-select.blade.php
index cf0fa09..f7bbdb9 100644
--- a/resources/views/components/fuel/sort-select.blade.php
+++ b/resources/views/components/fuel/sort-select.blade.php
@@ -1,7 +1,31 @@
-<flux:select {{ $attributes }} size="sm">
-    <flux:select.option value="reliable">Best price (reliable)</flux:select.option>
-    <flux:select.option value="price">Cheapest first</flux:select.option>
-    <flux:select.option value="distance">Nearest first</flux:select.option>
-    <flux:select.option value="updated">Recently updated</flux:select.option>
-    <flux:select.option value="brand">Brand A–Z</flux:select.option>
-</flux:select>
+<div
+    x-data="{
+        value: '',
+        labels: {
+            reliable: 'Best price (reliable)',
+            price: 'Cheapest first',
+            distance: 'Nearest first',
+            updated: 'Recently updated',
+            brand: 'Brand A–Z',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Sort by';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Sort by</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 'reliable'">Best price (reliable)</flux:menu.item>
+            <flux:menu.item @click="value = 'price'">Cheapest first</flux:menu.item>
+            <flux:menu.item @click="value = 'distance'">Nearest first</flux:menu.item>
+            <flux:menu.item @click="value = 'updated'">Recently updated</flux:menu.item>
+            <flux:menu.item @click="value = 'brand'">Brand A–Z</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>
diff --git a/resources/views/components/fuel/type-select.blade.php b/resources/views/components/fuel/type-select.blade.php
index fde9c18..a1f239a 100644
--- a/resources/views/components/fuel/type-select.blade.php
+++ b/resources/views/components/fuel/type-select.blade.php
@@ -1,8 +1,33 @@
-<flux:select {{ $attributes }} size="sm">
-    <flux:select.option value="petrol">Petrol (E10)</flux:select.option>
-    <flux:select.option value="e5">Super Unleaded (E5)</flux:select.option>
-    <flux:select.option value="diesel">Diesel</flux:select.option>
-    <flux:select.option value="b7_premium">Premium Diesel</flux:select.option>
-    <flux:select.option value="b10">B10 Biodiesel</flux:select.option>
-    <flux:select.option value="hvo">HVO</flux:select.option>
-</flux:select>
+<div
+    x-data="{
+        value: '',
+        labels: {
+            petrol: 'Petrol (E10)',
+            e5: 'Super Unleaded (E5)',
+            diesel: 'Diesel',
+            b7_premium: 'Premium Diesel',
+            b10: 'B10 Biodiesel',
+            hvo: 'HVO',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Select fuel type';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Select fuel type</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 'petrol'">Petrol (E10)</flux:menu.item>
+            <flux:menu.item @click="value = 'e5'">Super Unleaded (E5)</flux:menu.item>
+            <flux:menu.item @click="value = 'diesel'">Diesel</flux:menu.item>
+            <flux:menu.item @click="value = 'b7_premium'">Premium Diesel</flux:menu.item>
+            <flux:menu.item @click="value = 'b10'">B10 Biodiesel</flux:menu.item>
+            <flux:menu.item @click="value = 'hvo'">HVO</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>
diff --git a/resources/views/layouts/shell.blade.php b/resources/views/layouts/shell.blade.php
index 3a88de5..0942320 100644
--- a/resources/views/layouts/shell.blade.php
+++ b/resources/views/layouts/shell.blade.php
@@ -5,5 +5,6 @@
 </head>
 <body class="bg-surface-page text-text-base font-sans antialiased">
     {{ $slot }}
+    @fluxScripts
 </body>
 </html>