diff --git a/web-src/src/components/ControlSwitch.vue b/web-src/src/components/ControlSwitch.vue
new file mode 100644
index 00000000..fb646eed
--- /dev/null
+++ b/web-src/src/components/ControlSwitch.vue
@@ -0,0 +1,70 @@
+<template>
+  <label class="toggle">
+    <input
+      :checked="modelValue"
+      type="checkbox"
+      class="toggle-checkbox is-rounded mr-2"
+      @change="$emit('update:modelValue', !modelValue)"
+    />
+    <div class="toggle-switch"></div>
+    <slot name="label" class="toggle-label" />
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'ControlSwitch',
+  props: {
+    modelValue: Boolean
+  },
+  emits: ['update:modelValue']
+}
+</script>
+
+<style scoped>
+.toggle {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.toggle-switch {
+  display: inline-block;
+  background: var(--bulma-grey-light);
+  border-radius: 1rem;
+  width: 2.75rem;
+  height: 1.5rem;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+  margin-right: 0.5rem;
+}
+.toggle-switch:before,
+.toggle-switch:after {
+  content: '';
+}
+.toggle-switch:before {
+  display: block;
+  background: var(--bulma-white);
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  transition: left 0.25s;
+}
+.toggle:hover .toggle-switch:before {
+  background: var(--bulma-white);
+}
+.toggle-checkbox:checked + .toggle-switch {
+  background: var(--bulma-primary);
+}
+.toggle-checkbox:checked + .toggle-switch:before {
+  left: 1.5rem;
+}
+
+.toggle-checkbox {
+  position: absolute;
+  visibility: hidden;
+}
+</style>
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 1e4ae3a4..98f3e6c0 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -9,7 +9,7 @@
               :url="item.artwork_url"
               :artist="item.artist"
               :album="item.name"
-              class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
+              class="fd-has-shadow fd-cover fd-cover-normal-image"
             />
             <p class="title is-4">
               <a class="has-text-link" @click="open" v-text="item.name" />
@@ -184,5 +184,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index b6e3d8fb..cef0c50a 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -86,5 +86,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index b8f7c026..0090ebe8 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -87,13 +87,12 @@
               </p>
               <p>
                 <span class="heading" v-text="$t('dialog.track.type')" />
-                <span class="title is-6">
-                  <span
-                    v-text="
-                      `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-                    "
-                  />
-                </span>
+                <span
+                  class="title is-6"
+                  v-text="
+                    `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+                  "
+                />
               </p>
               <p v-if="item.samplerate">
                 <span class="heading" v-text="$t('dialog.track.quality')" />
@@ -296,5 +295,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogUpdate.vue b/web-src/src/components/ModalDialogUpdate.vue
index 1d6ea7d2..51cfc3e6 100644
--- a/web-src/src/components/ModalDialogUpdate.vue
+++ b/web-src/src/components/ModalDialogUpdate.vue
@@ -2,18 +2,18 @@
   <modal-dialog
     :show="show"
     :title="$t('dialog.update.title')"
-    :ok_action="library.updating ? '' : $t('dialog.update.rescan')"
+    :ok_action="libraryStore.updating ? '' : $t('dialog.update.rescan')"
     :close_action="$t('dialog.update.cancel')"
     @ok="update_library"
     @close="close()"
   >
     <template #modal-content>
-      <div v-if="!library.updating">
+      <div v-if="!libraryStore.updating">
         <p class="mb-3" v-text="$t('dialog.update.info')" />
         <div v-if="spotify_enabled || rss.tracks > 0" class="field">
           <div class="control">
             <div class="select is-small">
-              <select v-model="update_dialog_scan_kind">
+              <select v-model="libraryStore.update_dialog_scan_kind">
                 <option value="" v-text="$t('dialog.update.all')" />
                 <option value="files" v-text="$t('dialog.update.local')" />
                 <option
@@ -31,13 +31,11 @@
           </div>
         </div>
         <div class="field">
-          <input
-            id="rescan"
-            v-model="rescan_metadata"
-            type="checkbox"
-            class="switch is-rounded is-small"
-          />
-          <label for="rescan" v-text="$t('dialog.update.rescan-metadata')" />
+          <control-switch v-model="rescan_metadata">
+            <template #label>
+              <span v-text="$t('dialog.update.rescan-metadata')" />
+            </template>
+          </control-switch>
         </div>
       </div>
       <div v-else>
@@ -48,6 +46,7 @@
 </template>
 
 <script>
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import { useLibraryStore } from '@/stores/library'
 import { useServicesStore } from '@/stores/services'
@@ -55,7 +54,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogUpdate',
-  components: { ModalDialog },
+  components: { ControlSwitch, ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
 
@@ -73,42 +72,26 @@ export default {
   },
 
   computed: {
-    library() {
-      return this.libraryStore.$state
-    },
-
     rss() {
       return this.libraryStore.rss
     },
-
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
-    },
-
-    update_dialog_scan_kind: {
-      get() {
-        return this.library.update_dialog_scan_kind
-      },
-      set(value) {
-        this.library.update_dialog_scan_kind = value
-      }
     }
   },
 
   methods: {
     close() {
-      this.update_dialog_scan_kind = ''
+      this.libraryStore.update_dialog_scan_kind = ''
       this.$emit('close')
     },
     update_library() {
       if (this.rescan_metadata) {
-        webapi.library_rescan(this.update_dialog_scan_kind)
+        webapi.library_rescan(this.libraryStore.update_dialog_scan_kind)
       } else {
-        webapi.library_update(this.update_dialog_scan_kind)
+        webapi.library_update(this.libraryStore.update_dialog_scan_kind)
       }
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/SettingsCheckbox.vue b/web-src/src/components/SettingsCheckbox.vue
index 6211e7b6..1b885a6b 100644
--- a/web-src/src/components/SettingsCheckbox.vue
+++ b/web-src/src/components/SettingsCheckbox.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="field">
-    <input
+    <control-switch
       :id="setting.name"
       v-model="setting.value"
-      type="checkbox"
-      class="switch is-rounded mr-2"
-      @change="update_setting"
-    />
-    <label class="pt-0" :for="setting.name">
-      <slot name="label" />
-    </label>
+      @update:model-value="update_setting"
+    >
+      <template #label>
+        <slot name="label" />
+      </template>
+    </control-switch>
     <i
       class="is-size-7"
       :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
@@ -22,11 +21,13 @@
 </template>
 
 <script>
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
   name: 'SettingsCheckbox',
+  components: { ControlSwitch },
   props: {
     category: { required: true, type: String },
     name: { required: true, type: String }
@@ -104,5 +105,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 5e665cd1..10820cd0 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -1,176 +1,7 @@
 @charset "utf-8";
 
-@import 'bulma/bulma.sass';
-@import 'bulma-switch';
-
-@media (prefers-color-scheme: dark) {
-  body,
-  html,
-  .content table th,
-  td,
-  .fd-tabs-section {
-    background-color: $black-ter !important;
-    color: $grey-light;
-  }
-  .tabs ul {
-    border-bottom-color: $grey-dark;
-  }
-  .tabs a:hover {
-    border-bottom-color: $grey-lighter;
-    color: $grey-lighter !important;
-  }
-  a:hover,
-  a.has-text-dark:hover,
-  a.has-text-dark:focus {
-    color: $grey-lighter !important;
-  }
-  .media + .media {
-    border-top-color: $grey-dark !important;
-  }
-  .tabs a {
-    border-bottom-color: $grey-dark;
-  }
-  .tabs a,
-  .hero.is-light .title,
-  .title,
-  .subtitle,
-  .navbar.is-light .navbar-brand > .navbar-item,
-  .navbar-item,
-  .navbar.is-white .navbar-brand a.navbar-item,
-  .navbar.is-dark .navbar-brand .navbar-item,
-  .navbar.is-light .navbar-burger {
-    color: $grey-light;
-  }
-  .navbar-item.has-dropdown-up .navbar-dropdown {
-    border-bottom-color: $grey-dark;
-  }
-  .navbar-dropdown {
-    background-color: $grey-darker;
-    border-top-color: $grey-dark;
-  }
-  a.tag:hover,
-  a.tag.is-delete:hover,
-  a.dropdown-item:hover,
-  a.dropdown-item:focus,
-  a.navbar-item:hover,
-  a.navbar-item:focus,
-  a.navbar-item:active,
-  .button:hover,
-  .button.is-white:focus,
-  .button.is-white:hover,
-  .button.is-dark:hover,
-  .button.is-light:hover,
-  hr,
-  .navbar-burger:hover,
-  .navbar.is-white .navbar-brand > a.navbar-item:hover,
-  .navbar.is-light .navbar-brand > a.navbar-item:focus,
-  .navbar.is-light .navbar-brand > a.navbar-item:hover,
-  .navbar.is-dark .navbar-brand > a.navbar-item:focus,
-  .navbar.is-dark .navbar-brand > a.navbar-item:hover,
-  .navbar-dropdown a.navbar-item:hover,
-  .navbar-dropdown a.navbar-item:focus,
-  .modal-content .input,
-  .modal-content select,
-  .tabs.is-toggle a:hover {
-    background-color: $grey-dark;
-    color: $grey-lighter;
-  }
-  .card-footer .has-text-dark,
-  .media .has-text-dark {
-    color: $grey-light !important;
-  }
-  .navbar-menu,
-  .navbar-brand,
-  .notification,
-  .card {
-    background-color: $grey-darker;
-    color: $grey-light;
-  }
-  a.tag,
-  .button,
-  .button:active,
-  .button:focus,
-  .dropdown-content,
-  .dropdown-item,
-  .input,
-  .input .switch {
-    background-color: $grey-darker;
-    border-width: 0;
-    color: $grey-lighter;
-  }
-  .input::placeholder,
-  .control.has-icons-left .icon {
-    color: $grey;
-  }
-  .label,
-  .tabs a:hover,
-  .control.has-icons-left .input:focus ~ .icon {
-    color: $grey-lighter;
-  }
-  .tabs.is-toggle a:hover,
-  .navbar-item .buttons .button,
-  .modal-content select,
-  .modal-content select:hover {
-    border-color: $grey-dark;
-    border-width: 1px;
-  }
-  .tabs.is-toggle a {
-    background-color: $grey-darker;
-    border-color: $grey-darker;
-  }
-  .button.is-light,
-  .button.is-dark,
-  .button.is-white,
-  .button[disabled],
-  .button[disabled]:hover {
-    background-color: $grey-darker;
-    color: $grey-light;
-  }
-  .has-text-grey-light,
-  a.has-text-grey-light:hover {
-    color: $grey !important;
-  }
-  .table,
-  code {
-    background: transparent;
-  }
-  .card-footer {
-    border-top-color: $grey-dark;
-  }
-  .card-footer-item:not(:last-child) {
-    border-right-color: $grey-dark;
-  }
-  .hero.is-light.is-bold {
-    background-image: linear-gradient(
-      141deg,
-      $black-ter 0%,
-      $grey-darker 71%,
-      $grey-dark
-    );
-  }
-}
-
-/* Lyrics animation */
-@keyframes pop-color {
-  0% {
-    color: $black;
-  }
-  100% {
-    color: $success;
-  }
-}
-
-.media.with-progress h2:last-of-type {
-  margin-bottom: 6px;
-}
-
-.media.with-progress {
-  margin-top: 6px;
-}
-
-a.navbar-item {
-  padding: 0 1rem;
-}
+@import 'bulma/bulma';
+@import 'bulma/sass/utilities/mixins';
 
 .fd-is-not-allowed {
   cursor: not-allowed;
@@ -180,13 +11,6 @@ a.navbar-item {
   cursor: move;
 }
 
-.fd-is-square .button {
-  height: 27px;
-  min-width: 27px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .fd-is-text-clipped {
   white-space: nowrap;
   overflow: hidden;
@@ -196,8 +20,7 @@ a.navbar-item {
 .fd-tabs-section {
   padding-bottom: 0;
   padding-top: 0;
-  background: $white;
-  top: $navbar-height;
+  background: var(--bulma-body-background-color);
   z-index: 20;
   position: fixed;
   width: 100%;
@@ -205,16 +28,12 @@ a.navbar-item {
 
 .fd-has-shadow img {
   box-shadow:
-    0 4px 8px 0 rgba(0, 0, 0, 0.2),
-    0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-.fd-page-with-tabs {
-  margin-top: $navbar-height !important;
+    0 0.25rem 0.5rem 0 var(--bulma-background-active),
+    0 0.375rem 1.25rem 0 var(--bulma-background-active);
 }
 
 .is-full-height {
-  min-height: calc(100vh - calc(2 * $navbar-height));
+  min-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
 }
 
 .is-disabled {
@@ -233,23 +52,23 @@ a.navbar-item {
     width: 4rem;
     height: 4rem;
     img {
-      border-radius: $radius-small;
+      border-radius: var(--bulma-radius-small);
       max-width: 4rem;
       max-height: 4rem;
     }
   }
   &-medium-image {
-    @include from($tablet) {
+    @include tablet {
       justify-content: right;
     }
     img {
-      border-radius: $radius;
+      border-radius: var(--bulma-radius);
       max-height: calc(150px - 1.5rem);
     }
   }
   &-normal-image {
     img {
-      border-radius: $radius-large;
+      border-radius: var(--bulma-radius-large);
       width: 100%;
     }
   }
@@ -262,7 +81,7 @@ a.navbar-item {
       }
     }
     img {
-      border-radius: $radius-large;
+      border-radius: var(--bulma-radius-large);
       max-height: calc(100vh - 26rem);
     }
     &.is-masked {
@@ -271,14 +90,6 @@ a.navbar-item {
   }
 }
 
-.sortable-chosen .media-right {
-  visibility: hidden;
-}
-.sortable-ghost h1,
-.sortable-ghost h2 {
-  color: $danger;
-}
-
 .media:first-of-type {
   padding-top: 1rem;
 }
@@ -299,35 +110,20 @@ a.navbar-item {
   opacity: 1;
 }
 
-/* Add a little bit of spacing between title and subtitle */
-.title:not(.is-spaced) + .subtitle + .subtitle {
-  margin-top: -1.3rem !important;
-}
-
 /* Only scroll content if modal contains a card component */
 .modal-content .card-content {
   max-height: calc(100vh - 200px);
   overflow: auto;
 }
 
-.fd-width-auto {
-  min-width: auto;
-}
-
 /* Show scrollbar for navbar menu in desktop mode if content exceeds the screen size */
 @include desktop {
   .navbar-dropdown {
-    max-height: calc(100vh - calc(2 * $navbar-height) - 2rem);
+    max-height: calc(100vh - calc(2 * var(--bulma-navbar-height)) - 2rem);
     overflow: auto;
   }
 }
 
-/* Limit the size of the bottom navbar menu to not be displayed behind the Safari browser menu on iOS */
-.fd-bottom-navbar .navbar-menu {
-  max-height: calc(100vh - calc(2 * $navbar-height) - 1rem);
-  overflow: scroll;
-}
-
 .buttons {
   @include mobile {
     &.fd-is-centered-mobile {
@@ -342,12 +138,20 @@ a.navbar-item {
   }
 }
 
+.heading {
+  display: block;
+  font-size: 0.75rem;
+  letter-spacing: 1px;
+  margin-bottom: 0px !important;
+  text-transform: uppercase;
+}
+
 .column {
   &.fd-has-cover {
     @include mobile {
       margin: auto;
     }
-    @include from($tablet) {
+    @include tablet {
       margin-right: 0;
     }
   }
@@ -364,6 +168,17 @@ a.navbar-item {
   padding: 1.5rem !important;
 }
 
+.dropdown-menu {
+  @include mobile {
+    width: 100vw;
+  }
+}
+
+.dropdown-content {
+  max-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
+  overflow: auto;
+}
+
 /* Slider */
 @mixin thumb {
   -webkit-appearance: none;
@@ -371,43 +186,51 @@ a.navbar-item {
   height: var(--th);
   box-sizing: border-box;
   border-radius: 50%;
-  background: $light;
-  border: 1px solid $grey-light;
+  background: var(--bulma-light);
+  border: 1px solid var(--bulma-grey-light);
   @media (prefers-color-scheme: dark) {
-    background: $grey-light;
-    border: 1px solid $grey-dark;
+    background: var(--bulma-grey-light);
+    border: 1px solid var(--bulma-grey-dark);
   }
 }
 
 @mixin thumb-inactive {
   box-sizing: border-box;
-  background-color: $light;
+  background-color: var(--bulma-light);
   @media (prefers-color-scheme: dark) {
-    background-color: $grey-dark;
-    border: 1px solid $grey-darker;
+    background-color: var(--bulma-grey-dark);
+    border: 1px solid var(--bulma-grey-darker);
   }
 }
 
 @mixin track {
   height: calc(var(--sh));
   border-radius: calc(var(--sh) / 2);
-  background: linear-gradient(90deg, $dark var(--sx), $grey-light var(--sx));
+  background: linear-gradient(
+    90deg,
+    var(--bulma-dark) var(--sx),
+    var(--bulma-grey-light) var(--sx)
+  );
   @media (prefers-color-scheme: dark) {
     background: linear-gradient(
       90deg,
-      $grey-light var(--sx),
-      $grey-dark var(--sx)
+      var(--bulma-grey-light) var(--sx),
+      var(--bulma-grey-dark) var(--sx)
     );
   }
 }
 
 @mixin track-inactive {
-  background: linear-gradient(90deg, $grey-light var(--sx), $light var(--sx));
+  background: linear-gradient(
+    90deg,
+    var(--bulma-grey-light) var(--sx),
+    var(--bulma-light) var(--sx)
+  );
   @media (prefers-color-scheme: dark) {
     background: linear-gradient(
       90deg,
-      $grey-dark var(--sx),
-      $black-ter var(--sx)
+      var(--bulma-grey-dark) var(--sx),
+      var(--bulma-black-ter) var(--sx)
     );
   }
 }
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index d7378630..91926cfc 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -1,47 +1,33 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #options>
         <index-button-list :indices="albums.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.albums.filter')" />
+            <p class="heading" v-text="$t('page.albums.filter')" />
             <div class="field">
-              <div class="control">
-                <input
-                  id="switchHideSingles"
-                  v-model="hide_singles"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSingles"
-                  v-text="$t('page.albums.hide-singles')"
-                />
-              </div>
+              <control-switch v-model="uiStore.hide_singles">
+                <template #label>
+                  <span v-text="$t('page.albums.hide-singles')" />
+                </template>
+              </control-switch>
               <p class="help" v-text="$t('page.albums.hide-singles-help')" />
             </div>
             <div v-if="spotify_enabled" class="field">
-              <div class="control">
-                <input
-                  id="switchHideSpotify"
-                  v-model="hide_spotify"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSpotify"
-                  v-text="$t('page.albums.hide-spotify')"
-                />
-              </div>
+              <control-switch v-model="uiStore.hide_spotify">
+                <template #label>
+                  <span v-text="$t('page.albums.hide-spotify')" />
+                </template>
+              </control-switch>
               <p class="help" v-text="$t('page.albums.hide-spotify-help')" />
             </div>
           </div>
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.albums.sort.title')" />
+            <p class="heading" v-text="$t('page.albums.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.albums_sort"
               :options="groupings"
             />
           </div>
@@ -54,7 +40,6 @@
           v-text="$t('page.albums.count', { count: albums.count })"
         />
       </template>
-      <template #heading-right />
       <template #content>
         <list-albums :items="albums" />
       </template>
@@ -65,6 +50,7 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
@@ -88,6 +74,7 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
+    ControlSwitch,
     IndexButtonList,
     ListAlbums,
     TabsMusic
@@ -157,43 +144,17 @@ export default {
   computed: {
     albums() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.albums_sort
       )
       options.filters = [
-        (album) => !this.hide_singles || album.track_count > 2,
-        (album) => !this.hide_spotify || album.data_kind !== 'spotify'
+        (album) => !this.uiStore.hide_singles || album.track_count > 2,
+        (album) => !this.uiStore.hide_spotify || album.data_kind !== 'spotify'
       ]
       return this.albums_list.group(options)
     },
-    hide_singles: {
-      get() {
-        return this.uiStore.hide_singles
-      },
-      set(value) {
-        this.uiStore.hide_singles = value
-      }
-    },
-    hide_spotify: {
-      get() {
-        return this.uiStore.hide_spotify
-      },
-      set(value) {
-        this.uiStore.hide_spotify = value
-      }
-    },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.albums_sort
-      },
-      set(value) {
-        this.uiStore.albums_sort = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index e370abe8..da3607b9 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -4,27 +4,20 @@
       <template #options>
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.filter')" />
+            <p class="heading" v-text="$t('page.artist.filter')" />
             <div v-if="spotify_enabled" class="field">
-              <div class="control">
-                <input
-                  id="switchHideSpotify"
-                  v-model="hide_spotify"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSpotify"
-                  v-text="$t('page.artist.hide-spotify')"
-                />
-              </div>
+              <control-switch v-model="uiStore.hide_spotify">
+                <template #label>
+                  <span v-text="$t('page.artist.hide-spotify')" />
+                </template>
+              </control-switch>
               <p class="help" v-text="$t('page.artist.hide-spotify-help')" />
             </div>
           </div>
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
+            <p class="heading" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.artist_albums_sort"
               :options="groupings"
             />
           </div>
@@ -73,6 +66,7 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
@@ -99,6 +93,7 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
+    ControlSwitch,
     ListAlbums,
     ModalDialogArtist
   },
@@ -136,29 +131,13 @@ export default {
   computed: {
     albums() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.artist_albums_sort
       )
       options.filters = [
-        (album) => !this.hide_spotify || album.data_kind !== 'spotify'
+        (album) => !this.uiStore.hide_spotify || album.data_kind !== 'spotify'
       ]
       return this.albums_list.group(options)
     },
-    hide_spotify: {
-      get() {
-        return this.uiStore.hide_spotify
-      },
-      set(value) {
-        this.uiStore.hide_spotify = value
-      }
-    },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.artist_albums_sort
-      },
-      set(value) {
-        this.uiStore.artist_albums_sort = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     },
@@ -187,5 +166,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index 48fb5fb4..e4b900d3 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -5,27 +5,20 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.filter')" />
+            <p class="heading" v-text="$t('page.artist.filter')" />
             <div v-if="spotify_enabled" class="field">
-              <div class="control">
-                <input
-                  id="switchHideSpotify"
-                  v-model="hide_spotify"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSpotify"
-                  v-text="$t('page.artist.hide-spotify')"
-                />
-              </div>
+              <control-switch v-model="uiStore.hide_spotify">
+                <template #label>
+                  <span v-text="$t('page.artist.hide-spotify')" />
+                </template>
+              </control-switch>
               <p class="help" v-text="$t('page.artist.hide-spotify-help')" />
             </div>
           </div>
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
+            <p class="heading" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.artist_tracks_sort"
               :options="groupings"
             />
           </div>
@@ -74,6 +67,7 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
@@ -101,6 +95,7 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
+    ControlSwitch,
     IndexButtonList,
     ListTracks,
     ModalDialogArtist
@@ -147,22 +142,6 @@ export default {
           .map((track) => track.item.album_id)
       ).size
     },
-    hide_spotify: {
-      get() {
-        return this.uiStore.hide_spotify
-      },
-      set(value) {
-        this.uiStore.hide_spotify = value
-      }
-    },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.artist_tracks_sort
-      },
-      set(value) {
-        this.uiStore.artist_tracks_sort = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     },
@@ -171,10 +150,10 @@ export default {
     },
     tracks() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.artist_tracks_sort
       )
       options.filters = [
-        (track) => !this.hide_spotify || track.data_kind !== 'spotify'
+        (track) => !this.uiStore.hide_spotify || track.data_kind !== 'spotify'
       ]
       return this.tracks_list.group(options)
     }
@@ -197,5 +176,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index a9151226..3486c792 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -1,47 +1,33 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #options>
         <index-button-list :indices="artists.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artists.filter')" />
+            <p class="heading" v-text="$t('page.artists.filter')" />
             <div class="field">
-              <div class="control">
-                <input
-                  id="switchHideSingles"
-                  v-model="hide_singles"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSingles"
-                  v-text="$t('page.artists.hide-singles')"
-                />
-              </div>
+              <control-switch v-model="uiStore.hide_singles">
+                <template #label>
+                  <span v-text="$t('page.artists.hide-singles')" />
+                </template>
+              </control-switch>
               <p class="help" v-text="$t('page.artists.hide-singles-help')" />
             </div>
             <div v-if="spotify_enabled" class="field">
-              <div class="control">
-                <input
-                  id="switchHideSpotify"
-                  v-model="hide_spotify"
-                  type="checkbox"
-                  class="switch is-rounded"
-                />
-                <label
-                  for="switchHideSpotify"
-                  v-text="$t('page.artists.hide-spotify')"
-                />
-              </div>
+              <control-switch v-model="uiStore.hide_spotify">
+                <template #label>
+                  <span v-text="$t('page.artists.hide-spotify')" />
+                </template>
+              </control-switch>
               <p class="help" v-text="$t('page.artists.hide-spotify-help')" />
             </div>
           </div>
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artists.sort.title')" />
+            <p class="heading" v-text="$t('page.artists.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.artists_sort"
               :options="groupings"
             />
           </div>
@@ -54,7 +40,6 @@
           v-text="$t('page.artists.count', { count: artists.count })"
         />
       </template>
-      <template #heading-right />
       <template #content>
         <list-artists :items="artists" />
       </template>
@@ -65,6 +50,7 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
@@ -88,6 +74,7 @@ export default {
   components: {
     ContentWithHeading,
     ControlDropdown,
+    ControlSwitch,
     IndexButtonList,
     ListArtists,
     TabsMusic
@@ -125,47 +112,21 @@ export default {
   },
 
   computed: {
-    // Wraps GroupedList and updates it if filter or sort changes
     artists() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.artists_sort
       )
       options.filters = [
         (artist) =>
-          !this.hide_singles || artist.track_count > artist.album_count * 2,
-        (artist) => !this.hide_spotify || artist.data_kind !== 'spotify'
+          !this.uiStore.hide_singles ||
+          artist.track_count > artist.album_count * 2,
+        (artist) => !this.uiStore.hide_spotify || artist.data_kind !== 'spotify'
       ]
       return this.artists_list.group(options)
     },
-    hide_singles: {
-      get() {
-        return this.uiStore.hide_singles
-      },
-      set(value) {
-        this.uiStore.hide_singles = value
-      }
-    },
-    hide_spotify: {
-      get() {
-        return this.uiStore.hide_spotify
-      },
-      set(value) {
-        this.uiStore.hide_spotify = value
-      }
-    },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.artists_sort
-      },
-      set(value) {
-        this.uiStore.artists_sort = value
-      }
-    },
     spotify_enabled() {
       return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue
index 728dfc34..3ce11697 100644
--- a/web-src/src/pages/PageAudiobooksArtist.vue
+++ b/web-src/src/pages/PageAudiobooksArtist.vue
@@ -87,5 +87,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue
index 71fb5e91..d2308a0a 100644
--- a/web-src/src/pages/PageComposerAlbums.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -104,5 +104,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index e7c84858..383e4d80 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -5,9 +5,9 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
+            <p class="heading" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.composer_tracks_sort"
               :options="groupings"
             />
           </div>
@@ -130,17 +130,9 @@ export default {
     expression() {
       return `composer is "${this.composer.name}" and media_kind is music`
     },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.composer_tracks_sort
-      },
-      set(value) {
-        this.uiStore.composer_tracks_sort = value
-      }
-    },
     tracks() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.composer_tracks_sort
       )
       return this.tracks_list.group(options)
     }
@@ -160,5 +152,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index c127e17a..7e6d6584 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -5,9 +5,9 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading mb-5" v-text="$t('page.genre.sort.title')" />
+            <p class="heading" v-text="$t('page.genre.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_id"
+              v-model:value="uiStore.genre_tracks_sort"
               :options="groupings"
             />
           </div>
@@ -126,17 +126,9 @@ export default {
     expression() {
       return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
     },
-    selected_grouping_id: {
-      get() {
-        return this.uiStore.genre_tracks_sort
-      },
-      set(value) {
-        this.uiStore.genre_tracks_sort = value
-      }
-    },
     tracks() {
       const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.selected_grouping_id
+        (grouping) => grouping.id === this.uiStore.genre_tracks_sort
       )
       return this.tracks_list.group(options)
     }
@@ -157,5 +149,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSettingsRemotesOutputs.vue b/web-src/src/pages/PageSettingsRemotesOutputs.vue
index 185752ee..f73ee260 100644
--- a/web-src/src/pages/PageSettingsRemotesOutputs.vue
+++ b/web-src/src/pages/PageSettingsRemotesOutputs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
@@ -51,16 +51,15 @@
         />
         <div v-for="output in outputs" :key="output.id">
           <div class="field">
-            <div class="control">
-              <input
-                :id="output.id"
-                v-model="output.selected"
-                type="checkbox"
-                class="switch is-rounded mr-2"
-                @change="output_toggle(output.id)"
-              />
-              <label :for="output.id" class="checkbox" v-text="output.name" />
-            </div>
+            <control-switch
+              :id="output.id"
+              v-model="output.selected"
+              @update:model-value="toggleOutput(output.id)"
+            >
+              <template #label>
+                <span v-text="output.name" />
+              </template>
+            </control-switch>
           </div>
           <form
             v-if="output.needs_auth_key"
@@ -94,6 +93,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlSwitch from '@/components/ControlSwitch.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
 import { useOutputsStore } from '@/stores/outputs'
 import { useRemotesStore } from '@/stores/remotes'
@@ -101,7 +101,7 @@ import webapi from '@/webapi'
 
 export default {
   name: 'PageSettingsRemotesOutputs',
-  components: { ContentWithHeading, TabsSettings },
+  components: { ContentWithHeading, ControlSwitch, TabsSettings },
 
   setup() {
     return { outputsStore: useOutputsStore(), remotesStore: useRemotesStore() }
@@ -127,14 +127,12 @@ export default {
     kickoff_pairing() {
       webapi.pairing_kickoff(this.pairing_req)
     },
-    kickoff_verification(outputId) {
-      webapi.output_update(outputId, this.verification_req)
+    kickoff_verification(identifier) {
+      webapi.output_update(identifier, this.verification_req)
     },
-    output_toggle(outputId) {
-      webapi.output_toggle(outputId)
+    toggleOutput(identifier) {
+      webapi.output_toggle(identifier)
     }
   }
 }
 </script>
-
-<style></style>