diff --git a/frontend/components/global/products/FilterProducts.vue b/frontend/components/global/products/FilterProducts.vue
index 2ce7268..bf774a2 100644
--- a/frontend/components/global/products/FilterProducts.vue
+++ b/frontend/components/global/products/FilterProducts.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 // imports
 
+import useGetCategories from "~/composables/api/product/useGetCategories";
 import useGetProducts, {
     type GetProductsFilters,
 } from "~/composables/api/products/useGetProducts";
-import { useParams } from "~/composables/global/useParams";
 import { PRODUCT_RANGE } from "~/constants";
 
 // state
@@ -24,36 +24,43 @@ const in_stock = ref(JSON.parse(params.in_stock) ?? false);
 
 const sliderValueDebounced = refDebounced(sliderValue, 1000);
 
-const options = [
-    {
-        name: "میوه",
-        children: [
-            { name: "سیب" },
-            { name: "موز" },
-            { name: "پرتقال" },
-            { name: "طالبی" },
-            { name: "انگور" },
-            { name: "هندوانه" },
-            { name: "خربزه" },
-            { name: "گلابی" },
-        ],
-    },
-    {
-        name: "سبزیجات",
-        children: [
-            { name: "کلم" },
-            { name: "بروکلی" },
-            { name: "هویج" },
-            { name: "کاهو" },
-            { name: "اسفناج" },
-            { name: "چوی بوک" },
-            { name: "گل کلم" },
-            { name: "سیب زمینی" },
-        ],
-    },
-];
+// queries
 
-const { isPending: productsIsPending } = useGetProducts(params);
+const filters = computed(() => {
+    return {
+        sort: params.sort ?? "newest",
+        search: params.search ?? "",
+        price_gte: params.price_gte ?? PRODUCT_RANGE.min,
+        price_lte: params.price_lte ?? PRODUCT_RANGE.max,
+        in_stock: params.in_stock ?? false,
+        has_discount: params.has_discount ?? false,
+        category: params.category ?? undefined,
+        page: params.page ?? 1,
+    };
+});
+
+const { data: categories, suspense } = useGetCategories();
+
+await useAsyncData(async () => {
+    await suspense();
+});
+
+const { isPending: productsIsPending } = useGetProducts(filters);
+
+// computed
+
+const allCategories = computed(() => {
+    return categories.value!.map((category) => {
+        return {
+            name: category.name,
+            children: category.subcategorys.map((sub) => {
+                return {
+                    name: sub.name,
+                };
+            }),
+        };
+    });
+});
 
 // methods
 
@@ -130,7 +137,7 @@ watch(
                     <Icon name="ci:grid" size="24" />
                     دسته بندی
                 </div>
-                <ComboBox :options="options" v-model="params.category" />
+                <ComboBox :options="allCategories" v-model="params.category" />
             </div>
 
             <div class="flex flex-col w-full gap-5">
diff --git a/frontend/composables/api/products/useGetProducts.ts b/frontend/composables/api/products/useGetProducts.ts
index ead844f..c31171d 100644
--- a/frontend/composables/api/products/useGetProducts.ts
+++ b/frontend/composables/api/products/useGetProducts.ts
@@ -20,22 +20,11 @@ export type GetProductsFilters = {
 
 // composable
 
-const useGetProducts = (params?: GetProductsFilters) => {
+const useGetProducts = (params?: ComputedRef<GetProductsFilters>) => {
     // state
 
     const { $axios: axios } = useNuxtApp();
 
-    const {
-        search,
-        sort,
-        in_stock,
-        has_discount,
-        category,
-        price_gte,
-        price_lte,
-        page,
-    } = toRefs(params as GetProductsFilters);
-
     // methods
 
     const handleGetProducts = async (params?: GetProductsFilters) => {
@@ -50,7 +39,7 @@ const useGetProducts = (params?: GetProductsFilters) => {
                     category: params?.category,
                     price_gte: params?.price_gte,
                     price_lte: params?.price_lte,
-                    offset: params?.page ? Number(params.page) * 9 - 9 : 0,
+                    offset: Number(params?.page) * 9 - 9,
                     limit: 9,
                 },
             }
@@ -61,18 +50,8 @@ const useGetProducts = (params?: GetProductsFilters) => {
 
     return useQuery({
         staleTime: 60 * 1000,
-        queryKey: [
-            QUERY_KEYS.products,
-            search,
-            sort,
-            in_stock,
-            has_discount,
-            category,
-            price_gte,
-            price_lte,
-            page,
-        ],
-        queryFn: () => handleGetProducts(params),
+        queryKey: [QUERY_KEYS.products, params],
+        queryFn: () => handleGetProducts(params?.value),
     });
 };
 
diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
index 3050e6c..5ef1252 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // import
 
 import useGetProducts, {
@@ -9,17 +8,19 @@ import { PRODUCT_RANGE } from "~/constants";
 
 // state
 
-const params: GetProductsFilters = useUrlSearchParams("history", {
-    initialValue: {
-        search: "",
-        sort: "newest",
-        price_gte: PRODUCT_RANGE.min,
-        price_lte: PRODUCT_RANGE.max,
-        in_stock: false,
-        has_discount: false,
-        category: "",
-        page: "1",
-    },
+const params: GetProductsFilters = useUrlSearchParams("history");
+
+const filters = computed(() => {
+    return {
+        sort: params.sort ?? "newest",
+        search: params.search ?? "",
+        price_gte: params.price_gte ?? PRODUCT_RANGE.min,
+        price_lte: params.price_lte ?? PRODUCT_RANGE.max,
+        in_stock: params.in_stock ?? false,
+        has_discount: params.has_discount ?? false,
+        category: params.category ?? undefined,
+        page: params.page ?? 1,
+    };
 });
 
 const search = ref(params.search ?? "");
@@ -31,7 +32,7 @@ provide("params", params);
 
 // queries
 
-const { data, isLoading: productsIsLoading } = useGetProducts(params);
+const { data, isLoading: productsIsLoading } = useGetProducts(filters);
 
 const products = computed(() => {
     return data.value?.results.flat();
@@ -55,17 +56,17 @@ watch(
 
 <template>
     <div class="w-full container flex flex-col">
-        <div class="w-full flex justify-end items-center py-[5rem]">
+        <div class="w-full flex justify-end items-end py-[5rem]">
             <div
                 class="flex flex-col items-start gap-[1.5rem] text-black w-full"
             >
-                <!-- <div class="flex-center gap-[.75rem]">
+                <div class="flex-center gap-[.75rem]">
                     <span>خانه</span>
                     <span>/</span>
                     <span>محصولات</span>
                     <span>/</span>
                     <span>همه</span>
-                </div> -->
+                </div>
                 <h1 class="typo-h-3">لیست محصولات</h1>
             </div>
 
@@ -86,7 +87,14 @@ watch(
                         </div>
                     </template>
                 </Input>
-                <FilterButton />
+                <!-- <Suspense>
+                    <FilterButton />
+                    <template #fallback>
+                        <Skeleton
+                            class="!w-[10.35rem] !h-[3.35rem] !rounded-full"
+                        />
+                    </template>
+                </Suspense> -->
             </div>
         </div>
         <ul