diff --git a/components/blog/Header.vue b/components/blog/Header.vue
index b909bd2..aaf25da 100644
--- a/components/blog/Header.vue
+++ b/components/blog/Header.vue
@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
     <NuxtImg
       :src="image || ''"
       :alt="alt || ''"
-      class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-3/6 md:w-4/5 content-center object-cover"
+      class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover"
     />
     <p class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600">
       {{ description }}
diff --git a/pages/blogs/[blog].vue b/pages/blogs/[blog].vue
index 3146770..bcd0a8e 100644
--- a/pages/blogs/[blog].vue
+++ b/pages/blogs/[blog].vue
@@ -74,7 +74,7 @@ useHead({
 </script>
 
 <template>
-  <div class="px-6 container max-w-5xl mx-auto grid grid-cols-12 gap-x-12 ">
+  <div class="px-6 container max-w-5xl mx-auto sm:grid grid-cols-12 gap-x-12 ">
     <div class="col-span-12 lg:col-span-9">
       <BlogHeader
         :title="data.title"