diff --git a/frontend/components/global/CategoryCard.vue b/frontend/components/global/CategoryCard.vue
index 33be331..3e26b2c 100644
--- a/frontend/components/global/CategoryCard.vue
+++ b/frontend/components/global/CategoryCard.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-
 // types
 
-import { useImageColor } from "~/composables/useImageColor";
+import { useImageColor } from "~/composables/global/useImageColor";
 
 type Props = {
-    id: number,
+    id: number;
     category: string;
     count: number;
     description: string;
     picture: string;
     darkLayer?: boolean;
-}
+};
 
 // props
 
@@ -21,7 +20,6 @@ const { id } = toRefs(props);
 // state
 
 const { colorObject } = useImageColor(`#category-image-${id.value}`);
-
 </script>
 
 <template>
@@ -37,10 +35,15 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
             class="bg-linear-to-t from-black/50 to-transparent to-40% absolute z-10 size-full"
         />
 
-        <div class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full">
-
+        <div
+            class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full"
+        >
             <div
-                :class="(colorObject?.isLight && !darkLayer) ? 'text-black' : 'text-white'"
+                :class="
+                    colorObject?.isLight && !darkLayer
+                        ? 'text-black'
+                        : 'text-white'
+                "
                 class="flex flex-col gap-2"
             >
                 <div class="typo-s-h-md">
@@ -56,9 +59,12 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
                 size="24"
                 name="ci:arrow-left"
                 class="mb-1"
-                :class="(colorObject?.isLight && !darkLayer) ? '**:stroke-black' : '**:stroke-white'"
+                :class="
+                    colorObject?.isLight && !darkLayer
+                        ? '**:stroke-black'
+                        : '**:stroke-white'
+                "
             />
-
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/global/products/FilterProducts.vue b/frontend/components/global/products/FilterProducts.vue
index f59a8bf..fb97c60 100644
--- a/frontend/components/global/products/FilterProducts.vue
+++ b/frontend/components/global/products/FilterProducts.vue
@@ -7,7 +7,11 @@ import { PRODUCT_RANGE } from "~/constants";
 
 const params = useUrlSearchParams("history");
 
-const sort_filter = ref(["جدیدترین ها", "گران ترین ها", "ارزان ترین ها"]);
+const sort_filter = ref([
+    { title: "جدیدترین ها", value: "newest" },
+    { title: "گران ترین ها", value: "price" },
+    { title: "ارزان ترین ها", value: "-price" },
+]);
 
 const options = [
     {
@@ -63,15 +67,15 @@ const resetFilters = () => {
                     <button
                         v-for="(sort, index) in sort_filter"
                         :key="index"
-                        @click="params.sort = sort"
+                        @click="params.sort = sort.value"
                         :class="
-                            params.sort == sort
+                            params.sort == sort.value
                                 ? 'bg-black text-white'
                                 : 'bg-slate-100'
                         "
                         class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-full text-sm"
                     >
-                        {{ sort }}
+                        {{ sort.title }}
                     </button>
                 </div>
             </div>