diff --git a/web/src/components/settings/SettingsDropdown.svelte b/web/src/components/settings/SettingsDropdown.svelte
index 6133ec35..07d4585a 100644
--- a/web/src/components/settings/SettingsDropdown.svelte
+++ b/web/src/components/settings/SettingsDropdown.svelte
@@ -8,6 +8,7 @@
     import { updateSetting } from "$lib/state/settings";
     import type { CobaltSettings } from "$lib/types/settings";
 
+    import { hapticConfirm, hapticSwitch } from "$lib/haptics";
     import IconSelector from "@tabler/icons-svelte/IconSelector.svelte";
 
     export let title: string;
@@ -22,8 +23,9 @@
     export let disabled = false;
 
     const onChange = (event: Event) => {
-        const target = event.target as HTMLSelectElement;
+        hapticConfirm();
 
+        const target = event.target as HTMLSelectElement;
         updateSetting({
             [settingContext]: {
                 [settingId]: target.value,
@@ -46,13 +48,17 @@
             </div>
         </div>
 
-        <select on:change={e => onChange(e)} {disabled}>
+        <select
+            on:click={() => hapticSwitch()}
+            on:change={(e) => onChange(e)}
+            {disabled}
+        >
             {#each Object.keys(items) as value, i}
                 <option {value} selected={selectedOption === value}>
                     {items[value]}
                 </option>
                 {#if i === 0}
-                    <hr>
+                    <hr />
                 {/if}
             {/each}
         </select>