diff --git a/resources/js/components/page/Filter.vue b/resources/js/components/page/Filter.vue
index 455c13cc..052089ce 100644
--- a/resources/js/components/page/Filter.vue
+++ b/resources/js/components/page/Filter.vue
@@ -1,10 +1,7 @@
 <template>
-    <ui-sidebar :max="0" v-if="visible === true" @close="visible = false">
-        <page-header title="Filter" @close="visible = false"> </page-header>
-        <div class="grid gap-3 p-6">
-            <slot name="fields"></slot>
-        </div>
-    </ui-sidebar>
+    <page-filter-sidebar v-model="visible">
+        <slot name="fields"></slot>
+    </page-filter-sidebar>
     <div class="px-6 py-2 border-b border-gray-600 items-center space-x-3">
         <div class="flex flex-col sm:flex-row items-stretch sm:items-end space-y-1 sm:space-y-0 sm:space-x-3">
             <slot name="buttons"></slot>
diff --git a/resources/js/components/page/FilterSidebar.vue b/resources/js/components/page/FilterSidebar.vue
new file mode 100644
index 00000000..358ad7e3
--- /dev/null
+++ b/resources/js/components/page/FilterSidebar.vue
@@ -0,0 +1,19 @@
+<template>
+    <ui-sidebar :max="0" v-if="modelValue === true" @close="$emit('update:modelValue', false)">
+        <page-header title="Filter" @close="$emit('update:modelValue', false)"> </page-header>
+        <div class="grid gap-3 p-6">
+            <slot></slot>
+        </div>
+    </ui-sidebar>
+</template>
+
+<script setup>
+defineEmits(['update:modelValue']);
+
+defineProps({
+    modelValue: {
+        type: Boolean,
+        required: true,
+    },
+});
+</script>