diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 7a9cf0e4..7b7cdc3b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1227,7 +1227,7 @@ watch(inputSearchProductAndService, async () => {
       <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="surface-1 col bordered rounded q-pa-md scroll column"
+        class="surface-1 col bordered rounded q-px-md q-pt-md scroll column"
       >
         <div class="row justify-between">
           <div
@@ -1438,7 +1438,7 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="flex items-center justify-between"
+            class="row items-center justify-between"
           >
             <div class="col-4">
               <div class="row items-center">
@@ -1446,7 +1446,12 @@ watch(inputSearchProductAndService, async () => {
                   {{ $t('showing') }}
                 </div>
                 <div>
-                  <q-btn-dropdown dense unelevated :label="pageSizeGroup">
+                  <q-btn-dropdown
+                    dense
+                    unelevated
+                    :label="pageSizeGroup"
+                    class="bordered q-pl-md"
+                  >
                     <q-list>
                       <q-item
                         v-for="v in [10, 30, 50, 100, 500, 1000]"
@@ -1495,7 +1500,7 @@ watch(inputSearchProductAndService, async () => {
 
           <div
             v-if="productMode === 'type'"
-            class="flex justify-between items-center"
+            class="row justify-between items-center"
           >
             <div class="col-4">
               <div class="row items-center">
@@ -1503,7 +1508,12 @@ watch(inputSearchProductAndService, async () => {
                   {{ $t('showing') }}
                 </div>
                 <div>
-                  <q-btn-dropdown dense unelevated :label="pageSizeType">
+                  <q-btn-dropdown
+                    dense
+                    unelevated
+                    :label="pageSizeType"
+                    class="bordered q-pl-md"
+                  >
                     <q-list>
                       <q-item
                         v-for="v in [10, 30, 50, 100, 500, 1000]"
@@ -1816,7 +1826,7 @@ watch(inputSearchProductAndService, async () => {
         </div>
 
         <!-- footer -->
-        <div class="flex items-center justify-between q-pb-md q-px-md">
+        <div class="row items-center justify-between q-px-md">
           <div class="col-4">
             <div class="row items-center">
               <div class="app-text-muted" style="width: 80px">
@@ -1827,6 +1837,7 @@ watch(inputSearchProductAndService, async () => {
                   dense
                   unelevated
                   :label="pageSizeServiceAndProduct"
+                  class="bordered q-pl-md"
                 >
                   <q-list>
                     <q-item