diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d8e91a18..26397eae 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -6,6 +6,7 @@ import { Pagination } from 'src/stores/types';
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 
+import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
@@ -1068,6 +1069,28 @@ watch(fieldSelectedCustomer, async () => {
 </script>
 
 <template>
+  <ButtonAddComponent style="z-index: 999">
+    <q-fab-action
+      style="color: white; background-color: hsla(var(--purple-11-hsl))"
+      @click="triggerCreate('CORP')"
+      padding="xs"
+      icon="mdi-office-building"
+      :label="$t('add') + ' ' + $t('customerLegalEntity')"
+      external-label
+      label-position="left"
+    />
+
+    <q-fab-action
+      :label="$t('add') + ' ' + $t('customerNaturalPerson')"
+      external-label
+      label-position="left"
+      @click="triggerCreate('PERS')"
+      style="color: white; background-color: hsla(var(--teal-9-hsl))"
+      padding="xs"
+      icon="mdi-account-plus"
+    ></q-fab-action>
+  </ButtonAddComponent>
+
   <div class="column q-pb-lg">
     <div class="text-h6 text-weight-bold q-mb-md">
       {{ $t('customerManagement') }}
@@ -1092,20 +1115,6 @@ watch(fieldSelectedCustomer, async () => {
                   : $t('customerEmployeeStatTitle')
               }}
             </div>
-            <q-btn
-              id="btn-add-customer"
-              dense
-              icon="mdi-plus"
-              unelevated
-              :label="
-                selectorLabel === 'EMPLOYER'
-                  ? $t('customerEmployerAdd')
-                  : $t('customerEmployeeAdd')
-              "
-              padding="4px 16px"
-              @click="openDialogCustomerType()"
-              style="background-color: var(--cyan-6); color: white"
-            />
           </div>
           <div class="row full-width" style="overflow-x: auto">
             <StatCardComponent
@@ -1256,12 +1265,6 @@ watch(fieldSelectedCustomer, async () => {
             :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '6' : '7'}, 180px)`"
             style="min-height: 250px"
           >
-            <AddCardCompoent
-              color="cyan-6"
-              label="customerAdd"
-              img="/add-personnel.png"
-            />
-
             <UsersDetailCardComponent
               v-for="i in inputSearch ? resultSearch : listCustomer"
               :key="i.id"