diff --git a/src/components/AllAroundBtn.vue b/src/components/AllAroundBtn.vue
deleted file mode 100644
index 16616810..00000000
--- a/src/components/AllAroundBtn.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  label: string;
-  color?: string;
-}>();
-</script>
-
-<template>
-  <div
-    class="q-pl-md q-pr-sm row items-center justify-between rounded hover-item"
-    :style="`border:1px solid ${color};color:${color}`"
-    @click.stop="$emit('viewDetail')"
-  >
-    {{ $t(label) }}
-    <q-icon name="mdi-arrow-right" class="q-ml-md" />
-  </div>
-</template>
-
-<style scoped>
-.hover-item:hover {
-  background-color: var(--surface-3);
-}
-</style>
diff --git a/src/components/ButtonAddCompoent.vue b/src/components/FloatingActionButton.vue
similarity index 100%
rename from src/components/ButtonAddCompoent.vue
rename to src/components/FloatingActionButton.vue
diff --git a/src/components/index.ts b/src/components/index.ts
index 96d7714e..ecca1c1e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,5 @@
 export { default as AddButton } from './AddButton.vue';
-export { default as AllAroundBtn } from './AllAroundBtn.vue';
-export { default as ButtonAddCompoent } from './ButtonAddCompoent.vue';
+export { default as FloatingActionButton } from './FloatingActionButton.vue';
 export { default as CanvasComponent } from './CanvasComponent.vue';
 export { default as DialogForm } from './DialogForm.vue';
 export { default as DrawerInfo } from './DrawerInfo.vue';
@@ -15,6 +14,5 @@ export { default as ProfileBanner } from './ProfileBanner.vue';
 export { default as ProfileUpload } from './ProfileUpload.vue';
 export { default as SideMenu } from './SideMenu.vue';
 export { default as StatCardComponent } from './StatCardComponent.vue';
-export { default as TabComponent } from './TabComponent.vue';
 export { default as TooltipComponent } from './TooltipComponent.vue';
 export { default as TreeComponent } from './TreeComponent.vue';
diff --git a/src/components/upload-file/noticeJobEmployment.vue b/src/components/upload-file/NoticeJobEmployment.vue
similarity index 100%
rename from src/components/upload-file/noticeJobEmployment.vue
rename to src/components/upload-file/NoticeJobEmployment.vue
diff --git a/src/components/upload-file/index.ts b/src/components/upload-file/index.ts
index abb06afb..3db62100 100644
--- a/src/components/upload-file/index.ts
+++ b/src/components/upload-file/index.ts
@@ -4,4 +4,4 @@ export { default as FormCitizen } from './FormCitizen.vue';
 export { default as FormTm6 } from './FormTm6.vue';
 export { default as CorpFormBusinessRegistration } from './CorpFormBusinessRegistration.vue';
 export { default as PersFormBusinessRegistration } from './PersFormBusinessRegistration.vue';
-export { default as noticeJobEmployment } from './noticeJobEmployment.vue';
+export { default as NoticeJobEmployment } from './NoticeJobEmployment.vue';
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 7992f506..500960b4 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -41,7 +41,7 @@ import KebabAction from 'components/shared/KebabAction.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import ImageUploadDialog from 'components/ImageUploadDialog.vue';
-import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
+import FloatingActionButton from 'components/FloatingActionButton.vue';
 import PaginationComponent from 'components/PaginationComponent.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import FormPerson from 'components/02_personnel-management/FormPerson.vue';
@@ -730,11 +730,11 @@ watch(
 </script>
 
 <template>
-  <ButtonAddComponent
+  <FloatingActionButton
     style="z-index: 999"
     hide-icon
     @click="openDialog('FORM')"
-  ></ButtonAddComponent>
+  ></FloatingActionButton>
 
   <!-- stat -->
   <div class="column full-height no-wrap">
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index ce891bb9..e6c4defb 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -18,7 +18,7 @@ import { columnsEmployee } from './constant';
 import { useCustomerBranchForm, useEmployeeForm } from './form';
 
 import EmployerFormAuthorized from './components/employer/EmployerFormAuthorized.vue';
-import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
+import FloatingActionButton from 'components/FloatingActionButton.vue';
 import SideMenu from 'components/SideMenu.vue';
 import { DialogFormContainer, DialogHeader } from 'components/dialog';
 import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
@@ -220,7 +220,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
 </script>
 
 <template>
-  <ButtonAddComponent
+  <FloatingActionButton
     style="z-index: 999"
     v-if="$route.name !== 'CustomerManagement'"
   >
@@ -237,7 +237,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
       external-label
       label-position="left"
     />
-  </ButtonAddComponent>
+  </FloatingActionButton>
   <div
     class="row justify-between bordered-b surface-3 full-width q-px-md"
     style="z-index: 1"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 19e79c72..0633c86a 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -34,7 +34,7 @@ import { AddressForm } from 'components/form';
 import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
 import ItemCard from 'src/components/ItemCard.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
-import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
+import FloatingActionButton from 'components/FloatingActionButton.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import EmptyAddButton from 'components/AddButton.vue';
@@ -55,7 +55,7 @@ import { runOcr, parseResultMRZ } from 'src/utils/ocr';
 import {
   UploadFileGroup,
   FormTm6,
-  noticeJobEmployment,
+  NoticeJobEmployment,
 } from 'components/upload-file';
 
 import {
@@ -722,7 +722,7 @@ const emptyCreateDialog = ref(false);
 </script>
 
 <template>
-  <ButtonAddComponent
+  <FloatingActionButton
     style="z-index: 999"
     :hide-icon="currentTab === 'employee'"
     v-if="$route.name === 'CustomerManagement'"
@@ -756,7 +756,7 @@ const emptyCreateDialog = ref(false);
       padding="xs"
       icon="mdi-account-plus-outline"
     />
-  </ButtonAddComponent>
+  </FloatingActionButton>
 
   <div class="column full-height no-wrap">
     <div v-if="$route.name === 'CustomerManagement'" class="column full-height">
@@ -2944,7 +2944,7 @@ const emptyCreateDialog = ref(false);
                     v-model:visa-issuing-place="meta.issuePlace"
                   />
 
-                  <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
                 </template>
               </UploadFileGroup>
             </div>
@@ -4474,7 +4474,7 @@ const emptyCreateDialog = ref(false);
                     v-model:visa-issuing-place="meta.issuePlace"
                   />
 
-                  <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
                 </template>
               </UploadFileGroup>
             </template>
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index cc3a19e6..43ea95da 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -12,7 +12,7 @@ import {
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { dialog } from 'src/stores/utils';
 
-import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
+import FloatingActionButton from 'components/FloatingActionButton.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
@@ -261,11 +261,11 @@ watch(statusFilter, fetchWorkflowList);
 watch(() => pageState.inputSearch, fetchWorkflowList);
 </script>
 <template>
-  <ButtonAddComponent
+  <FloatingActionButton
     style="z-index: 999"
     hide-icon
     @click="triggerDialog('add')"
-  ></ButtonAddComponent>
+  ></FloatingActionButton>
 
   <div class="column full-height no-wrap">
     <!-- SEC: stat -->
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index b4d3f9e8..453ceeec 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -10,7 +10,7 @@ import ProductCardComponent from 'components/04_product-service/ProductCardCompo
 import StatCard from 'components/StatCardComponent.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
 import BasicInformation from 'components/04_product-service/BasicInformation.vue';
-import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
+import FloatingActionButton from 'components/FloatingActionButton.vue';
 import BasicInfoProduct from 'components/04_product-service/BasicInfoProduct.vue';
 import PriceDataComponent from 'components/04_product-service/PriceDataComponent.vue';
 import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
@@ -1559,7 +1559,7 @@ watch(
 </script>
 
 <template>
-  <ButtonAddComponent
+  <FloatingActionButton
     hide-icon
     v-if="actionDisplay && !currentNoAction"
     style="z-index: 999"
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index c9a33c2e..9c1f690b 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -18,7 +18,7 @@ import { CustomerBranchCreate } from 'stores/customer/types';
 import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
-import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
+import FloatingActionButton from 'components/FloatingActionButton.vue';
 import FormAbout from 'src/components/05_quotation/FormAbout.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import ItemCard from 'src/components/ItemCard.vue';
@@ -311,7 +311,7 @@ async function storeDataLocal(id: string) {
 </script>
 
 <template>
-  <ButtonAddComponent
+  <FloatingActionButton
     hide-icon
     style="z-index: 999"
     @click.stop="triggerAddQuotationDialog"
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 531ff079..80d6915c 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -42,7 +42,7 @@ import SwitchItem from 'components/shared/SwitchItem.vue';
 import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
 import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
-import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
+import { UploadFileGroup, NoticeJobEmployment } from 'components/upload-file';
 import FormPerson from 'components/02_personnel-management/FormPerson.vue';
 import ProductItem from 'components/05_quotation/ProductItem.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
@@ -1986,7 +1986,7 @@ const view = ref<View>(View.Quotation);
                 v-model:visa-issuing-place="meta.issuePlace"
               />
 
-              <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+              <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
             </template>
           </UploadFileGroup>
         </div>