diff --git a/frontend/components/global/CategoryCard.vue b/frontend/components/global/CategoryCard.vue
index d01749b..9a77401 100644
--- a/frontend/components/global/CategoryCard.vue
+++ b/frontend/components/global/CategoryCard.vue
@@ -24,10 +24,10 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 
 <template>
     <NuxtLink :to="`/products?category=${id}`">
-        <div class="relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
+        <div class="group relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
             <img
                 :id="`category-image-${id}`"
-                class="absolute object-contain size-full"
+                class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
                 :src="picture"
                 alt=""
             />
diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index 392a4ee..4ec5fb9 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { GetProductsFilters } from "~/composables/api/products/useGetProducts";
 
 // types
 
@@ -17,9 +16,9 @@ defineProps<Props>();
 
 // state
 
-const params: GetProductsFilters = inject("params");
+const params : any = inject("params");
 
-const page = ref(Number(params.page) ?? 1);
+const page = ref(params?.page ? Number(params.page) : 1);
 
 // watch
 
@@ -82,6 +81,4 @@ watch(
             </PaginationFirst>
         </PaginationList>
     </PaginationRoot>
-</template>
-
-<style scoped></style>
+</template>
\ 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 4e16223..1517bd1 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -37,21 +37,28 @@ const changeSlide = (id: number) => {
 <template>
     <div class="flex flex-col relative gap-6">
         <div class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-200">
-            <img
-                class="size-full absolute object-contain"
-                :src="selectedSlideDetail.picture"
-                :alt="String(selectedSlideDetail.id)"
-            />
+            <Transition name="zoom" mode="out-in">
+                <img
+                    :key="selectedSlideDetail.id"
+                    class="size-full absolute object-contain"
+                    :src="selectedSlideDetail.picture"
+                    :alt="String(selectedSlideDetail.id)"
+                />
+            </Transition>
         </div>
         <div class="flex items-center justify-between gap-6">
             <div
                 @click="changeSlide(slide.id)"
                 v-for="slide in slides"
-                :class="selectedSlide === slide.id ? 'ring-black' : 'ring-transparent'"
-                class="cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
+                :class="selectedSlide === slide.id ? '!ring-black' : 'ring-transparent'"
+                class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
                 :key="slide.id"
             >
-                <img class="absolute object-cover size-full" :src="slide.picture" :alt="String(slide.id)" />
+                <img
+                    class="absolute object-cover size-full"
+                    :src="slide.picture"
+                    :alt="String(slide.id)"
+                />
             </div>
         </div>
     </div>
diff --git a/frontend/components/global/product/Comment.vue b/frontend/components/global/product/Comment.vue
index a6da3de..cfb13c1 100644
--- a/frontend/components/global/product/Comment.vue
+++ b/frontend/components/global/product/Comment.vue
@@ -1,5 +1,23 @@
 <script setup lang="ts">
 
+// type
+
+type Props = {
+    title: string,
+    date: string,
+    username: string,
+    content: string,
+}
+
+// props
+
+const props = defineProps<Props>();
+const { date } = toRefs(props);
+
+// state
+
+const formattedDate = useDateFormat(date.value, "YYYY/MM/DD");
+
 </script>
 
 <template>
@@ -10,14 +28,15 @@
                     خیلی محصول خوبی بودددد
                 </span>
                 <span class="typo-p-sm text-slate-500">
-                    منصور مرزبان در ۱۴۰۳/۱۲/۲ ساعت ۱۲:۳۴
+                    {{ username }}
+                    در
+                    {{ formattedDate }}
                 </span>
             </div>
             <Rating />
         </div>
         <div class="typo-p-md">
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
-            بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرد گذشته.
+            {{ content }}
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index ddfa8f2..85252ef 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -34,12 +34,12 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
 <template>
     <NuxtLink :to="'/product/' + id">
         <div
-            class="relative size-full min-h-[31.25rem] rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
+            class="group relative size-full min-h-[31.25rem] rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
         >
             <img
                 :id="`product-image-${id}`"
                 :src="picture"
-                class="size-full object-contain absolute inset-0"
+                class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
                 alt="product-background"
             />
 
diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index 4bc9a08..2d38b65 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -1,29 +1,96 @@
 <script setup lang="ts">
 
+// import
+
+import useGetComments from "~/composables/api/product/useGetComments";
+import useCreateComment from "~/composables/api/product/useCreateComment";
+import { useAuth } from "~/composables/api/auth/useAuth";
+
+// state
+
+const route = useRoute();
+
+const id = route.params.id as string | undefined;
+const page = ref(1);
+
+const { token } = useAuth();
+const userComment = ref("");
+
+const { data: comments, refetch : refetchComments } = useGetComments(id, page);
+const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
+
+// method
+
+const submitComment = async () => {
+    if (userComment.value.length > 3) {
+        await createComment({
+            content: userComment.value
+        });
+
+        userComment.value = "";
+
+        await refetchComments();
+    }
+};
+
 </script>
 
 <template>
     <section class="bg-slate-50">
-        <div class="flex gap-12 my-42 container">
-            <div class="flex flex-col gap-6 min-w-fit">
+        <div class="flex relative gap-8 my-42 container">
+            <div class="sticky top-0 flex flex-col gap-6 min-w-[400px] max-h-min bg-white p-8 rounded-xl border-[0.5px] border-slate-200">
                 <h3 class="typo-h-3">
                     نظرات کاربران
                 </h3>
                 <div class="flex flex-col gap-2">
                     <Rating />
                     <span class="typo-p-sm">
-                    بر اساس ۴ نظر
-                </span>
+                        بر اساس {{ comments?.count }} نظر
+                    </span>
                 </div>
-                <Button class="rounded-full">
-                    نظر بنویسید
-                </Button>
+                <form @submit.prevent="submitComment" class="flex flex-col gap-6">
+                    <textarea
+                        :disabled="!token"
+                        class="w-full min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200"
+                        v-model="userComment"
+                        placeholder="نظر خود را بنویسید..."
+                    />
+                    <Button
+                        v-if="token"
+                        type="submit"
+                        class="rounded-full w-full"
+                        :loading="isCreateCommentPending"
+                        :disabled="isCreateCommentPending"
+                    >
+                        نظر بنویسید
+                    </Button>
+                    <NuxtLink v-else to="/signin">
+                        <Button
+                            type="button"
+                            class="rounded-full w-full"
+                        >
+                            وارد شوید
+                        </Button>
+                    </NuxtLink>
+                </form>
             </div>
-            <div class="flex flex-col gap-12">
-                <Comment />
-                <Comment />
-                <Comment />
+            <div class="flex flex-col gap-8 w-full">
+                <Comment
+                    v-for="comment in comments!.results"
+                    :key="comment.id"
+                    title=""
+                    :content="comment.content"
+                    :date="comment.timestamp"
+                    :username="'منصور مرزبان'"
+                />
+                <div class="flex items-center justify-center w-full">
+                    <Pagination
+                        :total="comments!.count"
+                        :items="comments!.results.map((item, i) => ({ type: 'page', value: i }))"
+                    />
+                </div>
             </div>
+
         </div>
     </section>
 </template>
\ No newline at end of file
diff --git a/frontend/composables/api/product/useCreateComment.ts b/frontend/composables/api/product/useCreateComment.ts
new file mode 100644
index 0000000..9443850
--- /dev/null
+++ b/frontend/composables/api/product/useCreateComment.ts
@@ -0,0 +1,30 @@
+// imports
+
+import { useMutation } from "@tanstack/vue-query";
+import { API_ENDPOINTS } from "~/constants";
+
+// types
+
+export type CreateCommentRequest = {
+    content: string
+};
+
+const useCreateComment = (id: number | string | undefined) => {
+
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // method
+
+    const handleCreateComment = async (variables: CreateCommentRequest) => {
+        const { data } = await axios.post(`${API_ENDPOINTS.product.create_comment}/${id}`, variables);
+        return data;
+    };
+
+    return useMutation({
+        mutationFn: (variables: CreateCommentRequest) => handleCreateComment(variables)
+    });
+};
+
+export default useCreateComment;
diff --git a/frontend/composables/api/product/useGetCategories.ts b/frontend/composables/api/product/useGetCategories.ts
index 10b34aa..47f3a2e 100644
--- a/frontend/composables/api/product/useGetCategories.ts
+++ b/frontend/composables/api/product/useGetCategories.ts
@@ -17,7 +17,6 @@ const useGetCategories = () => {
 
     const handleGetCategories = async () => {
         const { data } = await axios.get<GetCategoriesResponse>(`${API_ENDPOINTS.products.categories}`);
-        await new Promise(resolve => setTimeout(resolve, 5000));
         return data;
     };
 
diff --git a/frontend/composables/api/product/useGetComments.ts b/frontend/composables/api/product/useGetComments.ts
new file mode 100644
index 0000000..ad74c20
--- /dev/null
+++ b/frontend/composables/api/product/useGetComments.ts
@@ -0,0 +1,29 @@
+// imports
+
+import { useQuery } from "@tanstack/vue-query";
+import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
+
+// types
+
+export type GetCommentsResponse = ApiPaginated<UserComment>;
+
+const useGetComments = (id: string | number | undefined, page: Ref<number>) => {
+
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleGetComments = async () => {
+        const { data } = await axios.get<GetCommentsResponse>(`${API_ENDPOINTS.product.comments}/${id}`);
+        return data;
+    };
+
+    return useQuery({
+        queryKey: [QUERY_KEYS.comments, id, page],
+        queryFn: () => handleGetComments()
+    });
+};
+
+export default useGetComments;
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index 7f1e2c4..bfad022 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -5,6 +5,8 @@ export const API_ENDPOINTS = {
         send_otp: "/accounts/send_otp"
     },
     product: {
+        comments: "/products/comments",
+        create_comment: "/products/comments",
         get: "/products"
     },
     auth: {
@@ -24,6 +26,7 @@ export const API_ENDPOINTS = {
 };
 
 export const QUERY_KEYS = {
+    comments: "comments",
     home: "home",
     chat: "chat",
     product: "product",
diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
index 6ac127b..52e32e3 100644
--- a/frontend/pages/product/[id].vue
+++ b/frontend/pages/product/[id].vue
@@ -2,23 +2,27 @@
 
 import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
 import useGetProduct from "~/composables/api/product/useGetProduct";
+import useGetComments from "~/composables/api/product/useGetComments";
 
 const route = useRoute();
 
 const id = route.params.id as string | undefined;
+const page = ref(1);
 
-const { suspense } = useGetProduct(id);
+const { suspense : suspenseProduct } = useGetProduct(id);
+const { suspense : suspenseComments} = useGetComments(id, page);
 
 // ssr
 
 await useAsyncData(async () => {
-    const response = await suspense();
+    const productResponse = await suspenseProduct();
+    const commentsResponse = await suspenseComments();
 
-    if (response.isError) {
+    if (productResponse.isError || commentsResponse.isError) {
         throw createError({
             statusCode: 404,
-            statusMessage: `error : ${response.error.message}`,
-        })
+            statusMessage: `error : product ${id} prefetch error`
+        });
     }
 });
 
@@ -30,7 +34,7 @@ await useAsyncData(async () => {
         <ProductVideo />
         <ProductComments />
         <ProductDetails />
-<!--        <ProductsSlider title="محصولات مشابه" />-->
+        <!--        <ProductsSlider title="محصولات مشابه" />-->
         <ChatButton />
     </div>
 </template>
diff --git a/frontend/plugins/axios.ts b/frontend/plugins/axios.ts
index 04e524b..296a285 100644
--- a/frontend/plugins/axios.ts
+++ b/frontend/plugins/axios.ts
@@ -16,7 +16,7 @@ export default defineNuxtPlugin(() => {
             !config.url?.includes(API_ENDPOINTS.auth.signin) &&
             !config.url?.includes(API_ENDPOINTS.account.send_otp)
         ) {
-            config.headers.Authorization = `Bearer ${token.value}`;
+            config.headers.Authorization = token.value ? `Bearer ${token.value}` : undefined;
         }
 
         return config;
diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
index ee75637..e28b8ce 100644
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -43,6 +43,15 @@ declare global {
         meta_rating: number | null;
     };
 
+    type UserComment = {
+        "id": number,
+        "content": string,
+        "timestamp": string,
+        "show": boolean,
+        "product": number,
+        "user": number
+    }
+
     type Category = {
         id: number;
         name: string;
@@ -57,7 +66,7 @@ declare global {
         "name": string,
         "slug": string,
         "icon": string,
-        "image" : string,
+        "image": string,
         "product_count": string,
         "parent": string,
         "show": boolean