diff --git a/src/components/common/VnDropdown.vue b/src/components/common/VnDropdown.vue
index 63d6b96f6a2..1b3f2237b8f 100644
--- a/src/components/common/VnDropdown.vue
+++ b/src/components/common/VnDropdown.vue
@@ -11,14 +11,18 @@ const $props = defineProps({
         type: Boolean,
         default: null,
     },
-    moduleName: {
-        type: String,
-        default: null,
-    },
     options: {
         type: Array,
         default: null,
     },
+    optionLabel: {
+        type: String,
+        default: 'name',
+    },
+    optionValue: {
+        type: String,
+        default: 'id',
+    },
 });
 
 async function changeState(value) {
@@ -37,24 +41,13 @@ async function changeState(value) {
     >
         <VnSelect
             :options="$props.options"
+            :option-label="$props.optionLabel"
+            :option-value="$props.optionValue"
             hide-selected
-            option-value="code"
             hide-dropdown-icon
             focus-on-mount
             @update:model-value="changeState"
         >
-            <template #option="scope">
-                <QItem v-bind="scope.itemProps">
-                    <QItemSection>
-                        <QItemLabel v-if="$props.moduleName === 'Ticket'">
-                            {{ scope.opt?.name }}
-                        </QItemLabel>
-                        <QItemLabel v-if="$props.moduleName === 'Claim'">
-                            {{ scope.opt?.description }}
-                        </QItemLabel>
-                    </QItemSection>
-                </QItem>
-            </template>
         </VnSelect>
     </QBtnDropdown>
 </template>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 4a47e79ed55..85f37f440be 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -174,9 +174,8 @@ function openDialog(dmsId) {
 }
 
 async function changeState(value) {
-    const newState = claimStates.value.find((state) => state.code == value);
     await axios.patch(`Claims/updateClaim/${entityId.value}`, {
-        claimStateFk: newState.id,
+        claimStateFk: value,
     });
     router.go(route.fullPath);
 }
@@ -184,14 +183,15 @@ async function changeState(value) {
 function claimUrl(section) {
     return '#/claim/' + entityId.value + '/' + section;
 }
-
-onMounted(async () => {
-    const { data } = await axios.get('ClaimStates');
-    claimStates.value = data;
-});
 </script>
 
 <template>
+    <FetchData
+        url="ClaimStates"
+        :filter="{ fields: ['id', 'description'] }"
+        @on-fetch="(data) => (claimStates = data)"
+        auto-load
+    />
     <FetchData
         url="ClaimDms"
         :filter="claimDmsFilter"
@@ -210,8 +210,9 @@ onMounted(async () => {
         </template>
         <template #header-right>
             <VnDropdown
-                :moduleName="route.meta.moduleName"
                 :options="claimStates"
+                option-label="description"
+                option-value="id"
                 @change-state="changeState($event)"
             />
         </template>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index f2e381069d3..d79c5a9ac6e 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -114,10 +114,10 @@ onMounted(async () => {
         </template>
         <template #header-right>
             <VnDropdown
-                :moduleName="route.meta.moduleName"
-                :moduleId="entityId"
-                :options="editableStates"
                 :disable="!isEditable()"
+                :options="editableStates"
+                :option-label="'name'"
+                :option-value="'code'"
                 @change-state="changeState($event)"
             />
         </template>