diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue
index eef5f3a1..e9cc4483 100644
--- a/src/components/01_branch-management/FormBank.vue
+++ b/src/components/01_branch-management/FormBank.vue
@@ -44,7 +44,7 @@ defineEmits<{
 }>();
 
 const bankBookOptions = ref<Record<string, unknown>[]>([]);
-let bankBoookFilter: (
+let bankBookFilter: (
   value: string,
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
@@ -77,7 +77,7 @@ function change(e: Event) {
 
 onMounted(() => {
   if (optionStore.globalOption) {
-    bankBoookFilter = selectFilterOptionRefMod(
+    bankBookFilter = selectFilterOptionRefMod(
       ref(optionStore.globalOption.bankBook),
       bankBookOptions,
       'label',
@@ -94,7 +94,7 @@ onMounted(() => {
 watch(
   () => optionStore.globalOption,
   () => {
-    bankBoookFilter = selectFilterOptionRefMod(
+    bankBookFilter = selectFilterOptionRefMod(
       ref(optionStore.globalOption.bankBook),
       bankBookOptions,
       'label',
@@ -131,8 +131,8 @@ watch(
 
     <div
       v-for="(book, i) in bankBookList"
-      class="col-12 row"
-      :class="{ 'q-pt-lg': i !== 0 }"
+      class="col-12"
+      :class="{ 'q-pt-lg': i !== 0, row: $q.screen.gt.sm }"
       :key="i"
     >
       <q-separator
@@ -172,8 +172,8 @@ watch(
       </span>
 
       <div
-        class="bordered q-mr-sm rounded"
-        :class="{ 'pointer-none': readonly }"
+        class="bordered q-mr-sm rounded col text-center overflow-hidden"
+        :class="{ 'pointer-none': readonly, 'q-my-sm': $q.screen.lt.md }"
       >
         <ImageHover
           :readonly="readonly"
@@ -214,7 +214,7 @@ watch(
             @update:model-value="
               (v) => (typeof v === 'string' ? (book.bankName = v) : '')
             "
-            @filter="bankBoookFilter"
+            @filter="bankBookFilter"
             @clear="book.bankName = ''"
           >
             <template v-slot:option="scope">
diff --git a/src/components/01_branch-management/FormBranchContact.vue b/src/components/01_branch-management/FormBranchContact.vue
index b878cacd..f5c3b5d0 100644
--- a/src/components/01_branch-management/FormBranchContact.vue
+++ b/src/components/01_branch-management/FormBranchContact.vue
@@ -67,7 +67,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6 col-md-4"
+        class="col-12 col-md-4"
         :label="$t('form.telephone')"
         for="input-telephone-no"
         :model-value="readonly ? telephoneNo || '-' : telephoneNo"
@@ -116,7 +116,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6 col-md-4"
+        class="col-12 col-md-4"
         :label="$t('branch.form.contactTelephone')"
         for="input-contact"
         :model-value="readonly ? contact || '-' : contact"
@@ -139,7 +139,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6 col-md-4"
+        class="col-12 col-md-4"
         :label="$t('branch.form.webUrl')"
         for="input-web-url"
         :model-value="readonly ? webUrl || '-' : webUrl"
diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index 19aa178c..5a90d3f7 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -203,7 +203,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-4"
+          class="col-md-4 col-12"
           :label="$t('general.licenseNumber')"
           v-model="permitNo"
           :rules="[(val) => val && val.length > 0]"
@@ -212,7 +212,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         />
 
         <DatePicker
-          class="col-3"
+          class="col-md-3 col-12"
           id="input-start-date"
           :readonly="readonly"
           :label="$t('general.dateOfIssue')"
@@ -221,7 +221,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         />
 
         <DatePicker
-          class="col-3"
+          class="col-md-3 col-12"
           id="input-start-date"
           :readonly="readonly"
           :label="$t('general.expirationDate')"
diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue
index a2b306e0..f1483905 100644
--- a/src/components/04_flow-management/FormFlow.vue
+++ b/src/components/04_flow-management/FormFlow.vue
@@ -19,6 +19,7 @@ import SelectMenuWithSearch from '../shared/SelectMenuWithSearch.vue';
 import ToggleButton from 'src/components/button/ToggleButton.vue';
 import NoData from '../NoData.vue';
 import SelectBranch from '../shared/select/SelectBranch.vue';
+import AddButton from '../button/AddButton.vue';
 
 defineProps<{
   readonly?: boolean;
@@ -127,6 +128,7 @@ function optionSearch(val: string | null) {
 
 defineEmits<{
   (e: 'moveUp'): void;
+  (e: 'addStep'): void;
   (e: 'moveDown'): void;
   (e: 'changeStatus'): void;
   (e: 'triggerProperties', step: WorkFlowPayloadStep): void;
@@ -159,7 +161,10 @@ onMounted(async () => {
         style="background-color: var(--surface-3)"
       />
       {{ $t(`general.name`, { msg: $t('flow.title') }) }}
-      <span class="row q-ml-lg items-center text-weight-regular text-body2">
+      <span
+        class="row items-center text-weight-regular text-body2"
+        :class="{ 'q-ml-lg': $q.screen.gt.xs, 'q-mt-sm': $q.screen.lt.sm }"
+      >
         <ToggleButton
           class="q-mr-sm"
           two-way
@@ -216,6 +221,13 @@ onMounted(async () => {
         style="background-color: var(--surface-3)"
       />
       {{ $t(`flow.processStep`) }}
+      <AddButton
+        v-if="!readonly && $q.screen.lt.md"
+        id="btn-add-work"
+        icon-only
+        class="q-ml-sm"
+        @click="$emit('addStep')"
+      />
     </section>
 
     <section
diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index 99a00629..e3de24cb 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -229,7 +229,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
             "
             @drop="detailEditorImageDrop"
             min-height="5rem"
-            class="q-mt-sm q-mb-xs"
+            class="q-mt-sm q-mb-xs col"
             :flat="!readonly"
             :readonly="readonly"
             :toolbar-color="
@@ -275,4 +275,8 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
 :deep(.q-editor__toolbar) {
   border-color: var(--surface-3) !important;
 }
+
+:deep(.q-editor.q-editor--default) {
+  width: 1px;
+}
 </style>
diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index 70e58a2b..0f39d1ee 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -168,7 +168,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
       />
 
       <q-field
-        class="full-width"
+        class="col-12"
         outlined
         for="input-service-description"
         id="input-service-description"
@@ -180,31 +180,34 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
       >
         <q-editor
           dense
+          class="q-mt-sm q-mb-xs col"
           :model-value="
             readonly ? serviceDescription || '-' : serviceDescription || ''
           "
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (serviceDescription = v) : '')
-          "
-          @drop="detailEditorImageDrop"
           min-height="5rem"
-          class="q-mt-sm q-mb-xs"
           :flat="!readonly"
           :readonly="readonly"
+          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
           :toolbar-color="
             readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
           "
-          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
           style="
             cursor: auto;
             color: var(--foreground);
             border-color: var(--surface-3);
           "
-          :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (serviceDescription = v) : '')
+          "
+          @drop="detailEditorImageDrop"
         />
       </q-field>
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.q-editor.q-editor--default) {
+  width: 1px;
+}
+</style>
diff --git a/src/components/04_product-service/FormDocument.vue b/src/components/04_product-service/FormDocument.vue
index f7aa3ab1..f875122c 100644
--- a/src/components/04_product-service/FormDocument.vue
+++ b/src/components/04_product-service/FormDocument.vue
@@ -106,6 +106,7 @@ function optionSearch(val: string | null) {
 
     <div class="col-12 row q-col-gutter-sm">
       <q-select
+        behavior="menu"
         :readonly
         outlined
         dense
diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index e068d1b7..be383300 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -164,7 +164,7 @@ withDefaults(
       </div>
     </div>
 
-    <div class="col-12">
+    <div class="col-12 full-width">
       <q-table
         :columns="column"
         :rows="row"
diff --git a/src/components/05_quotation/FormAbout.vue b/src/components/05_quotation/FormAbout.vue
index 87ed4b25..df65761d 100644
--- a/src/components/05_quotation/FormAbout.vue
+++ b/src/components/05_quotation/FormAbout.vue
@@ -38,7 +38,7 @@ defineEmits<{
         style="background-color: var(--surface-3)"
       />
       {{ $t(`general.about`) }}
-      <div class="q-ml-md text-weight-regular">
+      <div class="text-weight-regular" :class="{ 'q-ml-md ': $q.screen.gt.sm }">
         <q-checkbox
           :label="$t('productService.product.agentPrice')"
           size="xs"
diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index 1cce142d..3f6768c2 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
 import { formatNumberDecimal } from 'src/stores/utils';
 import BadgeComponent from 'components/BadgeComponent.vue';
 import KebabAction from '../shared/KebabAction.vue';
-import MainButton from '../button/MainButton.vue';
 
 defineProps<{
   title?: string;
@@ -48,7 +46,7 @@ const rand = Math.random();
 </script>
 <template>
   <div
-    class="surface-1 rounded q-pa-sm quo-card bordered"
+    class="surface-1 rounded q-pa-sm quo-card bordered column"
     :class="{ 'urgent-card': urgent }"
     :style="{ '--animation-delay': rand + 's' }"
   >
@@ -71,7 +69,7 @@ const rand = Math.random();
         />
       </div>
 
-      <nav class="col text-right">
+      <nav class="col text-right no-wrap">
         <q-btn
           v-if="!hidePreview"
           flat
@@ -125,7 +123,7 @@ const rand = Math.random();
 
     <!-- SEC: body -->
     <section
-      class="rounded q-px-sm"
+      class="rounded q-px-sm col"
       :class="{
         'surface-1': urgent,
         'surface-2': !urgent,
diff --git a/src/components/07_agencies-management/FormBasicInfoAgencies.vue b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
index 5a71b7db..40b0ceb8 100644
--- a/src/components/07_agencies-management/FormBasicInfoAgencies.vue
+++ b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
@@ -35,6 +35,7 @@ type Options = { label: string; value: string };
 
     <div class="col-12 row q-col-gutter-sm">
       <SelectInput
+        :class="{ col: $q.screen.lt.md }"
         :disable="!readonly && onDrawer"
         :readonly="readonly"
         for="input-agencies-code"
@@ -60,7 +61,7 @@ type Options = { label: string; value: string };
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col"
+        class="col-md col-12"
         :label="$t('agencies.name')"
         v-model="name"
         :rules="[(val: string) => !!val || $t('form.error.required')]"
@@ -71,7 +72,7 @@ type Options = { label: string; value: string };
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col"
+        class="col-md col-12"
         :label="'Agencies Name'"
         v-model="nameEn"
       />
diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index 3f3820c7..965ef265 100644
--- a/src/components/DialogForm.vue
+++ b/src/components/DialogForm.vue
@@ -202,7 +202,7 @@ const currentTab = defineModel<string>('currentTab');
             </div>
 
             <!-- center -->
-            <div class="col column full-height">
+            <div class="col column full-height no-wrap">
               <slot></slot>
             </div>
 
diff --git a/src/components/ItemCard.vue b/src/components/ItemCard.vue
index 53cab0d4..19f891f4 100644
--- a/src/components/ItemCard.vue
+++ b/src/components/ItemCard.vue
@@ -42,7 +42,9 @@ onMounted(() => {
         :class="{ dark: $q.dark.isActive }"
         :style="`background-color: ${bgColor}`"
       >
-        <div style="font-size: 14px">{{ $t(text) }}</div>
+        <div style="font-size: 14px; color: var(--foreground)">
+          {{ $t(text) }}
+        </div>
       </div>
     </div>
   </button>
diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index 6ba83734..21e2e35d 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -154,15 +154,15 @@ const smallBanner = ref(false);
               class="absolute-bottom-right"
               style="
                 border-radius: 50%;
-                width: 20px;
-                height: 20px;
+                width: 1.25vw;
+                height: 1.25vw;
                 z-index: 2;
                 background: var(--surface-1);
               "
             >
               <q-badge
                 class="absolute-center"
-                style="border-radius: 50%; width: 14px; height: 14px"
+                style="border-radius: 50%; width: 0.8vw; height: 0.8vw"
                 :style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`"
               ></q-badge>
             </q-badge>
@@ -193,7 +193,7 @@ const smallBanner = ref(false);
       >
         <div
           class="row justify-between full-height"
-          style="padding-left: 7.5vw"
+          style="padding-left: calc(6vw + 50px)"
         >
           <div class="col column">
             <span
@@ -261,7 +261,7 @@ const smallBanner = ref(false);
               inline-label
               mobile-arrows
               v-model="currentTab"
-              active-class="active-tab text-weight-bold"
+              :active-class="`active-tab text-weight-bold ${$q.dark.isActive && 'dark'}`"
               class="app-text-muted full-width"
               align="left"
               v-if="typeof tabsList === 'object'"
@@ -271,6 +271,7 @@ const smallBanner = ref(false);
                 :id="`${prefix}-tab-${tab.label}`"
                 v-bind:key="tab.name"
                 class="content-tab text-capitalize"
+                :class="{ 'tab-label': currentTab !== tab.name }"
                 :name="tab.name"
                 :label="tab.label"
               />
@@ -302,7 +303,11 @@ const smallBanner = ref(false);
     >
       <!-- profile -->
       <span class="row col items-center">
-        <div class="flex items-center full-height q-pl-lg" style="z-index: 1">
+        <div
+          class="flex items-center full-height"
+          :class="{ 'q-pl-lg': $q.screen.gt.sm, 'q-pl-sm': $q.screen.lt.md }"
+          style="z-index: 1"
+        >
           <div
             class="surface-1"
             style="border-radius: 50%; border: 2px solid var(--surface-1)"
@@ -347,13 +352,14 @@ const smallBanner = ref(false);
                           <Icon
                             class="full-width full-height flex items-center justify-center"
                             :icon="icon || 'mdi-account'"
+                            style="width: 25px !important"
                           />
                         </div>
                       </template>
                     </q-img>
                     <div
                       v-else
-                      class="full-width full-height flex items-center justify-center"
+                      class="full-width full-height flex items-center justify-center no-padding"
                       :style="{
                         background: `${bgColor || 'var(--brand-1)'}`,
                         color: `${color || 'white'}`,
@@ -362,6 +368,7 @@ const smallBanner = ref(false);
                       <Icon
                         class="full-width full-height flex items-center justify-center"
                         :icon="icon || 'mdi-account'"
+                        style="width: 25px !important"
                       />
                     </div>
                   </template>
@@ -378,6 +385,7 @@ const smallBanner = ref(false);
                 <Icon
                   class="full-width full-height flex items-center justify-center"
                   :icon="icon || 'mdi-account'"
+                  style="width: 25px !important"
                 />
               </div>
 
@@ -425,7 +433,7 @@ const smallBanner = ref(false);
           inline-label
           mobile-arrows
           v-model="currentTab"
-          active-class="active-tab text-weight-bold"
+          :active-class="`active-tab text-weight-bold ${$q.dark.isActive && 'dark'}`"
           class="app-text-muted full-width"
           align="left"
           v-if="typeof tabsList === 'object'"
@@ -435,6 +443,7 @@ const smallBanner = ref(false);
             :id="`${prefix}-tab-${tab.label}`"
             v-bind:key="tab.name"
             class="content-tab text-capitalize"
+            :class="{ 'tab-label': currentTab !== tab.name }"
             :name="tab.name"
             :label="tab.label"
           />
@@ -526,5 +535,13 @@ const smallBanner = ref(false);
 
 .active-tab {
   color: var(--brand-1);
+  &.dark {
+    filter: brightness(1.3);
+  }
+}
+
+.tab-label {
+  color: var(--foreground);
+  opacity: 75%;
 }
 </style>
diff --git a/src/components/dialog/DialogViewFile.vue b/src/components/dialog/DialogViewFile.vue
index db574376..871842bf 100644
--- a/src/components/dialog/DialogViewFile.vue
+++ b/src/components/dialog/DialogViewFile.vue
@@ -57,13 +57,13 @@ async function downloadImage(url: string | null) {
     <main class="column full-height">
       <section
         v-if="!hideTab"
-        style="background: var(--gray-3)"
+        :style="`background: var(${$q.dark.isActive ? '--gray-8' : '--gray-3'})`"
         class="q-py-sm row justify-center"
       >
         <div class="surface-2 q-px-md q-py-sm rounded row no-wrap items-center">
           <MainButton
             icon="mdi-minus"
-            color="0 0% 0%"
+            :color="`var(--gray-${$q.dark.isActive ? '1' : '11'}-hsl)`"
             icon-only
             @click="
               () => {
@@ -90,7 +90,7 @@ async function downloadImage(url: string | null) {
           ></q-input>
           <MainButton
             icon="mdi-plus"
-            color="0 0% 0%"
+            :color="`var(--gray-${$q.dark.isActive ? '1' : '11'}-hsl)`"
             icon-only
             @click="
               () => {
diff --git a/src/components/shared/SelectInput.vue b/src/components/shared/SelectInput.vue
index 1026ca22..7120fe22 100644
--- a/src/components/shared/SelectInput.vue
+++ b/src/components/shared/SelectInput.vue
@@ -16,8 +16,8 @@ const props = withDefaults(
     id?: string;
     label?: string;
     option: T[];
-    optionLabel?: keyof T;
-    optionValue?: keyof T;
+    optionLabel?: keyof T | string;
+    optionValue?: keyof T | string;
     placeholder?: string;
 
     hideSelected?: boolean;
diff --git a/src/components/shared/SelectZone.vue b/src/components/shared/SelectZone.vue
index 98eeac13..2742a585 100644
--- a/src/components/shared/SelectZone.vue
+++ b/src/components/shared/SelectZone.vue
@@ -74,16 +74,16 @@ function assignSelect(to: unknown[], from: unknown[]) {
 <template>
   <section class="full-width column">
     <header
-      class="row items-center no-wrap q-px-md q-py-sm"
+      class="row items-center q-px-md q-py-sm"
       :class="{ 'bordered surface-3 ': borderSearchSection }"
     >
-      <div class="col"><slot name="top"></slot></div>
+      <div class="col-12 col-md"><slot name="top"></slot></div>
       <q-input
         for="input-search"
         outlined
         dense
         :label="$t('general.search')"
-        class="q-ml-auto"
+        class="col-12 col-md-3"
         :bg-color="$q.dark.isActive ? 'dark' : 'white'"
         v-model="search"
         debounce="300"
diff --git a/src/components/shared/TreeView.vue b/src/components/shared/TreeView.vue
index 4dd20c9d..6dde37a6 100644
--- a/src/components/shared/TreeView.vue
+++ b/src/components/shared/TreeView.vue
@@ -118,6 +118,9 @@ function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
     <template v-for="(node, i) in nodes" :key="i">
       <div
         class="tree-item"
+        :class="{
+          'cursor-pointer': node.children ? true : undefined,
+        }"
         v-if="filterText ? visibleNode(filterText, node, ancestorNode) : true"
       >
         <slot
@@ -205,19 +208,21 @@ function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
               />
             </label>
 
-            <div
-              class="item__icon flex items-center justify-center"
-              :style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
-            >
+            <div>
               <div
-                class="flex items-center justify-center"
-                :style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
+                class="item__icon flex items-center justify-center"
+                :style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
               >
-                <Icon
-                  v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
-                  :icon="node.icon || dec.icon"
-                  class="full-width full-height"
-                />
+                <div
+                  class="flex items-center justify-center"
+                  :style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
+                >
+                  <Icon
+                    v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
+                    :icon="node.icon || dec.icon"
+                    class="full-width full-height"
+                  />
+                </div>
               </div>
             </div>
 
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index a5012b7d..92a4b67d 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue';
 import useMyBranch from 'stores/my-branch';
 import { getUserId, getRole } from 'src/services/keycloak';
+import { useQuasar } from 'quasar';
 
 type Menu = {
   label: string;
@@ -17,6 +18,8 @@ type Menu = {
 };
 
 const router = useRouter();
+const $q = useQuasar();
+
 const userBranch = useMyBranch();
 const { currentMyBranch } = storeToRefs(userBranch);
 
@@ -35,17 +38,6 @@ const currentPath = computed(() => {
   return router.currentRoute.value.path;
 });
 
-// const labelMenu = ref<
-//   {
-//     label: string;
-//     icon: string;
-//     route: string;
-//     hidden?: boolean;
-//     disabled?: boolean;
-//     isax?: boolean;
-//   }[]
-// >([]);
-
 function navigateTo(label: string, destination?: string) {
   if (!destination) return;
   router.push(`${destination}`);
@@ -57,6 +49,8 @@ function reActiveMenu() {
   );
 
   const currMenuIndex = menuData.value.findIndex((m) => m === currMenu);
+
+  if ($q.screen.lt.sm) menuActive.value.fill(false);
   menuActive.value[currMenuIndex] = true;
 }
 
@@ -204,7 +198,6 @@ onMounted(async () => {
     :width="mini ? 80 : 256"
     show-if-above
   >
-    <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
     <section
       class="scroll"
       style="overflow-x: hidden; scrollbar-gutter: stable"
@@ -236,7 +229,6 @@ onMounted(async () => {
             :disable="menu.disabled"
             :header-class="{
               row: true,
-              'justify-between': !mini,
               'no-padding justify-center': mini,
               'active-menu text-weight-bold': menuActive[i],
               'text-weight-medium': !menu.disabled,
@@ -254,7 +246,12 @@ onMounted(async () => {
                   :class="`isax ${menu.icon}`"
                   style="font-size: 24px"
                 />
-                <Icon v-else :icon="menu.icon || ''" width="24px" />
+                <Icon
+                  v-else
+                  :icon="menu.icon || ''"
+                  width="24px"
+                  :class="{ 'fix-icon': !menuActive[i] }"
+                />
                 <span
                   v-if="!mini"
                   class="q-pl-sm"
@@ -514,4 +511,12 @@ onMounted(async () => {
     border-bottom-right-radius: var(--radius-2);
   }
 }
+
+.fix-icon {
+  color: var(--text-mute-2) !important;
+}
+
+:deep(.q-item.q-item-type.row.no-wrap.q-item--dense.disabled) {
+  opacity: 30% !important;
+}
 </style>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 02e0cabe..168b895d 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -208,6 +208,9 @@ onMounted(async () => {
         <div
           class="q-px-lg row items-center justify-start q-pb-md q-pt-lg"
           style="position: sticky; top: 0; z-index: 8"
+          :style="`
+            background: ${$q.screen.lt.md ? ($q.dark.isActive ? '#1c1d21' : '#ecedef') : 'transparent'};
+          `"
         >
           <q-btn
             v-if="$q.screen.lt.sm"
@@ -530,7 +533,7 @@ onMounted(async () => {
   }
 }
 
-.avartar-border {
+.avatar-border {
   margin-top: 24px;
   border: 5px solid var(--surface-1);
   border-radius: 50%;
diff --git a/src/layouts/ProfileMenu.vue b/src/layouts/ProfileMenu.vue
index 1c7451ea..82980933 100644
--- a/src/layouts/ProfileMenu.vue
+++ b/src/layouts/ProfileMenu.vue
@@ -317,6 +317,7 @@ onMounted(async () => {
                     max-width="200"
                     :offset="[10, 0]"
                     style="width: 160px"
+                    :touch-position="$q.screen.lt.sm"
                   >
                     <div v-for="(mode, index) in themeMode" :key="index">
                       <q-item clickable @click="theme = setTheme(mode.value)">
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index abaeb972..e00bc118 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -6,7 +6,7 @@ import { Icon } from '@iconify/vue';
 import { BranchContact } from 'stores/branch-contact/types';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import type { QTableProps, QTableSlots } from 'quasar';
+import type { QSelect, QTableProps, QTableSlots } from 'quasar';
 import { resetScrollBar } from 'src/stores/utils';
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'stores/flow';
@@ -72,6 +72,7 @@ const typeBranchItem = [
     color: 'var(--blue-6-hsl)',
   },
 ];
+const refFilter = ref<InstanceType<typeof QSelect>>();
 const holdDialog = ref(false);
 const isSubCreate = ref(false);
 const columns = [
@@ -302,7 +303,10 @@ const stats = ref<
   }[]
 >([]);
 
-const splitterModel = ref(25);
+// const splitterModel = ref(25);
+const splitterModel = computed(() =>
+  $q.screen.lt.md ? (currentHq.value.id ? 0 : 100) : 25,
+);
 
 const defaultFormData = {
   headOfficeId: null,
@@ -1020,12 +1024,13 @@ watch(currentHq, () => {
             class="col"
             before-class="overflow-hidden"
             after-class="overflow-hidden"
+            :disable="$q.screen.lt.sm"
           >
             <template v-slot:before>
               <div class="surface-1 column full-height">
                 <div
                   class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
-                  :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
+                  :style="`min-height: ${$q.screen.gt.sm ? '57px' : ''}`"
                 >
                   <div class="col ellipsis-2-lines">
                     {{ $t('branch.allBranch') }}
@@ -1157,7 +1162,7 @@ watch(currentHq, () => {
                     outlined
                     dense
                     :label="$t('general.search')"
-                    class="q-mr-md col-12 col-md-4"
+                    class="col col-md-3"
                     :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                     v-model="inputSearch"
                     debounce="200"
@@ -1165,13 +1170,26 @@ watch(currentHq, () => {
                     <template v-slot:prepend>
                       <q-icon name="mdi-magnify" />
                     </template>
+                    <template v-if="$q.screen.lt.md" v-slot:append>
+                      <span class="row">
+                        <q-separator vertical />
+                        <q-btn
+                          icon="mdi-filter-variant"
+                          unelevated
+                          class="q-ml-sm"
+                          padding="4px"
+                          size="sm"
+                          rounded
+                          @click="refFilter?.showPopup"
+                        />
+                      </span>
+                    </template>
                   </q-input>
 
-                  <div
-                    class="row col-12 col-md-6"
-                    :class="{ 'q-pt-xs': $q.screen.lt.md }"
-                  >
+                  <div class="row col-md-6 justify-end">
                     <q-select
+                      v-show="$q.screen.gt.sm"
+                      ref="refFilter"
                       v-model="statusFilter"
                       outlined
                       dense
@@ -1179,7 +1197,7 @@ watch(currentHq, () => {
                       option-value="value"
                       :hide-dropdown-icon="$q.screen.lt.sm"
                       option-label="label"
-                      class="col"
+                      class="col-md-5"
                       map-options
                       :for="'field-select-status'"
                       emit-value
@@ -1194,6 +1212,7 @@ watch(currentHq, () => {
                     ></q-select>
 
                     <q-select
+                      v-if="!modeView"
                       id="select-field"
                       for="select-field"
                       :options="
@@ -1204,7 +1223,7 @@ watch(currentHq, () => {
                       "
                       :display-value="$t('general.displayField')"
                       :hide-dropdown-icon="$q.screen.lt.sm"
-                      class="col q-mx-sm"
+                      class="col q-ml-sm"
                       v-model="fieldSelected"
                       option-label="label"
                       option-value="value"
@@ -1220,7 +1239,7 @@ watch(currentHq, () => {
                       id="btn-mode"
                       v-model="modeView"
                       dense
-                      class="no-shadow bordered rounded surface-1"
+                      class="no-shadow bordered rounded surface-1 q-ml-sm"
                       :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                       size="xs"
                       :options="[
@@ -1266,8 +1285,26 @@ watch(currentHq, () => {
 
                 <div
                   v-if="
-                    inputSearch &&
-                    treeData.flatMap((v) => [v, ...v.branch]).length === 0
+                    (
+                      currentSubBranch ||
+                      (inputSearch !== ''
+                        ? treeData.flatMap((v) => [v, ...v.branch])
+                        : treeData)
+                    ).filter((v) => {
+                      if (
+                        statusFilter === 'statusACTIVE' &&
+                        v.status === 'INACTIVE'
+                      ) {
+                        return false;
+                      }
+                      if (
+                        statusFilter === 'statusINACTIVE' &&
+                        v.status !== 'INACTIVE'
+                      ) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0
                   "
                   class="row items-center justify-center full-height"
                 >
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 27923d1d..c2b8d2c6 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -10,7 +10,7 @@ import useOptionStore from 'stores/options';
 import useAddressStore from 'stores/address';
 import useMyBranch from 'src/stores/my-branch';
 import { calculateAge } from 'src/utils/datetime';
-import { useQuasar, type QTableProps } from 'quasar';
+import { QSelect, useQuasar, type QTableProps } from 'quasar';
 import { dialog, baseUrl } from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
@@ -73,6 +73,7 @@ const isImageEdit = ref(false);
 const imageDialog = ref(false);
 const infoDrawerEdit = ref(false);
 const refreshImageState = ref(false);
+const refFilter = ref<InstanceType<typeof QSelect>>();
 
 const inputSearch = ref('');
 const currentTab = ref<string>('ALL');
@@ -820,7 +821,7 @@ watch(
       class="col surface-2 rounded justify-between column no-wrap bordered full-height overflow-hidden"
     >
       <div class="column">
-        <div
+        <header
           class="row surface-3 justify-between full-width items-center bordered-b"
           style="z-index: 1"
         >
@@ -830,7 +831,7 @@ watch(
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
               debounce="200"
@@ -838,14 +839,26 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
+              <template v-if="$q.screen.lt.md" v-slot:append>
+                <span class="row">
+                  <q-separator vertical />
+                  <q-btn
+                    icon="mdi-filter-variant"
+                    unelevated
+                    class="q-ml-sm"
+                    padding="4px"
+                    size="sm"
+                    rounded
+                    @click="refFilter?.showPopup"
+                  />
+                </span>
+              </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-5"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5" style="white-space: nowrap">
               <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
                 v-model="statusFilter"
                 outlined
                 dense
@@ -936,7 +949,7 @@ watch(
               </q-btn-toggle>
             </div>
           </div>
-        </div>
+        </header>
 
         <div class="surface-2 bordered-b q-px-md full-width">
           <q-tabs
@@ -1521,7 +1534,7 @@ watch(
             class="rounded row"
             :class="{
               'q-py-md q-px-lg': $q.screen.gt.sm,
-              'q-py-sm q-px-lg': !$q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
             }"
             style="position: absolute; z-index: 999; top: 0; right: 0"
           >
@@ -1618,7 +1631,7 @@ watch(
             class="col-12 col-md-10 relative-position"
             :class="{
               'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-py-md q-px-lg': !$q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
             }"
             id="user-form-content"
             style="height: 100%; max-height: 100; overflow-y: auto"
@@ -1734,6 +1747,7 @@ watch(
       }"
     >
       <ProfileBanner
+        :prefix="formData.firstName"
         active
         useToggle
         color="white"
@@ -1789,7 +1803,7 @@ watch(
           style="position: absolute; z-index: 999; right: 0; top: 0"
           :class="{
             'q-py-md q-px-lg': $q.screen.gt.sm,
-            'q-py-sm q-px-lg': !$q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
           }"
         >
           <div class="surface-1 row rounded">
@@ -1837,7 +1851,7 @@ watch(
           class="col-md-10 col-12 full-height scroll"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-py-md q-px-lg': !$q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
           }"
         >
           <FormInformation
diff --git a/src/pages/04_flow-managment/FlowDialog.vue b/src/pages/04_flow-managment/FlowDialog.vue
index f2287655..77d8bd12 100644
--- a/src/pages/04_flow-managment/FlowDialog.vue
+++ b/src/pages/04_flow-managment/FlowDialog.vue
@@ -100,7 +100,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
         style="position: absolute; z-index: 999; right: 0; top: 0"
         :class="{
           'q-py-md q-px-lg': $q.screen.gt.sm,
-          'q-py-sm q-px-lg': !$q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
         }"
       >
         <div class="surface-1 row rounded">
@@ -160,7 +160,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
         class="col-12 col-md-10"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-py-md q-px-lg': !$q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
         }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
         id="flow-form-dialog"
@@ -169,6 +169,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
           v-model:flow-data="flowData"
           v-model:register-branch-id="registerBranchId"
           @trigger-properties="triggerPropertiesDialog"
+          @add-step="addStep"
         />
       </section>
     </div>
@@ -199,7 +200,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
             class="rounded row"
             :class="{
               'q-py-md q-px-lg': $q.screen.gt.sm,
-              'q-py-sm q-px-lg': !$q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
             }"
             style="position: absolute; z-index: 999; top: 0; right: 0"
           >
@@ -304,7 +305,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
             class="col-12 col-md-10"
             :class="{
               'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-py-md q-px-lg': !$q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
             }"
             style="height: 100%; max-height: 100%; overflow-y: auto"
             id="flow-form-drawer"
@@ -317,6 +318,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
               v-model:register-branch-id="registerBranchId"
               @change-status="$emit('changeStatus')"
               @trigger-properties="triggerPropertiesDialog"
+              @add-step="addStep"
             />
           </section>
         </div>
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 72e2a02d..a03c3be7 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref, watch } from 'vue';
-import { QTableProps } from 'quasar';
+import { QSelect, QTableProps } from 'quasar';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
@@ -68,6 +68,7 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   },
 ]);
 
+const refFilter = ref<InstanceType<typeof QSelect>>();
 const currWorkflowData = ref<WorkflowTemplate>();
 const formDataWorkflow = ref<WorkflowTemplatePayload>({
   status: 'CREATED',
@@ -361,7 +362,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -369,14 +370,26 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
+              <template v-if="$q.screen.lt.md" v-slot:append>
+                <span class="row">
+                  <q-separator vertical />
+                  <q-btn
+                    icon="mdi-filter-variant"
+                    unelevated
+                    class="q-ml-sm"
+                    padding="4px"
+                    size="sm"
+                    rounded
+                    @click="refFilter?.showPopup"
+                  />
+                </span>
+              </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-5 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5" style="white-space: nowrap">
               <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
                 v-model="statusFilter"
                 outlined
                 dense
@@ -394,6 +407,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
                 ]"
               />
               <q-select
+                v-show="$q.screen.gt.sm"
                 id="select-field"
                 for="select-field"
                 class="col q-ml-sm"
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index fb092dfb..14668378 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -3,7 +3,7 @@ import { nextTick, ref, watch, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useQuasar, type QTableProps } from 'quasar';
+import { QSelect, useQuasar, type QTableProps } from 'quasar';
 
 import DialogProperties from 'src/components/dialog/DialogProperties.vue';
 import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
@@ -156,6 +156,12 @@ const priceDisplay = computed(() => ({
 const actionDisplay = computed(() =>
   isRoleInclude(['admin', 'head_of_admin', 'system', 'owner', 'accountant']),
 );
+const splitterModel = computed(() =>
+  $q.screen.lt.md ? (productMode.value !== 'group' ? 0 : 100) : 25,
+);
+
+const refFilterGroup = ref<InstanceType<typeof QSelect>>();
+const refFilterProductService = ref<InstanceType<typeof QSelect>>();
 const holdDialog = ref(false);
 const imageDialog = ref(false);
 const currentNode = ref<ProductGroup & { type: string }>();
@@ -205,7 +211,6 @@ const drawerInfo = ref(false);
 const isEdit = ref(false);
 
 const modeView = ref(false);
-const splitterModel = ref(25);
 
 const dialogInputForm = ref(false);
 const dialogProduct = ref(false);
@@ -1829,16 +1834,46 @@ watch(
         style="width: 100%"
         class="col"
         after-class="overflow-hidden"
+        :disable="$q.screen.lt.sm"
       >
         <template v-slot:before>
           <div class="surface-1 column full-height">
             <div
               class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
-              :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
+              :style="`min-height: ${$q.screen.gt.sm ? '57px' : ''}`"
             >
-              <div class="col ellipsis-2-lines">
+              <div v-if="$q.screen.gt.sm" class="col ellipsis-2-lines">
                 {{ $t('productService.caption') }}
               </div>
+              <q-input
+                v-else
+                for="input-search"
+                outlined
+                dense
+                :label="$t('general.search')"
+                class="col"
+                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                v-model="inputSearch"
+                debounce="200"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="mdi-magnify" />
+                </template>
+                <template v-if="$q.screen.lt.md" v-slot:append>
+                  <span class="row">
+                    <q-separator vertical />
+                    <q-btn
+                      icon="mdi-filter-variant"
+                      unelevated
+                      class="q-ml-sm"
+                      padding="4px"
+                      size="sm"
+                      rounded
+                      @click="refFilterGroup?.showPopup"
+                    />
+                  </span>
+                </template>
+              </q-input>
             </div>
 
             <div class="col full-width scroll">
@@ -1964,10 +1999,9 @@ watch(
                 <q-input
                   for="input-search"
                   outlined
-                  :class="{ 'col-12': $q.screen.lt.md }"
                   dense
                   :label="$t('general.search')"
-                  class=""
+                  class="col col-md-3"
                   :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                   v-model="inputSearch"
                   debounce="200"
@@ -1975,14 +2009,26 @@ watch(
                   <template v-slot:prepend>
                     <q-icon name="mdi-magnify" />
                   </template>
+                  <template v-if="$q.screen.lt.md" v-slot:append>
+                    <span class="row">
+                      <q-separator vertical />
+                      <q-btn
+                        icon="mdi-filter-variant"
+                        unelevated
+                        class="q-ml-sm"
+                        padding="4px"
+                        size="sm"
+                        rounded
+                        @click="refFilterGroup?.showPopup"
+                      />
+                    </span>
+                  </template>
                 </q-input>
 
-                <div
-                  class="row col-12 col-md-6"
-                  :class="{ 'q-pt-xs': $q.screen.lt.md }"
-                  style="white-space: nowrap"
-                >
+                <div class="row col-md-6" style="white-space: nowrap">
                   <q-select
+                    v-show="$q.screen.gt.sm"
+                    ref="refFilterGroup"
                     v-model="currentStatus"
                     for="select-status"
                     outlined
@@ -2466,11 +2512,11 @@ watch(
               style="overflow: hidden"
             >
               <div
-                class="row justify-between items-center q-px-md q-py-sm surface-3 bordered-b"
+                class="row justify-between q-px-md q-py-sm surface-3 bordered-b"
               >
                 <q-input
                   for="input-search"
-                  :class="{ 'col-12': $q.screen.lt.md }"
+                  class="col col-md-3"
                   outlined
                   dense
                   unelavated
@@ -2482,14 +2528,26 @@ watch(
                   <template v-slot:prepend>
                     <q-icon name="mdi-magnify" />
                   </template>
+                  <template v-if="$q.screen.lt.md" v-slot:append>
+                    <span class="row">
+                      <q-separator vertical />
+                      <q-btn
+                        icon="mdi-filter-variant"
+                        unelevated
+                        class="q-ml-sm"
+                        padding="4px"
+                        size="sm"
+                        rounded
+                        @click="refFilterProductService?.showPopup"
+                      />
+                    </span>
+                  </template>
                 </q-input>
 
-                <div
-                  class="row col-12 col-md-6"
-                  :class="{ 'q-pt-xs': $q.screen.lt.md }"
-                  style="white-space: nowrap"
-                >
+                <div class="row col-md-6" style="white-space: nowrap">
                   <q-select
+                    v-show="$q.screen.gt.sm"
+                    ref="refFilterProductService"
                     :for="'field-select-status'"
                     v-model="currentStatus"
                     outlined
@@ -3721,86 +3779,93 @@ watch(
     </div>
 
     <div
-      class="col surface-1 rounded bordered scroll row relative-position"
-      id="product-form"
+      class="full-width full-height scroll"
       :class="{
-        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
-        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+        'q-pb-lg q-px-lg ': $q.screen.gt.sm,
+        'q-pb-sm q-px-md': !$q.screen.gt.sm,
       }"
     >
       <div
-        class="col"
-        style="height: 100%; max-height: 100; overflow-y: auto"
-        v-if="$q.screen.gt.sm"
-      >
-        <div class="q-py-md q-pl-md q-pr-sm">
-          <q-item
-            v-for="v in 3"
-            :key="v"
-            dense
-            clickable
-            class="no-padding items-center rounded full-width"
-            :class="{ 'q-mt-xs': v > 1 }"
-            active-class="product-form-active"
-            :active="productTab === v"
-            @click="productTab = v"
-          >
-            <span class="full-width q-py-sm" style="padding-inline: 20px">
-              {{
-                v === 1
-                  ? $t('form.field.basicInformation')
-                  : v === 2
-                    ? $t('productService.product.priceInformation')
-                    : $t('general.information', {
-                        msg: $t('general.attachment'),
-                      })
-              }}
-            </span>
-          </q-item>
-        </div>
-      </div>
-      <div
-        class="col-12 col-md-10"
-        id="customer-form-content"
-        :class="{
-          'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-py-md q-px-lg': !$q.screen.gt.sm,
-        }"
-        style="height: 100%; max-height: 100%; overflow-y: auto"
+        class="col surface-1 rounded bordered scroll row relative-position full-height"
+        id="product-form"
       >
         <div
-          class="q-py-md q-px-lg"
-          style="position: absolute; z-index: 99999; top: 0; right: 0"
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
         >
-          <div class="surface-1 row rounded">
-            <SaveButton id="btn-info-basic-save" icon-only type="submit" />
+          <div class="q-py-md q-pl-md q-pr-sm">
+            <q-item
+              v-for="v in 3"
+              :key="v"
+              dense
+              clickable
+              class="no-padding items-center rounded full-width"
+              :class="{ 'q-mt-xs': v > 1 }"
+              active-class="product-form-active"
+              :active="productTab === v"
+              @click="productTab = v"
+            >
+              <span class="full-width q-py-sm" style="padding-inline: 20px">
+                {{
+                  v === 1
+                    ? $t('form.field.basicInformation')
+                    : v === 2
+                      ? $t('productService.product.priceInformation')
+                      : $t('general.information', {
+                          msg: $t('general.attachment'),
+                        })
+                }}
+              </span>
+            </q-item>
           </div>
         </div>
-        <BasicInfoProduct
-          v-if="productTab === 1"
-          v-model:detail="formProduct.detail"
-          v-model:remark="formProduct.remark"
-          v-model:name="formProduct.name"
-          v-model:code="formProduct.code"
-          v-model:process="formProduct.process"
-          v-model:expense-type="formProduct.expenseType"
-          v-model:shared="formProduct.shared"
-          dense
-          separator
-        />
-        <PriceDataComponent
-          v-if="productTab === 2"
-          v-model:price="formProduct.price"
-          v-model:agent-price="formProduct.agentPrice"
-          v-model:service-charge="formProduct.serviceCharge"
-          v-model:vat-included="formProduct.vatIncluded"
-          v-model:calc-vat="formProduct.calcVat"
-          dense
-        />
-        <FormDocument
-          v-if="productTab === 3"
-          v-model:attachment="formProductDocument"
-        />
+        <div
+          class="col-12 col-md-10"
+          id="customer-form-content"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
+          }"
+          style="height: 100%; max-height: 100%; overflow-y: auto"
+        >
+          <div
+            :class="{
+              'q-my-md q-mx-lg': $q.screen.gt.sm,
+              'q-ma-sm': $q.screen.lt.md,
+            }"
+            style="position: absolute; z-index: 99999; top: 0; right: 0"
+          >
+            <div class="surface-1 row rounded">
+              <SaveButton id="btn-info-basic-save" icon-only type="submit" />
+            </div>
+          </div>
+          <BasicInfoProduct
+            v-if="productTab === 1"
+            v-model:detail="formProduct.detail"
+            v-model:remark="formProduct.remark"
+            v-model:name="formProduct.name"
+            v-model:code="formProduct.code"
+            v-model:process="formProduct.process"
+            v-model:expense-type="formProduct.expenseType"
+            v-model:shared="formProduct.shared"
+            dense
+            separator
+          />
+          <PriceDataComponent
+            v-if="productTab === 2"
+            v-model:price="formProduct.price"
+            v-model:agent-price="formProduct.agentPrice"
+            v-model:service-charge="formProduct.serviceCharge"
+            v-model:vat-included="formProduct.vatIncluded"
+            v-model:calc-vat="formProduct.calcVat"
+            dense
+          />
+          <FormDocument
+            v-if="productTab === 3"
+            v-model:attachment="formProductDocument"
+          />
+        </div>
       </div>
     </div>
   </DialogForm>
@@ -3887,123 +3952,131 @@ watch(
     </div>
 
     <div
-      class="col surface-1 rounded bordered scroll row relative-position"
-      id="product-form"
+      class="full-width full-height scroll"
       :class="{
-        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
-        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
+        'q-pb-lg q-px-lg ': $q.screen.gt.sm,
+        'q-pb-sm q-px-md': !$q.screen.gt.sm,
       }"
     >
       <div
-        class="surface-1 rounded row q-mx-lg q-my-md"
-        style="position: absolute; z-index: 999; top: 0; right: 0"
-        v-if="actionDisplay && !currentNoAction"
+        class="col surface-1 rounded bordered scroll row relative-position full-height"
+        id="product-form"
       >
-        <UndoButton
-          v-if="infoProductEdit"
-          id="btn-info-basic-undo"
-          icon-only
-          @click="
-            () => {
-              formProduct = { ...prevProduct };
-              if (prevProduct.document)
-                formProductDocument = prevProduct.document;
-              infoProductEdit = false;
-            }
-          "
-          type="button"
-        />
-        <SaveButton
-          v-if="infoProductEdit"
-          id="btn-info-basic-save"
-          icon-only
-          type="submit"
-        />
-        <EditButton
-          v-if="!infoProductEdit"
-          id="btn-info-basic-edit"
-          icon-only
-          @click="infoProductEdit = true"
-          type="button"
-        />
-        <DeleteButton
-          v-if="!infoProductEdit"
-          id="btn-info-basic-delete"
-          icon-only
-          @click="() => deleteProductConfirm()"
-          type="button"
-        />
-      </div>
-      <div
-        class="col"
-        style="height: 100%; max-height: 100; overflow-y: auto"
-        v-if="$q.screen.gt.sm"
-      >
-        <div class="q-py-md q-pl-md q-pr-sm">
-          <q-item
-            v-for="v in 3"
-            :key="v"
-            dense
-            clickable
-            class="no-padding items-center rounded full-width"
-            :class="{ 'q-mt-xs': v > 1 }"
-            active-class="product-form-active"
-            :active="productTab === v"
-            @click="productTab = v"
-          >
-            <span class="full-width q-py-sm" style="padding-inline: 20px">
-              {{
-                v === 1
-                  ? $t('form.field.basicInformation')
-                  : v === 2
-                    ? $t('productService.product.priceInformation')
-                    : $t('general.information', {
-                        msg: $t('general.attachment'),
-                      })
-              }}
-            </span>
-          </q-item>
+        <div
+          class="surface-1 rounded row"
+          :class="{
+            'q-my-md q-mx-lg': $q.screen.gt.sm,
+            'q-ma-sm': $q.screen.lt.md,
+          }"
+          style="position: absolute; z-index: 999; top: 0; right: 0"
+          v-if="actionDisplay && !currentNoAction"
+        >
+          <UndoButton
+            v-if="infoProductEdit"
+            id="btn-info-basic-undo"
+            icon-only
+            @click="
+              () => {
+                formProduct = { ...prevProduct };
+                if (prevProduct.document)
+                  formProductDocument = prevProduct.document;
+                infoProductEdit = false;
+              }
+            "
+            type="button"
+          />
+          <SaveButton
+            v-if="infoProductEdit"
+            id="btn-info-basic-save"
+            icon-only
+            type="submit"
+          />
+          <EditButton
+            v-if="!infoProductEdit"
+            id="btn-info-basic-edit"
+            icon-only
+            @click="infoProductEdit = true"
+            type="button"
+          />
+          <DeleteButton
+            v-if="!infoProductEdit"
+            id="btn-info-basic-delete"
+            icon-only
+            @click="() => deleteProductConfirm()"
+            type="button"
+          />
+        </div>
+        <div
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
+        >
+          <div class="q-py-md q-pl-md q-pr-sm">
+            <q-item
+              v-for="v in 3"
+              :key="v"
+              dense
+              clickable
+              class="no-padding items-center rounded full-width"
+              :class="{ 'q-mt-xs': v > 1 }"
+              active-class="product-form-active"
+              :active="productTab === v"
+              @click="productTab = v"
+            >
+              <span class="full-width q-py-sm" style="padding-inline: 20px">
+                {{
+                  v === 1
+                    ? $t('form.field.basicInformation')
+                    : v === 2
+                      ? $t('productService.product.priceInformation')
+                      : $t('general.information', {
+                          msg: $t('general.attachment'),
+                        })
+                }}
+              </span>
+            </q-item>
+          </div>
+        </div>
+        <div
+          class="col-12 col-md-10"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
+          }"
+          id="customer-form-content"
+          style="height: 100%; max-height: 100%; overflow-y: auto"
+        >
+          <BasicInfoProduct
+            v-if="productTab === 1"
+            :readonly="!infoProductEdit"
+            v-model:detail="formProduct.detail"
+            v-model:remark="formProduct.remark"
+            v-model:name="formProduct.name"
+            v-model:code="formProduct.code"
+            v-model:process="formProduct.process"
+            v-model:expense-type="formProduct.expenseType"
+            v-model:shared="formProduct.shared"
+            disableCode
+            dense
+            separator
+          />
+          <PriceDataComponent
+            v-if="productTab === 2"
+            :readonly="!infoProductEdit"
+            v-model:price="formProduct.price"
+            v-model:agent-price="formProduct.agentPrice"
+            v-model:service-charge="formProduct.serviceCharge"
+            v-model:vat-included="formProduct.vatIncluded"
+            v-model:calc-vat="formProduct.calcVat"
+            dense
+            :priceDisplay="priceDisplay"
+          />
+          <FormDocument
+            v-if="productTab === 3"
+            :readonly="!infoProductEdit"
+            v-model:attachment="formProductDocument"
+          />
         </div>
-      </div>
-      <div
-        class="col-12 col-md-10"
-        :class="{
-          'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-py-md q-px-lg': !$q.screen.gt.sm,
-        }"
-        id="customer-form-content"
-        style="height: 100%; max-height: 100%; overflow-y: auto"
-      >
-        <BasicInfoProduct
-          v-if="productTab === 1"
-          :readonly="!infoProductEdit"
-          v-model:detail="formProduct.detail"
-          v-model:remark="formProduct.remark"
-          v-model:name="formProduct.name"
-          v-model:code="formProduct.code"
-          v-model:process="formProduct.process"
-          v-model:expense-type="formProduct.expenseType"
-          v-model:shared="formProduct.shared"
-          disableCode
-          dense
-          separator
-        />
-        <PriceDataComponent
-          v-if="productTab === 2"
-          :readonly="!infoProductEdit"
-          v-model:price="formProduct.price"
-          v-model:agent-price="formProduct.agentPrice"
-          v-model:service-charge="formProduct.serviceCharge"
-          v-model:vat-included="formProduct.vatIncluded"
-          v-model:calc-vat="formProduct.calcVat"
-          dense
-          :priceDisplay="priceDisplay"
-        />
-        <FormDocument
-          v-if="productTab === 3"
-          :readonly="!infoProductEdit"
-          v-model:attachment="formProductDocument"
-        />
       </div>
     </div>
   </DialogForm>
@@ -4170,17 +4243,33 @@ watch(
         id="customer-form-content"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-py-md q-px-lg': !$q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
         }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <div
-          class="surface-1 rounded q-my-md q-mx-lg items-center row"
-          style="position: absolute; z-index: 999; top: 0; right: 0"
+          class="surface-1 rounded items-center justify-end row"
+          :class="{
+            'q-my-md q-mx-lg': $q.screen.gt.sm,
+            'q-ma-sm': $q.screen.lt.md,
+          }"
+          style="
+            position: absolute;
+            z-index: 999;
+            top: 0;
+            right: 0;
+            flex-wrap: wrap-reverse;
+          "
+          :style="$q.screen.lt.sm && 'width: 80px'"
           v-if="actionDisplay && !currentNoAction"
         >
-          <div class="bordered rounded q-mr-md" v-if="serviceTab === 2">
+          <div
+            class="bordered rounded col-md row"
+            v-if="serviceTab === 2"
+            :style="$q.screen.lt.sm && 'flex-basis: 100%; '"
+          >
             <q-btn
+              class="col"
               icon="mdi-file-tree-outline"
               flat
               square
@@ -4199,6 +4288,7 @@ watch(
               @click="serviceTreeView = true"
             />
             <q-btn
+              class="col"
               icon="mdi-view-list-outline"
               flat
               square
@@ -4446,16 +4536,29 @@ watch(
         'q-mb-sm q-mx-md': !$q.screen.gt.sm,
       }"
     >
+      <!-- row: $q.screen.gt.sm, -->
       <div
-        class="surface-1 rounded q-my-md q-mx-lg row items-center"
-        style="position: absolute; z-index: 999; top: 0; right: 0"
+        class="surface-1 rounded items-center justify-end row"
+        :class="{
+          'q-my-md q-mx-lg': $q.screen.gt.sm,
+          'q-ma-sm': $q.screen.lt.md,
+        }"
+        style="
+          position: absolute;
+          z-index: 999;
+          top: 0;
+          right: 0;
+          flex-wrap: wrap-reverse;
+        "
         v-if="actionDisplay && !currentNoAction"
       >
         <div
-          class="bordered rounded q-mr-md"
+          class="bordered rounded col-md row"
           v-if="serviceTab === 2 && !infoServiceEdit"
+          :style="$q.screen.lt.sm && 'flex-basis: 100%; width: 1px'"
         >
           <q-btn
+            class="col"
             icon="mdi-file-tree-outline"
             flat
             square
@@ -4474,6 +4577,7 @@ watch(
             @click="serviceTreeView = true"
           />
           <q-btn
+            class="col"
             icon="mdi-view-list-outline"
             flat
             square
@@ -4533,6 +4637,7 @@ watch(
           type="button"
         />
       </div>
+
       <div
         class="col column justify-between no-wrap"
         style="height: 100%; max-height: 100; overflow-y: auto"
@@ -4613,7 +4718,7 @@ watch(
         id="customer-form-content"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-py-sm q-px-lg': !$q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
         }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
         v-if="dialogServiceEdit"
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 30b4b081..5a79c079 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { pageTabs, columnQuotation } from './constants';
-
 import { onMounted, reactive, ref, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useQuasar } from 'quasar';
 
 // NOTE: Import stores
 import { useQuotationStore } from 'src/stores/quotations';
@@ -12,6 +11,7 @@ import useFlowStore from 'src/stores/flow';
 import useMyBranch from 'stores/my-branch';
 import { useQuotationForm } from './form';
 import { hslaColors } from './constants';
+import { pageTabs, columnQuotation } from './constants';
 
 // NOTE  Import Types
 import { CustomerBranchCreate, CustomerType } from 'stores/customer/types';
@@ -44,6 +44,7 @@ import { Quotation } from 'src/stores/quotations/types';
 import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 
+const $q = useQuasar();
 const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
 const flowStore = useFlowStore();
@@ -240,6 +241,7 @@ const {
 } = storeToRefs(quotationStore);
 
 onMounted(async () => {
+  pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'quotation.title';
   navigatorStore.current.path = [
     {
@@ -476,7 +478,7 @@ async function storeDataLocal(id: string) {
     <header class="col surface-1 rounded bordered overflow-hidden">
       <div class="column full-height">
         <section
-          class="row surface-3 justify-between full-width items-center bordered-b"
+          class="row surface-3 justify-between full-width bordered-b"
           style="z-index: 1"
         >
           <div class="row q-py-sm q-px-md justify-between full-width">
@@ -485,7 +487,7 @@ async function storeDataLocal(id: string) {
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -495,16 +497,12 @@ async function storeDataLocal(id: string) {
               </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-3 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5 justify-end" style="white-space: nowrap">
               <q-select
                 v-if="!pageState.gridView"
                 id="select-field"
                 for="select-field"
-                class="col q-ml-sm"
+                class="col-md-5 q-ml-sm"
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
@@ -654,8 +652,9 @@ async function storeDataLocal(id: string) {
               @delete="(id) => triggerDialogDeleteQuottaion(id)"
             >
               <template #grid="{ item }">
-                <div class="col-md-4 col-sm-6 col-12">
+                <div class="col-md-4 col-sm-6 col-12 column">
                   <QuotationCard
+                    class="col"
                     hide-kebab-delete
                     :hide-kebab-edit="!(pageState.currentTab === 'Issued')"
                     :urgent="item.row.urgent"
@@ -788,7 +787,12 @@ async function storeDataLocal(id: string) {
       }
     "
   >
-    <header class="q-mx-lg q-mt-lg">
+    <header
+      :class="{
+        'q-mx-lg q-mt-md': $q.screen.gt.sm,
+        'q-mx-md q-mt-sm': $q.screen.lt.md,
+      }"
+    >
       <ProfileBanner
         prefix="dialog"
         img="/images/quotation-bg-avatar.png"
@@ -801,9 +805,19 @@ async function storeDataLocal(id: string) {
         hideFade
       />
     </header>
-    <section class="col surface-1 q-ma-lg rounded bordered row scroll">
+    <section
+      class="col surface-1 rounded bordered row scroll"
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': $q.screen.lt.md,
+      }"
+    >
       <div
-        class="col-12 q-px-md q-py-lg"
+        class="col-12"
+        :class="{
+          'q-px-md q-py-lg': $q.screen.gt.sm,
+          'q-pa-sm': $q.screen.lt.md,
+        }"
         id="customer-form-content"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
@@ -839,7 +853,7 @@ async function storeDataLocal(id: string) {
   >
     <div class="full-height row q-pa-md">
       <ItemCard
-        class="col q-mx-sm full-height"
+        class="col q-mx-sm full-height cursor-pointer"
         v-for="value in dialogCreateCustomerItem"
         :key="value.text"
         :icon="value.icon"
@@ -850,7 +864,9 @@ async function storeDataLocal(id: string) {
           () => {
             triggerCreateCustomerd({
               type:
-                value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
+                value.text === 'customer.employerLegalEntity'
+                  ? CustomerType.Corporate
+                  : CustomerType.Person,
             });
             emptyCreateDialog = false;
           }
diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 9258678c..89ae4fd1 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -371,10 +371,11 @@ onMounted(async () => {
           "
           class="row items-center q-pb-sm"
         >
-          <span class="app-text-muted-2">
+          <span class="app-text-muted-2 col-12 col-md">
             {{ $t('quotation.paySplitCount') }}
           </span>
-          <span class="q-ml-auto">
+
+          <span>
             {{ $t('quotation.receiptDialog.total') }}
           </span>
           <span class="bordered rounded surface-2 number-box q-mx-sm">
@@ -415,49 +416,58 @@ onMounted(async () => {
         <!-- summary total, paid, remain -->
         <div class="row items-center">
           <span
-            class="row col rounded q-px-sm q-py-md"
+            class="row col rounded q-px-sm q-py-md justify-end"
             style="border: 1px solid hsl(var(--info-bg))"
           >
-            {{ $t('quotation.receiptDialog.totalAmount') }}
-            <span class="q-ml-auto">
-              {{ formatNumberDecimal(data.finalPrice, 2) }}
+            <span
+              class="col-sm col-12"
+              :class="{ 'text-right': $q.screen.lt.sm }"
+            >
+              {{ $t('quotation.receiptDialog.totalAmount') }}
             </span>
+            {{ formatNumberDecimal(data.finalPrice, 2) }}
           </span>
           <span
-            class="row col rounded q-px-sm q-py-md q-mx-md"
+            class="row col rounded q-px-sm q-py-md q-mx-md justify-end"
             style="border: 1px solid hsl(var(--positive-bg))"
           >
-            {{ $t('quotation.receiptDialog.paid') }}
-            <span class="q-ml-auto">
-              {{
-                formatNumberDecimal(
-                  paymentData.reduce(
-                    (c, i) =>
-                      i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
-                    0,
-                  ),
-                  2,
-                )
-              }}
+            <span
+              class="col-sm col-12"
+              :class="{ 'text-right': $q.screen.lt.sm }"
+            >
+              {{ $t('quotation.receiptDialog.paid') }}
             </span>
+            {{
+              formatNumberDecimal(
+                paymentData.reduce(
+                  (c, i) =>
+                    i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
+                  0,
+                ),
+                2,
+              )
+            }}
           </span>
           <span
-            class="row col rounded q-px-sm q-py-md"
+            class="row col rounded q-px-sm q-py-md justify-end"
             style="border: 1px solid hsl(var(--warning-bg))"
           >
-            {{ $t('quotation.receiptDialog.remain') }}
-            <span class="q-ml-auto">
-              {{
-                formatNumberDecimal(
-                  paymentData.reduce(
-                    (c, i) =>
-                      i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
-                    0,
-                  ),
-                  2,
-                )
-              }}
+            <span
+              class="col-sm col-12"
+              :class="{ 'text-right': $q.screen.lt.sm }"
+            >
+              {{ $t('quotation.receiptDialog.remain') }}
             </span>
+            {{
+              formatNumberDecimal(
+                paymentData.reduce(
+                  (c, i) =>
+                    i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
+                  0,
+                ),
+                2,
+              )
+            }}
           </span>
         </div>
 
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index ec29f238..6c91e247 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
-import { useQuasar } from 'quasar';
+import { QSelect, useQuasar } from 'quasar';
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import {
   baseUrl,
@@ -13,10 +13,9 @@ import { ProductTree, quotationProductTree } from './utils';
 
 // NOTE: Import stores
 import { dateFormat, calculateAge, dateFormatJS } from 'src/utils/datetime';
-import { useEmployeeForm } from 'src/pages/03_customer-management/form';
 import { useQuotationStore } from 'src/stores/quotations';
 import useProductServiceStore from 'stores/product-service';
-import { waitAll, calculateDaysUntilExpire, dialog } from 'src/stores/utils';
+import { calculateDaysUntilExpire, dialog } from 'src/stores/utils';
 import useEmployeeStore from 'stores/employee';
 import { useInvoice, useReceipt, usePayment } from 'stores/payment';
 import useCustomerStore from 'stores/customer';
@@ -28,13 +27,12 @@ import { deleteItem } from 'stores/utils';
 import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
 import { View } from './types.ts';
 import {
-  EmployeeWorker,
   PayCondition,
   ProductRelation,
   ProductServiceList,
   QuotationPayload,
 } from 'src/stores/quotations/types';
-import { Employee, EmployeeWork } from 'src/stores/employee/types';
+import { Employee } from 'src/stores/employee/types';
 import { Receipt } from 'src/stores/payment/types';
 import {
   ProductGroup,
@@ -50,7 +48,6 @@ import ProductItem from 'components/05_quotation/ProductItem.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
 import ToggleButton from 'components/button/ToggleButton.vue';
 import FormAbout from 'components/05_quotation/FormAbout.vue';
-import SelectZone from 'components/shared/SelectZone.vue';
 import ImportWorker from './ImportWorker.vue';
 import {
   AddButton,
@@ -127,7 +124,7 @@ const {
 const { data: config } = storeToRefs(configStore);
 
 const receiptList = ref<Receipt[]>([]);
-
+const refStatusFilter = ref<InstanceType<typeof QSelect>>();
 const templateForm = ref<string>('');
 const templateFormOption = ref<{ label: string; value: string }[]>([]);
 
@@ -1072,25 +1069,25 @@ watch(
   },
 );
 
-async function searchEmployee(text: string) {
-  let query: string | undefined = text;
-  let pageSize = 50;
+// async function searchEmployee(text: string) {
+//   let query: string | undefined = text;
+//   let pageSize = 50;
 
-  if (!text) {
-    query = undefined;
-    pageSize = 9999;
-  }
+//   if (!text) {
+//     query = undefined;
+//     pageSize = 9999;
+//   }
 
-  const retEmp = await customerStore.fetchBranchEmployee(
-    quotationFormData.value.customerBranchId,
-    {
-      query: query,
-      pageSize: pageSize,
-      passport: true,
-    },
-  );
-  if (retEmp) workerList.value = retEmp.data.result;
-}
+//   const retEmp = await customerStore.fetchBranchEmployee(
+//     quotationFormData.value.customerBranchId,
+//     {
+//       query: query,
+//       pageSize: pageSize,
+//       passport: true,
+//     },
+//   );
+//   if (retEmp) workerList.value = retEmp.data.result;
+// }
 
 function storeDataLocal() {
   quotationFormData.value.productServiceList = productServiceList.value;
@@ -1308,12 +1305,24 @@ async function formDownload() {
 
       <div
         v-if="quotationFormState.mode !== 'create'"
-        class="column col-2 q-ml-auto"
+        class="column col-sm-2 col-12 q-ml-auto"
         style="gap: 10px"
       >
-        <div class="row justify-end">
-          <BadgeComponent :title-i18n="$t('general.laborIdentified')" />
+        <div
+          class="row"
+          :class="{
+            'justify-end': $q.screen.gt.xs,
+            'q-pl-xl q-mt-sm': $q.screen.lt.sm,
+          }"
+        >
+          <BadgeComponent
+            :title-i18n="$t('general.laborIdentified')"
+            :class="{
+              'q-ml-md': $q.screen.lt.sm,
+            }"
+          />
         </div>
+
         <div
           class="row items-center justify-between surface-1 rounded q-pa-xs"
           style="height: 40px; border-radius: 40px"
@@ -1895,9 +1904,25 @@ async function formDownload() {
                   <template #prepend>
                     <q-icon name="mdi-magnify" />
                   </template>
+                  <template v-if="$q.screen.lt.md" v-slot:append>
+                    <span class="row">
+                      <q-separator vertical />
+                      <q-btn
+                        icon="mdi-filter-variant"
+                        unelevated
+                        class="q-ml-sm"
+                        padding="4px"
+                        size="sm"
+                        rounded
+                        @click="refStatusFilter?.showPopup"
+                      />
+                    </span>
+                  </template>
                 </q-input>
 
                 <q-select
+                  v-show="$q.screen.gt.sm"
+                  ref="refStatusFilter"
                   v-model="quotationFormState.statusFilterRequest"
                   outlined
                   dense
@@ -2093,9 +2118,10 @@ async function formDownload() {
                 </section>
               </template>
 
-              <div class="surface-1 q-pa-md flex" style="gap: var(--size-2)">
+              <div class="surface-1 q-pa-md row" style="gap: var(--size-2)">
                 <SelectInput
-                  class="q-mr-sm"
+                  class="q-mr-xl col-md-3 col-12"
+                  incremental
                   v-model="templateForm"
                   id="quotation-branch"
                   :option="templateFormOption"
diff --git a/src/pages/05_quotation/QuotationFormProductSelect.vue b/src/pages/05_quotation/QuotationFormProductSelect.vue
index ca480c52..31f17031 100644
--- a/src/pages/05_quotation/QuotationFormProductSelect.vue
+++ b/src/pages/05_quotation/QuotationFormProductSelect.vue
@@ -6,7 +6,6 @@ import useOptionStore from 'stores/options';
 import DialogForm from 'src/components/DialogForm.vue';
 import TreeView from 'src/components/shared/TreeView.vue';
 import SelectZone from 'src/components/shared/SelectZone.vue';
-import SelectInput from 'src/components/shared/SelectInput.vue';
 import SelectProductGroup from 'src/components/shared/select/SelectProductGroup.vue';
 import TotalProductCardComponent from 'src/components/04_product-service/TotalProductCardComponent.vue';
 import DeleteButton from 'src/components/button/DeleteButton.vue';
@@ -491,7 +490,7 @@ watch(
                 </template>
               </q-input>
 
-              <div class="row items-center q-gutter-x-sm">
+              <div class="row items-center q-gutter-x-sm no-wrap">
                 <q-btn
                   color="primary"
                   padding="4px"
@@ -499,7 +498,6 @@ watch(
                   rounded
                   icon="mdi-store-plus-outline"
                   @click="triggerAddDialog"
-                  style="color: hsl(var(--text-mute))"
                 />
                 <q-btn
                   padding="4px"
@@ -507,6 +505,7 @@ watch(
                   rounded
                   icon="mdi-information-outline"
                   @click="triggerInfo"
+                  :color="pageState.infoDrawer ? 'info' : ''"
                   style="color: hsl(var(--text-mute))"
                 />
               </div>
@@ -634,7 +633,8 @@ watch(
                   <div
                     v-if="pageState.infoDrawer"
                     class="column no-wrap surface-1"
-                    style="z-index: 1; width: 20vw; position: sticky"
+                    style="z-index: 1; position: sticky"
+                    :style="`width:${$q.screen.gt.sm ? '20vw' : '100%'}`"
                   >
                     <span
                       v-if="selectedType === ''"
@@ -840,12 +840,14 @@ watch(
         >
           <template #top>
             <div class="row items-center app-text-muted">
-              {{ $t('productService.group.title') }}
+              <span class="q-pr-sm">
+                {{ $t('productService.group.title') }}
+              </span>
 
               <SelectProductGroup
-                class="q-pl-sm col-5"
+                class="col-md-4 col-12"
+                :class="{ 'q-mb-sm': $q.screen.lt.md }"
                 id="product-group-select"
-                style="min-height: 50px"
                 clearable
                 v-model:value="selectedProductGroup"
                 :placeholder="
diff --git a/src/pages/05_quotation/QuotationFormReceipt.vue b/src/pages/05_quotation/QuotationFormReceipt.vue
index e02d847e..864b5e87 100644
--- a/src/pages/05_quotation/QuotationFormReceipt.vue
+++ b/src/pages/05_quotation/QuotationFormReceipt.vue
@@ -28,8 +28,11 @@ withDefaults(
 );
 </script>
 <template>
-  <section class="surface-1 rounded row">
-    <aside class="column col bordered-r q-py-md q-pl-md">
+  <section class="surface-1 rounded" :class="{ row: $q.screen.gt.xs }">
+    <aside
+      class="column col q-py-md q-pl-md"
+      :class="{ 'bordered-r': $q.screen.gt.xs, ' bordered-b': $q.screen.lt.sm }"
+    >
       <span class="text-weight-medium text-body1">
         {{ title || $t('quotation.receiptDialog.PaymentReceive') }}
       </span>
diff --git a/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue b/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
index 52c32a4b..67ebbb9e 100644
--- a/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
@@ -305,7 +305,7 @@ watch(() => state.search, getWorkerList);
         </template>
       </DialogHeader>
     </template>
-    <div class="col scroll">
+    <div class="col full-width no-wrap scroll">
       <q-tab-panels
         class="surface-0 rounded full-height"
         v-model="state.step"
@@ -346,7 +346,7 @@ watch(() => state.search, getWorkerList);
                     ...data,
                     _selectedIndex: selectedIndex(data),
                   }))"
-                  class="col-2"
+                  class="col-md-2 col-sm-6 col-12"
                 >
                   <button
                     class="selectable-item full-width"
@@ -399,7 +399,10 @@ watch(() => state.search, getWorkerList);
               <BackButton icon-only @click="prev" />
             </section>
             <section class="full-height scroll col">
-              <div class="rounded column" style="gap: var(--size-4)">
+              <div
+                class="rounded column full-width no-wrap"
+                style="gap: var(--size-4)"
+              >
                 <q-expansion-item
                   dense
                   default-opened
@@ -408,6 +411,7 @@ watch(() => state.search, getWorkerList);
                   expand-icon="mdi-chevron-down-circle"
                   header-class="q-py-sm text-medium text-body items-center surface-1"
                   v-for="{ id, amount, worker, product } in productServiceList"
+                  :key="id"
                 >
                   <template #header>
                     <q-avatar class="q-mr-md" size="md">
@@ -500,7 +504,11 @@ watch(() => state.search, getWorkerList);
                           :class="{ dark: $q.dark.isActive }"
                           class="text-center"
                         >
-                          <q-td v-for="col in columns" :align="col.align">
+                          <q-td
+                            v-for="col in columns"
+                            :align="col.align"
+                            :key="col.name"
+                          >
                             <!-- NOTE: custom column will starts with # -->
                             <template v-if="!col.name.startsWith('#')">
                               <q-avatar
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index 564acc7f..fc039161 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -461,7 +461,7 @@ watch(() => state.search, getWorkerList);
                   ...data,
                   _selectedIndex: selectedIndex(data),
                 }))"
-                class="col-2"
+                class="col-md-2 col-sm-6 col-12"
               >
                 <button
                   class="selectable-item full-width"
diff --git a/src/pages/05_quotation/TableRequest.vue b/src/pages/05_quotation/TableRequest.vue
index 4457c763..072b39d2 100644
--- a/src/pages/05_quotation/TableRequest.vue
+++ b/src/pages/05_quotation/TableRequest.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { QTableColumn, QTableSlots } from 'quasar';
-import { computed, reactive, ref, watch } from 'vue';
 import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
 import BadgeComponent from 'components/BadgeComponent.vue';
 
@@ -46,8 +44,6 @@ const emits = defineEmits<{
   (e: 'success'): void;
 }>();
 
-const open = defineModel<boolean>('open', { default: false });
-
 function goToRequestList(id: string) {
   const url = new URL(`/request-list/${id}`, window.location.origin);
   window.open(url.toString(), '_blank');
@@ -70,6 +66,10 @@ function goToRequestList(id: string) {
     card-container-class="q-col-gutter-sm"
     :no-data-label="$t('general.noDataTable')"
     class="full-width"
+    :no-data-label="$t('general.noDataTable')"
+    :pagination="{
+      rowsPerPage: 0,
+    }"
   >
     <template v-slot:header="props">
       <q-tr
@@ -88,7 +88,7 @@ function goToRequestList(id: string) {
       } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
     >
       <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
-        <q-td v-for="col in columns" :align="col.align">
+        <q-td v-for="col in columns" :align="col.align" :key="col.name">
           <!-- NOTE: custom column will starts with # -->
           <template v-if="!col.name.startsWith('#')">
             <span>
diff --git a/src/pages/07_agencies-management/AgenciesDialog.vue b/src/pages/07_agencies-management/AgenciesDialog.vue
index 2fab3239..8e0826a6 100644
--- a/src/pages/07_agencies-management/AgenciesDialog.vue
+++ b/src/pages/07_agencies-management/AgenciesDialog.vue
@@ -251,12 +251,16 @@ watch(
         id="agencies-form-content"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-py-md q-px-lg': !$q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
         }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <div
-          class="q-py-md q-px-lg"
+          class="rounded"
+          :class="{
+            'q-py-md q-px-lg': $q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
+          }"
           style="position: absolute; z-index: 99999; top: 0; right: 0"
         >
           <div class="surface-1 row rounded">
@@ -346,7 +350,7 @@ watch(
             class="rounded row"
             :class="{
               'q-py-md q-px-lg': $q.screen.gt.sm,
-              'q-py-sm q-px-lg': !$q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
             }"
             style="position: absolute; z-index: 999; top: 0; right: 0"
           >
@@ -425,7 +429,7 @@ watch(
             class="col-12 col-md-10 relative-position"
             :class="{
               'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-py-md q-px-lg': !$q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
             }"
             id="user-form-content"
             style="height: 100%; max-height: 100; overflow-y: auto"
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 081abd66..c0c8162d 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -5,6 +5,7 @@ import { onMounted, reactive, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 
 import { baseUrl } from 'src/stores/utils';
 import { useNavigator } from 'src/stores/navigator';
@@ -22,6 +23,7 @@ import AgenciesDialog from './AgenciesDialog.vue';
 import { watch } from 'vue';
 
 const { t } = useI18n();
+const $q = useQuasar();
 const navigatorStore = useNavigator();
 const institutionStore = useInstitution();
 
@@ -248,6 +250,7 @@ async function fetchData() {
 onMounted(async () => {
   navigatorStore.current.title = 'agencies.title';
   navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
+  pageState.gridView = $q.screen.lt.md ? true : false;
 
   await fetchData();
 });
@@ -324,7 +327,7 @@ watch(
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -334,11 +337,7 @@ watch(
               </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-3 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5 justify-end" style="white-space: nowrap">
               <!-- <q-select
                 v-model="statusFilter"
                 outlined
@@ -361,7 +360,7 @@ watch(
                 v-if="!pageState.gridView"
                 id="select-field"
                 for="select-field"
-                class="col"
+                class="col-md-5 q-ml-sm"
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
diff --git a/src/pages/08_request-list/MainPage.vue b/src/pages/08_request-list/MainPage.vue
index 3330fd26..2ed62040 100644
--- a/src/pages/08_request-list/MainPage.vue
+++ b/src/pages/08_request-list/MainPage.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 // NOTE: Library
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { QSelect, useQuasar } from 'quasar';
 
 // NOTE: Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -19,12 +20,15 @@ import { useRequestList } from 'src/stores/request-list';
 import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
 import { dialogWarningClose } from 'src/stores/utils';
 
+const $q = useQuasar();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const requestListStore = useRequestList();
 const { t } = useI18n();
 const { data, stats, page, pageMax, pageSize } = storeToRefs(requestListStore);
 
+const refFilter = ref<InstanceType<typeof QSelect>>();
+
 // NOTE: Variable
 const pageState = reactive({
   hideStat: false,
@@ -89,6 +93,7 @@ function triggerView(opts: { requestData: RequestData }) {
 }
 
 onMounted(async () => {
+  pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'requestList.title';
   navigatorStore.current.path = [{ text: 'requestList.caption', i18n: true }];
 
@@ -185,7 +190,7 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -193,14 +198,26 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
+              <template v-if="$q.screen.lt.md" v-slot:append>
+                <span class="row">
+                  <q-separator vertical />
+                  <q-btn
+                    icon="mdi-filter-variant"
+                    unelevated
+                    class="q-ml-sm"
+                    padding="4px"
+                    size="sm"
+                    rounded
+                    @click="refFilter?.showPopup"
+                  />
+                </span>
+              </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-5 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5" style="white-space: nowrap">
               <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
                 v-model="pageState.statusFilter"
                 outlined
                 dense
diff --git a/src/pages/09_task-order/MainPage.vue b/src/pages/09_task-order/MainPage.vue
index 1b32d0ee..366a9fc6 100644
--- a/src/pages/09_task-order/MainPage.vue
+++ b/src/pages/09_task-order/MainPage.vue
@@ -2,6 +2,7 @@
 // NOTE: Library
 import { computed, onMounted, reactive, watch, ref } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
 // NOTE:  Components
@@ -21,14 +22,13 @@ import {
 } from 'src/stores/task-order/types';
 import { useNavigator } from 'src/stores/navigator';
 import { useTaskOrderStore } from 'src/stores/task-order';
-import { useTaskOrderForm } from './form';
 import useFlowStore from 'src/stores/flow';
 import { pageTabs, column, pageTabsReceive } from './constants';
 import { dialogWarningClose, isRoleInclude } from 'src/stores/utils';
 import { PaginationResult } from 'src/types';
 
 const { t } = useI18n();
-const taskOrderFormStore = useTaskOrderForm();
+const $q = useQuasar();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const taskOrderStore = useTaskOrderStore();
@@ -138,6 +138,7 @@ async function deleteTaskOrder(id: string) {
 }
 
 onMounted(async () => {
+  pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'taskOrder.title';
   navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
   fetchTaskOrderList();
@@ -284,7 +285,7 @@ watch(
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -294,11 +295,7 @@ watch(
               </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-3 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5 justify-end" style="white-space: nowrap">
               <!-- <q-select
                 v-model="pageState.statusFilter"
                 outlined
@@ -334,7 +331,7 @@ watch(
                 v-if="!pageState.gridView"
                 id="select-field"
                 for="select-field"
-                class="col"
+                class="col-md-5 q-ml-sm"
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index faf5415a..9e419a90 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -1033,55 +1033,63 @@ watch(
                     header-class="text-medium text-body items-center bordered-b "
                   >
                     <template #header>
-                      <q-avatar class="q-mr-md" size="md">
-                        <q-img
-                          class="text-center"
-                          :ratio="1"
-                          :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
+                      <section class="row items-center full-width">
+                        <div class="flex items-center col-sm col-12 no-wrap">
+                          <q-avatar class="q-mr-md" size="md">
+                            <q-img
+                              class="text-center"
+                              :ratio="1"
+                              :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
+                            >
+                              <template #error>
+                                <q-icon
+                                  class="full-width full-height"
+                                  name="mdi-shopping-outline"
+                                  :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+                                />
+                              </template>
+                            </q-img>
+                          </q-avatar>
+                          <span>
+                            {{ product.name }}
+                            <div class="app-text-muted text-caption">
+                              {{ product.code }}
+                            </div>
+                          </span>
+                        </div>
+
+                        <span
+                          class="row items-center q-gutter-x-sm"
+                          :class="{ 'q-py-xs': $q.screen.lt.sm }"
                         >
-                          <template #error>
+                          <div
+                            v-for="taskStatus in 3"
+                            :key="taskStatus"
+                            class="rounded q-px-sm row items-center"
+                            style="background: hsl(var(--text-mute) / 0.1)"
+                            :style="`color: hsl(var(--${
+                              taskStatus === 1
+                                ? 'warning'
+                                : taskStatus === 2
+                                  ? 'positive'
+                                  : 'negative'
+                            }-bg))`"
+                          >
                             <q-icon
-                              class="full-width full-height"
-                              name="mdi-shopping-outline"
-                              :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+                              name="mdi-account-group-outline"
+                              size="xs"
+                              class="q-pr-sm"
                             />
-                          </template>
-                        </q-img>
-                      </q-avatar>
-                      <span>
-                        {{ product.name }}
-                        <div class="app-text-muted text-caption">
-                          {{ product.code }}
-                        </div>
-                      </span>
-                      <span class="q-ml-auto row items-center q-gutter-x-sm">
-                        <div
-                          v-for="taskStatus in 3"
-                          :key="taskStatus"
-                          class="rounded q-px-sm row items-center"
-                          style="background: hsl(var(--text-mute) / 0.1)"
-                          :style="`color: hsl(var(--${
-                            taskStatus === 1
-                              ? 'warning'
-                              : taskStatus === 2
-                                ? 'positive'
-                                : 'negative'
-                          }-bg))`"
-                        >
-                          <q-icon
-                            name="mdi-account-group-outline"
-                            size="xs"
-                            class="q-pr-sm"
-                          />
-                          {{
-                            taskStatusCount(
-                              taskStatus,
-                              product.id,
-                              v.responsibleUser.id,
-                            )
-                          }}
-                        </div>
-                      </span>
+                            {{
+                              taskStatusCount(
+                                taskStatus,
+                                product.id,
+                                v.responsibleUser.id,
+                              )
+                            }}
+                          </div>
+                        </span>
+                      </section>
                     </template>
 
                     <div>
diff --git a/src/pages/09_task-order/receive_view/MainPage.vue b/src/pages/09_task-order/receive_view/MainPage.vue
index 90f29b1e..8ab49225 100644
--- a/src/pages/09_task-order/receive_view/MainPage.vue
+++ b/src/pages/09_task-order/receive_view/MainPage.vue
@@ -440,42 +440,55 @@ watch([currentFormData.value.taskStatus], () => {
             class="row items-center surface-1 q-pa-md rounded gradient-stat"
           >
             <span
-              class="row col rounded q-px-sm q-py-md info"
+              class="row col rounded q-px-sm q-py-md info justify-end"
               style="border: 1px solid hsl(var(--info-bg))"
             >
-              {{ $t('taskOrder.allProduct') }}
-              <span class="q-ml-auto">{{ fullTaskOrder.taskList.length }}</span>
+              <span
+                class="col-sm col-12"
+                :class="{ 'text-right': $q.screen.lt.sm }"
+              >
+                {{ $t('taskOrder.allProduct') }}
+              </span>
+              {{ fullTaskOrder.taskList.length }}
             </span>
+
             <span
-              class="row col rounded q-px-sm q-py-md q-mx-md positive"
+              class="row col rounded q-px-sm q-py-md q-mx-md positive justify-end"
               style="border: 1px solid hsl(var(--positive-bg))"
             >
-              {{ $t('taskOrder.alreadySentTask') }}
-              <span class="q-ml-auto">
-                {{
-                  fullTaskOrder.taskList.filter(
-                    (t) =>
-                      t.taskStatus === TaskStatus.Complete ||
-                      t.taskStatus === TaskStatus.Success ||
-                      t.taskStatus === TaskStatus.Validate ||
-                      t.taskStatus === TaskStatus.Redo ||
-                      t.taskStatus === TaskStatus.Failed,
-                  ).length
-                }}
+              <span
+                class="col-sm col-12"
+                :class="{ 'text-right': $q.screen.lt.sm }"
+              >
+                {{ $t('taskOrder.alreadySentTask') }}
               </span>
+              {{
+                fullTaskOrder.taskList.filter(
+                  (t) =>
+                    t.taskStatus === TaskStatus.Complete ||
+                    t.taskStatus === TaskStatus.Success ||
+                    t.taskStatus === TaskStatus.Validate ||
+                    t.taskStatus === TaskStatus.Redo ||
+                    t.taskStatus === TaskStatus.Failed,
+                ).length
+              }}
             </span>
+
             <span
-              class="row col rounded q-px-sm q-py-md warning"
+              class="row col rounded q-px-sm q-py-md warning justify-end"
               style="border: 1px solid hsl(var(--warning-bg))"
             >
-              {{ $t('taskOrder.status.Pending') }}
-              <span class="q-ml-auto">
-                {{
-                  fullTaskOrder.taskList.filter(
-                    (t) => t.taskStatus === TaskStatus.InProgress,
-                  ).length
-                }}
+              <span
+                class="col-sm col-12"
+                :class="{ 'text-right': $q.screen.lt.sm }"
+              >
+                {{ $t('taskOrder.status.Pending') }}
               </span>
+              {{
+                fullTaskOrder.taskList.filter(
+                  (t) => t.taskStatus === TaskStatus.InProgress,
+                ).length
+              }}
             </span>
           </article>
 
@@ -553,64 +566,79 @@ watch([currentFormData.value.taskStatus], () => {
                 header-class="q-py-sm text-medium text-body items-center rounded q-mx-md q-my-sm"
               >
                 <template #header>
-                  <q-avatar class="q-mr-md" size="md">
-                    <q-img
-                      class="text-center"
-                      :ratio="1"
-                      :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
-                    >
-                      <template #error>
-                        <q-icon
-                          class="full-width full-height"
-                          name="mdi-shopping-outline"
-                          :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
-                        />
-                      </template>
-                    </q-img>
-                  </q-avatar>
-                  <span>
-                    {{ product.name }}
-                    <div class="app-text-muted text-caption">
-                      {{ product.code }}
+                  <section class="row items-center full-width">
+                    <div class="flex items-center col-sm col-12 no-wrap">
+                      <q-avatar class="q-mr-md" size="md">
+                        <q-img
+                          class="text-center"
+                          :ratio="1"
+                          :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
+                        >
+                          <template #error>
+                            <q-icon
+                              class="full-width full-height"
+                              name="mdi-shopping-outline"
+                              :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+                            />
+                          </template>
+                        </q-img>
+                      </q-avatar>
+                      <span>
+                        {{ product.name }}
+                        <div class="app-text-muted text-caption">
+                          {{ product.code }}
+                        </div>
+                      </span>
                     </div>
-                  </span>
-                  <span
-                    v-if="
-                      fullTaskOrder.taskOrderStatus === TaskOrderStatus.Pending
-                    "
-                    class="q-ml-auto"
-                  >
-                    <div
-                      class="rounded q-px-sm row items-center"
-                      style="background: hsl(var(--text-mute) / 0.15)"
-                    >
-                      <q-icon
-                        name="mdi-account-group-outline"
-                        size="xs"
-                        class="q-pr-sm"
-                      />
-                      {{ list.length }}
-                    </div>
-                  </span>
-                  <span v-else class="q-ml-auto row items-center q-gutter-x-sm">
-                    <div
-                      v-for="v in 3"
-                      :key="v"
-                      class="rounded q-px-sm row items-center"
-                      style="background: hsl(var(--text-mute) / 0.1)"
-                      :style="`color: hsl(var(--${
-                        v === 1 ? 'warning' : v === 2 ? 'positive' : 'negative'
-                      }-bg))`"
-                    >
-                      <q-icon
-                        name="mdi-account-group-outline"
-                        size="xs"
-                        class="q-pr-sm"
-                      />
 
-                      {{ taskStatusCount(v, product.id) }}
+                    <div
+                      class="row items-center"
+                      :class="{ 'q-py-xs': $q.screen.lt.sm }"
+                    >
+                      <span
+                        v-if="
+                          fullTaskOrder.taskOrderStatus ===
+                          TaskOrderStatus.Pending
+                        "
+                        class="q-ml-auto"
+                      >
+                        <div
+                          class="rounded q-px-sm row items-center"
+                          style="background: hsl(var(--text-mute) / 0.15)"
+                        >
+                          <q-icon
+                            name="mdi-account-group-outline"
+                            size="xs"
+                            class="q-pr-sm"
+                          />
+                          {{ list.length }}
+                        </div>
+                      </span>
+                      <span v-else class="row items-center q-gutter-x-sm">
+                        <div
+                          v-for="v in 3"
+                          :key="v"
+                          class="rounded q-px-sm row items-center"
+                          style="background: hsl(var(--text-mute) / 0.1)"
+                          :style="`color: hsl(var(--${
+                            v === 1
+                              ? 'warning'
+                              : v === 2
+                                ? 'positive'
+                                : 'negative'
+                          }-bg))`"
+                        >
+                          <q-icon
+                            name="mdi-account-group-outline"
+                            size="xs"
+                            class="q-pr-sm"
+                          />
+
+                          {{ taskStatusCount(v, product.id) }}
+                        </div>
+                      </span>
                     </div>
-                  </span>
+                  </section>
                 </template>
 
                 <div>
diff --git a/src/pages/10_invoice/MainPage.vue b/src/pages/10_invoice/MainPage.vue
index d2a96c74..bcf27bf7 100644
--- a/src/pages/10_invoice/MainPage.vue
+++ b/src/pages/10_invoice/MainPage.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { QSelect, useQuasar } from 'quasar';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -20,10 +21,12 @@ import { useInvoice } from 'src/stores/payment';
 import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
 import { Quotation } from 'src/stores/quotations';
 
+const $q = useQuasar();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const invoiceStore = useInvoice();
 const { data, stats, page, pageMax, pageSize } = storeToRefs(invoiceStore);
+const refFilter = ref<InstanceType<typeof QSelect>>();
 
 // NOTE: Variable
 const pageState = reactive({
@@ -74,7 +77,7 @@ async function fetchStats() {
 }
 
 function triggerView(opts: { quotationId: string }) {
-  const url = new URL(`/quotation/view?tab=invoice`, window.location.origin);
+  const url = new URL('/quotation/view?tab=invoice', window.location.origin);
 
   localStorage.setItem(
     'new-quotation',
@@ -105,6 +108,8 @@ function viewDocExample(quotationId: string) {
 }
 
 onMounted(async () => {
+  pageState.gridView = $q.screen.lt.md ? true : false;
+
   navigatorStore.current.title = 'invoice.title';
   navigatorStore.current.path = [{ text: 'invoice.caption', i18n: true }];
 
@@ -189,7 +194,7 @@ watch(
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -197,14 +202,26 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
+              <template v-if="$q.screen.lt.md" v-slot:append>
+                <span class="row">
+                  <q-separator vertical />
+                  <q-btn
+                    icon="mdi-filter-variant"
+                    unelevated
+                    class="q-ml-sm"
+                    padding="4px"
+                    size="sm"
+                    rounded
+                    @click="refFilter?.showPopup"
+                  />
+                </span>
+              </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-5 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5" style="white-space: nowrap">
               <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
                 v-model="pageState.statusFilter"
                 outlined
                 dense
diff --git a/src/pages/11_credit-note/MainPage.vue b/src/pages/11_credit-note/MainPage.vue
index 7a4d6c2f..b17ee8bb 100644
--- a/src/pages/11_credit-note/MainPage.vue
+++ b/src/pages/11_credit-note/MainPage.vue
@@ -3,6 +3,7 @@
 import { computed, onMounted, reactive, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -24,6 +25,7 @@ import { CreditNoteStatus, useCreditNote } from 'src/stores/credit-note';
 import TableCreditNote from './TableCreditNote.vue';
 import { dialogWarningClose } from 'src/stores/utils';
 
+const $q = useQuasar();
 const { t } = useI18n();
 const flow = useFlowStore();
 const navigator = useNavigator();
@@ -115,6 +117,7 @@ function close() {
 }
 
 onMounted(async () => {
+  pageState.gridView = $q.screen.lt.md ? true : false;
   navigator.current.title = 'creditNote.title';
   navigator.current.path = [{ text: 'creditNote.caption', i18n: true }];
 
@@ -209,7 +212,7 @@ watch(
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -219,16 +222,12 @@ watch(
               </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-3 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5 justify-end" style="white-space: nowrap">
               <q-select
                 v-if="!pageState.gridView"
                 id="select-field"
                 for="select-field"
-                class="col"
+                class="col q-ml-sm"
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
diff --git a/src/pages/11_credit-note/RefundInformation.vue b/src/pages/11_credit-note/RefundInformation.vue
index a6c69653..a6e0427c 100644
--- a/src/pages/11_credit-note/RefundInformation.vue
+++ b/src/pages/11_credit-note/RefundInformation.vue
@@ -125,31 +125,40 @@ const refundOpts = ref<
           class="row col-12 items-center surface-1 q-py-sm rounded gradient-stat"
         >
           <span
-            class="row col rounded q-px-sm q-py-md info"
+            class="row col rounded q-px-sm q-py-md info justify-end"
             style="border: 1px solid hsl(var(--info-bg))"
           >
-            {{ $t('creditNote.label.totalAmount') }}
-            <span class="q-ml-auto">
-              {{ formatNumberDecimal(total) }}
+            <span
+              class="col-sm col-12"
+              :class="{ 'text-right': $q.screen.lt.sm }"
+            >
+              {{ $t('creditNote.label.totalAmount') }}
             </span>
+            {{ formatNumberDecimal(total) }}
           </span>
           <span
-            class="row col rounded q-px-sm q-mx-md q-py-md positive"
+            class="row col rounded q-px-sm q-mx-md q-py-md positive justify-end"
             style="border: 1px solid hsl(var(--positive-bg))"
           >
-            {{ $t('creditNote.label.paid') }}
-            <span class="q-ml-auto">
-              {{ formatNumberDecimal(paid) }}
+            <span
+              class="col-sm col-12"
+              :class="{ 'text-right': $q.screen.lt.sm }"
+            >
+              {{ $t('creditNote.label.paid') }}
             </span>
+            {{ formatNumberDecimal(paid) }}
           </span>
           <span
-            class="row col rounded q-px-sm q-py-md warning"
+            class="row col rounded q-px-sm q-py-md warning justify-end"
             style="border: 1px solid hsl(var(--warning-bg))"
           >
-            {{ $t('creditNote.label.remain') }}
-            <span class="q-ml-auto">
-              {{ formatNumberDecimal(remain) }}
+            <span
+              class="col-sm col-12"
+              :class="{ 'text-right': $q.screen.lt.sm }"
+            >
+              {{ $t('creditNote.label.remain') }}
             </span>
+            {{ formatNumberDecimal(remain) }}
           </span>
         </article>
       </article>
diff --git a/src/pages/13_receipt/MainPage.vue b/src/pages/13_receipt/MainPage.vue
index d851ded5..569a886b 100644
--- a/src/pages/13_receipt/MainPage.vue
+++ b/src/pages/13_receipt/MainPage.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 
 // NOTE:  Components
@@ -19,14 +19,17 @@ import { useRequestList } from 'src/stores/request-list';
 import { usePayment, useReceipt } from 'src/stores/payment';
 import { Receipt, PaymentDataStatus } from 'src/stores/payment/types';
 import { Quotation } from 'src/stores/quotations';
-import { useQuasar } from 'quasar';
+import { QSelect, useQuasar } from 'quasar';
 
+const $q = useQuasar();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const receiptStore = useReceipt();
 const { data, page, pageMax, pageSize } = storeToRefs(receiptStore);
 
 // NOTE: Variable
+const refFilter = ref<InstanceType<typeof QSelect>>();
+
 const pageState = reactive({
   hideStat: false,
   statusFilter: 'None' as 'None' | PaymentDataStatus,
@@ -59,7 +62,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
 }
 
 function triggerView(opts: { quotationId: string }) {
-  const url = new URL(`/quotation/view?tab=receipt`, window.location.origin);
+  const url = new URL('/quotation/view?tab=receipt', window.location.origin);
 
   localStorage.setItem(
     'new-quotation',
@@ -82,6 +85,8 @@ async function viewDocExample(id: string) {
 }
 
 onMounted(async () => {
+  pageState.gridView = $q.screen.lt.md ? true : false;
+
   navigatorStore.current.title = 'receipt.title';
   navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
 
@@ -159,7 +164,7 @@ watch(
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -167,14 +172,26 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
+              <template v-if="$q.screen.lt.md" v-slot:append>
+                <span class="row">
+                  <q-separator vertical />
+                  <q-btn
+                    icon="mdi-filter-variant"
+                    unelevated
+                    class="q-ml-sm"
+                    padding="4px"
+                    size="sm"
+                    rounded
+                    @click="refFilter?.showPopup"
+                  />
+                </span>
+              </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-5 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5" style="white-space: nowrap">
               <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
                 v-model="pageState.statusFilter"
                 outlined
                 dense
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index fb079f40..7ce8ee7e 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -50,7 +50,7 @@ export type User = {
   id: string;
   code: string;
   birthDate?: Date | null;
-  responsibleArea: string;
+  responsibleArea: string[];
   checkpoint?: string | null;
   checkpointEN?: string | null;
   citizenExpire?: Date | null;
@@ -99,7 +99,7 @@ export type UserCreate = {
   username: string;
   status?: Status;
   birthDate?: Date | null;
-  responsibleArea?: string | null;
+  responsibleArea?: string[] | null;
   checkpoint?: string | null;
   checkpointEN?: string | null;
   citizenExpire?: Date | null;