diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8dffc7cb..235e934f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -102,12 +102,12 @@ const stat = ref<
 >([
   { icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' },
   {
-    icon: 'mdi-folder',
+    icon: 'mdi-folder-table',
     count: 0,
     label: 'productAndServiceType',
     color: 'purple',
   },
-  { icon: 'mdi-folder', count: 0, label: 'service', color: 'orange' },
+  { icon: 'mdi-server-network', count: 0, label: 'service', color: 'orange' },
   { icon: 'mdi-folder', count: 0, label: 'product', color: 'green' },
 ]);
 
@@ -1410,8 +1410,8 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div style="height: 100%" class="scroll">
-          <div class="row  col full-width full-height">
+        <div  class="col flex scroll full-height q-pa-md surface-1 ">
+          <div class="full-width">
             <q-table
               flat
               bordered
@@ -1420,7 +1420,7 @@ watch(inputSearchProductAndService, async () => {
                 (productMode === 'type' ? productType : productGroup) || []
               "
               :columns="tbColumn.groupAndType"
-              class="full-width"
+              class="  full-width  "
               card-container-class="q-gutter-md  "
               row-key="name"
               :rows-per-page-options="[0]"
@@ -1475,14 +1475,17 @@ watch(inputSearchProductAndService, async () => {
                         margin-bottom: var(--size-2);
                       "
                     >
-                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="branch-card__icon">
+                      <div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="table__icon">
 
                    
+                            <q-icon
+                              size="md"
+                              style="scale: 0.8"
+                              :name="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
+                            />
 
-                        <q-avatar  size="md" icon="mdi-folder">
 
-                     
-                        </q-avatar>
+                    
                       </div>
                     </div>
                     <div class="col">
@@ -2317,11 +2320,11 @@ watch(inputSearchProductAndService, async () => {
                             margin-bottom: var(--size-2);
                           "
                         >
-                          <div class="table__icon">
+                          <div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'orange' : 'green'}`">
                             <q-icon
                               size="md"
                               style="scale: 0.8"
-                              name="mdi-office-building-outline"
+                              :name="productAndServiceTab === 'product' ? 'mdi-folder' : 'mdi-server-network'"
                             />
                           </div>
                         </div>
@@ -3293,7 +3296,7 @@ watch(inputSearchProductAndService, async () => {
   --_color: var(--orange-6-hsl);
 }
 
-.branch-card__icon {
+.table__icon {
 
   background-color: hsla(var(--_color) / 0.15);
   color: hsla(var(--_color) / 1);
@@ -3316,10 +3319,12 @@ watch(inputSearchProductAndService, async () => {
     background-color: hsla(var(--_branch-status-color) / 1);
   }
 
-  & :deep(.q-avatar) {
+    &:deep(.q-icon)  {
     transform: rotate(-45deg);
     color: hsla(var(--_branch-card-bg) / 1);
   }
+
+
 }
 
 </style>