diff --git a/frontend/src/components/Buttons/FilterButton.vue b/frontend/src/components/Buttons/FilterButton.vue
index 0576951ed44..c3559f0b1f2 100644
--- a/frontend/src/components/Buttons/FilterButton.vue
+++ b/frontend/src/components/Buttons/FilterButton.vue
@@ -1,54 +1,44 @@
 <template>
-  <v-menu :offset-y="true" :close-on-content-click="false" max-width="250px">
-    <template #activator="{ on, attrs }">
+  <v-menu :close-on-content-click="false" max-width="250px">
+    <template #activator="{ props: menuProps }">
       <v-btn
         v-if="!$vuetify.display.smAndDown"
-        :disabled="disabled"
         class="ma-2"
         variant="text"
         rounded
-        v-bind="attrs"
-        v-on="on">
+        v-bind="mergeProps(menuProps, props)">
         {{ $t('filter') }}
         <v-icon end>
           <i-mdi-menu-down />
         </v-icon>
       </v-btn>
-      <v-btn
-        v-else
-        :disabled="disabled"
-        class="my-2"
-        icon
-        v-bind="attrs"
-        v-on="on">
+      <v-btn v-else class="my-2" icon v-bind="mergeProps(menuProps, props)">
         <v-icon>
           <i-mdi-filter-variant />
         </v-icon>
       </v-btn>
     </template>
-    <v-expansion-panels accordion flat focusable class="dropdown">
+    <v-expansion-panels variant="accordion" class="dropdown">
       <v-expansion-panel :title="$t('status')">
-        <v-list dense class="filter-content">
-          <v-list-group
-            v-model="selectedStatusFilters"
-            multiple
-            @change="emitFilterChange">
+        <v-expansion-panel-text>
+          <v-list
+            v-model:selected="selectedStatusFilters"
+            select-strategy="leaf"
+            class="filter-content"
+            @update:selected="emitFilterChange">
             <template
               v-for="(status, statusIndex) in statusFilters"
               :key="`status-${statusIndex}`">
-              <v-list-item :value="status.name">
-                <template #default="{ active }">
-                  <v-list-item-title>
-                    {{ status.label }}
-                  </v-list-item-title>
-                  <v-list-item-action>
-                    <v-checkbox :model-value="active" />
+              <v-list-item :value="status.name" :title="status.label">
+                <template #append="{ isActive }">
+                  <v-list-item-action end>
+                    <v-checkbox-btn :model-value="isActive" />
                   </v-list-item-action>
                 </template>
               </v-list-item>
             </template>
-          </v-list-group>
-        </v-list>
+          </v-list>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel
         v-if="
@@ -56,75 +46,69 @@
           collectionInfo.CollectionType === 'tvshows'
         "
         :title="$t('features')">
-        <v-list dense class="filter-content">
-          <v-list-group
-            v-model="selectedFeatureFilters"
-            multiple
-            @change="emitFilterChange">
+        <v-expansion-panel-text>
+          <v-list
+            v-model:selected="selectedFeatureFilters"
+            select-strategy="leaf"
+            class="filter-content"
+            @update:selected="emitFilterChange">
             <template
               v-for="(feature, featureIndex) in featureFilters"
               :key="`feature-${featureIndex}`">
-              <v-list-item :value="feature.name">
-                <template #default="{ active }">
-                  <v-list-item-title>
-                    {{ feature.label }}
-                  </v-list-item-title>
-                  <v-list-item-action>
-                    <v-checkbox :model-value="active" />
+              <v-list-item :value="feature.name" :title="feature.label">
+                <template #append="{ isActive }">
+                  <v-list-item-action end>
+                    <v-checkbox-btn :model-value="isActive" />
                   </v-list-item-action>
                 </template>
               </v-list-item>
             </template>
-          </v-list-group>
-        </v-list>
+          </v-list>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel v-if="genreFilters.length > 0" :title="$t('genres')">
-        <v-list dense class="filter-content">
-          <v-list-group
-            v-model="selectedGenreFilters"
-            multiple
-            @change="emitFilterChange">
+        <v-expansion-panel-text>
+          <v-list
+            v-model:selected="selectedGenreFilters"
+            select-strategy="leaf"
+            class="filter-content"
+            @update:selected="emitFilterChange">
             <template
               v-for="(genre, genreIndex) in genreFilters"
               :key="`genre-${genreIndex}`">
-              <v-list-item :value="genre">
-                <template #default="{ active }">
-                  <v-list-item-title>
-                    {{ genre }}
-                  </v-list-item-title>
+              <v-list-item :value="genre" :title="genre">
+                <template #append="{ isActive }">
                   <v-list-item-action>
-                    <v-checkbox :model-value="active" />
+                    <v-checkbox-btn :model-value="isActive" />
                   </v-list-item-action>
                 </template>
               </v-list-item>
             </template>
-          </v-list-group>
-        </v-list>
+          </v-list>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel
         v-if="ratingFilters.length > 0"
         :title="$t('parentalRatings')">
-        <v-list dense class="filter-content">
-          <v-list-group
-            v-model="selectedRatingFilters"
-            multiple
-            @change="emitFilterChange">
+        <v-expansion-panel-text>
+          <v-list
+            v-model:selected="selectedRatingFilters"
+            select-strategy="leaf"
+            class="filter-content"
+            @update:selected="emitFilterChange">
             <template
               v-for="(rating, ratingIndex) in ratingFilters"
               :key="`rating-${ratingIndex}`">
-              <v-list-item :value="rating">
-                <template #default="{ active }">
-                  <v-list-item-title>
-                    {{ rating }}
-                  </v-list-item-title>
+              <v-list-item :value="rating" :title="rating">
+                <template #append="{ isActive }">
                   <v-list-item-action>
-                    <v-checkbox :model-value="active" />
+                    <v-checkbox-btn :model-value="isActive" />
                   </v-list-item-action>
                 </template>
               </v-list-item>
             </template>
-          </v-list-group>
-        </v-list>
+          </v-list>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel
         v-if="
@@ -132,193 +116,190 @@
           collectionInfo.CollectionType === 'tvshows'
         "
         :title="$t('videoTypes')">
-        <v-list dense class="filter-content">
-          <v-list-group
-            v-model="selectedTypeFilters"
-            multiple
-            @change="emitFilterChange">
+        <v-expansion-panel-text>
+          <v-list
+            v-model:selected="selectedTypeFilters"
+            select-strategy="leaf"
+            class="filter-content"
+            @update:selected="emitFilterChange">
             <template
               v-for="(type, typeIndex) in typeFilters"
               :key="`type-${typeIndex}`">
-              <v-list-item :value="type.name">
-                <template #default="{ active }">
-                  <v-list-item-title>
-                    {{ type.label }}
-                  </v-list-item-title>
+              <v-list-item :value="type.name" :title="type.label">
+                <template #append="{ isActive }">
                   <v-list-item-action>
-                    <v-checkbox :model-value="active" />
+                    <v-checkbox-btn :model-value="isActive" />
                   </v-list-item-action>
                 </template>
               </v-list-item>
             </template>
-          </v-list-group>
-        </v-list>
+          </v-list>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel v-if="yearFilters.length > 0" :title="$t('years')">
-        <v-list dense class="filter-content">
-          <v-list-group
-            v-model="selectedYearFilters"
-            multiple
-            @change="emitFilterChange">
+        <v-expansion-panel-text>
+          <v-list
+            v-model:selected="selectedYearFilters"
+            select-strategy="leaf"
+            class="filter-content"
+            @update:selected="emitFilterChange">
             <template
               v-for="(year, yearIndex) in yearFilters"
               :key="`year-${yearIndex}`">
-              <v-list-item :value="year">
-                <template #default="{ active }">
-                  <v-list-item-title>
-                    {{ year }}
-                  </v-list-item-title>
-
+              <v-list-item :value="year" :title="year">
+                <template #append="{ isActive }">
                   <v-list-item-action>
-                    <v-checkbox :model-value="active" />
+                    <v-checkbox-btn :model-value="isActive" />
                   </v-list-item-action>
                 </template>
               </v-list-item>
             </template>
-          </v-list-group>
-        </v-list>
+          </v-list>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
   </v-menu>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { BaseItemDto, ItemFilter } from '@jellyfin/sdk/lib/generated-client';
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { computed, ref, watch, mergeProps } from 'vue';
+import { useRoute } from 'vue-router';
+import {
+  BaseItemDto,
+  BaseItemKind,
+  ItemFilter
+} from '@jellyfin/sdk/lib/generated-client';
 import { getFilterApi } from '@jellyfin/sdk/lib/utils/api/filter-api';
 import { sanitizeHtml } from '@/utils/html';
-import { useSnackbar } from '@/composables';
+import { useRemote, useSnackbar } from '@/composables';
 
-export default defineComponent({
-  props: {
-    collectionInfo: {
-      type: Object as () => BaseItemDto,
-      required: true
-    },
-    itemsType: {
-      type: String,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
+const route = useRoute();
+const remote = useRemote();
+const { t } = useI18n();
+const emit = defineEmits<{
+  (e: 'change', filters: Record<string, string[]>): void;
+}>();
+
+const props = defineProps<{
+  collectionInfo: BaseItemDto;
+  itemsType: BaseItemKind;
+  disabled?: boolean;
+}>();
+
+const selectedFeatureFilters = ref([]);
+const selectedGenreFilters = ref([]);
+const selectedRatingFilters = ref([]);
+const selectedStatusFilters = ref([]);
+const selectedTypeFilters = ref([]);
+const selectedYearFilters = ref([]);
+const ratingFilters = ref<string[]>([]);
+const genreFilters = ref<string[]>([]);
+const yearFilters = ref<number[]>([]);
+
+const statusFilters = computed(() => [
+  {
+    label: t('played'),
+    name: ItemFilter.IsPlayed
   },
-  setup() {
-    return {
-      useSnackbar
-    };
+  {
+    label: t('unplayed'),
+    name: ItemFilter.IsUnplayed
   },
-  data() {
-    return {
-      statusFilters: [
-        {
-          label: this.$t('played'),
-          name: ItemFilter.IsPlayed
-        },
-        {
-          label: this.$t('unplayed'),
-          name: ItemFilter.IsUnplayed
-        },
-        {
-          label: this.$t('resumable'),
-          name: ItemFilter.IsResumable
-        },
-        {
-          label: this.$t('favorite'),
-          name: ItemFilter.IsFavorite
-        },
-        { label: this.$t('liked'), name: ItemFilter.Likes },
-        { label: this.$t('unliked'), name: ItemFilter.Dislikes }
-      ],
-      selectedStatusFilters: [],
-      featureFilters: [
-        {
-          label: this.$t('subtitles'),
-          name: 'HasSubtitles'
-        },
-        { label: this.$t('trailer'), value: 'hasTrailer' },
-        {
-          label: this.$t('specialFeatures'),
-          name: 'HasSpecialFeature'
-        },
-        {
-          label: this.$t('themeSong'),
-          name: 'HasThemeSong'
-        },
-        {
-          label: this.$t('themeVideo'),
-          name: 'HasThemeVideo'
-        }
-      ],
-      selectedFeatureFilters: [],
-      genreFilters: [] as string[],
-      selectedGenreFilters: [],
-      ratingFilters: [] as string[],
-      selectedRatingFilters: [],
-      typeFilters: [
-        { label: 'Blu-Ray', name: 'Bluray' },
-        { label: 'DVD', name: 'Dvd' },
-        { label: 'HD', name: 'isHD' },
-        { label: '4K', name: 'is4K' },
-        { label: '3D', name: 'is3D' }
-      ],
-      selectedTypeFilters: [],
-      yearFilters: [] as number[],
-      selectedYearFilters: []
-    };
+  {
+    label: t('resumable'),
+    name: ItemFilter.IsResumable
   },
-  watch: {
-    itemsType(): void {
-      this.refreshItems();
-    }
+  {
+    label: t('favorite'),
+    name: ItemFilter.IsFavorite
   },
-  methods: {
-    async refreshItems(): Promise<void> {
-      try {
-        /**
-         * Sanitization of route params to avoid XSS injection attacks.
-         *
-         * First reported on https://github.com/jellyfin/jellyfin-vue/security/code-scanning/223
-         */
-        const response = (
-          await this.$remote.sdk
-            .newUserApi(getFilterApi)
-            .getQueryFiltersLegacy({
-              userId: this.$remote.auth.currentUserId.value,
-              parentId: sanitizeHtml(this.$route.params.viewId),
-              includeItemTypes: [this.itemsType]
-            })
-        ).data;
+  { label: t('liked'), name: ItemFilter.Likes },
+  { label: t('unliked'), name: ItemFilter.Dislikes }
+]);
 
-        if (response.Genres) {
-          this.genreFilters = response.Genres;
-        }
+const featureFilters = computed(() => [
+  {
+    label: t('subtitles'),
+    name: 'HasSubtitles'
+  },
+  { label: t('trailer'), value: 'hasTrailer' },
+  {
+    label: t('specialFeatures'),
+    name: 'HasSpecialFeature'
+  },
+  {
+    label: t('themeSong'),
+    name: 'HasThemeSong'
+  },
+  {
+    label: t('themeVideo'),
+    name: 'HasThemeVideo'
+  }
+]);
+
+const typeFilters = [
+  { label: 'Blu-Ray', name: 'Bluray' },
+  { label: 'DVD', name: 'Dvd' },
+  { label: 'HD', name: 'isHD' },
+  { label: '4K', name: 'is4K' },
+  { label: '3D', name: 'is3D' }
+];
+
+/**
+ * refesh the list of items that are displayed in the grid,
+ * applying filters and sorting
+ */
+async function refreshItems(): Promise<void> {
+  try {
+    /**
+     * Sanitization of route params to avoid XSS injection attacks.
+     *
+     * First reported on https://github.com/jellyfin/jellyfin-vue/security/code-scanning/223
+     */
+    const response = (
+      await remote.sdk.newUserApi(getFilterApi).getQueryFiltersLegacy({
+        userId: remote.auth.currentUserId.value,
+        // @ts-expect-error - We don't have typings for routes - TODO: Fix
+        parentId: sanitizeHtml(route.params.viewId),
+        includeItemTypes: [props.itemsType]
+      })
+    ).data;
+
+    if (response.Genres) {
+      genreFilters.value = response.Genres;
+    }
 
-        if (response.OfficialRatings) {
-          this.ratingFilters = response.OfficialRatings;
-        }
+    if (response.OfficialRatings) {
+      ratingFilters.value = response.OfficialRatings;
+    }
 
-        if (response.Years) {
-          this.yearFilters = response.Years;
-        }
-      } catch {
-        this.useSnackbar(this.$t('filtersNotFound'), 'error');
-      }
-    },
-    emitFilterChange(): void {
-      this.$emit('change', {
-        status: this.selectedStatusFilters,
-        features: this.selectedFeatureFilters,
-        genres: this.selectedGenreFilters,
-        ratings: this.selectedRatingFilters,
-        types: this.selectedTypeFilters,
-        years: this.selectedYearFilters
-      });
+    if (response.Years) {
+      yearFilters.value = response.Years;
     }
+  } catch {
+    useSnackbar(t('filtersNotFound'), 'error');
+  }
+}
+/**
+ * Pass on change event to parent component
+ */
+function emitFilterChange(): void {
+  emit('change', {
+    status: selectedStatusFilters.value,
+    features: selectedFeatureFilters.value,
+    genres: selectedGenreFilters.value,
+    ratings: selectedRatingFilters.value,
+    types: selectedTypeFilters.value,
+    years: selectedYearFilters.value
+  });
+}
+watch(
+  () => props.itemsType,
+  () => {
+    refreshItems();
   }
-});
+);
 </script>
 
 <style lang="scss" scoped>