diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
index 6d766842..00a359b3 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import useOptionStore from 'stores/options';
 import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
+import { isRoleInclude } from 'src/stores/utils';
 
 withDefaults(
   defineProps<{
@@ -98,14 +99,15 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
       <div class="col-12 row q-col-gutter-sm">
         <SelectBranch
           :for="`${prefixId}-input-source-registered-branch`"
-          v-model:value="registeredBranchId"
-          :label="$t('customer.form.registeredBranch')"
-          select-first-value
           class="col-md-6"
-          simple
-          required
           :readonly
-          :check-role="['admin', 'system', 'head_of_admin']"
+          :disabled="
+            !isRoleInclude(['admin', 'system', 'head_of_admin']) && !readonly
+          "
+          :label="$t('customer.form.registeredBranch')"
+          clearable
+          v-model:value="registeredBranchId"
+          required
         />
       </div>