diff --git a/frontend/app.vue b/frontend/app.vue
index da627ed..5906760 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -5,6 +5,14 @@ import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
 
 // state
 
+useSeoMeta({
+    titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} | فروشگاه هی‌ ملز` : "فروشگاه هی‌ ملز";
+    },
+    ogImage: "/img/heymlz/global-cover.jpg",
+    twitterImage: "/img/heymlz/global-cover.jpg",
+});
+
 const { $updateAvailable: updateAvailable, $handleUpdate: handleUpdate } = useNuxtApp();
 
 const closeModal = () => {
diff --git a/frontend/components/global/CategoryCard.vue b/frontend/components/global/CategoryCard.vue
index 9b96646..fe2fbff 100644
--- a/frontend/components/global/CategoryCard.vue
+++ b/frontend/components/global/CategoryCard.vue
@@ -10,6 +10,7 @@ type Props = {
     description: string;
     picture: string;
     darkLayer?: boolean;
+    isActive: boolean;
 };
 
 // props
@@ -23,39 +24,45 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 </script>
 
 <template>
-    <NuxtLink :to="`/products?category=${id}`">
+    <NuxtLink :to="`/products/category/${id}`">
         <div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
-            <NuxtImg
-                :id="`category-image-${id}`"
-                class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
-                :src="picture"
-                alt=""
-            />
+            <Transition name="fade">
+                <video
+                    v-if="isActive"
+                    src="/video/category.mp4"
+                    autoplay
+                    muted
+                    loop
+                    playsinline
+                    webkit-playsinline
+                    class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
+                />
+                <NuxtImg
+                    v-else
+                    :id="`category-image-${id}`"
+                    class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
+                    :src="picture"
+                    alt=""
+                />
+            </Transition>
+
             <div
                 v-if="darkLayer"
                 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-4 md:p-6 flex items-center justify-between w-full"
-            >
-
+            <div class="absolute z-20 bottom-0 p-4 md:p-6 flex items-center justify-between w-full">
                 <div
-                    :class="colorObject?.isLight && !darkLayer ? 'text-black': 'text-white'"
+                    :class="colorObject?.isLight && !darkLayer ? 'text-black' : 'text-white'"
                     class="typo-sub-h-sm md:typo-sub-h-md"
                 >
                     {{ category }}
                 </div>
 
-
                 <Icon
                     name="ci:arrow-left"
                     class="size-5 md:size-6"
-                    :class="
-                        colorObject?.isLight && !darkLayer
-                            ? '**:stroke-black'
-                            : '**:stroke-white'
-                    "
+                    :class="colorObject?.isLight && !darkLayer ? '**:stroke-black' : '**:stroke-white'"
                 />
             </div>
         </div>
diff --git a/frontend/components/global/LoadingOverlay.vue b/frontend/components/global/LoadingOverlay.vue
index fecd7bf..4b10c09 100644
--- a/frontend/components/global/LoadingOverlay.vue
+++ b/frontend/components/global/LoadingOverlay.vue
@@ -27,12 +27,12 @@ const progressStyle = computed(() => {
 
 // methods
 
-const onAssetLoaded = () => {
-    clearInterval(progressInterval.value!);
-    criticalLoad.value = false;
-    assetLoadingProgress.value = 100;
-    isAssetLoaded.value = true;
-};
+// const onAssetLoaded = () => {
+//     clearInterval(progressInterval.value!);
+//     criticalLoad.value = false;
+//     assetLoadingProgress.value = 100;
+//     isAssetLoaded.value = true;
+// };
 
 const onAssetFinished = () => {
     gsap.to("#loading-overlay", {
@@ -59,15 +59,15 @@ onMounted(() => {
     if (!isSiteLoadingDisabled.value) {
         isWindowScrollLocked.value = true;
 
-        const heymlzLoadingAnimation = document.querySelector("#heymlz-loading-animation") as HTMLVideoElement;
+        // const heymlzLoadingAnimation = document.querySelector("#heymlz-loading-animation") as HTMLVideoElement;
 
-        if (heymlzLoadingAnimation?.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
-            onAssetLoaded();
-        }
+        // if (heymlzLoadingAnimation?.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
+        //     onAssetLoaded();
+        // }
 
         progressInterval.value = setInterval(() => {
-            assetLoadingProgress.value += Math.random() * 10;
-        }, 250);
+            assetLoadingProgress.value += Math.random() * 50;
+        }, 150);
 
         gsap.to("#loading-overlay", {
             opacity: 1,
@@ -100,7 +100,7 @@ onMounted(() => {
             </div>
         </div>
 
-        <video
+        <!-- <video
             id="heymlz-loading-animation"
             muted
             autoplay
@@ -114,6 +114,6 @@ onMounted(() => {
             :style="{
                 mask: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, black 20%, black 80%, rgba(0,0,0,0) 100%)',
             }"
-        />
+        /> -->
     </div>
 </template>
diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index cfed27a..f5727ac 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -34,7 +34,7 @@ const page = computed({
     <PaginationRoot
         :total="total"
         :sibling-count="1"
-        :items-per-page="9"
+        :items-per-page="15"
         show-edges
         v-model:page="page"
     >
diff --git a/frontend/components/global/ProductsGrid.vue b/frontend/components/global/ProductsGrid.vue
index 2edbb1f..c2bdc18 100644
--- a/frontend/components/global/ProductsGrid.vue
+++ b/frontend/components/global/ProductsGrid.vue
@@ -35,7 +35,7 @@ withDefaults(defineProps<Props>(), {
             </NuxtLink>
         </div>
         <ul
-            class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-5 sm:gap-8"
+            class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-8 gap-5 sm:gap-8"
         >
             <ProductCard
                 v-for="product in products"
diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
index 4613d11..1cb2b26 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -49,7 +49,7 @@ const changeSlide = (id: number) => {
 
 <template>
     <div class="sticky top-10">
-        <div class="flex flex-col relative gap-6">
+        <div class="flex flex-col relative gap-4">
             <div
                 class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
             >
@@ -74,7 +74,6 @@ const changeSlide = (id: number) => {
                     class="w-full"
                 >
                     <SwiperSlide
-                        class="py-4"
                         v-for="slide in slides"
                         :key="slide.id"
                     >
@@ -94,7 +93,6 @@ const changeSlide = (id: number) => {
                         v-if="emptySlidesCount > 0"
                         v-for="slide in emptySlidesCount"
                         :key="slide"
-                        class="py-4"
                     >
                         <div
                             class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index f96e0dc..60643be 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -38,9 +38,9 @@ const limitedColors = computed(() => {
 <template>
     <li class="w-full">
         <NuxtLink :to="'/product/' + id">
-            <div class="@container">
+            <div class="@container group">
                 <div
-                    class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
+                    class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[95%] overflow-hidden p-6"
                 >
                     <NuxtImg
                         :id="`product-image-${id}`"
@@ -49,10 +49,10 @@ const limitedColors = computed(() => {
                         alt="product-background"
                     />
 
-                    <div
+                    <!-- <div
                         v-if="darkLayer"
                         class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
-                    />
+                    /> -->
 
                     <div
                         class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
@@ -66,38 +66,27 @@ const limitedColors = computed(() => {
                         </Tag>
                     </div>
                     <div
-                        :class="colorObject?.isLight && !darkLayer ? 'text-black' : 'text-white'"
-                        class="absolute inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
+                        class="absolute opacity-0 group-hover:opacity-100 bg-gradient-to-t transition-all group-hover:from-black/30 to-transparent inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
                     >
-                        <div class="flex flex-col gap-2 items-start w-full">
-                            <span class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full">
-                                {{ title }}
-                            </span>
-                            <div class="flex items-center justify-between w-full mt-1">
-                                <div class="flex items-center gap-2 @[280px]:mt-1">
-                                    <ColorCircle
-                                        v-for="color in limitedColors"
-                                        :key="color"
-                                        :style="{ backgroundColor: color }"
-                                        class="!size-5 @[280px]:!size-6"
-                                    />
-                                </div>
-                                <span
-                                    class="@max-[280px]:hidden typo-p-xs @[280px]:typo-p-md !font-semibold whitespace-nowrap"
-                                >
-                                    {{ price }}
-                                </span>
-                            </div>
+                        <div
+                            class="items-center flex gap-2 @[280px]:mt-1  transition-all translate-y-1 group-hover:translate-y-0 "
+                        >
+                            <ColorCircle
+                                v-for="color in limitedColors"
+                                :key="color"
+                                :style="{ backgroundColor: color }"
+                                class="!size-5 @[280px]:!size-6"
+                            />
                         </div>
                     </div>
                 </div>
 
-                <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden">
-                    <span class="typo-sub-h-sm w-full truncate">
+                <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4">
+                    <span class="typo-sub-h-sm font-normal w-full truncate">
                         {{ title }}
                     </span>
-                    <div class="@[280px]:hidden flex items-center justify-between w-full mt-1">
-                        <span class="typo-p-xs !font-semibold whitespace-nowrap">
+                    <div class="flex items-center justify-between w-full mt-1">
+                        <span class="typo-p-xs !font-bold whitespace-nowrap">
                             {{ price }}
                         </span>
                     </div>
diff --git a/frontend/components/global/products/FilterProducts.vue b/frontend/components/global/products/FilterProducts.vue
index 6d16c15..f570ca7 100644
--- a/frontend/components/global/products/FilterProducts.vue
+++ b/frontend/components/global/products/FilterProducts.vue
@@ -2,34 +2,39 @@
 // imports
 
 import useGetCategories from "~/composables/api/product/useGetCategories";
-import useGetProducts, {
-    type GetProductsFilters,
-} from "~/composables/api/products/useGetProducts";
+import useGetProducts, { type GetProductsFilters } from "~/composables/api/products/useGetProducts";
 import { PRODUCT_RANGE } from "~/constants";
 
 // state
 
+const route = useRoute();
+const router = useRouter();
+
 const params = inject("params") as GetProductsFilters;
 
+const currentCategory = computed({
+    get: () => {
+        return Array.isArray(route.params.slug) ? route.params.slug[1] ?? undefined : undefined;
+    },
+    set: (newValue) => {
+        router.push({ path: `/products/category/${newValue}`, query: { ...route.query } });
+    },
+});
+
 const sort_filter = ref([
     { title: "جدیدترین ها", value: "newest" },
     { title: "گران ترین ها", value: "price" },
     { title: "ارزان ترین ها", value: "-price" },
 ]);
 
-const sliderValue = ref([
-    params.price_gte ?? PRODUCT_RANGE.min,
-    params.price_lte ?? PRODUCT_RANGE.max,
-]);
+const sliderValue = ref([params.price_gte ?? PRODUCT_RANGE.min, params.price_lte ?? PRODUCT_RANGE.max]);
 
 const has_discount = ref(Boolean(params.has_discount) ?? false);
 const in_stock = ref(Boolean(params.in_stock) ?? false);
 
 const sliderValueDebounced = refDebounced(sliderValue, 1000);
 
-const filtersSuccessMessage = ref<{ title: string; status: string } | null>(
-    null
-);
+const filtersSuccessMessage = ref<{ title: string; status: string } | null>(null);
 
 // queries
 
@@ -41,7 +46,7 @@ const filters = computed(() => {
         price_lte: params.price_lte ?? PRODUCT_RANGE.max,
         in_stock: params.in_stock ?? false,
         has_discount: params.has_discount ?? false,
-        category: params.category ?? undefined,
+        category: currentCategory.value,
         page: params.page ?? 1,
     };
 });
@@ -50,8 +55,7 @@ const { data: categories, suspense } = useGetCategories();
 
 await suspense();
 
-const { isPending: productsIsPending, status: productsStatus } =
-    useGetProducts(filters);
+const { isPending: productsIsPending, status: productsStatus } = useGetProducts(filters);
 
 // computed
 
@@ -77,10 +81,9 @@ const resetFilters = () => {
     sliderValue.value = [PRODUCT_RANGE.min, PRODUCT_RANGE.max];
     has_discount.value = false;
     in_stock.value = false;
-    params.category = undefined;
-};
 
-// watch
+    router.push({ path: `/products/`, query: { ...route.query } });
+};
 
 watch(
     () => sliderValueDebounced.value,
@@ -123,10 +126,11 @@ watch(
     <div class="size-full flex flex-col gap-14 justify-between">
         <div class="w-full flex flex-col gap-10">
             <div class="flex flex-col items-center w-full gap-5">
-                <div
-                    class="flex items-center justify-start gap-2 text-lg w-full"
-                >
-                    <Icon name="ci:filter-list" size="24" />
+                <div class="flex items-center justify-start gap-2 text-lg w-full">
+                    <Icon
+                        name="ci:filter-list"
+                        size="24"
+                    />
                     ترتیب بر اساس
                 </div>
                 <div class="w-full flex items-center gap-2">
@@ -134,11 +138,7 @@ watch(
                         v-for="(sort, index) in sort_filter"
                         :key="index"
                         @click="params.sort = sort.value"
-                        :class="
-                            params.sort == sort.value
-                                ? 'bg-black text-white'
-                                : 'bg-slate-100'
-                        "
+                        :class="params.sort == sort.value ? 'bg-black text-white' : 'bg-slate-100'"
                         class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-md text-sm"
                     >
                         {{ sort.title }}
@@ -147,20 +147,25 @@ watch(
             </div>
 
             <div class="flex flex-col w-full gap-5">
-                <div
-                    class="flex items-center justify-start gap-2 text-lg w-full"
-                >
-                    <Icon name="ci:grid" size="24" />
+                <div class="flex items-center justify-start gap-2 text-lg w-full">
+                    <Icon
+                        name="ci:grid"
+                        size="24"
+                    />
                     دسته بندی
                 </div>
-                <ComboBox :options="allCategories" v-model="params.category" />
+                <ComboBox
+                    :options="allCategories"
+                    v-model="currentCategory"
+                />
             </div>
 
             <div class="flex flex-col w-full gap-5">
-                <div
-                    class="flex items-center justify-start gap-2 text-lg w-full"
-                >
-                    <Icon name="ci:scan-box" size="24" />
+                <div class="flex items-center justify-start gap-2 text-lg w-full">
+                    <Icon
+                        name="ci:scan-box"
+                        size="24"
+                    />
                     محدوده قیمت
                 </div>
                 <SliderRoot
@@ -171,12 +176,8 @@ watch(
                     :max="PRODUCT_RANGE.max"
                     :step="1000"
                 >
-                    <SliderTrack
-                        class="bg-black/10 relative grow rounded-full h-[3px]"
-                    >
-                        <SliderRange
-                            class="absolute bg-black rounded-full h-full"
-                        />
+                    <SliderTrack class="bg-black/10 relative grow rounded-full h-[3px]">
+                        <SliderRange class="absolute bg-black rounded-full h-full" />
                     </SliderTrack>
                     <SliderThumb
                         v-for="thumb in Object.keys(PRODUCT_RANGE)"
@@ -227,15 +228,9 @@ watch(
                             : ' text-danger-600 bg-danger-100 border-danger-600'
                     "
                 >
-                    <span class="text-sm">{{
-                        filtersSuccessMessage.title
-                    }}</span>
+                    <span class="text-sm">{{ filtersSuccessMessage.title }}</span>
                     <Icon
-                        :name="
-                            filtersSuccessMessage.status == 'success'
-                                ? 'bi:check'
-                                : 'bi:x'
-                        "
+                        :name="filtersSuccessMessage.status == 'success' ? 'bi:check' : 'bi:x'"
                         size="20"
                     />
                 </div>
@@ -246,14 +241,29 @@ watch(
                 @click="resetFilters"
                 class="w-full rounded-full py-4 !cursor-pointer disabled:pointer-events-none z-[3]"
             >
-                <Transition name="fade" mode="out-in">
-                    <span v-if="productsIsPending" class="flex-center gap-3">
+                <Transition
+                    name="fade"
+                    mode="out-in"
+                >
+                    <span
+                        v-if="productsIsPending"
+                        class="flex-center gap-3"
+                    >
                         در حال دریافت اطلاعات
-                        <Icon name="svg-spinners:3-dots-bounce" size="20" />
+                        <Icon
+                            name="svg-spinners:3-dots-bounce"
+                            size="20"
+                        />
                     </span>
-                    <span v-else class="flex-center gap-3">
+                    <span
+                        v-else
+                        class="flex-center gap-3"
+                    >
                         بازنشانی به پیش‌ فرض
-                        <Icon name="ci:close" size="20" />
+                        <Icon
+                            name="ci:close"
+                            size="20"
+                        />
                     </span>
                 </Transition>
             </Button>
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index e1bb9e4..da46dd8 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -4,17 +4,27 @@
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { SwiperClass } from "swiper/react";
 import useHomeData from "~/composables/api/home/useHomeData";
+import { EffectCoverflow } from "swiper/modules";
 
 // state
 
 const { data: homeData } = useHomeData();
+
 const swiper_instance = ref<SwiperClass | null>(null);
+const activeIndex = ref(0);
+
+const slideElement = ref<HTMLDivElement | null>(null);
+const { width: slideWidth } = useElementSize(slideElement);
 
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
     swiper_instance.value = swiper;
 };
+
+const onSlideChange = (swiper: SwiperClass) => {
+    activeIndex.value = swiper.realIndex;
+};
 </script>
 
 <template>
@@ -23,7 +33,7 @@ const onSwiper = (swiper: SwiperClass) => {
         class="flex flex-col justify-center gap-4 bg-black sm:min-h-[110svh] relative overflow-hidden shrink-0 py-24 lg:py-32"
     >
         <div class="w-full relative flex-center z-10 container">
-            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4 2xl:typo-h-2"> دسته بندی ها </span>
+            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4 min-[2000px]:typo-h-2"> دسته بندی ها </span>
         </div>
 
         <div class="w-full mt-44 lg:mt-64 relative">
@@ -38,8 +48,17 @@ const onSwiper = (swiper: SwiperClass) => {
                 :loop="true"
                 :centered-slides="true"
                 :slides-per-view="1.5"
-                :space-between="20"
                 @swiper="onSwiper"
+                @slideChange="onSlideChange"
+                :modules="[EffectCoverflow]"
+                :effect="'coverflow'"
+                :coverflowEffect="{
+                    rotate: 10,
+                    stretch: -100,
+                    depth: 200,
+                    modifier: 1,
+                    slideShadows: true,
+                }"
                 :breakpoints="{
                     640: {
                         centeredSlides: true,
@@ -52,7 +71,8 @@ const onSwiper = (swiper: SwiperClass) => {
                 }"
             >
                 <SwiperSlide
-                    v-for="slide in homeData!.sub_categories"
+                    ref="slideElement"
+                    v-for="(slide, index) in homeData!.sub_categories"
                     :key="slide.id"
                 >
                     <CategoryCard
@@ -61,6 +81,7 @@ const onSwiper = (swiper: SwiperClass) => {
                         :category="slide.name"
                         :picture="slide.image"
                         :count="slide.product_count"
+                        :isActive="activeIndex === index"
                         description="توضیحات دسته بندی"
                     />
                 </SwiperSlide>
@@ -69,7 +90,10 @@ const onSwiper = (swiper: SwiperClass) => {
             <div
                 v-if="!swiper_instance?.isBeginning"
                 @click="swiper_instance?.slidePrev()"
-                class="max-xs:hidden absolute z-20 right-10 xs:right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                :style="{
+                    right: `calc(50% - ${slideWidth / 2}px - 20px)`,
+                }"
+                class="max-xs:hidden absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-right"
@@ -80,7 +104,10 @@ const onSwiper = (swiper: SwiperClass) => {
             <div
                 v-if="!swiper_instance?.isEnd"
                 @click="swiper_instance?.slideNext()"
-                class="max-xs:hidden absolute z-20 left-10 xs:left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                :style="{
+                    left: `calc(50% - ${slideWidth / 2}px - 20px)`,
+                }"
+                class="max-xs:hidden absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-left"
diff --git a/frontend/composables/api/products/useGetProducts.ts b/frontend/composables/api/products/useGetProducts.ts
index 6e02a15..a842523 100644
--- a/frontend/composables/api/products/useGetProducts.ts
+++ b/frontend/composables/api/products/useGetProducts.ts
@@ -39,8 +39,8 @@ const useGetProducts = (params?: ComputedRef<GetProductsFilters>) => {
                     category: params?.category,
                     price_gte: params?.price_gte,
                     price_lte: params?.price_lte,
-                    offset: Number(params?.page) * 12 - 12,
-                    limit: 12
+                    offset: Number(params?.page) * 15 - 15,
+                    limit: 15
                 }
             }
         );
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index c758552..467d589 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -12,9 +12,6 @@ export default defineNuxtConfig({
     },
 
     app: {
-        head: {
-            title: "فروشگاه هی ملز",
-        },
         pageTransition: {
             name: "fade",
             mode: "out-in",
@@ -67,8 +64,13 @@ export default defineNuxtConfig({
         "@formkit/auto-animate/nuxt",
         "@vite-pwa/nuxt",
         "@nuxt/image",
+        "@nuxtjs/seo",
     ],
 
+    sitemap: {
+        enabled: false,
+    },
+
     pwa: {
         strategies: "injectManifest",
         srcDir: "public",
diff --git a/frontend/package.json b/frontend/package.json
index ff3c169..fd054dd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
         "@nuxt/icon": "^1.10.3",
         "@nuxt/image": "^1.10.0",
         "@nuxtjs/google-fonts": "^3.2.0",
+        "@nuxtjs/seo": "^3.0.3",
         "@tanstack/vue-query": "^5.62.2",
         "@tanstack/vue-query-devtools": "^5.62.3",
         "@vite-pwa/nuxt": "^0.10.6",
diff --git a/frontend/pages/article/[id].vue b/frontend/pages/article/[id].vue
index 2c2f43e..6f7d1fa 100644
--- a/frontend/pages/article/[id].vue
+++ b/frontend/pages/article/[id].vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // import
 
 import useGetArticle from "~/composables/api/blog/useGetArticle";
@@ -12,6 +11,14 @@ const id = route.params.id as string | undefined;
 
 const { data: article, suspense } = useGetArticle(id);
 
+useSeoMeta({
+    title: `مقاله ${article.value?.title}`,
+    ogImage: article.value?.cover_image,
+    twitterImage: article.value?.cover_image,
+    ogDescription: article.value?.summery,
+    twitterDescription: article.value?.summery,
+});
+
 // ssr
 
 const response = await suspense();
@@ -19,16 +26,19 @@ const response = await suspense();
 if (response.isError) {
     throw createError({
         statusCode: 500,
-        statusMessage: `Error in categories page prefetch`
+        statusMessage: `Error in categories page prefetch`,
     });
 }
-
 </script>
 
 <template>
     <div class="container">
         <div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
-            <NuxtImg class="absolute object-cover size-full" :alt="article!.title" :src="article!.cover_image" />
+            <NuxtImg
+                class="absolute object-cover size-full"
+                :alt="article!.title"
+                :src="article!.cover_image"
+            />
             <div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
             <div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
                 <h1 class="typo-h-4 text-white pl-8">
@@ -41,13 +51,13 @@ if (response.isError) {
                 />
 
                 <div class="flex items-center justify-between">
-
-
                     <div class="flex items-center gap-4">
                         <div
-                            class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white">
+                            class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white"
+                        >
                             <div
-                                class="relative flex items-center justify-center rounded-full overflow-hidden size-[35px]">
+                                class="relative flex items-center justify-center rounded-full overflow-hidden size-[35px]"
+                            >
                                 <NuxtImg
                                     class="size-full object-cover absolute"
                                     :src="article!.author.profile_photo"
@@ -55,50 +65,51 @@ if (response.isError) {
                                 />
                             </div>
                             <span class="typo-label-sm">
-                            {{ article!.author.full_name }}
-                        </span>
+                                {{ article!.author.full_name }}
+                            </span>
                         </div>
                         <div
-                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
-                            <span class="typo-label-sm mt-0.5">
-                                دسته بندی موبایل
-                             </span>
+                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
+                        >
+                            <span class="typo-label-sm mt-0.5"> دسته بندی موبایل </span>
                         </div>
                     </div>
 
-
                     <div class="flex items-center gap-4">
                         <div
-                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
-                            <Icon name="ci:calendar" size="24px" class="**:stroke-white" />
-                            <span class="typo-label-sm mt-0.5">
-                                ۲۴ مهر 1403
-                             </span>
+                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
+                        >
+                            <Icon
+                                name="ci:calendar"
+                                size="24px"
+                                class="**:stroke-white"
+                            />
+                            <span class="typo-label-sm mt-0.5"> ۲۴ مهر 1403 </span>
                         </div>
                         <div
-                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
-                            <Icon name="ci:eye-open" size="24px" class="**:stroke-white" />
+                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
+                        >
+                            <Icon
+                                name="ci:eye-open"
+                                size="24px"
+                                class="**:stroke-white"
+                            />
                             <span class="typo-label-sm mt-0.5">
-                               {{ article!.views }}
-                             </span>
+                                {{ article!.views }}
+                            </span>
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>
 
         <div class="flex gap-4 mt-8">
-
             <div
                 class="p-8 flex-1 text-zinc-800 flex flex-col gap-6 [&_p,ul]:text-zinc-500 [&_h1]:typo-h-4 [&_h2]:typo-h-5 [&_h3]:typo-h-6 [&_p]:typo-p-md [&_ul]:list-disc [&_ul]:typo-p-md [&_ul]:space-y-2"
                 v-html="article!.content"
             />
 
-            <aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">
-                asdsa
-            </aside>
+            <aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">asdsa</aside>
         </div>
-
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/pages/articles.vue b/frontend/pages/articles.vue
index fddeea3..39b29c7 100644
--- a/frontend/pages/articles.vue
+++ b/frontend/pages/articles.vue
@@ -7,6 +7,10 @@ import ArticlesList from "~/components/articles/ArticlesList.vue";
 
 // state
 
+useSeoMeta({
+    title : "مقالات"
+});
+
 const page = ref(1);
 const search = ref("");
 const debouncedSearch = refDebounced(search, 700);
diff --git a/frontend/pages/cart/checkout.vue b/frontend/pages/cart/checkout.vue
index e5e01fe..c37d546 100644
--- a/frontend/pages/cart/checkout.vue
+++ b/frontend/pages/cart/checkout.vue
@@ -3,10 +3,13 @@
 
 const route = useRoute();
 
+useSeoMeta({
+    title: "ثبت سفارش",
+});
+
 definePageMeta({
     layout: "cart",
     middleware: "check-is-logged-in",
-    pageTitle: "ثبت سفارش",
     prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
     nextPage: { name: "payment", label: "پرداخت" },
 });
diff --git a/frontend/pages/cart/delivery.vue b/frontend/pages/cart/delivery.vue
index 7174721..988e452 100644
--- a/frontend/pages/cart/delivery.vue
+++ b/frontend/pages/cart/delivery.vue
@@ -7,10 +7,14 @@ import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
 
 // meta
 
+useSeoMeta({
+    title: "انتخاب آدرس",
+});
+
 definePageMeta({
     layout: "cart",
     middleware: "check-is-logged-in",
-    pageTitle: "انتخاب آدرس",
+
     prevPage: { name: "cart", label: "سبد خرید" },
     nextPage: { name: "cart-checkout", label: "تسویه حساب", query: "ZARINPAL" },
 });
diff --git a/frontend/pages/cart/index.vue b/frontend/pages/cart/index.vue
index b9fbae4..84ef551 100644
--- a/frontend/pages/cart/index.vue
+++ b/frontend/pages/cart/index.vue
@@ -5,10 +5,13 @@ import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
 
 // meta
 
+useSeoMeta({
+    title : "سبد خرید"
+});
+
 definePageMeta({
     layout: "cart",
     middleware: "check-is-logged-in",
-    pageTitle: "سبد خرید",
     prevPage: { name: "index", label: "بازگشت به خانه" },
     nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
 });
diff --git a/frontend/pages/category.vue b/frontend/pages/category.vue
index 642c489..8fd4ed9 100644
--- a/frontend/pages/category.vue
+++ b/frontend/pages/category.vue
@@ -5,6 +5,10 @@ import useGetCategories from "~/composables/api/product/useGetCategories";
 
 // state
 
+useSeoMeta({
+    title : "دسته بندی ها"
+});
+
 const { data: categories, suspense } = useGetCategories();
 
 const search = ref("");
diff --git a/frontend/pages/contact-us.vue b/frontend/pages/contact-us.vue
index dc7d036..00486ed 100644
--- a/frontend/pages/contact-us.vue
+++ b/frontend/pages/contact-us.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 // state
 
+useSeoMeta({
+    title : "ارتباط با ما"
+});
+
 const contactInfo = ref({
     name: "",
     email: "",
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 010f755..dbf78bf 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -4,8 +4,6 @@
 import useHomeData from "~/composables/api/home/useHomeData";
 import ProductsGrid from "~/components/global/ProductsGrid.vue";
 
-import { useStorage } from "@vueuse/core";
-
 // state
 
 const { data: homeData, suspense } = useHomeData();
diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
index 43fe7e8..ec25db0 100644
--- a/frontend/pages/product/[id].vue
+++ b/frontend/pages/product/[id].vue
@@ -16,6 +16,14 @@ const page = ref(1);
 const { suspense: suspenseProduct, data: product } = useGetProduct(id);
 const { suspense: suspenseComments } = useGetComments(id, page);
 
+useSeoMeta({
+    title: `محصول ${product.value?.name}`,
+    ogImage: product.value?.variants[0].images[0].image,
+    twitterImage: product.value?.variants[0].images[0].image,
+    ogDescription: product.value?.description,
+    twitterDescription: product.value?.description,
+});
+
 const selectedVariant = ref<ProductVariant>();
 
 const showChatButton = ref(true);
diff --git a/frontend/pages/products.vue b/frontend/pages/products/[...slug].vue
similarity index 90%
rename from frontend/pages/products.vue
rename to frontend/pages/products/[...slug].vue
index ff73d9b..19b1e01 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products/[...slug].vue
@@ -6,6 +6,22 @@ import { PRODUCT_RANGE } from "~/constants";
 
 // state
 
+const route = useRoute();
+
+useSeoMeta({
+    title: "محصولات",
+});
+
+definePageMeta({
+    validate: (route) => {
+        if (Array.isArray(route.params.slug)) {
+            return route.params.slug.length === 2 && route.params.slug[0] === "category";
+        }
+
+        return true;
+    },
+});
+
 const params: GetProductsFilters = useUrlSearchParams("history", {
     removeFalsyValues: true,
     removeNullishValues: true,
@@ -19,7 +35,7 @@ const filters = computed(() => {
         price_lte: params.price_lte ?? PRODUCT_RANGE.max,
         in_stock: params.in_stock ?? false,
         has_discount: params.has_discount ?? false,
-        category: params.category ?? undefined,
+        category: Array.isArray(route.params.slug) ? route.params.slug[1] ?? undefined : undefined,
         page: params.page ?? 1,
     };
 });
@@ -133,7 +149,7 @@ watch(
                 class="!p-0"
             />
             <div
-                v-if="data && paginationData && data.count > 10"
+                v-if="data && paginationData && data.count > 15"
                 class="w-full flex-center py-10"
             >
                 <Pagination
diff --git a/frontend/pages/profile/addresses.vue b/frontend/pages/profile/addresses.vue
index 686c251..46d6c70 100644
--- a/frontend/pages/profile/addresses.vue
+++ b/frontend/pages/profile/addresses.vue
@@ -5,6 +5,10 @@ import useGetAllAddress from "~/composables/api/account/useGetAllAddress";
 
 // meta
 
+useSeoMeta({
+    title : "پنل کاربری آدرس ها"
+});
+
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
diff --git a/frontend/pages/profile/index.vue b/frontend/pages/profile/index.vue
index 9378ec9..cb28d5f 100644
--- a/frontend/pages/profile/index.vue
+++ b/frontend/pages/profile/index.vue
@@ -11,6 +11,10 @@ import { QUERY_KEYS } from "~/constants";
 
 // meta
 
+useSeoMeta({
+    title : "پنل کاربری"
+});
+
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
diff --git a/frontend/pages/profile/notifications.vue b/frontend/pages/profile/notifications.vue
index 387575f..7976411 100644
--- a/frontend/pages/profile/notifications.vue
+++ b/frontend/pages/profile/notifications.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 // meta
 
+useSeoMeta({
+    title : "پنل کاربری اعلان ها"
+});
+
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
diff --git a/frontend/pages/profile/purchases-and-orders/index.vue b/frontend/pages/profile/purchases-and-orders/index.vue
index a604fe5..e01e1f1 100644
--- a/frontend/pages/profile/purchases-and-orders/index.vue
+++ b/frontend/pages/profile/purchases-and-orders/index.vue
@@ -5,6 +5,10 @@ import useGetAllOrders, {
 
 // meta
 
+useSeoMeta({
+    title : "پنل کاربری سفارشات"
+});
+
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
diff --git a/frontend/pages/profile/tickets/[id].vue b/frontend/pages/profile/tickets/[id].vue
index 66109c7..0534a70 100644
--- a/frontend/pages/profile/tickets/[id].vue
+++ b/frontend/pages/profile/tickets/[id].vue
@@ -13,6 +13,10 @@ import { QUERY_KEYS } from "~/constants";
 
 // meta
 
+useSeoMeta({
+    title : "پنل کاربری تیکت"
+});
+
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
diff --git a/frontend/pages/profile/tickets/index.vue b/frontend/pages/profile/tickets/index.vue
index c06c5f0..8ac3106 100644
--- a/frontend/pages/profile/tickets/index.vue
+++ b/frontend/pages/profile/tickets/index.vue
@@ -7,6 +7,10 @@ import useGetAllTickets, {
 
 // meta
 
+useSeoMeta({
+    title : "پنل کاربری تیکت ها"
+});
+
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
diff --git a/frontend/pages/profile/tickets/new.vue b/frontend/pages/profile/tickets/new.vue
index 2b92e3a..58d4630 100644
--- a/frontend/pages/profile/tickets/new.vue
+++ b/frontend/pages/profile/tickets/new.vue
@@ -2,9 +2,7 @@
 // imports
 
 import useGetAllOrders from "~/composables/api/orders/useGetAllOrders";
-import useCreateTicket, {
-    type CreateTicketRequest,
-} from "~/composables/api/tickets/useCreateTicket";
+import useCreateTicket, { type CreateTicketRequest } from "~/composables/api/tickets/useCreateTicket";
 import useUploadAttachment from "~/composables/api/tickets/useUploadAttachment";
 import { useToast } from "~/composables/global/useToast";
 import { QUERY_KEYS } from "~/constants";
@@ -14,6 +12,10 @@ import type { GetAllOrdersRequest } from "~/composables/api/orders/useGetAllOrde
 
 // meta
 
+useSeoMeta({
+    title: "پنل کاربری تیکت جدید",
+});
+
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
@@ -83,44 +85,26 @@ const ordersFilter = computed<GetAllOrdersRequest>(() => {
 
 // queries
 
-const { data: orders, isLoading: ordersIsLoading } =
-    useGetAllOrders(ordersFilter);
+const { data: orders, isLoading: ordersIsLoading } = useGetAllOrders(ordersFilter);
 
-const { mutateAsync: createTicket, isPending: createTicketIsPending } =
-    useCreateTicket();
+const { mutateAsync: createTicket, isPending: createTicketIsPending } = useCreateTicket();
 
-const { mutateAsync: uploadAttachment, isPending: uploadAttachmentIsPending } =
-    useUploadAttachment();
+const { mutateAsync: uploadAttachment, isPending: uploadAttachmentIsPending } = useUploadAttachment();
 
 // computed
 
 const formRules = computed(() => {
     return {
         ticket_category: {
-            required: helpers.withMessage(
-                "فیلد دسته بندی الزامی می باشد",
-                required
-            ),
+            required: helpers.withMessage("فیلد دسته بندی الزامی می باشد", required),
         },
         subject: {
-            required: helpers.withMessage(
-                "فیلد عنوان تیکت الزامی می باشد",
-                required
-            ),
-            minLength: helpers.withMessage(
-                "فیلد عنوان تیکت حداقل ۵ کرکتر می باشد",
-                minLength(5)
-            ),
+            required: helpers.withMessage("فیلد عنوان تیکت الزامی می باشد", required),
+            minLength: helpers.withMessage("فیلد عنوان تیکت حداقل ۵ کرکتر می باشد", minLength(5)),
         },
         content: {
-            required: helpers.withMessage(
-                "فیلد متن تیکت الزامی می باشد",
-                required
-            ),
-            minLength: helpers.withMessage(
-                "فیلد متن تیکت حداقل ۵ کرکتر می باشد",
-                minLength(5)
-            ),
+            required: helpers.withMessage("فیلد متن تیکت الزامی می باشد", required),
+            minLength: helpers.withMessage("فیلد متن تیکت حداقل ۵ کرکتر می باشد", minLength(5)),
         },
     };
 });
@@ -138,9 +122,7 @@ const handleUploadAttachment = (file: File) => {
             },
             onError: (error) => {
                 addToast({
-                    message: error.message
-                        ? error.message
-                        : "خطایی در آپلود پیوست رخ داد",
+                    message: error.message ? error.message : "خطایی در آپلود پیوست رخ داد",
                     options: {
                         status: "error",
                         description: "لطفا مجدد تلاش کنید",
@@ -166,8 +148,7 @@ const handleSubmit = async () => {
                         message: "تیکت شما با موفقیت ثبت شد",
                         options: {
                             status: "success",
-                            description:
-                                "پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
+                            description: "پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
                         },
                     });
                 },
@@ -188,7 +169,10 @@ const handleSubmit = async () => {
 
 <template>
     <div class="w-full flex flex-col gap-5">
-        <ProfilePageTitle title="تیکت جدید" icon="bi:ticket" />
+        <ProfilePageTitle
+            title="تیکت جدید"
+            icon="bi:ticket"
+        />
 
         <ProfileSection title="ارتباط با پشتیبانی">
             <template #button>
@@ -218,9 +202,7 @@ const handleSubmit = async () => {
                         <template #content>
                             <SelectGroup>
                                 <SelectItem
-                                    v-for="(
-                                        category, index
-                                    ) in ticketCategories"
+                                    v-for="(category, index) in ticketCategories"
                                     :key="index"
                                     class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
                                     :value="category.value"
@@ -228,11 +210,12 @@ const handleSubmit = async () => {
                                     <SelectItemIndicator
                                         class="absolute left-0 w-[25px] inline-flex items-center justify-center"
                                     >
-                                        <Icon name="bi:check" size="20" />
+                                        <Icon
+                                            name="bi:check"
+                                            size="20"
+                                        />
                                     </SelectItemIndicator>
-                                    <SelectItemText
-                                        class="text-end font-iran-yekan-x text-sm"
-                                    >
+                                    <SelectItemText class="text-end font-iran-yekan-x text-sm">
                                         {{ category.title }}
                                     </SelectItemText>
                                 </SelectItem>
@@ -240,7 +223,11 @@ const handleSubmit = async () => {
                         </template>
                     </Select>
                 </DataField>
-                <DataField id="orders" :required="true" label="خرید یا سفارش">
+                <DataField
+                    id="orders"
+                    :required="true"
+                    label="خرید یا سفارش"
+                >
                     <Select
                         placeholder="انتخاب کنید"
                         variant="outlined"
@@ -249,18 +236,10 @@ const handleSubmit = async () => {
                     >
                         <template #trigger>
                             <SelectValue
-                                :class="
-                                    ticketData.order_id
-                                        ? 'text-black'
-                                        : 'text-slate-400'
-                                "
+                                :class="ticketData.order_id ? 'text-black' : 'text-slate-400'"
                                 class="font-iran-yekan-x text-sm text-start placeholder-slate-400"
                             >
-                                {{
-                                    ticketData.order_id
-                                        ? `شماره سفارش : ${ticketData.order_id}`
-                                        : "وارد نشده"
-                                }}
+                                {{ ticketData.order_id ? `شماره سفارش : ${ticketData.order_id}` : "وارد نشده" }}
                             </SelectValue>
                         </template>
 
@@ -283,15 +262,8 @@ const handleSubmit = async () => {
                                                 size="32px"
                                             />
 
-                                            <div
-                                                class="flex items-start gap-1 text-[10px]"
-                                            >
-                                                <span
-                                                    >{{
-                                                        order.count
-                                                    }}
-                                                    محصول</span
-                                                >
+                                            <div class="flex items-start gap-1 text-[10px]">
+                                                <span>{{ order.count }} محصول</span>
                                                 |
                                                 <span>
                                                     شماره سفارش :
@@ -353,11 +325,7 @@ const handleSubmit = async () => {
             >
                 <Icon
                     v-if="createTicketIsPending"
-                    :name="
-                        createTicketIsPending
-                            ? 'svg-spinners:3-dots-bounce'
-                            : 'bi:send'
-                    "
+                    :name="createTicketIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:send'"
                 />
                 <span v-else>ارسال تیکت</span>
             </Button>
diff --git a/frontend/pages/signin.vue b/frontend/pages/signin.vue
index 724e3b1..d48f394 100644
--- a/frontend/pages/signin.vue
+++ b/frontend/pages/signin.vue
@@ -26,6 +26,10 @@ definePageMeta({
 
 // state
 
+useSeoMeta({
+    title : "ورود به فروشگاه"
+});
+
 const { addToast } = useToast();
 
 const { updateToken, updateRefreshToken } = useAuth();
diff --git a/frontend/pages/transaction.vue b/frontend/pages/transaction.vue
index eb9ec4d..86bb1ba 100644
--- a/frontend/pages/transaction.vue
+++ b/frontend/pages/transaction.vue
@@ -6,6 +6,12 @@ import usePersianDate from "~/composables/global/usePersianDate";
 
 // meta
 
+useSeoMeta({
+        title: "نتیجه تراکنش",
+        description : "",
+        keywords : ""
+})
+
 definePageMeta({
     layout: "none",
 });
@@ -22,11 +28,7 @@ const tracking_code = computed(() => route.query["tc"] as string);
 
 // queries
 
-const {
-    data: transaction,
-    isLoading: transactionIsLoading,
-    suspense,
-} = useGetTransaction(tracking_code);
+const { data: transaction, isLoading: transactionIsLoading, suspense } = useGetTransaction(tracking_code);
 
 await suspense();
 
@@ -37,8 +39,7 @@ const statusVariants = computed(() => {
         return {
             background_color: "bg-success-500",
             text_color: "text-white",
-            after_background_color:
-                "bg-success-600/50 shadow-[0px_40px_175px_1px] shadow-success-100",
+            after_background_color: "bg-success-600/50 shadow-[0px_40px_175px_1px] shadow-success-100",
             icon: "bi:check",
             title: "تراکنش موفق",
             hue_deg: "[filter:_hue-rotate(260deg)] ",
@@ -47,8 +48,7 @@ const statusVariants = computed(() => {
         return {
             background_color: "bg-danger-500",
             text_color: "text-white",
-            after_background_color:
-                "bg-danger-600/50 shadow-[0px_40px_175px_1px] shadow-danger-100",
+            after_background_color: "bg-danger-600/50 shadow-[0px_40px_175px_1px] shadow-danger-100",
             icon: "bi:x",
             title: "تراکنش ناموفق",
             hue_deg: "[filter:_hue-rotate(120deg)]",
@@ -57,8 +57,7 @@ const statusVariants = computed(() => {
         return {
             background_color: "bg-slate-300",
             text_color: "text-black",
-            after_background_color:
-                "bg-slate-600/50 shadow-[0px_40px_175px_1px] shadow-slate-100",
+            after_background_color: "bg-slate-600/50 shadow-[0px_40px_175px_1px] shadow-slate-100",
             icon: "bi:question-circle",
             title: "تراکنش معلق",
             hue_deg: "[filter:_hue-rotate(0deg)]",
@@ -104,10 +103,7 @@ const statusTitle = computed(() => {
             >
                 <div
                     class="w-full h-[4rem] lg:h-[5.2rem] absolute left-0 top-0 flex-center gap-2"
-                    :class="[
-                        statusVariants.background_color,
-                        statusVariants.text_color,
-                    ]"
+                    :class="[statusVariants.background_color, statusVariants.text_color]"
                 >
                     <Icon
                         :name="statusVariants.icon"
@@ -118,68 +114,48 @@ const statusTitle = computed(() => {
                     </h1>
                 </div>
 
-                <div
-                    class="w-full flex flex-col gap-4 lg:gap-5 pt-[4.5rem] lg:pt-[5.5rem] p-1"
-                >
+                <div class="w-full flex flex-col gap-4 lg:gap-5 pt-[4.5rem] lg:pt-[5.5rem] p-1">
                     <div
                         v-if="transaction?.bank_result?.bank_type"
                         class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                     >
                         <span class="font-medium">درگاه پرداخت</span>
-                        <span class="opacity-50">{{
-                            transaction?.bank_result?.bank_type
-                        }}</span>
+                        <span class="opacity-50">{{ transaction?.bank_result?.bank_type }}</span>
                     </div>
                     <div
                         v-if="transaction?.bank_result?.tracking_code"
                         class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                     >
                         <span class="font-medium">کد پیگیری</span>
-                        <span class="opacity-50 underline"
-                            >#{{
-                                transaction?.bank_result?.tracking_code
-                            }}</span
-                        >
+                        <span class="opacity-50 underline">#{{ transaction?.bank_result?.tracking_code }}</span>
                     </div>
                     <div
                         v-if="transaction?.bank_result?.reference_number"
                         class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                     >
                         <span class="font-medium">کد ارجاع</span>
-                        <span class="opacity-50 underline"
-                            >#{{
-                                transaction?.bank_result?.reference_number
-                            }}</span
-                        >
+                        <span class="opacity-50 underline">#{{ transaction?.bank_result?.reference_number }}</span>
                     </div>
                     <div
                         v-if="transaction?.bank_result?.amount"
                         class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                     >
                         <span class="font-medium">مبلغ</span>
-                        <span class="opacity-50">{{
-                            transaction?.bank_result?.amount
-                        }}</span>
+                        <span class="opacity-50">{{ transaction?.bank_result?.amount }}</span>
                     </div>
                     <div
                         v-if="transaction?.bank_result?.created_at"
                         class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                     >
                         <span class="font-medium">تاریخ</span>
-                        <span class="opacity-50">{{
-                            formatToPersian(
-                                transaction?.bank_result?.created_at
-                            )
-                        }}</span>
+                        <span class="opacity-50">{{ formatToPersian(transaction?.bank_result?.created_at) }}</span>
                     </div>
                     <div
                         v-if="transaction?.bank_result?.response_result"
                         class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                     >
                         <span class="font-medium">وضعیت پرداخت</span>
-                        <span class="opacity-50">{{
-                            transaction?.bank_result?.status_detail
-                        }}</span>
+                        <span class="opacity-50">{{ transaction?.bank_result?.status_detail }}</span>
                     </div>
                 </div>
 
@@ -190,10 +166,11 @@ const statusTitle = computed(() => {
                     {{ transaction?.detail }}
                 </div>
 
-                <div
-                    class="w-full flex flex-col-reverse lg:flex-row items-center justify-between gap-4 lg:gap-5"
-                >
-                    <NuxtLink to="/" class="w-full">
+                <div class="w-full flex flex-col-reverse lg:flex-row items-center justify-between gap-4 lg:gap-5">
+                    <NuxtLink
+                        to="/"
+                        class="w-full"
+                    >
                         <Button
                             class="w-full rounded-full max-lg:py-2"
                             start-icon="ci:left-rotation"
diff --git a/frontend/public/img/heymlz/global-cover.jpg b/frontend/public/img/heymlz/global-cover.jpg
new file mode 100644
index 0000000..cb15b86
Binary files /dev/null and b/frontend/public/img/heymlz/global-cover.jpg differ
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
deleted file mode 100644
index 8b13789..0000000
--- a/frontend/public/robots.txt
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/frontend/public/video/category.mp4 b/frontend/public/video/category.mp4
new file mode 100644
index 0000000..6b3d8d5
Binary files /dev/null and b/frontend/public/video/category.mp4 differ