diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 3ff1da50..8aef8a58 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -76,7 +76,7 @@ function deleteFile(name: string) {
         size="xs"
         class="q-pa-sm rounded q-mr-xs"
         color="info"
-        name="mdi-briefcase"
+        name="mdi-briefcase-outline"
         style="background-color: var(--surface-3)"
       />
       {{ $t('formDialogTitleByType') }}
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 0e20ec4e..4b0ab43b 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -99,7 +99,7 @@ watch(
         size="xs"
         class="q-pa-sm rounded q-mr-xs"
         color="info"
-        name="mdi-account"
+        name="mdi-account-outline"
         style="background-color: var(--surface-3)"
       />
       {{ $t(`${title}`) }}
diff --git a/src/components/TreeCompoent.vue b/src/components/TreeCompoent.vue
index 40fa7858..adab2045 100644
--- a/src/components/TreeCompoent.vue
+++ b/src/components/TreeCompoent.vue
@@ -101,7 +101,7 @@ withDefaults(
               v-if="node.isHeadOffice && typeTree === 'branch'"
               :id="`create-sub-branch-btn-${node.name}`"
               @click.stop="$emit('create', node)"
-              icon="mdi-file-plus"
+              icon="mdi-file-plus-outline"
               class="app-text-muted-2"
               size="sm"
               dense
@@ -191,6 +191,7 @@ withDefaults(
                       <div class="q-pa-sm surface-2 rounded">
                         <q-toggle
                           :id="`view-detail-btn-${node.name}-status`"
+                          color="positive"
                           dense
                           size="sm"
                           :label="
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 52a64d26..4d7e70e8 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -146,6 +146,7 @@ defineEmits<{
                   <div class="q-pa-sm surface-2 rounded">
                     <q-toggle
                       dense
+                      color="positive"
                       size="sm"
                       @click="$emit('toggleStatus', disabled === false)"
                       :model-value="!disabled"
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index d5d8102e..6ac6dd02 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -669,7 +669,7 @@ watch(currentHq, () => {
       {{ $t('branchStatTitle') }}
       <q-btn
         class="q-ml-xs"
-        icon="mdi-pin"
+        icon="mdi-pin-outline"
         color="primary"
         size="sm"
         flat
@@ -1262,6 +1262,7 @@ watch(currentHq, () => {
                                   <q-item-section class="q-py-sm">
                                     <div class="q-pa-sm surface-2 rounded">
                                       <q-toggle
+                                        color="positive"
                                         :id="`view-detail-btn-${props.row.name}-status`"
                                         dense
                                         size="sm"
@@ -1470,6 +1471,7 @@ watch(currentHq, () => {
                                     <div class="q-pa-sm surface-2 rounded">
                                       <q-toggle
                                         :id="`view-detail-btn-${props.row.name}-status`"
+                                        color="positive"
                                         dense
                                         size="sm"
                                         :label="
@@ -1906,7 +1908,7 @@ watch(currentHq, () => {
           "
         >
           <q-item-section avatar>
-            <q-icon name="mdi-file-plus" class="app-text-muted-2" />
+            <q-icon name="mdi-file-plus-outline" class="app-text-muted-2" />
           </q-item-section>
           <q-item-section>
             {{ $t('formDialogTitleCreateSubBranch') }}
@@ -1983,6 +1985,7 @@ watch(currentHq, () => {
           <q-item-section avatar>
             <q-toggle
               dense
+              color="positive"
               :id="`view-detail-btn-${currentNode.name}-status`"
               size="sm"
               @click="
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 7462155a..92909317 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -120,18 +120,18 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
 
 const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
   {
-    icon: 'mdi-account',
+    icon: 'mdi-account-outline',
     color: 'hsl(var(--info-bg))',
     bgColor: 'var(--surface-1)',
   },
 
   {
-    icon: 'mdi-map-marker-radius',
+    icon: 'mdi-map-marker-radius-outline',
     color: 'hsl(var(--info-bg))',
     bgColor: 'var(--surface-1)',
   },
   {
-    icon: 'mdi-briefcase',
+    icon: 'mdi-briefcase-outline',
     color: 'hsl(var(--info-bg))',
     bgColor: 'var(--surface-1)',
   },
@@ -773,7 +773,7 @@ watch(
       @click="openDialog('FORM')"
       color="primary"
       padding="xs"
-      icon="mdi-account-plus"
+      icon="mdi-account-plus-outline"
     ></q-fab-action>
   </ButtonAddComponent>
 
@@ -798,7 +798,7 @@ watch(
       </q-badge>
       <q-btn
         class="q-ml-sm"
-        icon="mdi-pin"
+        icon="mdi-pin-outline"
         color="primary"
         size="sm"
         flat
@@ -821,7 +821,7 @@ watch(
                 ? Object.entries(typeStats).map(([key, val]) => ({
                     count: val,
                     label: key,
-                    icon: 'mdi-account',
+                    icon: 'mdi-account-outline',
                     color:
                       (
                         {
@@ -836,7 +836,7 @@ watch(
                     {
                       label: selectorLabel,
                       count: typeStats[selectorLabel],
-                      icon: 'mdi-account',
+                      icon: 'mdi-account-outline',
                       color:
                         selectorLabel === 'USER'
                           ? 'cyan'
@@ -1167,7 +1167,6 @@ watch(
                         margin-bottom: var(--size-2);
                       "
                     >
-                      {{ console.log(props.row) }}
                       <div class="branch-card__icon">
                         <q-avatar size="md">
                           <q-img
@@ -1371,6 +1370,7 @@ watch(
                           <q-item-section class="q-py-sm">
                             <div class="q-pa-sm surface-2 rounded">
                               <q-toggle
+                                color="positive"
                                 :id="`view-detail-btn-${props.row.username}-status`"
                                 dense
                                 size="sm"
@@ -1421,7 +1421,7 @@ watch(
                     female: props.row.gender === 'female',
                     detail: [
                       {
-                        icon: 'mdi-phone',
+                        icon: 'mdi-phone-outline',
                         value: props.row.telephoneNo,
                       },
                       {
@@ -1746,7 +1746,7 @@ watch(
         active
         useToggle
         color="white"
-        icon="mdi-account-plus"
+        icon="mdi-account-plus-outline"
         bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
         v-model:toggle-status="formData.status"
         :menu="formMenuIcon"
@@ -1901,7 +1901,7 @@ watch(
           <q-icon
             v-else
             size="15rem"
-            name="mdi-account-plus"
+            name="mdi-account-plus-outline"
             style="color: white"
           />
         </div>