diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 408202816..5aae42321 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -19,8 +19,9 @@ import PasswordInput from '~/components/forms/PasswordInput.vue'
 
 import Input from '~/components/ui/Input.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Slider from '~/components/ui/Slider.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Header from '~/components/ui/Header.vue'
+import Heading from '~/components/ui/Heading.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 import Textarea from '~/components/ui/Textarea.vue'
@@ -278,9 +279,9 @@ fetchOwnedApps()
     main
     stack
   >
-    <Header
-      page-heading
+    <Heading
       :h1="t('components.auth.Settings.header.accountSettings')"
+      page-heading
     />
     <Layout
       form
@@ -327,20 +328,11 @@ fetchOwnedApps()
           <p v-if="sharedLabels.fields[f.id].help">
             {{ sharedLabels.fields[f.id].help }}
           </p>
-          <select
+          <Slider
             v-if="f.type === 'dropdown'"
-            :id="f.id"
             v-model="f.value"
-            class="ui dropdown"
-          >
-            <option
-              v-for="(c, key) in f.choices"
-              :key="key"
-              :value="c"
-            >
-              {{ sharedLabels.fields[f.id].choices?.[c] }}
-            </option>
-          </select>
+            :options="Object.fromEntries(f.choices.map(c => [c, sharedLabels.fields[f.id].choices?.[c] || c]))"
+          />
         </template>
       </div>
       <Button