diff --git a/web-src/src/components/DropdownMenu.vue b/web-src/src/components/ControlDropdown.vue
similarity index 76%
rename from web-src/src/components/DropdownMenu.vue
rename to web-src/src/components/ControlDropdown.vue
index ed28aa1e..aaa3d32c 100644
--- a/web-src/src/components/DropdownMenu.vue
+++ b/web-src/src/components/ControlDropdown.vue
@@ -8,20 +8,20 @@
       <button
         class="button"
         aria-haspopup="true"
-        aria-controls="dropdown-menu"
+        aria-controls="dropdown"
         @click="is_active = !is_active"
       >
         <span v-text="option.name" />
         <mdicon class="icon" name="chevron-down" size="16" />
       </button>
     </div>
-    <div id="dropdown-menu" class="dropdown-menu" role="menu">
+    <div id="dropdown" class="dropdown-menu" role="menu">
       <div class="dropdown-content">
         <a
           v-for="o in options"
           :key="o.id"
           class="dropdown-item"
-          :class="{ 'is-active': modelValue === o.id }"
+          :class="{ 'is-active': value === o.id }"
           @click="select(o)"
           v-text="o.name"
         />
@@ -32,9 +32,9 @@
 
 <script>
 export default {
-  name: 'DropdownMenu',
-  props: ['modelValue', 'options'],
-  emits: ['update:modelValue'],
+  name: 'ControlDropdown',
+  props: ['value', 'options'],
+  emits: ['update:value'],
 
   data() {
     return {
@@ -45,7 +45,7 @@ export default {
   computed: {
     option: {
       get() {
-        return this.options.find((option) => option.id === this.modelValue)
+        return this.options.find((option) => option.id === this.value)
       }
     }
   },
@@ -57,7 +57,7 @@ export default {
 
     select(option) {
       this.is_active = false
-      this.$emit('update:modelValue', option.id)
+      this.$emit('update:value', option.id)
     }
   }
 }
diff --git a/web-src/src/components/NavbarItemOutput.vue b/web-src/src/components/NavbarItemOutput.vue
index ad70e0f5..6917270e 100644
--- a/web-src/src/components/NavbarItemOutput.vue
+++ b/web-src/src/components/NavbarItemOutput.vue
@@ -44,10 +44,11 @@ import webapi from '@/webapi'
 
 export default {
   name: 'NavbarItemOutput',
-  props: ['output'],
   components: {
     ControlSlider
   },
+  props: ['output'],
+
   data() {
     return {
       volume: this.output.selected ? this.output.volume : 0,
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index ed587406..72b0c941 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -40,8 +40,8 @@
           </div>
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.albums.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -63,14 +63,14 @@
 </template>
 
 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
-import IndexButtonList from '@/components/IndexButtonList.vue'
-import ListAlbums from '@/components/ListAlbums.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
-import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import { GroupByList, byName, byYear } from '@/lib/GroupByList'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
+import IndexButtonList from '@/components/IndexButtonList.vue'
+import ListAlbums from '@/components/ListAlbums.vue'
+import TabsMusic from '@/components/TabsMusic.vue'
+import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
@@ -86,10 +86,10 @@ export default {
   name: 'PageAlbums',
   components: {
     ContentWithHeading,
-    TabsMusic,
+    ControlDropdown,
     IndexButtonList,
     ListAlbums,
-    DropdownMenu
+    TabsMusic
   },
 
   beforeRouteEnter(to, from, next) {
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 1141c339..e399688b 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -5,8 +5,8 @@
         <div class="columns">
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -58,9 +58,9 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import { GroupByList, byName, byYear } from '@/lib/GroupByList'
@@ -83,9 +83,9 @@ export default {
   name: 'PageArtist',
   components: {
     ContentWithHeading,
+    ControlDropdown,
     ListAlbums,
     ModalDialogArtist,
-    DropdownMenu
   },
 
   beforeRouteEnter(to, from, next) {
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index d095c75b..d95f8a28 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -6,8 +6,8 @@
         <div class="columns">
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -58,14 +58,14 @@
 </template>
 
 <script>
+import * as types from '@/store/mutation_types'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -85,7 +85,7 @@ export default {
   name: 'PageArtistTracks',
   components: {
     ContentWithHeading,
-    DropdownMenu,
+    ControlDropdown,
     IndexButtonList,
     ListTracks,
     ModalDialogArtist
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index 00f29273..1fe9a97c 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -40,8 +40,8 @@
           </div>
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artists.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -63,14 +63,14 @@
 </template>
 
 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
-import IndexButtonList from '@/components/IndexButtonList.vue'
-import ListArtists from '@/components/ListArtists.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
-import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 import { GroupByList, byName, byYear } from '@/lib/GroupByList'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
+import IndexButtonList from '@/components/IndexButtonList.vue'
+import ListArtists from '@/components/ListArtists.vue'
+import TabsMusic from '@/components/TabsMusic.vue'
+import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
@@ -86,10 +86,10 @@ export default {
   name: 'PageArtists',
   components: {
     ContentWithHeading,
-    TabsMusic,
+    ControlDropdown,
     IndexButtonList,
     ListArtists,
-    DropdownMenu
+    TabsMusic,
   },
 
   beforeRouteEnter(to, from, next) {
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 19f655e2..2bd2e827 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -6,8 +6,8 @@
         <div class="columns">
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -60,14 +60,14 @@
 </template>
 
 <script>
+import * as types from '@/store/mutation_types'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -87,7 +87,7 @@ export default {
   name: 'PageComposerTracks',
   components: {
     ContentWithHeading,
-    DropdownMenu,
+    ControlDropdown,
     IndexButtonList,
     ListTracks,
     ModalDialogComposer
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 07d9a43b..8a51ef26 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -6,8 +6,8 @@
         <div class="columns">
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.genre.sort-by.title')" />
-            <dropdown-menu
-              v-model="selected_groupby_option_id"
+            <control-dropdown
+              v-model:value="selected_groupby_option_id"
               :options="groupby_options"
             />
           </div>
@@ -54,14 +54,14 @@
 </template>
 
 <script>
+import * as types from '@/store/mutation_types'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -81,7 +81,7 @@ export default {
   name: 'PageGenreTracks',
   components: {
     ContentWithHeading,
-    DropdownMenu,
+    ControlDropdown,
     IndexButtonList,
     ListTracks,
     ModalDialogGenre
diff --git a/web-src/src/pages/SettingsPageWebinterface.vue b/web-src/src/pages/SettingsPageWebinterface.vue
index 89d2d281..a549e30a 100644
--- a/web-src/src/pages/SettingsPageWebinterface.vue
+++ b/web-src/src/pages/SettingsPageWebinterface.vue
@@ -6,7 +6,7 @@
         <div class="title is-4" v-text="$t('page.settings.general.language')" />
       </template>
       <template #content>
-        <dropdown-menu v-model="locale" :options="locales" />
+        <control-dropdown v-model:value="locale" :options="locales" />
       </template>
     </content-with-heading>
     <content-with-heading>
@@ -179,21 +179,21 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsSettings from '@/components/TabsSettings.vue'
+import ControlDropdown from '@/components/ControlDropdown.vue'
 import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
-import SettingsTextfield from '@/components/SettingsTextfield.vue'
 import SettingsIntfield from '@/components/SettingsIntfield.vue'
-import DropdownMenu from '@/components/DropdownMenu.vue'
+import SettingsTextfield from '@/components/SettingsTextfield.vue'
+import TabsSettings from '@/components/TabsSettings.vue'
 
 export default {
   name: 'SettingsPageWebinterface',
   components: {
     ContentWithHeading,
-    TabsSettings,
+    ControlDropdown,
     SettingsCheckbox,
-    SettingsTextfield,
     SettingsIntfield,
-    DropdownMenu
+    SettingsTextfield,
+    TabsSettings,
   },
 
   computed: {
@@ -207,7 +207,7 @@ export default {
 
     locale: {
       get() {
-        let languages = this.$i18n.availableLocales
+        const languages = this.$i18n.availableLocales
         let locale = languages.find((lang) => lang === this.$i18n.locale)
         let partial = this.$i18n.locale.split('-')[0]
         if (!locale) {
diff --git a/web-src/src/templates/ContentWithHeading.vue b/web-src/src/templates/ContentWithHeading.vue
index e7eda5eb..79abde98 100644
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@@ -60,7 +60,7 @@ export default {
   },
 
   mounted() {
-    if (this.$slots['options']) {
+    if (this.$slots.options) {
       this.observer = new IntersectionObserver(this.onElementObserved, {
         rootMargin: '-82px 0px 0px 0px',
         threshold: 1.0