diff --git a/lang/cs/item.php b/lang/cs/item.php
index dfdeeab99..22b433810 100644
--- a/lang/cs/item.php
+++ b/lang/cs/item.php
@@ -26,8 +26,8 @@
     'identifier' => 'inventární číslo',
     'author' => 'autor / autorka',
     'item_authorities' => 'autoři - vztahy',
-    'tags' => 'tagy',
-    'tag' => 'tag',
+    'tags' => 'klíčová slova',
+    'tag' => 'klíčové slovo',
     'date_earliest' => 'datace od',
     'date_latest' => 'datace do',
     'lat' => 'latitúda',
@@ -73,7 +73,7 @@
             'search' => 'výsledky vyhledávání pro: ":value"',
             'author' => 'autor: :value',
             'work_type' => 'výtvarný druh: :value',
-            'tag' => 'tagy: :value',
+            'tag' => 'klíčové slovo: :value',
             'gallery' => 'galerie: :value',
             'credit' => 'nabytí: :value',
             'topic' => 'námět: :value',
diff --git a/lang/en/item.php b/lang/en/item.php
index bb3ad1ffb..486ab7b7a 100644
--- a/lang/en/item.php
+++ b/lang/en/item.php
@@ -26,8 +26,8 @@
     'identifier' => 'identifier',
     'author' => 'artist',
     'item_authorities' => 'artists - relations',
-    'tags' => 'tags',
-    'tag' => 'tag',
+    'tags' => 'keywords',
+    'tag' => 'keyword',
     'date_earliest' => 'date earliest',
     'date_latest' => 'date latest',
     'lat' => 'latitude',
@@ -81,7 +81,7 @@
             'search' => 'search results for: ":value"',
             'author' => 'artist: :value',
             'work_type' => 'work type: :value',
-            'tag' => 'tags: :value',
+            'tag' => 'keyword: :value',
             'gallery' => 'institution: :value',
             'credit' => 'credit: :value',
             'topic' => 'genre: :value',
diff --git a/lang/sk/item.php b/lang/sk/item.php
index b7647e70c..f15b18ba6 100644
--- a/lang/sk/item.php
+++ b/lang/sk/item.php
@@ -26,8 +26,8 @@
     'identifier' => 'inventárne číslo',
     'author' => 'autor / autorka',
     'item_authorities' => 'autori - vzťahy',
-    'tags' => 'tagy',
-    'tag' => 'tag',
+    'tags' => 'kľúčové slová',
+    'tag' => 'kľúčové slovo',
     'date_earliest' => 'datovanie najskôr',
     'date_latest' => 'datovanie najneskôr',
     'lat' => 'latitúda',
@@ -73,7 +73,7 @@
             'search' => 'výsledky vyhľadávania pre: ":value"',
             'author' => 'autor: :value',
             'work_type' => 'výtvarný druh: :value',
-            'tag' => 'tag: :value',
+            'tag' => 'kľúčové slovo :value',
             'gallery' => 'galéria: :value',
             'credit' => 'nadobudnutie: :value',
             'topic' => 'žáner: :value',
diff --git a/package-lock.json b/package-lock.json
index 558b4b737..37676ca32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
     "packages": {
         "": {
             "dependencies": {
-                "@lottiefiles/lottie-player": "^1.7.1",
                 "@popperjs/core": "^2.11.7",
                 "axios": "^1.6.0",
                 "bootstrap": "^3.4.1",
@@ -34,7 +33,7 @@
                 "vue-masonry": "^0.16.0",
                 "vue-select": "^4.0.0-beta.6",
                 "vue-slider-component": "^4.1.0-beta.7",
-                "vue3-click-away": "^1.2.4"
+                "vue3-lottie": "^3.3.0"
             },
             "devDependencies": {
                 "@prettier/plugin-php": "^0.22.2",
@@ -673,28 +672,6 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
-        "node_modules/@lit-labs/ssr-dom-shim": {
-            "version": "1.2.0",
-            "license": "BSD-3-Clause"
-        },
-        "node_modules/@lit/reactive-element": {
-            "version": "1.6.3",
-            "license": "BSD-3-Clause",
-            "dependencies": {
-                "@lit-labs/ssr-dom-shim": "^1.0.0"
-            }
-        },
-        "node_modules/@lottiefiles/lottie-player": {
-            "version": "1.7.1",
-            "license": "MIT",
-            "dependencies": {
-                "@types/pako": "^1.0.1",
-                "lit": "^2.1.2",
-                "lottie-web": "^5.10.0",
-                "pako": "^2.0.4",
-                "resize-observer-polyfill": "^1.5.1"
-            }
-        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "dev": true,
@@ -1055,14 +1032,6 @@
                 "undici-types": "~5.26.4"
             }
         },
-        "node_modules/@types/pako": {
-            "version": "1.0.7",
-            "license": "MIT"
-        },
-        "node_modules/@types/trusted-types": {
-            "version": "2.0.7",
-            "license": "MIT"
-        },
         "node_modules/@types/web-bluetooth": {
             "version": "0.0.20",
             "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -2644,6 +2613,14 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/klona": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+            "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+            "engines": {
+                "node": ">= 8"
+            }
+        },
         "node_modules/laravel-vite-plugin": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-1.0.2.tgz",
@@ -2746,31 +2723,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/lit": {
-            "version": "2.8.0",
-            "license": "BSD-3-Clause",
-            "dependencies": {
-                "@lit/reactive-element": "^1.6.0",
-                "lit-element": "^3.3.0",
-                "lit-html": "^2.8.0"
-            }
-        },
-        "node_modules/lit-element": {
-            "version": "3.3.3",
-            "license": "BSD-3-Clause",
-            "dependencies": {
-                "@lit-labs/ssr-dom-shim": "^1.1.0",
-                "@lit/reactive-element": "^1.3.0",
-                "lit-html": "^2.8.0"
-            }
-        },
-        "node_modules/lit-html": {
-            "version": "2.8.0",
-            "license": "BSD-3-Clause",
-            "dependencies": {
-                "@types/trusted-types": "^2.0.2"
-            }
-        },
         "node_modules/lodash": {
             "version": "4.17.21",
             "license": "MIT"
@@ -3048,10 +3000,6 @@
                 "get-size": "^2.0.2"
             }
         },
-        "node_modules/pako": {
-            "version": "2.1.0",
-            "license": "(MIT AND Zlib)"
-        },
         "node_modules/path-key": {
             "version": "2.0.1",
             "dev": true,
@@ -3479,10 +3427,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/resize-observer-polyfill": {
-            "version": "1.5.1",
-            "license": "MIT"
-        },
         "node_modules/resolve": {
             "version": "1.22.8",
             "dev": true,
@@ -4322,9 +4266,21 @@
             "version": "4.1.0-beta.7",
             "license": "MIT"
         },
-        "node_modules/vue3-click-away": {
-            "version": "1.2.4",
-            "license": "MIT"
+        "node_modules/vue3-lottie": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.3.0.tgz",
+            "integrity": "sha512-Omv26YN3e78fh0QgQooeZcmPo8O2j5mJ5pacZh1mGdHH9ZTGayWlY1Yp6h+wAvfBKAvJ80JXrSgeBOKA4MRBYA==",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3",
+                "klona": "^2.0.6",
+                "lottie-web": "5.12.2"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "vue": "^3.2"
+            }
         },
         "node_modules/which": {
             "version": "1.3.1",
diff --git a/package.json b/package.json
index be90f7182..f4919f50f 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
         "vue": "^3.2.47"
     },
     "dependencies": {
-        "@lottiefiles/lottie-player": "^1.7.1",
         "@popperjs/core": "^2.11.7",
         "axios": "^1.6.0",
         "bootstrap": "^3.4.1",
@@ -53,6 +52,6 @@
         "vue-masonry": "^0.16.0",
         "vue-select": "^4.0.0-beta.6",
         "vue-slider-component": "^4.1.0-beta.7",
-        "vue3-click-away": "^1.2.4"
+        "vue3-lottie": "^3.3.0"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index f1eb3592a..a149614b4 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -13,7 +13,6 @@ import 'lazysizes'
 import 'lazysizes/plugins/unveilhooks/ls.unveilhooks'
 import 'lazysizes/plugins/respimg/ls.respimg'
 import 'jquery.easing'
-import '@lottiefiles/lottie-player'
 
 // Components
 import './components/searchbar'
@@ -22,7 +21,6 @@ import './components/clipboard-button'
 // // Vue
 import { createApp } from 'vue'
 import { VueMasonryPlugin } from 'vue-masonry'
-import VueClickAway from 'vue3-click-away'
 import { i18nVue } from 'laravel-vue-i18n'
 import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.es'
 
@@ -30,20 +28,22 @@ import FeaturedPieceClickTracker from './components/FeaturedPieceClickTracker.vu
 import FilterSortBy from './components/filter/SortBy.vue'
 import FilterCheckbox from './components/filter/Checkbox.vue'
 import FilterCustomSelect from './components/filter/CustomSelect.vue'
+import CatalogNewAuthorSelectOptions from './components/catalog-new/AuthorSelectOptions.vue'
+import CatalogNewEmptyAnimation from './components/catalog-new/EmptyAnimation.vue'
 import CatalogNewItemsFilterController from './components/catalog-new/ItemsFilterController.vue'
-import CatalogNewPopoverGroupController from './components/catalog-new/PopoverGroupController.vue'
 import CatalogNewNewCustomSelectPopoverLabel from './components/catalog-new/NewCustomSelectPopoverLabel.vue'
 import CatalogNewNewColorSlider from './components/catalog-new/NewColorSlider.vue'
 import CatalogNewNewYearSlider from './components/catalog-new/NewYearSlider.vue'
 import CatalogNewNewCustomCheckbox from './components/catalog-new/NewCustomCheckbox.vue'
 import CatalogNewDisclosureModalController from './components/catalog-new/DisclosureModalController.vue'
-import CatalogNewSearchOptionsController from './components/catalog-new/SearchOptionsController.vue'
-import CatalogNewPopoverController from './components/catalog-new/PopoverController.vue'
 import CatalogNewInfiniteScroll from './components/catalog-new/InfiniteScroll.vue'
 import CatalogNewArtworkImageController from './components/catalog-new/ArtworkImageController.vue'
 import CatalogNewNumberFormatter from './components/catalog-new/NumberFormatter.vue'
 import CatalogNewAuthorFormatter from './components/catalog-new/AuthorFormatter.vue'
 import CatalogNewPopover from './components/catalog-new/Popover.vue'
+import CatalogNewResetButton from './components/catalog-new/ResetButton.vue'
+import CatalogNewSortSelect from './components/catalog-new/SortSelect.vue'
+import CatalogNewSelectOptions from './components/catalog-new/SelectOptions.vue'
 import Flickity from './components/Flickity.vue'
 import HomeShuffleOrchestrator from './components/home/ShuffleOrchestrator.vue'
 import HomeTransitionInPlace from './components/home/TransitionInPlace.vue'
@@ -74,7 +74,6 @@ createApp({
     },
 })
     .use(VueMasonryPlugin)
-    .use(VueClickAway)
     .use(i18nVue, {
         resolve: async (lang) => {
             const langs = import.meta.glob('../../lang/*.json')
@@ -88,7 +87,6 @@ createApp({
     .component('filter-checkbox', FilterCheckbox)
     .component('filter-custom-select', FilterCustomSelect)
     .component('filter-new-items-controller', CatalogNewItemsFilterController)
-    .component('filter-new-popover.group-controller', CatalogNewPopoverGroupController)
     .component('filter-new-custom-select-popover-label', CatalogNewNewCustomSelectPopoverLabel)
     .component('filter-new-color-slider', CatalogNewNewColorSlider)
     .component('filter-new-year-slider', CatalogNewNewYearSlider)
@@ -96,13 +94,16 @@ createApp({
     .component('filter-disclosure-controller', CatalogNewDisclosureModalController)
     .component('toggle-controller', ToggleController)
     .component('reload-controller', ReloadController)
-    .component('filter-search-options-controller', CatalogNewSearchOptionsController)
-    .component('filter-popover-controller', CatalogNewPopoverController)
+    .component('catalog.author-select-options', CatalogNewAuthorSelectOptions)
+    .component('catalog.empty-animation', CatalogNewEmptyAnimation)
     .component('catalog.infinite-scroll', CatalogNewInfiniteScroll)
     .component('catalog.artwork-image-controller', CatalogNewArtworkImageController)
     .component('catalog.number-formatter', CatalogNewNumberFormatter)
     .component('catalog.author-formatter', CatalogNewAuthorFormatter)
     .component('catalog.popover', CatalogNewPopover)
+    .component('catalog.reset-button', CatalogNewResetButton)
+    .component('catalog.sort-select', CatalogNewSortSelect)
+    .component('catalog.select-options', CatalogNewSelectOptions)
     .component('flickity', Flickity)
     .component('home.shuffle-orchestrator', HomeShuffleOrchestrator)
     .component('home.transition-in-place', HomeTransitionInPlace)
diff --git a/resources/js/components/catalog-new/AuthorSelectOptions.vue b/resources/js/components/catalog-new/AuthorSelectOptions.vue
new file mode 100644
index 000000000..e4562678e
--- /dev/null
+++ b/resources/js/components/catalog-new/AuthorSelectOptions.vue
@@ -0,0 +1,8 @@
+<script setup>
+import SelectOptions from './SelectOptions.vue'
+import { formatAuthorName } from './formatters.js'
+</script>
+
+<template>
+    <SelectOptions :formatLabel="formatAuthorName" />
+</template>
diff --git a/resources/js/components/catalog-new/EmptyAnimation.vue b/resources/js/components/catalog-new/EmptyAnimation.vue
new file mode 100644
index 000000000..5e8569c8c
--- /dev/null
+++ b/resources/js/components/catalog-new/EmptyAnimation.vue
@@ -0,0 +1,7 @@
+<script setup>
+import { Vue3Lottie as LottiePlayer } from 'vue3-lottie'
+</script>
+
+<template>
+    <LottiePlayer autoPlay loop animationLink="/animations/empty.json" />
+</template>
diff --git a/resources/js/components/catalog-new/NumberFormatter.vue b/resources/js/components/catalog-new/NumberFormatter.vue
index 988910d6f..7b660eb79 100644
--- a/resources/js/components/catalog-new/NumberFormatter.vue
+++ b/resources/js/components/catalog-new/NumberFormatter.vue
@@ -9,7 +9,7 @@
 <script>
 export default {
     props: {
-        value: String,
+        value: Number,
     },
 }
 </script>
diff --git a/resources/js/components/catalog-new/Popover.vue b/resources/js/components/catalog-new/Popover.vue
index 4a70e5bcb..5cd3491b8 100644
--- a/resources/js/components/catalog-new/Popover.vue
+++ b/resources/js/components/catalog-new/Popover.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'radix-vue'
 
 import CaretUpIcon from './icons/CaretUp.vue'
@@ -43,7 +43,7 @@ const isOpen = ref(false)
                         side="bottom"
                         align="start"
                         :side-offset="10"
-                        class="tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-mr-8 -tw-ml-px"
+                        class="tw-hidden md:tw-block tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-mr-8 -tw-ml-px"
                     >
                         <slot name="content"></slot>
                     </PopoverContent>
diff --git a/resources/js/components/catalog-new/PopoverController.vue b/resources/js/components/catalog-new/PopoverController.vue
deleted file mode 100644
index 3955abd75..000000000
--- a/resources/js/components/catalog-new/PopoverController.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <div ref="button">
-        <slot
-            name="button"
-            :popoverName="name"
-            :isOpen="isOpen"
-            :togglePopover="togglePopover"
-        ></slot>
-    </div>
-    <transition
-        enter-active-class="duration-300 ease-out"
-        enter-from-class="transform opacity-0"
-        enter-to-class="opacity-100"
-        leave-active-class="duration-200 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="transform opacity-0"
-    >
-        <div ref="body" class="tw-z-10">
-            <slot
-                name="body"
-                :isOpen="this.isOpen"
-                :closeOpenedPopover="this.closeOpenedPopover"
-            ></slot>
-        </div>
-    </transition>
-</template>
-<script>
-import { createPopper } from '@popperjs/core'
-export default {
-    props: {
-        name: String,
-    },
-    data() {
-        return {
-            popper: null,
-        }
-    },
-    mounted() {
-        const button = this.$refs.button
-        const body = this.$refs.body
-        this.popper = createPopper(button, body, {
-            placement: 'bottom-start',
-        })
-    },
-    updated() {
-        this.popper.update()
-    },
-    computed: {
-        isOpen() {
-            return this.popoverGroupControllerData.openedPopover === this.name
-        },
-    },
-    inject: ['popoverGroupControllerData', 'togglePopover', 'closeOpenedPopover'],
-}
-</script>
diff --git a/resources/js/components/catalog-new/PopoverGroupController.vue b/resources/js/components/catalog-new/PopoverGroupController.vue
deleted file mode 100644
index 30cfe1496..000000000
--- a/resources/js/components/catalog-new/PopoverGroupController.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <slot></slot>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            provided: {
-                openedPopover: null,
-            },
-        }
-    },
-    methods: {
-        togglePopover(filterName) {
-            this.provided.openedPopover =
-                filterName === this.provided.openedPopover ? null : filterName
-        },
-        closeOpenedPopover() {
-            this.provided.openedPopover = null
-        },
-    },
-    provide() {
-        return {
-            popoverGroupControllerData: this.provided,
-            togglePopover: this.togglePopover,
-            closeOpenedPopover: this.closeOpenedPopover,
-        }
-    },
-}
-</script>
diff --git a/resources/js/components/catalog-new/ResetButton.vue b/resources/js/components/catalog-new/ResetButton.vue
new file mode 100644
index 000000000..f07dda287
--- /dev/null
+++ b/resources/js/components/catalog-new/ResetButton.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{
+    sm?: boolean
+}>()
+</script>
+<template>
+    <button
+        :class="[
+            'tw-flex tw-items-center tw-border tw-leading-none tw-border-gray-300 tw-bg-white tw-font-normal hover:tw-border-gray-800 tw-whitespace-nowrap',
+            props.sm
+                ? 'tw-px-1.5 tw-py-1 tw-text-xs'
+                : 'tw-px-1.5 tw-py-1 tw-text-xs md:tw-px-4 md:tw-py-1.5 md:tw-text-sm',
+        ]"
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="tw-mr-1.5 tw-h-4 tw-w-4 tw-fill-current"
+            viewBox="0 0 14 14"
+        >
+            <g clip-path="url(#a)">
+                <path
+                    d="M.885.152a.519.519 0 1 0-.733.733l12.963 12.963a.519.519 0 1 0 .733-.733L.885.152ZM4.681 1.919a.54.54 0 0 1 .515.706l.688.686a1.47 1.47 0 0 0 .196-.385h6.66a.467.467 0 1 0 0-.933H6.08a1.475 1.475 0 0 0-2.254-.734l.68.688a.54.54 0 0 1 .175-.028Z"
+                />
+                <path
+                    fill-rule="evenodd"
+                    d="M10.755 5.015c.651 0 1.204.422 1.4 1.007h.586a.467.467 0 1 1 0 .934h-.587a1.475 1.475 0 0 1-1.643.987L9.3 6.733V6.73l-.709-.707h.765a1.475 1.475 0 0 1 1.399-1.007Zm-.54 1.474a.54.54 0 1 1 1.081 0 .54.54 0 0 1-1.081 0ZM5.66 12.496c.65 0 1.203-.422 1.398-1.007h1.871l-.934-.933h-.937a1.475 1.475 0 0 0-2.798 0h-2.6a.467.467 0 1 0 0 .933h2.6a1.475 1.475 0 0 0 1.4 1.007Zm0-2.014a.54.54 0 1 0 0 1.081.54.54 0 0 0 0-1.082Z"
+                    clip-rule="evenodd"
+                />
+                <path d="M1.66 6.022a.467.467 0 1 0 0 .934H4.39l-.955-.934H1.66Z" />
+            </g>
+            <defs>
+                <clipPath id="a"><path d="M0 0h14v14H0z" /></clipPath>
+            </defs>
+        </svg>
+        <slot>{{ $t('item.filter.clear') }}</slot>
+    </button>
+</template>
diff --git a/resources/js/components/catalog-new/SearchOptionsController.vue b/resources/js/components/catalog-new/SearchOptionsController.vue
deleted file mode 100644
index 741f518f0..000000000
--- a/resources/js/components/catalog-new/SearchOptionsController.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { matchSorter } from 'match-sorter'
-import { formatAuthorName } from './formatters'
-
-export default {
-    props: ['options', 'selected'],
-    data() {
-        return {
-            search: '',
-        }
-    },
-    computed: {
-        filteredOptions() {
-            const optionsWithSelected = [
-                ...this.options.map((option) => ({
-                    ...option,
-                    checked: this.selected.includes(option.value),
-                })),
-                ...this.selected
-                    .filter((queryItem) =>
-                        this.options.every((option) => option.value !== queryItem)
-                    )
-                    .map((selected) => ({ value: selected, count: 0, checked: true })),
-            ]
-            return this.search
-                ? matchSorter(optionsWithSelected, this.search, {
-                      keys: [(option) => formatAuthorName(option.value)],
-                  })
-                : optionsWithSelected
-        },
-    },
-    render() {
-        return this.$slots.default({
-            search: this.search,
-            onSearchInput: (e) => (this.search = e.target.value),
-            options: this.filteredOptions,
-        })
-    },
-}
-</script>
diff --git a/resources/js/components/catalog-new/SelectOptions.vue b/resources/js/components/catalog-new/SelectOptions.vue
new file mode 100644
index 000000000..fb05dcf7d
--- /dev/null
+++ b/resources/js/components/catalog-new/SelectOptions.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { matchSorter } from 'match-sorter'
+
+import ResetButton from './ResetButton.vue'
+import Count from './NumberFormatter.vue'
+import EmptyAnimation from './EmptyAnimation.vue'
+
+const props = defineProps<{
+    options: { value: string; count: number }[]
+    selected?: string[]
+    searchPlaceholder: string
+    formatLabel?: (value: string) => string
+}>()
+
+const emit = defineEmits(['change', 'reset'])
+
+const allOptions = ref(props.options)
+const search = ref('')
+
+const selected = computed(() => props.selected ?? [])
+
+const options = computed(() => {
+    const formatLabel = props.formatLabel ?? ((value: string) => value)
+
+    const optionsWithSelected = [
+        ...allOptions.value.map((option) => ({
+            ...option,
+            checked: selected.value.includes(option.value),
+            label: formatLabel(option.value),
+        })),
+        ...selected.value
+            .filter((queryItem) => allOptions.value.every((option) => option.value !== queryItem))
+            .map((value) => ({
+                value,
+                count: 0,
+                checked: true,
+                label: formatLabel(value),
+            })),
+    ]
+
+    return search.value
+        ? matchSorter(optionsWithSelected, search.value, {
+              keys: ['label'],
+          })
+        : optionsWithSelected
+})
+
+onMounted(() => {
+    // Pre-sort options if they're initially selected
+    allOptions.value = props.options.sort((a, b) => {
+        const aChecked = selected.value.includes(a.value)
+        const bChecked = selected.value.includes(b.value)
+
+        if (aChecked && bChecked) return 0
+        if (aChecked) return -1
+        return 1
+    })
+})
+</script>
+
+<template>
+    <div class="tw-flex tw-w-full tw-flex-1 tw-flex-col">
+        <div class="tw-mx-4 tw-mb-6 tw-flex tw-border tw-border-gray-800 md:tw-mx-0">
+            <input
+                class="tw-w-full tw-border-none tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-leading-none tw-text-gray-800 tw-placeholder-gray-800 focus:tw-outline-none focus:tw-ring-0"
+                type="text"
+                @input="search = $event.target.value"
+                :value="search"
+                :placeholder="props.searchPlaceholder"
+            />
+            <div class="tw-mr-3 tw-flex tw-items-center">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="tw-h-4 tw-w-4 tw-fill-current"
+                    viewBox="0 0 256 256"
+                >
+                    <path
+                        d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"
+                    ></path>
+                </svg>
+            </div>
+        </div>
+        <div
+            class="md:tw-min-h-80 tw-flex tw-h-[calc(100vh-18rem)] tw-flex-col tw-overflow-auto tw-bg-white tw-scrollbar tw-scrollbar-track-gray-200 tw-scrollbar-thumb-gray-600 tw-scrollbar-track-rounded tw-scrollbar-thumb-rounded tw-scrollbar-w-1 md:tw-max-h-80 md:tw-px-0 md:tw-pr-3"
+        >
+            <label
+                v-for="option in options"
+                :for="option.id"
+                :class="[
+                    'tw-flex md:tw-px-2 tw-px-4 tw-my-0.5 tw-py-1 hover:tw-bg-gray-200 tw-cursor-pointer',
+                    { 'tw-bg-gray-200': option.checked },
+                ]"
+            >
+                <input
+                    class="tw-form-checkbox tw-m-0 tw-mr-3 tw-h-6 tw-w-6 tw-border-gray-300 focus:tw-outline-none focus:tw-ring-0 focus:tw-ring-offset-0"
+                    type="checkbox"
+                    :key="option.id"
+                    :id="option.id"
+                    :value="option.value"
+                    :checked="option.checked"
+                    @change="emit('change', $event)"
+                />
+                <span class="tw-inline-block tw-min-w-0 tw-break-words tw-text-base tw-font-normal">
+                    {{ option.label }}
+                    <span class="tw-font-semibold"> (<Count :value="option.count" />) </span>
+                </span>
+            </label>
+            <div
+                v-show="options.length === 0"
+                class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4"
+            >
+                <EmptyAnimation />
+                <span class="tw-text-center">{{ $t('item.filter.nothing_found') }}</span>
+            </div>
+        </div>
+    </div>
+    <ResetButton class="tw-mt-5 tw-hidden md:tw-flex" @click="emit('reset')">
+        {{ $t('item.filter.clear') }}
+    </ResetButton>
+</template>
diff --git a/resources/js/components/catalog-new/SortSelect.vue b/resources/js/components/catalog-new/SortSelect.vue
new file mode 100644
index 000000000..2679a3376
--- /dev/null
+++ b/resources/js/components/catalog-new/SortSelect.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { trans } from 'laravel-vue-i18n'
+import {
+    SelectRoot,
+    SelectTrigger,
+    SelectPortal,
+    SelectContent,
+    SelectViewport,
+    SelectItem,
+    SelectItemText,
+} from 'radix-vue'
+import CaretUpIcon from './icons/CaretUp.vue'
+
+const props = defineProps({
+    defaultValue: String,
+})
+
+const value = ref(props.defaultValue ?? 'relevance')
+
+const emit = defineEmits(['change'])
+
+const options = [
+    { value: 'created_at', label: trans('sortable.created_at') },
+    { value: 'title', label: trans('sortable.title') },
+    { value: 'author', label: trans('sortable.author') },
+    { value: 'date_earliest', label: trans('sortable.oldest') },
+    { value: 'date_latest', label: trans('sortable.newest') },
+    { value: 'view_count', label: trans('sortable.view_count') },
+    { value: 'random', label: trans('sortable.random') },
+    { value: 'updated_at', label: trans('sortable.updated_at') },
+    { value: 'relevance', label: trans('sortable.relevance') },
+]
+
+const label = computed(
+    () => options.find((option) => option.value === value.value)?.label ?? value.value
+)
+</script>
+<template>
+    <SelectRoot v-model="value" @update:modelValue="emit('change', value)">
+        <SelectTrigger
+            class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4 tw-outline-none"
+        >
+            <transition
+                enter-from-class="tw-opacity-0"
+                leave-to-class="tw-opacity-0"
+                enter-active-class="tw-duration-50 tw-transition"
+                leave-active-class="tw-duration-50 tw-transition"
+                mode="out-in"
+            >
+                <div class="tw-flex tw-items-center tw-space-x-1" :key="value">
+                    <span>
+                        {{ label }}
+                    </span>
+                    <CaretUpIcon class="tw-h-4 tw-w-4 tw-rotate-180" />
+                </div>
+            </transition>
+        </SelectTrigger>
+
+        <SelectPortal>
+            <div class="tailwind-rules">
+                <transition
+                    enter-from-class="tw-opacity-0"
+                    leave-to-class="tw-opacity-0"
+                    enter-active-class="tw-transition-opacity tw-duration-100"
+                    leave-active-class="tw-transition-opacity tw-duration-100"
+                >
+                    <SelectContent
+                        position="popper"
+                        class="tw-w-80 tw-border-2 tw-border-gray-800 tw-bg-white tw-p-4"
+                    >
+                        <SelectViewport>
+                            <SelectItem
+                                v-for="option in options"
+                                v-show="option.value !== value"
+                                :key="option.value"
+                                :value="option.value"
+                                class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200 tw-outline-none"
+                            >
+                                <SelectItemText>{{ option.label }}</SelectItemText>
+                            </SelectItem>
+                        </SelectViewport>
+                    </SelectContent>
+                </transition>
+            </div>
+        </SelectPortal>
+    </SelectRoot>
+</template>
diff --git a/resources/views/components/filter/reset_button.blade.php b/resources/views/components/filter/reset_button.blade.php
deleted file mode 100644
index da9c51767..000000000
--- a/resources/views/components/filter/reset_button.blade.php
+++ /dev/null
@@ -1,20 +0,0 @@
-@props([
-    'sm' => false,
-])
-
-@php
-$class = ['tw-flex tw-items-center tw-border tw-leading-none tw-border-gray-300 tw-bg-white tw-font-normal hover:tw-border-gray-800'];
-
-if ($sm) {
-    $class[] = 'tw-px-1.5 tw-py-1 tw-text-xs';
-} else {
-    $class[] = 'tw-px-1.5 tw-py-1 tw-text-xs md:tw-px-4 md:tw-py-1.5 md:tw-text-sm';
-}
-@endphp
-
-
-<button {{ $attributes->class($class) }}>
-    <x-icons.arrow-counter-clockwise class="tw-mr-1.5 tw-h-4 tw-w-4 tw-fill-current">
-    </x-icons.arrow-counter-clockwise>
-    {{ $slot }}
-</button>
diff --git a/resources/views/components/filter/search_options.blade.php b/resources/views/components/filter/search_options.blade.php
deleted file mode 100644
index bf5d5651b..000000000
--- a/resources/views/components/filter/search_options.blade.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<filter-search-options-controller {{ $attributes->only(['v-bind:options', 'v-bind:selected']) }}
-    v-slot="sc">
-    <div class="tw-flex tw-w-full tw-flex-1 tw-flex-col">
-        <div class="tw-mx-4 tw-mb-6 tw-flex tw-border tw-border-gray-800 md:tw-mx-0">
-            <input
-                class="tw-w-full tw-border-none tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-leading-none tw-text-gray-800 tw-placeholder-gray-800 focus:tw-outline-none focus:tw-ring-0"
-                type="text" v-on:input="sc.onSearchInput" v-bind:value="sc.search"
-                placeholder="{{ $attributes->get('search-placeholder') }}" />
-            <div class="tw-mr-3 tw-flex tw-items-center">
-                <x-icons.magnifying-glass class="tw-h-4 tw-w-4 tw-fill-current" />
-            </div>
-        </div>
-        <div
-            class="md:tw-min-h-80 tw-flex tw-h-[calc(100vh-18rem)] tw-flex-col tw-overflow-auto tw-bg-white tw-scrollbar tw-scrollbar-track-gray-200 tw-scrollbar-thumb-gray-600 tw-scrollbar-track-rounded tw-scrollbar-thumb-rounded tw-scrollbar-w-1 md:tw-max-h-80 md:tw-px-0 md:tw-pr-3">
-            <label v-for="option in sc.options" v-bind:for="option.id"
-                v-bind:class="['tw-flex md:tw-px-2 tw-px-4 tw-my-0.5 tw-py-1 hover:tw-bg-gray-200 tw-cursor-pointer', { 'tw-bg-gray-200': option.checked }]">
-                <input
-                    class="tw-form-checkbox tw-m-0 tw-mr-3 tw-h-6 tw-w-6 tw-border-gray-300 focus:tw-outline-none focus:tw-ring-0 focus:tw-ring-offset-0"
-                    type="checkbox" v-bind:key="option.id" v-bind:id="option.id"
-                    v-bind:value="option.value" v-bind:checked="option.checked"
-                    @change="{{ $attributes->get('v-on:change') }}" />
-                <span class="tw-inline-block tw-min-w-0 tw-break-words tw-text-base tw-font-normal">
-                    {!! $label ?? '@{{ option.value }}' !!}
-                    <span class="tw-font-semibold">
-                        (<catalog.number-formatter v-bind:value="option.count">
-                        </catalog.number-formatter>)
-                    </span>
-                </span>
-            </label>
-            <div v-if="sc.options.length === 0" class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4">
-                <lottie-player autoplay loop mode="normal"
-                    src="{{ asset('animations/empty.json') }}">
-                </lottie-player>
-                <span class="tw-text-center">Uuups, nič sme nenašli :(</span>
-            </div>
-        </div>
-    </div>
-</filter-search-options-controller>
-<x-filter.reset_button class="tw-mt-5 tw-hidden md:tw-flex"
-    @click="{{ $attributes->get('v-on:reset') }}">
-    {{ trans('item.filter.clear') }}
-</x-filter.reset_button>
\ No newline at end of file
diff --git a/resources/views/components/icons/arrow-counter-clockwise.blade.php b/resources/views/components/icons/arrow-counter-clockwise.blade.php
deleted file mode 100644
index a81e07c0e..000000000
--- a/resources/views/components/icons/arrow-counter-clockwise.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ $attributes }} viewBox="0 0 256 256">
-    <path
-        d="M228,128a100,100,0,0,1-98.66,100H128a99.39,99.39,0,0,1-68.62-27.29,12,12,0,0,1,16.48-17.45,76,76,0,1,0-1.57-109c-.13.13-.25.25-.39.37L54.89,92H72a12,12,0,0,1,0,24H24a12,12,0,0,1-12-12V56a12,12,0,0,1,24,0V76.72L57.48,57.06A100,100,0,0,1,228,128Z">
-    </path>
-</svg>
diff --git a/resources/views/components/icons/magnifying-glass.blade.php b/resources/views/components/icons/magnifying-glass.blade.php
deleted file mode 100644
index 7846924d9..000000000
--- a/resources/views/components/icons/magnifying-glass.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ $attributes }} viewBox="0 0 256 256">
-    <path
-        d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z">
-    </path>
-</svg>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index 9a30e6976..97945761a 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -17,7 +17,7 @@
                     <div
                         class="tw-mx-auto tw-max-w-screen-2xl tw-py-6 tw-pl-4 md:tw-p-6 md:tw-px-8 md:tw-pt-12 md:tw-pb-0">
                         {{-- Desktop filter --}}
-                        <toggle-controller v-slot="tc">
+                        <toggle-controller v-slot="extendedFilters">
                             <div
                                 class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-wrap md:tw-overflow-visible">
                                 <catalog.popover v-if="hasFilterOptions('author')"
@@ -30,17 +30,13 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.author-select-options
                                                 search-placeholder="{{ trans('item.filter.placeholder.name_human') }}"
                                                 v-bind:options="aggregations.author"
                                                 v-bind:selected="query.author"
                                                 v-on:change="e => handleMultiSelectChange('author', e)"
                                                 v-on:reset="clearFilterSelection('author')">
-                                                @slot('label')
-                                                    <catalog.author-formatter v-bind:value="option.value">
-                                                    </catalog.author-formatter>
-                                                @endslot
-                                            </x-filter.search_options>
+                                            </catalog.author-select-options>
                                         </div>
                                     </template>
                                 </catalog.popover>
@@ -54,7 +50,7 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.term') }}"
                                                 v-bind:options="aggregations.work_type"
                                                 v-bind:selected="query.work_type"
@@ -63,41 +59,41 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover v-if="hasFilterOptions('tag')"
-                                    v-bind:is-active="query.tag.length > 0">
+                                <catalog.popover v-if="hasFilterOptions('topic')"
+                                    v-bind:is-active="query.topic.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.tag') }}"
-                                            v-bind:selected-values="query.tag">
+                                            name="{{ trans('item.topic') }}"
+                                            v-bind:selected-values="query.topic">
                                         </filter-new-custom-select-popover-label>
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
-                                                v-bind:options="aggregations.tag"
-                                                v-bind:selected="query.tag"
-                                                v-on:change="e => handleMultiSelectChange('tag', e)"
-                                                v-on:reset="clearFilterSelection('tag')" />
+                                                v-bind:options="aggregations.topic"
+                                                v-bind:selected="query.topic"
+                                                v-on:change="e => handleMultiSelectChange('topic', e)"
+                                                v-on:reset="clearFilterSelection('topic')" />
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover v-if="hasFilterOptions('topic')"
-                                    v-bind:is-active="query.topic.length > 0">
+                                <catalog.popover v-if="hasFilterOptions('medium')"
+                                    v-bind:is-active="query.medium.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.topic') }}"
-                                            v-bind:selected-values="query.topic">
+                                            name="{{ trans('item.medium') }}"
+                                            v-bind:selected-values="query.medium">
                                         </filter-new-custom-select-popover-label>
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
-                                                v-bind:options="aggregations.topic"
-                                                v-bind:selected="query.topic"
-                                                v-on:change="e => handleMultiSelectChange('topic', e)"
-                                                v-on:reset="clearFilterSelection('topic')" />
+                                                v-bind:options="aggregations.medium"
+                                                v-bind:selected="query.medium"
+                                                v-on:change="e => handleMultiSelectChange('medium', e)"
+                                                v-on:reset="clearFilterSelection('medium')" />
                                         </div>
                                     </template>
                                 </catalog.popover>
@@ -111,7 +107,7 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                 v-bind:options="aggregations.gallery"
                                                 v-bind:selected="query.gallery"
@@ -120,47 +116,73 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover
-                                    v-if="hasFilterOptions('technique') && tc.isOn"
-                                    v-bind:is-active="query.technique.length > 0">
+                                <catalog.popover v-if="extendedFilters.isOn"
+                                    v-bind:is-active="query.yearRange">
+                                    <template #trigger-label>
+                                        <div class="tw-text-sm tw-font-semibold md:tw-text-base">
+                                            {{ trans('item.filter.year') }}<span
+                                                class="tw-ml-2"
+                                                v-if="query.yearRange">(@{{ query.yearRange.from }}
+                                                - @{{ query.yearRange.to }})</div>
+                                    </template>
+                                    <template #content>
+                                        <div class="tw-w-[28rem]">
+                                            <div v-if="query.yearRange"
+                                                class="tw-flex tw-justify-end">
+                                                <catalog.reset-button
+                                                    v-on:click="handleYearRangeChange(null)"
+                                                    class="tw-mb-3">
+                                                </catalog.reset-button>
+                                            </div>
+                                            <filter-new-year-slider
+                                                v-bind:default-from="query.yearRange?.from"
+                                                v-bind:default-to="query.yearRange?.to"
+                                                v-bind:min="aggregations.date_earliest - 5"
+                                                v-bind:max="Math.min(aggregations.date_latest + 5, new Date().getFullYear())"
+                                                v-on:change="handleYearRangeChange">
+                                            </filter-new-year-slider>
+                                        </div>
+                                    </template>
+                                </catalog.popover>
+                                <catalog.popover v-if="hasFilterOptions('tag') && extendedFilters.isOn"
+                                    v-bind:is-active="query.tag.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.technique') }}"
-                                            v-bind:selected-values="query.technique">
+                                            name="{{ trans('item.tag') }}"
+                                            v-bind:selected-values="query.tag">
                                         </filter-new-custom-select-popover-label>
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
-                                                v-bind:options="aggregations.technique"
-                                                v-bind:selected="query.technique"
-                                                v-on:change="e => handleMultiSelectChange('technique', e)"
-                                                v-on:reset="clearFilterSelection('technique')" />
+                                                v-bind:options="aggregations.tag"
+                                                v-bind:selected="query.tag"
+                                                v-on:change="e => handleMultiSelectChange('tag', e)"
+                                                v-on:reset="clearFilterSelection('tag')" />
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover
-                                    v-if="hasFilterOptions('medium') && tc.isOn"
-                                    v-bind:is-active="query.medium.length > 0">
+                                <catalog.popover v-if="hasFilterOptions('technique') && extendedFilters.isOn"
+                                    v-bind:is-active="query.technique.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.medium') }}"
-                                            v-bind:selected-values="query.medium">
+                                            name="{{ trans('item.technique') }}"
+                                            v-bind:selected-values="query.technique">
                                         </filter-new-custom-select-popover-label>
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
-                                                v-bind:options="aggregations.medium"
-                                                v-bind:selected="query.medium"
-                                                v-on:change="e => handleMultiSelectChange('medium', e)"
-                                                v-on:reset="clearFilterSelection('medium')" />
+                                                v-bind:options="aggregations.technique"
+                                                v-bind:selected="query.technique"
+                                                v-on:change="e => handleMultiSelectChange('technique', e)"
+                                                v-on:reset="clearFilterSelection('technique')" />
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover v-if="tc.isOn"
+                                <catalog.popover v-if="extendedFilters.isOn"
                                     v-bind:is-active="query.color">
                                     <template #trigger-label>
                                         <div class="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-font-semibold md:tw-text-base">
@@ -173,11 +195,10 @@ class="tw-inline-block tw-h-4 tw-w-4"
                                     <template #content>
                                         <div class="tw-w-[80vw]">
                                             <div v-if="query.color" class="tw-flex tw-justify-end">
-                                                <x-filter.reset_button
+                                                <catalog.reset-button
                                                     v-on:click="clearFilterSelection('color')"
                                                     class="tw-mb-2">
-                                                    {{ trans('item.filter.clear') }}
-                                                </x-filter.reset_button>
+                                                </catalog.reset-button>
                                             </div>
                                             <filter-new-color-slider
                                                 v-bind:default-color="query.color"
@@ -188,7 +209,7 @@ class="tw-mb-2">
                                     </template>
                                 </catalog.popover>
                                 <catalog.popover
-                                    v-if="hasFilterOptions('object_type') && tc.isOn"
+                                    v-if="hasFilterOptions('object_type') && extendedFilters.isOn"
                                     v-bind:is-active="query.object_type.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
@@ -198,7 +219,7 @@ class="tw-mb-2">
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.term') }}"
                                                 v-bind:options="aggregations.object_type"
                                                 v-bind:selected="query.object_type"
@@ -207,41 +228,12 @@ class="tw-mb-2">
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover v-if="tc.isOn"
-                                    v-bind:is-active="query.yearRange">
-                                    <template #trigger-label>
-                                        <div class="tw-text-sm tw-font-semibold md:tw-text-base">
-                                            {{ trans('item.filter.year') }}<span
-                                                class="tw-ml-2"
-                                                v-if="query.yearRange">(@{{ query.yearRange.from }}
-                                                - @{{ query.yearRange.to }})</div>
-                                    </template>
-                                    <template #content>
-                                        <div class="tw-w-[28rem]">
-                                            <div v-if="query.yearRange"
-                                                class="tw-flex tw-justify-end">
-                                                <x-filter.reset_button
-                                                    v-on:click="handleYearRangeChange(null)"
-                                                    class="tw-mb-3">
-                                                    {{ trans('item.filter.clear') }}
-                                                </x-filter.reset_button>
-                                            </div>
-                                            <filter-new-year-slider
-                                                v-bind:default-from="query.yearRange?.from"
-                                                v-bind:default-to="query.yearRange?.to"
-                                                v-bind:min="aggregations.date_earliest - 5"
-                                                v-bind:max="Math.min(aggregations.date_latest + 5, new Date().getFullYear())"
-                                                v-on:change="handleYearRangeChange">
-                                            </filter-new-year-slider>
-                                        </div>
-                                    </template>
-                                </catalog.popover>
                                 <div class="tw-flex tw-gap-1">
                                     <div class="tw-border tw-border-transparent">
-                                        <button v-on:click="tc.toggle"
+                                        <button v-on:click="extendedFilters.toggle"
                                             class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border tw-border-gray-300 tw-py-2.5 tw-px-4 tw-text-base tw-font-semibold hover:tw-border-gray-800">
                                             <div class="tw-flex tw-items-center tw-pr-4">
-                                                <x-icons.minus v-if="tc.isOn"
+                                                <x-icons.minus v-if="extendedFilters.isOn"
                                                     class="tw-h-6 tw-w-6 tw-fill-current" />
                                                 <template v-else>
                                                     <x-icons.sliders-horizontal
@@ -249,7 +241,7 @@ class="tw-h-6 tw-w-6 tw-fill-current" />
                                                 </template>
                                             </div>
                                             <span
-                                                v-if="tc.isOn">{{ trans('item.filter.hide_extended') }}</span>
+                                                v-if="extendedFilters.isOn">{{ trans('item.filter.hide_extended') }}</span>
                                             <span v-else>
                                                 {{ trans('item.filter.show_extended') }}</span>
                                         </button>
@@ -273,18 +265,18 @@ class="tw-h-6 tw-w-6 tw-fill-current" />
                                             v-bind:selected-values="query.work_type">
                                         </filter-new-custom-select-popover-label>
                                     </x-filter.disclosure_button>
-                                    <x-filter.disclosure_button v-on:click="dc.goTo('tag')">
-                                        <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.tag') }}"
-                                            v-bind:selected-values="query.tag">
-                                        </filter-new-custom-select-popover-label>
-                                    </x-filter.disclosure_button>
                                     <x-filter.disclosure_button v-on:click="dc.goTo('topic')">
                                         <filter-new-custom-select-popover-label
                                             name="{{ trans('item.topic') }}"
                                             v-bind:selected-values="query.topic">
                                         </filter-new-custom-select-popover-label>
                                     </x-filter.disclosure_button>
+                                    <x-filter.disclosure_button v-on:click="dc.goTo('medium')">
+                                        <filter-new-custom-select-popover-label
+                                            name="{{ trans('item.medium') }}"
+                                            v-bind:selected-values="query.medium">
+                                        </filter-new-custom-select-popover-label>
+                                    </x-filter.disclosure_button>
                                     <x-filter.disclosure_button v-on:click="dc.goTo('gallery')">
                                         <filter-new-custom-select-popover-label
                                             name="{{ trans('item.gallery') }}"
@@ -323,11 +315,11 @@ class="tw-font-semibold">{{ trans('item.filter.extended_filter') }}</span>
                                                                 class="tw-text-lg tw-font-semibold">{{ utrans('item.filter.title') }}</span>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="selectedOptionsAsLabels.length"
                                                                 v-on:click="clearAllSelections">
                                                                 {{ trans('item.filter.clear_all') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -346,13 +338,6 @@ class="tw-flex tw-h-[calc(100vh-15rem)] tw-flex-col tw-overflow-auto">
                                                                         v-bind:selected-values="query.work_type">
                                                                     </filter-new-custom-select-popover-label>
                                                                 </x-filter.disclosure_list_button>
-                                                                <x-filter.disclosure_list_button
-                                                                    v-on:click="dc.goTo('tag')">
-                                                                    <filter-new-custom-select-popover-label
-                                                                        name="{{ trans('item.tag') }}"
-                                                                        v-bind:selected-values="query.tag">
-                                                                    </filter-new-custom-select-popover-label>
-                                                                </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_list_button
                                                                     v-on:click="dc.goTo('topic')">
                                                                     <filter-new-custom-select-popover-label
@@ -360,20 +345,6 @@ class="tw-flex tw-h-[calc(100vh-15rem)] tw-flex-col tw-overflow-auto">
                                                                         v-bind:selected-values="query.topic">
                                                                     </filter-new-custom-select-popover-label>
                                                                 </x-filter.disclosure_list_button>
-                                                                <x-filter.disclosure_list_button
-                                                                    v-on:click="dc.goTo('gallery')">
-                                                                    <filter-new-custom-select-popover-label
-                                                                        name="{{ trans('item.gallery') }}"
-                                                                        v-bind:selected-values="query.gallery">
-                                                                    </filter-new-custom-select-popover-label>
-                                                                </x-filter.disclosure_list_button>
-                                                                <x-filter.disclosure_list_button
-                                                                    v-on:click="dc.goTo('technique')">
-                                                                    <filter-new-custom-select-popover-label
-                                                                        name="{{ trans('item.technique') }}"
-                                                                        v-bind:selected-values="query.technique">
-                                                                    </filter-new-custom-select-popover-label>
-                                                                </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_list_button
                                                                     v-on:click="dc.goTo('medium')">
                                                                     <filter-new-custom-select-popover-label
@@ -382,10 +353,10 @@ class="tw-flex tw-h-[calc(100vh-15rem)] tw-flex-col tw-overflow-auto">
                                                                     </filter-new-custom-select-popover-label>
                                                                 </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_list_button
-                                                                    v-on:click="dc.goTo('object_type')">
+                                                                    v-on:click="dc.goTo('gallery')">
                                                                     <filter-new-custom-select-popover-label
-                                                                        name="{{ trans('item.object_type') }}"
-                                                                        v-bind:selected-values="query.object_type">
+                                                                        name="{{ trans('item.gallery') }}"
+                                                                        v-bind:selected-values="query.gallery">
                                                                     </filter-new-custom-select-popover-label>
                                                                 </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_inline_list_button>
@@ -407,14 +378,27 @@ class="tw-px-4"
                                                                         </filter-new-year-slider>
                                                                         <div v-if="query.yearRange"
                                                                             class="tw-flex tw-justify-center">
-                                                                            <x-filter.reset_button
+                                                                            <catalog.reset-button
                                                                                 v-on:click="handleYearRangeChange(null)"
                                                                                 class="tw-mt-2.5">
-                                                                                {{ trans('item.filter.clear') }}
-                                                                            </x-filter.reset_button>
+                                                                            </catalog.reset-button>
                                                                         </div>
                                                                     @endslot
                                                                 </x-filter.disclosure_inline_list_button>
+                                                                <x-filter.disclosure_list_button
+                                                                    v-on:click="dc.goTo('tag')">
+                                                                    <filter-new-custom-select-popover-label
+                                                                        name="{{ trans('item.tag') }}"
+                                                                        v-bind:selected-values="query.tag">
+                                                                    </filter-new-custom-select-popover-label>
+                                                                </x-filter.disclosure_list_button>
+                                                                <x-filter.disclosure_list_button
+                                                                    v-on:click="dc.goTo('technique')">
+                                                                    <filter-new-custom-select-popover-label
+                                                                        name="{{ trans('item.technique') }}"
+                                                                        v-bind:selected-values="query.technique">
+                                                                    </filter-new-custom-select-popover-label>
+                                                                </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_inline_list_button>
                                                                     @slot('header')
                                                                         <div
@@ -435,14 +419,20 @@ class="tw-px-4"
                                                                         </filter-new-color-slider>
                                                                         <div v-if="query.color"
                                                                             class="tw-flex tw-justify-center">
-                                                                            <x-filter.reset_button
+                                                                            <catalog.reset-button
                                                                                 v-on:click="clearFilterSelection('color')"
                                                                                 class="tw-mt-4">
-                                                                                {{ trans('item.filter.clear') }}
-                                                                            </x-filter.reset_button>
+                                                                            </catalog.reset-button>
                                                                         </div>
                                                                     @endslot
                                                                 </x-filter.disclosure_inline_list_button>
+                                                                <x-filter.disclosure_list_button
+                                                                    v-on:click="dc.goTo('object_type')">
+                                                                    <filter-new-custom-select-popover-label
+                                                                        name="{{ trans('item.object_type') }}"
+                                                                        v-bind:selected-values="query.object_type">
+                                                                    </filter-new-custom-select-popover-label>
+                                                                </x-filter.disclosure_list_button>
                                                                 <filter-new-custom-checkbox
                                                                     class="tw-pt-2"
                                                                     v-on:change="handleCheckboxChange"
@@ -485,27 +475,21 @@ class="tw-pb-2"
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.author.length"
                                                                 v-on:click="clearFilterSelection('author')">
-                                                                {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.author-select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_human') }}"
                                                                     v-bind:options="aggregations.author"
                                                                     v-bind:selected="query.author"
                                                                     v-on:change="e => handleMultiSelectChange('author', e)"
                                                                     v-on:reset="clearFilterSelection('author')">
-                                                                    @slot('label')
-                                                                        <catalog.author-formatter
-                                                                            v-bind:value="option.value">
-                                                                        </catalog.author-formatter>
-                                                                    @endslot
-                                                                </x-filter.search_options>
+                                                                </catalog.author-select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -522,22 +506,21 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.work_type.length"
                                                                 v-on:click="clearFilterSelection('work_type')">
-                                                                {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.term') }}"
                                                                     v-bind:options="aggregations.work_type"
                                                                     v-bind:selected="query.work_type"
                                                                     v-on:change="e => handleMultiSelectChange('work_type', e)"
                                                                     v-on:reset="clearFilterSelection('work_type')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -554,22 +537,21 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.object_type.length"
                                                                 v-on:click="clearFilterSelection('object_type')">
-                                                                {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.term') }}"
                                                                     v-bind:options="aggregations.object_type"
                                                                     v-bind:selected="query.object_type"
                                                                     v-on:change="e => handleMultiSelectChange('object_type', e)"
                                                                     v-on:reset="clearFilterSelection('object_type')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -585,22 +567,21 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.tag.length"
                                                                 v-on:click="clearFilterSelection('tag')">
-                                                                {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                     v-bind:options="aggregations.tag"
                                                                     v-bind:selected="query.tag"
                                                                     v-on:change="e => handleMultiSelectChange('tag', e)"
                                                                     v-on:reset="clearFilterSelection('tag')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -617,20 +598,19 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.gallery.length"
                                                                 v-on:click="clearFilterSelection('gallery')">
-                                                                {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
-                                                            <x-filter.search_options
+                                                            <catalog.select-options
                                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                 v-bind:options="aggregations.gallery"
                                                                 v-bind:selected="query.gallery"
                                                                 v-on:change="e => handleMultiSelectChange('gallery', e)"
                                                                 v-on:reset="clearFilterSelection('gallery')">
-                                                            </x-filter.search_options>
+                                                            </catalog.select-options>
                                                         @endslot
                                                     </x-filter.disclosure_view>
                                                     <x-filter.disclosure_view
@@ -646,22 +626,21 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.technique.length"
                                                                 v-on:click="clearFilterSelection('technique')">
-                                                                {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                     v-bind:options="aggregations.technique"
                                                                     v-bind:selected="query.technique"
                                                                     v-on:change="e => handleMultiSelectChange('technique', e)"
                                                                     v-on:reset="clearFilterSelection('technique')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -678,22 +657,21 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.topic.length"
                                                                 v-on:click="clearFilterSelection('topic')">
-                                                                {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                     v-bind:options="aggregations.topic"
                                                                     v-bind:selected="query.topic"
                                                                     v-on:change="e => handleMultiSelectChange('topic', e)"
                                                                     v-on:reset="clearFilterSelection('topic')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -710,22 +688,21 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.medium.length"
                                                                 v-on:click="clearFilterSelection('medium')">
-                                                                {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                     v-bind:options="aggregations.medium"
                                                                     v-bind:selected="query.medium"
                                                                     v-on:change="e => handleMultiSelectChange('medium', e)"
                                                                     v-on:reset="clearFilterSelection('medium')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -818,12 +795,10 @@ class="tw-h-4 tw-w-4 tw-fill-current" viewBox="0 0 256 256">
                                 enter-active-class="tw-transition tw-duration-100"
                                 leave-active-class="tw-transition tw-duration-100"
                                 class="mb-4">
-                                <x-filter.reset_button v-if="selectedOptionsAsLabels.length"
+                                <catalog.reset-button v-if="selectedOptionsAsLabels.length"
                                     v-on:click="clearAllSelections" sm>
-                                    <span
-                                        class="tw-whitespace-nowrap">{{ trans('item.filter.clear') }}
-                                    </span>
-                                </x-filter.reset_button>
+                                    {{ trans('item.filter.clear_all') }}
+                                </catalog.reset-button>
                             </transition>
                         </div>
                     </div>
@@ -841,9 +816,7 @@ class="tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-py-40
                     <div v-else-if="artworks.length === 0"
                         class="tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-py-40 tw-text-lg">
                         <div class="tw-w-72">
-                            <lottie-player autoplay loop mode="normal"
-                                src="{{ asset('animations/empty.json') }}">
-                            </lottie-player>
+                            <catalog.empty-animation></catalog.empty-animation>
                         </div>
                         <span
                             class="tw-mt-10">{{ utrans('item.filter.nothing_found') }}</span>
@@ -872,108 +845,13 @@ class="tw-capitalize">{{ trans_choice('item.filter.displaying', 5) }}</span>
                                         <catalog.number-formatter v-bind:value="artworks_total">
                                         </catalog.number-formatter>
                                     </span>
-                                    {{ trans_choice('item.filter.artworks_sorted_by', 5) }}</span>
-                                <span class="tw-font-semibold">
-                                    <div class="tw-z-10 tw-inline-block">
-                                        <filter-new-popover.group-controller>
-                                            <filter-popover-controller name="sort">
-                                                <template #button="pc">
-                                                    <button id="button-sort"
-                                                        class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4"
-                                                        v-on:click="pc.togglePopover('sort')">
-                                                        <transition enter-from-class="tw-opacity-0"
-                                                            leave-to-class="tw-opacity-0"
-                                                            enter-active-class="tw-duration-50 tw-transition"
-                                                            leave-active-class="tw-duration-50 tw-transition"
-                                                            mode="out-in">
-                                                            <span
-                                                                v-if="query.sort === 'created_at' ">{{ trans('sortable.created_at') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'title' ">{{ trans('sortable.title') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'author' ">{{ trans('sortable.author') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'date_earliest' ">{{ trans('sortable.oldest') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'date_latest' ">{{ trans('sortable.newest') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'view_count' ">{{ trans('sortable.view_count') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'random' ">{{ trans('sortable.random') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'updated_at'">{{ trans('sortable.updated_at') }}</span>
-                                                            <span
-                                                                v-else>{{ trans('sortable.relevance') }}</span>
-                                                        </transition>
-                                                        <x-icons.caret-down
-                                                            class="tw-inline tw-h-4 tw-w-4 tw-fill-current">
-                                                        </x-icons.caret-down>
-                                                    </button>
-
-                                                </template>
-                                                <template #body="pc">
-                                                    <transition enter-from-class="tw-opacity-0"
-                                                        leave-to-class="tw-opacity-0"
-                                                        enter-active-class="tw-transition tw-duration-100"
-                                                        leave-active-class="tw-transition tw-duration-100">
-                                                        <div v-if="pc.isOpen"
-                                                            v-click-away="pc.closeOpenedPopover"
-                                                            class="tw-w-80 tw-border-2 tw-border-gray-800 tw-bg-white tw-p-4">
-
-                                                            <ul>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('created_at');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'created_at'">
-                                                                    {{ trans('sortable.created_at') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('title');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'title'">
-                                                                    {{ trans('sortable.title') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('author');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'author'">
-                                                                    {{ trans('sortable.author') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('date_earliest');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'date_earliest'">
-                                                                    {{ trans('sortable.oldest') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('date_latest');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'date_latest'">
-                                                                    {{ trans('sortable.newest') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('view_count');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'view_count'">
-                                                                    {{ trans('sortable.view_count') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('random');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'random'">
-                                                                    {{ trans('sortable.random') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('updated_at');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'updated_at'">
-                                                                    {{ trans('sortable.updated_at') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange(null);pc.closeOpenedPopover()"
-                                                                    v-if="query.sort">
-                                                                    {{ trans('sortable.relevance') }}
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </transition>
-                                                </template>
-                                            </filter-popover-controller>
-                                        </filter-new-popover.group-controller>
-                                    </div>
+                                    @{{ $tChoice('item.filter.artworks_sorted_by', artworks_total) }}
                                 </span>
+
+                                <catalog.sort-select
+                                    v-on:change="handleSortChange"
+                                    v-bind:default-value="query.sort">
+                                </catalog.sort-select>
                                 <span>
                                     {{ utrans('item.filter.try_also') }}
                                     <button v-on:click="handleSelectRandomly"