diff --git a/src/components/NoData.vue b/src/components/NoData.vue
new file mode 100644
index 00000000..2f2b1a85
--- /dev/null
+++ b/src/components/NoData.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  size?: number;
+}>();
+</script>
+<template>
+  <div>
+    <q-img
+      src="no-data.png"
+      :style="{
+        height: size ? `${size}px` : '120px',
+        width: size ? `${size + 2}px` : '123px',
+      }"
+    />
+    <div class="app-text-muted text-center">{{ $t('noData') }}</div>
+  </div>
+</template>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index e76327fa..8ff0f8d1 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -12,6 +12,7 @@ import TooltipComponent from 'components/TooltipComponent.vue';
 import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
 
 import { Status } from 'src/stores/types';
+import NoData from 'components/NoData.vue';
 
 import { dialog } from 'src/stores/utils';
 
@@ -65,7 +66,7 @@ const dialogTotalProduct = ref<boolean>(false);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 const productGroup = ref<Product[]>();
 const productType = ref<Product[]>();
-
+const productAndServiceTab = ref<string>('all');
 const previousValue = ref();
 
 const formData = ref<ProductCreate>({
@@ -495,45 +496,132 @@ watch(currentStatus, async () => {});
         </div>
       </AppBox>
       <AppBox bordered v-else-if="productMode === 'service'" no-padding>
-        <div
-          class="row justify-center q-py-sm"
-          style="background-color: var(--surface-2)"
-        >
-          <q-input
-            style="width: 500px"
-            outlined
-            dense
-            :label="$t('search')"
-            class="q-mr-md"
-            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-            v-model="inputSearch"
-            debounce="500"
-          >
-            <template v-slot:prepend>
-              <q-icon name="mdi-magnify" />
-            </template>
-          </q-input>
-          <q-btn
-            icon="mdi-plus"
-            :color="$q.dark.isActive ? 'dark' : 'white'"
-            :text-color="$q.dark.isActive ? 'white' : 'dark'"
-            class="bordered rounded q-px-sm"
-            unelevated
-            @click="dialogProductServiceType = true"
-          />
-          <div class="q-mx-lg">ปุ่มรวมสินค้าทั้งหมด >></div>
-          <q-btn
-            unelevated
-            @click="dialogTotalProduct = true"
-            class="bordered rounded q-px-sm"
-            icon="mdi-plus"
-            :color="$q.dark.isActive ? 'dark' : 'white'"
-            :text-color="$q.dark.isActive ? 'white' : 'dark'"
-            round
-          />
+        <div class="row justify-between q-px-md">
+          <q-tabs v-model="productAndServiceTab" dense>
+            <q-tab name="all">
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'all'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                ทั้งหมด
+                <q-badge
+                  class="rounded q-ml-sm"
+                  :class="
+                    productAndServiceTab === 'all' ? '' : 'app-text-muted'
+                  "
+                  :color="productAndServiceTab === 'all' ? 'primary' : ''"
+                  style="background-color: var(--surface-3)"
+                  label="2"
+                />
+              </div>
+            </q-tab>
+
+            <q-tab name="product">
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'product'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                ทั้งหมด
+                <q-badge
+                  class="rounded q-ml-sm"
+                  :class="
+                    productAndServiceTab === 'product' ? '' : 'app-text-muted'
+                  "
+                  :color="productAndServiceTab === 'product' ? 'primary' : ''"
+                  style="background-color: var(--surface-3)"
+                  label="2"
+                />
+              </div>
+            </q-tab>
+            <q-tab name="service">
+              <div
+                class="row"
+                :class="
+                  productAndServiceTab === 'service'
+                    ? 'text-bold'
+                    : 'app-text-muted'
+                "
+              >
+                ทั้งหมด
+                <q-badge
+                  class="rounded q-ml-sm"
+                  :class="
+                    productAndServiceTab === 'service' ? '' : 'app-text-muted'
+                  "
+                  :color="productAndServiceTab === 'service' ? 'primary' : ''"
+                  style="background-color: var(--surface-3)"
+                  label="2"
+                />
+              </div>
+            </q-tab>
+          </q-tabs>
+
+          <div class="row q-pt-sm q-mb-sm">
+            <q-input
+              style="width: 300px"
+              outlined
+              dense
+              unelavated
+              :label="$t('search')"
+              class="q-mr-md"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="inputSearch"
+              debounce="500"
+            >
+              <template v-slot:prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+            </q-input>
+
+            <q-btn
+              icon="mdi-tune-vertical-variant"
+              size="sm"
+              :color="$q.dark.isActive ? 'dark' : 'white'"
+              :text-color="$q.dark.isActive ? 'white' : 'dark'"
+              class="bordered rounded q-py-sm"
+              unelevated
+            >
+              <q-menu class="bordered">
+                <q-list v-close-popup dense>
+                  <q-item
+                    clickable
+                    class="flex items-center"
+                    @click="console.log('test')"
+                  >
+                    {{ $t('all') }}
+                  </q-item>
+                  <q-item
+                    clickable
+                    class="flex items-center"
+                    @click="console.log('test')"
+                  >
+                    {{ $t('statusACTIVE') }}
+                  </q-item>
+                  <q-item
+                    clickable
+                    class="flex items-center"
+                    @click="console.log('test')"
+                  >
+                    {{ $t('statusINACTIVE') }}
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
         </div>
-        <div class="flex justify-center items-center" style="min-height: 70vh">
-          asdasdasd
+        <div
+          class="flex justify-center items-center"
+          style="min-height: 70vh; background-color: var(--surface-2)"
+        >
+          <NoData />
         </div>
       </AppBox>
     </div>