diff --git a/src/components/shared/select/SelectAgent.vue b/src/components/shared/select/SelectAgent.vue
new file mode 100644
index 00000000..d3addfe2
--- /dev/null
+++ b/src/components/shared/select/SelectAgent.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { getRole } from 'src/services/keycloak';
+
+import { createSelect, SelectProps } from './select';
+import SelectInput from '../SelectInput.vue';
+
+import { User } from 'src/stores/user/types';
+
+import useStore from 'src/stores/user';
+
+type SelectOption = User;
+
+const value = defineModel<string | null | undefined>('value', {
+  required: true,
+});
+const valueOption = defineModel<SelectOption>('valueOption', {
+  required: false,
+});
+
+const selectOptions = ref<SelectOption[]>([]);
+
+const { fetchList: getList, fetchById: getById } = useStore();
+
+defineEmits<{
+  (e: 'create'): void;
+}>();
+
+type ExclusiveProps = {
+  codeOnly?: boolean;
+  selectFirstValue?: boolean;
+  branchVirtual?: boolean;
+  checkRole?: string[];
+};
+
+const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
+
+const { getOptions, setFirstValue, getSelectedOption, filter } =
+  createSelect<SelectOption>(
+    {
+      value,
+      valueOption,
+      selectOptions,
+      getList: async (query) => {
+        const ret = await getList({
+          query,
+          ...props.params,
+          includeBranch: true,
+          pageSize: 99999,
+          userType: 'DELEGATE',
+          status: 'ACTIVE',
+        });
+        if (ret) return ret.result;
+      },
+      getByValue: async (id) => {
+        const ret = await getById(id);
+        if (ret) return ret;
+      },
+    },
+    { valueField: 'id' },
+  );
+
+onMounted(async () => {
+  await getOptions();
+
+  if (props.autoSelectOnSingle && selectOptions.value.length === 1) {
+    setFirstValue();
+  }
+
+  if (props.selectFirstValue) {
+    setDefaultValue();
+  } else await getSelectedOption();
+});
+
+function setDefaultValue() {
+  setFirstValue();
+}
+</script>
+<template>
+  <SelectInput
+    v-model="value"
+    incremental
+    option-value="id"
+    :label
+    :placeholder
+    :readonly
+    :disable="disabled"
+    :option="selectOptions"
+    :hide-selected="false"
+    :fill-input="false"
+    :rules="[
+      (v: string) => !props.required || !!v || $t('form.error.required'),
+    ]"
+    @filter="filter"
+  >
+    <template #selected-item="{ opt }">
+      {{
+        $i18n.locale === 'tha'
+          ? opt.firstName + ' ' + opt.lastName
+          : opt.firstNameEN + ' ' + opt.lastNameEN
+      }}
+    </template>
+
+    <template #option="{ opt, scope }">
+      <q-item v-bind="scope.itemProps">
+        <span class="row items-center">
+          {{
+            $i18n.locale === 'tha'
+              ? opt.firstName + ' ' + opt.lastName
+              : opt.firstNameEN + ' ' + opt.lastNameEN
+          }}
+        </span>
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
+    <template #append v-if="clearable">
+      <q-icon
+        v-if="!readonly && value"
+        name="mdi-close-circle"
+        @click.stop="value = ''"
+        class="cursor-pointer clear-btn"
+      />
+    </template>
+  </SelectInput>
+</template>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormContact.vue b/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
index fcd0828c..4a58439c 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
@@ -1,13 +1,5 @@
 <script lang="ts" setup>
-import useUserStore from 'stores/user';
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import SelectInput from 'src/components/shared/SelectInput.vue';
-import { QSelect } from 'quasar';
-
-const userStore = useUserStore();
-const { locale } = useI18n({ useScope: 'global' });
+import SelectAgent from 'src/components/shared/select/SelectAgent.vue';
 
 defineProps<{
   readonly?: boolean;
@@ -20,41 +12,6 @@ const officeTel = defineModel<string>('officeTel');
 const agent = defineModel<string>('agent');
 
 const agentUserId = defineModel<string>('agentUserId');
-
-const agentOptions = ref<{ id: string; label: string; labelEN: string }[]>([]);
-
-async function fetchAgentOptions(query: string) {
-  const res = await userStore.fetchList({
-    includeBranch: true,
-    query: query,
-    pageSize: 99999,
-    userType: 'DELEGATE',
-    status: 'ACTIVE',
-  });
-
-  if (res) {
-    agentOptions.value = res.result.map((v) => ({
-      id: v.id,
-      label: v.firstName + ' ' + v.lastName,
-      labelEN: v.firstNameEN + ' ' + v.lastNameEN,
-    }));
-  }
-}
-
-async function filter(val: string, update: (...args: unknown[]) => void) {
-  update(
-    async () => {
-      await fetchAgentOptions(val);
-    },
-
-    (ref: QSelect) => {
-      if (val !== '' && ref.options && ref.options?.length > 0) {
-        ref.setOptionIndex(-1);
-        ref.moveOptionSelection(1, true);
-      }
-    },
-  );
-}
 </script>
 
 <template>
@@ -153,18 +110,12 @@ async function filter(val: string, update: (...args: unknown[]) => void) {
       </template>
     </q-input>
 
-    <SelectInput
-      @click="fetchAgentOptions"
+    <SelectAgent
+      :label="$t('customer.form.agent')"
+      v-model:value="agentUserId"
       :readonly
-      incremental
-      v-model="agentUserId"
       id="quotation-branch"
       class="col-md-6 col-12"
-      :option="agentOptions"
-      :label="$t('customer.form.agent')"
-      option-value="id"
-      :option-label="locale === 'eng' ? 'labelEN' : 'label'"
-      @filter="(val: string, update) => filter(val, update)"
     />
   </div>
 </template>