diff --git a/frontend/src/components/shared/CountSelect.vue b/frontend/src/components/shared/CountSelect.vue
index eb636e2..259dc05 100644
--- a/frontend/src/components/shared/CountSelect.vue
+++ b/frontend/src/components/shared/CountSelect.vue
@@ -1,33 +1,16 @@
 <script setup lang="ts">
-import { TarSelect, parsingUtils, type SelectOption, type SelectSize } from "logitar-vue3-ui";
+import { TarSelect, parsingUtils, type SelectOption } from "logitar-vue3-ui";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { parseNumber } = parsingUtils;
 const { t } = useI18n();
 
-const props = withDefaults(
-  defineProps<{
-    ariaLabel?: string;
-    describedBy?: string;
-    disabled?: boolean | string;
-    floating?: boolean | string;
-    id?: string;
-    label?: string;
-    modelValue?: number;
-    multiple?: boolean | string;
-    name?: string;
-    options?: SelectOption[];
-    placeholder?: string;
-    required?: boolean | string;
-    size?: SelectSize;
-  }>(),
-  {
-    floating: true,
-    id: "count",
-    label: "count",
-    options: () => [{ text: "10" }, { text: "25" }, { text: "50" }, { text: "100" }],
-  },
-);
+defineProps<{
+  modelValue?: number;
+}>();
+
+const options = ref<SelectOption[]>([{ text: "10" }, { text: "25" }, { text: "50" }, { text: "100" }]);
 
 defineEmits<{
   (e: "update:model-value", value?: number): void;
@@ -36,10 +19,11 @@ defineEmits<{
 
 <template>
   <TarSelect
-    v-bind="props"
-    :aria-label="ariaLabel ? t(ariaLabel) : undefined"
-    :label="t(label)"
-    :placeholder="placeholder ? t(placeholder) : undefined"
+    floating
+    id="count"
+    :label="t('count')"
+    :model-value="modelValue"
+    :options="options"
     @update:model-value="$emit('update:model-value', parseNumber($event))"
   />
 </template>