diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index 81ebdfd9..d19ce046 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -4,6 +4,8 @@ import { CustomerBranch } from 'src/stores/customer/types';
 import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { onMounted, ref, watch } from 'vue';
 
+import SaveButton from 'src/components/button/SaveButton.vue';
+
 const optionsBranch = defineModel<{ id: string; name: string }[]>(
   'optionsBranch',
   { default: [] },
@@ -69,7 +71,9 @@ onMounted(() => {
 
 <template>
   <div class="row col-12">
-    <div class="col-12 row justify-between q-pb-sm text-weight-bold text-body1">
+    <div
+      class="col-12 items-center row justify-between q-pb-sm text-weight-bold text-body1"
+    >
       <q-icon
         flat
         size="xs"
@@ -79,19 +83,10 @@ onMounted(() => {
         style="background-color: var(--surface-3)"
       />
       {{ $t(`${title}`) }}
-      <q-btn
-        v-if="!readonly"
-        type="submit"
-        dense
-        unelevated
-        color="primary"
-        :label="$t('save')"
-        @click="$emit('save')"
-        class="q-px-md q-ml-auto rounded"
-      />
+      <SaveButton class="q-ml-auto" v-if="!readonly" @click="$emit('save')" />
     </div>
 
-    <div class="col-12 row q-col-gutter-md">
+    <div class="col-12 row" style="gap: var(--size-2)">
       <q-select
         lazy-rules="ondemand"
         :id="`${prefixId}-select-employer-branch`"