diff --git a/frontend/components/global/BlogPost.vue b/frontend/components/global/BlogPost.vue
index 76f425f..f50bd67 100644
--- a/frontend/components/global/BlogPost.vue
+++ b/frontend/components/global/BlogPost.vue
@@ -22,15 +22,15 @@ const {} = toRefs(props);
 </script>
 
 <template>
-    <NuxtLink :to="`/article/${id}`">
+    <NuxtLink :to="`/article/${id}`" class="block">
         <div
-            :class="variant === 'lg' ? 'h-[600px] rounded-150 overflow-hidden' : 'h-fit'"
+            :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
             class="group w-full relative"
         >
 
             <Tag
                 v-if="variant === 'lg'"
-                class="bg-success-500 absolute left-10 top-10 z-20"
+                class="bg-success-500 absolute left-6 lg:left-10 top-6 lg:top-10 z-20"
             >
                 اسپیکر
             </Tag>
@@ -53,11 +53,11 @@ const {} = toRefs(props);
             </div>
 
             <div
-                :class="variant === 'lg' ? 'absolute px-10' : 'invert mt-8'"
-                class="bottom-10 flex flex-col gap-6 z-20"
+                :class="variant === 'lg' ? 'absolute px-6 lg:px-10' : 'invert mt-8'"
+                class="bottom-6 lg:bottom-10 flex flex-col gap-4 lg:gap-6 z-20"
             >
 
-                <div class="flex items-center gap-6">
+                <div class="flex items-center gap-4 lg:gap-6">
                     <div class="flex items-center gap-2">
                         <Icon
                             name="ci:comment"
@@ -65,8 +65,8 @@ const {} = toRefs(props);
                             class="**:stroke-white"
                         />
                         <span class="typo-p-sm text-white">
-                        ۰ نظر
-                    </span>
+                            ۰ نظر
+                        </span>
                     </div>
                     <div class="flex items-center gap-2">
                         <Icon
@@ -81,17 +81,17 @@ const {} = toRefs(props);
                 </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"
-                    />
+                    <span
+                        :class="variant === 'lg' ? 'line-clamp-2' : ''"
+                        class="text-lg font-medium lg:typo-h-6 text-white"
+                    >
+                        {{ title }}
+                    </span>
+<!--                    <p-->
+<!--                        :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"-->
+<!--                        class="text-white text-justify"-->
+<!--                        v-html="description"-->
+<!--                    />-->
                 </div>
 
                 <NuxtLink :to="`/article/${id}`" class="underline text-white typo-p-md">