diff --git a/frontend/components/global/product-detail/ProductsSlider.vue b/frontend/components/global/product-detail/ProductsSlider.vue
index 218de19..83eea97 100644
--- a/frontend/components/global/product-detail/ProductsSlider.vue
+++ b/frontend/components/global/product-detail/ProductsSlider.vue
@@ -113,11 +113,15 @@ const onSwiper = (swiper: SwiperClass) => {
                 </Swiper>
             </div>
             <template #fallback>
-                <div class="w-full grid grid-cols-3 sm:grid-cols-4 gap-6">
-                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
-                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
-                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
-                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
+                <div class="w-full flex sm:grid justify-between sm:grid-cols-4 gap-6">
+                    <div
+                        class="bg-neutral-100 items-stretch w-25 sm:size-full rounded-e-2xl sm:rounded-2xl sm:aspect-square"
+                    />
+                    <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
+                    <div
+                        class="bg-neutral-100 items-stretch w-25 sm:size-full rounded-s-2xl sm:rounded-2xl sm:aspect-square"
+                    />
+                    <div class="bg-neutral-100 size-full rounded-2xl aspect-square max-sm:hidden" />
                 </div>
             </template>
         </ClientOnly>
diff --git a/frontend/components/global/product-detail/Rating.vue b/frontend/components/global/product-detail/Rating.vue
index b4ffc64..76bbbdd 100644
--- a/frontend/components/global/product-detail/Rating.vue
+++ b/frontend/components/global/product-detail/Rating.vue
@@ -1,21 +1,23 @@
 <script lang="ts" setup>
-
 // types
 
 type Props = {
-    rate: number
-}
+    rate: number;
+    haveRate?: boolean;
+};
 
 // props
 
 defineProps<Props>();
-
 </script>
 
 <template>
     <div class="flex items-center gap-2">
         <span class="typo-p-sm font-normal translate-y-px">
-            {{ rate }}
+            <template v-if="haveRate">
+                {{ rate }}
+            </template>
+            <template v-else> ( بدون نظر ) </template>
         </span>
         <div class="flex items-center gap-1">
             <Icon
@@ -30,4 +32,4 @@ defineProps<Props>();
             />
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/global/product-detail/Share.vue b/frontend/components/global/product-detail/Share.vue
deleted file mode 100644
index 09f0a3d..0000000
--- a/frontend/components/global/product-detail/Share.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <div class="flex items-center gap-6">
-        <span class="typo-p-md text-black">
-            اشتراک گذاری:
-        </span>
-        <div class="flex items-center gap-3">
-            <NuxtLink>
-                <Icon name="ci:instagram" class="**:stroke-slate-500 size-6" />
-            </NuxtLink>
-            <NuxtLink>
-                <Icon name="ci:facebook" class="**:stroke-slate-500 size-6" />
-            </NuxtLink>
-            <NuxtLink>
-                <Icon name="ci:tiktok" class="**:stroke-slate-500 size-6" />
-            </NuxtLink>
-            <NuxtLink>
-                <Icon name="ci:youtube" class="**:stroke-slate-500 size-6" />
-            </NuxtLink>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
index 44c8a2b..4277a3b 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -72,45 +72,54 @@ const changeSlide = (id: number) => {
             </div>
 
             <div class="relative w-full">
-                <Swiper
-                    :slides-per-view="3"
-                    :space-between="20"
-                    @swiper="onSwiper"
-                    class="w-full"
-                >
-                    <SwiperSlide
-                        v-for="slide in slides"
-                        :key="slide.id"
+                <ClientOnly>
+                    <Swiper
+                        :slides-per-view="3"
+                        :space-between="20"
+                        @swiper="onSwiper"
+                        class="w-full"
                     >
-                        <div
-                            @click="changeSlide(slide.id)"
-                            :class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
-                            class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
+                        <SwiperSlide
+                            v-for="slide in slides"
+                            :key="slide.id"
                         >
-                            <NuxtImg
-                                class="absolute object-cover size-full"
-                                :src="slide.image"
-                                loading="lazy"
-                                fetch-priority="low"
-                                :alt="String(slide.id)"
-                            />
-                        </div>
-                    </SwiperSlide>
-                    <SwiperSlide
-                        v-if="emptySlidesCount > 0"
-                        v-for="slide in emptySlidesCount"
-                        :key="slide"
-                    >
-                        <div
-                            class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
+                            <div
+                                @click="changeSlide(slide.id)"
+                                :class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
+                                class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
+                            >
+                                <NuxtImg
+                                    class="absolute object-cover size-full"
+                                    :src="slide.image"
+                                    loading="lazy"
+                                    fetch-priority="low"
+                                    :alt="String(slide.id)"
+                                />
+                            </div>
+                        </SwiperSlide>
+                        <SwiperSlide
+                            v-if="emptySlidesCount > 0"
+                            v-for="slide in emptySlidesCount"
+                            :key="slide"
                         >
-                            <Icon
-                                name="ci:image-slash"
-                                class="size-[40px] sm:size-[60px] **:fill-black/20"
-                            />
+                            <div
+                                class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
+                            >
+                                <Icon
+                                    name="ci:image-slash"
+                                    class="size-[40px] sm:size-[60px] **:fill-black/20"
+                                />
+                            </div>
+                        </SwiperSlide>
+                    </Swiper>
+                    <template #fallback>
+                        <div class="w-full grid grid-cols-3 gap-6">
+                            <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
+                            <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
+                            <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
                         </div>
-                    </SwiperSlide>
-                </Swiper>
+                    </template>
+                </ClientOnly>
 
                 <div
                     v-if="slides.length > 3"
diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index 9daa392..a3408d0 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -102,7 +102,7 @@ const limitedComments = computed(() => {
         v-if="!!comments"
         class="bg-slate-50"
     >
-        <div class="flex relative gap-8 my-42 container max-lg:flex-col">
+        <div class="flex relative gap-8 my-24 sm:my-42 container max-lg:flex-col">
             <div
                 class="sticky top-0 flex flex-col gap-6 lg:min-w-100 h-fit bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
             >
diff --git a/frontend/components/product/ProductDetails.vue b/frontend/components/product/ProductDetails.vue
index 3490b19..b15d351 100644
--- a/frontend/components/product/ProductDetails.vue
+++ b/frontend/components/product/ProductDetails.vue
@@ -9,7 +9,7 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
 </script>
 
 <template>
-    <section class="w-full container pt-20 flex flex-col gap-y-[1.5rem]">
+    <section class="w-full container sm:pt-20 flex flex-col gap-y-6">
         <div class="w-full flex">
             <span class="text-black max-lg:hidden typo-h-4 mb-4"> جزئیات محصول </span>
         </div>
diff --git a/frontend/components/product/ProductHero/SaveButton.vue b/frontend/components/product/ProductHero/SaveButton.vue
new file mode 100644
index 0000000..64cc3d1
--- /dev/null
+++ b/frontend/components/product/ProductHero/SaveButton.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+// imports
+
+import { useAuth } from "~/composables/api/auth/useAuth";
+import useGetProduct from "~/composables/api/product/useGetProduct";
+import useSaveProduct from "~/composables/api/product/useSaveProduct";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
+
+// states
+
+const route = useRoute();
+const id = route.params.id as string | undefined;
+
+const { $queryClient: queryClient } = useNuxtApp();
+
+const { token } = useAuth();
+const { addToast } = useToast();
+
+const { mutateAsync: saveProduct, isPending: isSaveProductPending } = useSaveProduct();
+const { data: product, refetch: refetchProduct, isFetching: isFetchingPending } = useGetProduct(id);
+
+// methods
+
+const saveProductHandler = async () => {
+    if (!!token.value) {
+        await saveProduct({ product_slug: product.value!.slug });
+        await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.product] });
+    } else {
+        addToast({
+            options: { status: "info" },
+            message: "برای ذخیره کردن لطفا وارد شوید.",
+        });
+    }
+};
+</script>
+
+<template>
+    <button
+        @click="saveProductHandler"
+        :disabled="isSaveProductPending || isFetchingPending"
+        class="px-2 sm:px-3 py-2 flex items-center gap-2 bg-slate-50 border-slate-200 border rounded-lg flex-center"
+    >
+        <span class="typo-label-sm max-sm:hidden"> ذخیره </span>
+
+        <Icon
+            v-if="isSaveProductPending || isFetchingPending"
+            name="ci:svg-spinners-180-ring-with-bg"
+        />
+
+        <Icon
+            v-else
+            :class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
+            :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'ci:bi-bookmark'"
+        />
+    </button>
+</template>
diff --git a/frontend/components/product/ProductHero/ShareButton.vue b/frontend/components/product/ProductHero/ShareButton.vue
new file mode 100644
index 0000000..9cfd801
--- /dev/null
+++ b/frontend/components/product/ProductHero/ShareButton.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+// imports
+
+import { useToast } from "~/composables/global/useToast";
+
+// types
+
+type Props = {
+    product: Product;
+};
+
+// props
+
+const props = defineProps<Props>();
+const { product } = toRefs(props);
+
+// states
+
+const { addToast } = useToast();
+
+// methods
+
+const shareProduct = async () => {
+    const shareData = {
+        title: product.value.name,
+        text: `لینک اشتراک گذاری محصول ${product.value.name}`,
+        url: window.location.href,
+    };
+
+    // Native share
+    if (navigator.share) {
+        try {
+            await navigator.share(shareData);
+        } catch (error) {
+            console.error("Share canceled or failed", error);
+        }
+
+        return;
+    }
+
+    // Fallback → copy link
+    try {
+        await navigator.clipboard.writeText(shareData.url);
+
+        addToast({
+            message: "لینک کالا کپی شد !",
+        });
+    } catch (error) {
+        console.error("Clipboard failed", error);
+        addToast({
+            options: { status: "error" },
+            message: "کپی لینک کالا با خطا مواجه شد !",
+        });
+    }
+};
+</script>
+
+<template>
+    <button
+        @click="shareProduct"
+        class="px-2 py-2 flex items-center gap-2 bg-slate-50 border-slate-200 border rounded-lg flex-center"
+    >
+        <span class="typo-label-sm max-sm:hidden"> ارسال </span>
+
+        <Icon
+            name="ci:bi-share"
+        />
+    </button>
+</template>
diff --git a/frontend/components/product/ProductHero/index.vue b/frontend/components/product/ProductHero/index.vue
index 8f58ca2..ec123d2 100644
--- a/frontend/components/product/ProductHero/index.vue
+++ b/frontend/components/product/ProductHero/index.vue
@@ -5,8 +5,6 @@ import useGetProduct from "~/composables/api/product/useGetProduct";
 import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
 import useAddCartItem from "~/composables/api/orders/useAddCartItem";
 import { useAuth } from "~/composables/api/auth/useAuth";
-import useSaveProduct from "~/composables/api/product/useSaveProduct";
-import { QUERY_KEYS } from "~/constants";
 
 // state
 
@@ -14,11 +12,9 @@ const route = useRoute();
 const id = route.params.id as string | undefined;
 
 const { token } = useAuth();
-const { $queryClient: queryClient } = useNuxtApp();
 
 const { data: product, refetch: refetchProduct, isFetching: isFetchingPending } = useGetProduct(id);
 const { mutateAsync: addCartItem, isPending: isAddCartItemPending } = useAddCartItem();
-const { mutateAsync: saveProduct, isPending: isSaveProductPending } = useSaveProduct();
 
 const selectedVariantId = ref(product.value!.variants[0].id);
 const selectedQuantity = ref(1);
@@ -40,11 +36,6 @@ const addItemToCart = async () => {
     await refetchProduct();
 };
 
-const saveProductHandler = async () => {
-    await saveProduct({ product_slug: product.value!.slug });
-    await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.product] });
-};
-
 // watch
 
 watch([selectedVariantId, product], ([selectedVariantId, product]) => {
@@ -77,31 +68,32 @@ watch(
 </script>
 
 <template>
-    <div class="flex max-lg:flex-col lg:gap-12 xl:gap-16 container pt-[5rem] pb-28">
+    <div class="flex max-lg:flex-col lg:gap-12 xl:gap-16 container pt-8 sm:pt-20 pb-28">
         <div class="flex flex-col gap-3 lg:hidden">
             <div class="flex items-center justify-between w-full">
-                <NuxtLink
-                    to="#"
-                    class="typo-label-sm"
-                >
-                    {{ product!.category.name }}
-                </NuxtLink>
-                <button
-                    @click="saveProductHandler"
-                    :disabled="isSaveProductPending || isFetchingPending || !token"
-                    class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
-                >
+                <div class="flex items-center gap-1.5">
+                    <NuxtLink
+                        to="#"
+                        class="typo-label-sm"
+                    >
+                        محصولات
+                    </NuxtLink>
                     <Icon
-                        v-if="isSaveProductPending || isFetchingPending"
-                        name="ci:svg-spinners-180-ring-with-bg"
+                        name="ci:bi-chevron-left"
+                        size="14"
                     />
+                    <NuxtLink
+                        to="#"
+                        class="typo-label-sm"
+                    >
+                        {{ product!.category.name }}
+                    </NuxtLink>
+                </div>
 
-                    <Icon
-                        v-else
-                        :class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
-                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'ci:bi-bookmark'"
-                    />
-                </button>
+                <div class="flex items-center gap-2">
+                    <ShareButton :product="product!" />
+                    <SaveButton />
+                </div>
             </div>
             <h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2">
                 {{ product!.name }}
@@ -136,7 +128,10 @@ watch(
                         <span class="max-sm:hidden"> تخفیف درصد </span>
                     </div>
                 </div>
-                <Rating :rate="product!.rating" />
+                <Rating
+                    :rate="product!.rating"
+                    :have-rate="product!.rating !== 0"
+                />
             </div>
         </div>
         <Slider
@@ -146,28 +141,28 @@ watch(
         />
         <div class="lg:w-1/2 flex flex-col gap-3 mt-12">
             <div class="flex items-center justify-between w-full max-lg:hidden">
-                <NuxtLink
-                    to="#"
-                    class="typo-label-sm"
-                >
-                    {{ product!.category.name }}
-                </NuxtLink>
-                <button
-                    @click="saveProductHandler"
-                    :disabled="isSaveProductPending || isFetchingPending || !token"
-                    class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
-                >
+                <div class="flex items-center gap-2.5">
+                    <NuxtLink
+                        to="#"
+                        class="typo-label-sm"
+                    >
+                        محصولات
+                    </NuxtLink>
                     <Icon
-                        v-if="isSaveProductPending || isFetchingPending"
-                        name="ci:svg-spinners-180-ring-with-bg"
+                        name="ci:bi-chevron-left"
+                        size="14"
                     />
-
-                    <Icon
-                        v-else
-                        :class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
-                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'ci:bi-bookmark'"
-                    />
-                </button>
+                    <NuxtLink
+                        to="#"
+                        class="typo-label-sm"
+                    >
+                        {{ product!.category.name }}
+                    </NuxtLink>
+                </div>
+                <div class="flex items-center gap-2">
+                    <ShareButton :product="product!" />
+                    <SaveButton />
+                </div>
             </div>
             <h1 class="typo-h-4 xl:typo-h-3 max-lg:hidden">
                 {{ product!.name }}
@@ -205,12 +200,14 @@ watch(
 
                     <Rating
                         :rate="product!.rating"
+                        :have-rate="product!.rating !== 0"
                         class="sm:hidden"
                     />
                 </div>
 
                 <Rating
                     :rate="product!.rating"
+                    :have-rate="product!.rating !== 0"
                     class="max-sm:hidden"
                 />
             </div>
@@ -338,8 +335,6 @@ watch(
                 </div>
 
                 <InfoCard />
-
-                <Share />
             </div>
 
             <ProductDescription
diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
index 53bc96d..b8b14d0 100644
--- a/frontend/pages/product/[id].vue
+++ b/frontend/pages/product/[id].vue
@@ -73,6 +73,6 @@ onMounted(() => {
         </div>
         <ProductComments :product="product!" />
 
-        <ChatButton :showChatButton="showChatButton" />
+        <!-- <ChatButton :showChatButton="showChatButton" /> -->
     </div>
 </template>
diff --git a/frontend/public/icons/bi-share.svg b/frontend/public/icons/bi-share.svg
new file mode 100644
index 0000000..7cea1c7
--- /dev/null
+++ b/frontend/public/icons/bi-share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M13.5 1a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></svg>
\ No newline at end of file