diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8ccb34fe..f94ab0dd 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1170,7 +1170,8 @@ watch(currentStatus, async () => {
 
         <div
           v-if="product && product.length > 0"
-          class="row q-col-gutter-md flex q-pa-md"
+          class="row q-col-gutter-lg flex"
+          style="padding: 20px"
         >
           <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
@@ -1375,16 +1376,8 @@ watch(currentStatus, async () => {
       }
     "
   >
-    <div
-      style="
-        width: 75vw;
-        display: grid;
-        background: none;
-        grid-template-rows: auto;
-        gap: var(--size-3);
-      "
-    >
-      <div class="row items-center" style="max-height: 20%">
+    <div class="full-width">
+      <div class="row items-center">
         <q-space />
         <q-input
           outlined
@@ -1400,70 +1393,72 @@ watch(currentStatus, async () => {
           </template>
         </q-input>
       </div>
-
-      <AppBox class="row q-gutter-md" no-padding>
-        <div
-          class="co-2"
-          v-for="i in (!!searchTotalProduct
-            ? resultSearchProduct
-            : product
-          )?.filter((i) => {
-            if (i.status === 'INACTIVE') {
-              return false;
-            }
-            return true;
-          })"
-          :key="i.id"
-        >
-          <TotalProductCardComponent
-            :index="selectProduct.findIndex((v) => v.id === i.id)"
-            :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
-            :isSelected="true"
-            :data="i"
-            :code="i.code"
-            :price="i.price"
-            :process="i.process"
-            :id="i.id"
-            typeProduct="product"
-            :title="i.name"
-            :status="i.status === 'INACTIVE' ? true : false"
-            @menuViewDetail="
-              () => {
-                currentIdProduct = i.id;
-                assignFormDataProduct(i);
-                dialogProductEdit = true;
+      <div>
+        <AppBox class="row">
+          <div
+            class="q-pa-xs"
+            :class="`${$q.screen.gt.sm ? 'col-3 ' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+            v-for="i in (!!searchTotalProduct
+              ? resultSearchProduct
+              : product
+            )?.filter((i) => {
+              if (i.status === 'INACTIVE') {
+                return false;
               }
-            "
-            @menuEdit="
-              () => {
-                currentIdProduct = i.id;
-                infoProductEdit = true;
-                assignFormDataProduct(i);
-                dialogProductEdit = true;
-              }
-            "
-            @viewDetail="
-              () => {
-                currentIdProduct = i.id;
-                infoProductEdit = false;
-                assignFormDataProduct(i);
-                dialogProductEdit = true;
-              }
-            "
-            @select="
-              (data) => {
-                const tempValue = selectProduct.find((v) => v.id === i.id);
-
-                if (tempValue) {
-                  selectProduct = selectProduct.filter((v) => v.id !== i.id);
-                } else {
-                  selectProduct.push(data);
+              return true;
+            })"
+            :key="i.id"
+          >
+            <TotalProductCardComponent
+              :index="selectProduct.findIndex((v) => v.id === i.id)"
+              :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
+              :isSelected="true"
+              :data="i"
+              :code="i.code"
+              :price="i.price"
+              :process="i.process"
+              :id="i.id"
+              typeProduct="product"
+              :title="i.name"
+              :status="i.status === 'INACTIVE' ? true : false"
+              @menuViewDetail="
+                () => {
+                  currentIdProduct = i.id;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
                 }
-              }
-            "
-          />
-        </div>
-      </AppBox>
+              "
+              @menuEdit="
+                () => {
+                  currentIdProduct = i.id;
+                  infoProductEdit = true;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
+                }
+              "
+              @viewDetail="
+                () => {
+                  currentIdProduct = i.id;
+                  infoProductEdit = false;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
+                }
+              "
+              @select="
+                (data) => {
+                  const tempValue = selectProduct.find((v) => v.id === i.id);
+
+                  if (tempValue) {
+                    selectProduct = selectProduct.filter((v) => v.id !== i.id);
+                  } else {
+                    selectProduct.push(data);
+                  }
+                }
+              "
+            />
+          </div>
+        </AppBox>
+      </div>
     </div>
   </FormDialog>