diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 810ea0d1..470096c8 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -48,6 +48,7 @@ import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmplo
 import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
 import useOptionStore from 'stores/options';
 import { DialogContainer, DialogHeader } from 'components/dialog';
+import ToggleButton from 'src/components/button/ToggleButton.vue';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -649,8 +650,8 @@ watch(
                     ? customerStats.map((v) => ({
                         count:
                           v.name === 'CORP'
-                            ? statsCustomerType?.CORP ?? 0
-                            : statsCustomerType?.PERS ?? 0,
+                            ? (statsCustomerType?.CORP ?? 0)
+                            : (statsCustomerType?.PERS ?? 0),
                         label:
                           v.name === 'CORP'
                             ? 'customerLegalEntity'
@@ -1144,15 +1145,14 @@ watch(
 
                                 <q-item dense>
                                   <q-item-section class="q-py-sm">
-                                    <div class="q-pa-sm surface-2 rounded">
-                                      <q-toggle
+                                    <div
+                                      class="q-pa-sm surface-2 rounded flex items-center"
+                                    >
+                                      <ToggleButton
                                         :id="`view-detail-btn-${props.row.name}-status`"
-                                        dense
-                                        size="sm"
-                                        :label="
+                                        two-way
+                                        :model-value="
                                           props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
                                         "
                                         @click="
                                           async () => {
@@ -1162,10 +1162,14 @@ watch(
                                             );
                                           }
                                         "
-                                        :model-value="
-                                          props.row.status !== 'INACTIVE'
-                                        "
                                       />
+                                      <span class="q-pl-md">
+                                        {{
+                                          props.row.status !== 'INACTIVE'
+                                            ? $t('switchOnLabel')
+                                            : $t('switchOffLabel')
+                                        }}
+                                      </span>
                                     </div>
                                   </q-item-section>
                                 </q-item>
@@ -1201,7 +1205,7 @@ watch(
                             female: undefined,
                             detail: [
                               {
-                                icon: 'mdi-cellphone-outline',
+                                icon: 'mdi-phone-outline',
                                 value: props.row.branch[0]?.telephoneNo || '-',
                               },
                               {
@@ -1620,15 +1624,14 @@ watch(
 
                                 <q-item dense>
                                   <q-item-section class="q-py-sm">
-                                    <div class="q-pa-sm surface-2 rounded">
-                                      <q-toggle
+                                    <div
+                                      class="q-pa-sm surface-2 rounded flex items-center"
+                                    >
+                                      <ToggleButton
                                         :id="`view-detail-btn-${props.row.name}-status`"
-                                        dense
-                                        size="sm"
-                                        :label="
+                                        two-way
+                                        :model-value="
                                           props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
                                         "
                                         @click="
                                           async () => {
@@ -1638,10 +1641,14 @@ watch(
                                             );
                                           }
                                         "
-                                        :model-value="
-                                          props.row.status !== 'INACTIVE'
-                                        "
                                       />
+                                      <span class="q-pl-md">
+                                        {{
+                                          props.row.status !== 'INACTIVE'
+                                            ? $t('switchOnLabel')
+                                            : $t('switchOffLabel')
+                                        }}
+                                      </span>
                                     </div>
                                   </q-item-section>
                                 </q-item>
@@ -1679,7 +1686,7 @@ watch(
                               {
                                 icon: 'mdi-clock-outline',
                                 value: props.row.dateOfBirth
-                                  ? calculateAge(props.row.dateOfBirth) ?? ''
+                                  ? (calculateAge(props.row.dateOfBirth) ?? '')
                                   : '',
                               },
                             ],