diff --git a/frontend/components/global/BlogPost.vue b/frontend/components/global/BlogPost.vue
index 485bf58..76f425f 100644
--- a/frontend/components/global/BlogPost.vue
+++ b/frontend/components/global/BlogPost.vue
@@ -3,12 +3,11 @@
 // types
 
 type Props = {
+    id: number;
     tag: string;
     date: string;
-    comments: number;
     title: string;
     description: string;
-    link: string;
     variant?: "sm" | "lg";
     image: string,
 }
@@ -23,96 +22,95 @@ const {} = toRefs(props);
 </script>
 
 <template>
-    <div
-        :class="variant === 'lg' ? 'rounded-150 overflow-hidden' : ''"
-        class="group max-h-[700px] h-[700px] relative"
-    >
-
-        <Tag
-            v-if="variant === 'lg'"
-            class="bg-success-500 absolute left-10 top-10 z-20"
-        >
-            اسپیکر
-        </Tag>
-
+    <NuxtLink :to="`/article/${id}`">
         <div
-            v-if="variant === 'sm'"
-            class="h-[350px] rounded-150 overflow-hidden relative"
+            :class="variant === 'lg' ? 'h-[600px] rounded-150 overflow-hidden' : 'h-fit'"
+            class="group w-full relative"
         >
+
             <Tag
-                class="bg-success-500 absolute z-20 left-6 top-6"
+                v-if="variant === 'lg'"
+                class="bg-success-500 absolute left-10 top-10 z-20"
             >
                 اسپیکر
             </Tag>
 
+            <div
+                v-if="variant === 'sm'"
+                class="h-[350px] rounded-150 overflow-hidden relative"
+            >
+                <Tag
+                    class="bg-success-500 absolute z-20 left-6 top-6"
+                >
+                    اسپیکر
+                </Tag>
+
+                <img
+                    :src="image"
+                    class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
+                    alt=""
+                />
+            </div>
+
+            <div
+                :class="variant === 'lg' ? 'absolute px-10' : 'invert mt-8'"
+                class="bottom-10 flex flex-col gap-6 z-20"
+            >
+
+                <div class="flex items-center gap-6">
+                    <div class="flex items-center gap-2">
+                        <Icon
+                            name="ci:comment"
+                            size="18"
+                            class="**:stroke-white"
+                        />
+                        <span class="typo-p-sm text-white">
+                        ۰ نظر
+                    </span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <Icon
+                            name="ci:calendar"
+                            size="18"
+                            class="**:stroke-white"
+                        />
+                        <span class="typo-p-sm text-white">
+                        ۳۱ مهر ۱۴۰۳
+                    </span>
+                    </div>
+                </div>
+
+                <div class="flex gap-4 flex-col">
+                <span
+                    :class="variant === 'lg' ? 'typo-h-5' : 'typo-h-6'"
+                    class="text-white"
+                >
+                    {{ title }}
+                </span>
+                    <p
+                        :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"
+                        class="typo-p-md text-white text-justify"
+                        v-html="description"
+                    />
+                </div>
+
+                <NuxtLink :to="`/article/${id}`" class="underline text-white typo-p-md">
+                    بیشتر بخوانید...
+                </NuxtLink>
+
+            </div>
+
             <img
+                v-if="variant === 'lg'"
                 :src="image"
                 class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                 alt=""
             />
+
+            <div
+                v-if="variant === 'lg'"
+                class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
+            />
         </div>
-
-        <div
-            :class="variant === 'lg' ? 'absolute px-10' : 'invert mt-8'"
-            class="bottom-10 flex flex-col gap-6 z-20"
-        >
-
-            <div class="flex items-center gap-6">
-                <div class="flex items-center gap-2">
-                    <Icon
-                        name="ci:comment"
-                        size="18"
-                        class="**:stroke-white"
-                    />
-                    <span class="typo-p-sm text-white">
-                        ۰ نظر
-                    </span>
-                </div>
-                <div class="flex items-center gap-2">
-                    <Icon
-                        name="ci:calendar"
-                        size="18"
-                        class="**:stroke-white"
-                    />
-                    <span class="typo-p-sm text-white">
-                        ۳۱ مهر ۱۴۰۳
-                    </span>
-                </div>
-            </div>
-
-            <div class="flex gap-4 flex-col">
-                <span
-                    :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6'"
-                    class="text-white"
-                >
-                    برسی آیفون ۱۶ پرومکس
-                </span>
-                <p
-                    :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"
-                    class="typo-p-md text-white text-justify"
-                >
-                    نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-                    نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-                    کتابهای زیادی در شصت و سه درصد گذشته.
-                </p>
-            </div>
-
-            <span class="underline text-white typo-p-md">
-                بیشتر بخوانید...
-            </span>
-
-        </div>
-
-        <img
-            v-if="variant === 'lg'"
-            :src="image"
-            class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
-            alt=""
-        />
-
-        <div
-            v-if="variant === 'lg'"
-            class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
-        />
-    </div>
+    </NuxtLink>
 </template>
\ No newline at end of file