diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index d31a12aa..e61dfcb8 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -714,9 +714,10 @@ watch(locale, () => {
                 >
                   <div class="col-6">
                     <q-input
-                      bg-color="white"
+                      :bg-color="$q.dark.isActive ? '' : 'white'"
                       for="input-Search"
                       style="width: 250px"
+                      :label-color="$q.dark.isActive ? 'white' : 'grey-10'"
                       outlined
                       dense
                       label="ค้นหา"
@@ -728,8 +729,8 @@ watch(locale, () => {
                   <div class="col-6 row q-gutter-x-sm justify-end text-right">
                     <q-btn-dropdown
                       class="bordered rounded"
-                      color="white"
-                      text-color="grey-10"
+                      :color="$q.dark.isActive ? '' : 'white'"
+                      :text-color="$q.dark.isActive ? '' : 'grey-10'"
                       dense
                       unelevated
                       :label="labelBtnStatus"
@@ -787,8 +788,8 @@ watch(locale, () => {
                     </q-btn-dropdown>
 
                     <q-btn
-                      color="white"
-                      text-color="grey-10"
+                      :color="$q.dark.isActive ? '' : 'white'"
+                      :text-color="$q.dark.isActive ? '' : 'grey-10'"
                       id="btn-filter"
                       icon="mdi-tune-vertical-variant"
                       size="sm"
@@ -841,7 +842,7 @@ watch(locale, () => {
                       id="btn-mode"
                       dense
                       class="no-shadow"
-                      toggle-color="white"
+                      :toggle-color="$q.dark.isActive ? 'grey-9' : 'white'"
                       size="xs"
                       :options="[
                         { value: true, slot: 'folder' },
@@ -854,7 +855,13 @@ watch(locale, () => {
                           size="16px"
                           class="q-px-sm q-py-xs rounded"
                           :style="{
-                            color: modeView ? '#787B7C' : '#C9D3DB',
+                            color: $q.dark.isActive
+                              ? modeView
+                                ? '#C9D3DB '
+                                : '#787B7C'
+                              : modeView
+                                ? '#787B7C'
+                                : '#C9D3DB',
                           }"
                         />
                       </template>
@@ -864,7 +871,13 @@ watch(locale, () => {
                           class="q-px-sm q-py-xs rounded"
                           size="16px"
                           :style="{
-                            color: modeView === false ? '#787B7C' : '#C9D3DB',
+                            color: $q.dark.isActive
+                              ? modeView === false
+                                ? '#C9D3DB'
+                                : '#787B7C'
+                              : modeView === false
+                                ? '#787B7C'
+                                : '#C9D3DB',
                           }"
                         />
                       </template>