diff --git a/components/BlogCard.vue b/components/BlogCard.vue
new file mode 100644
index 0000000..c4c2304
--- /dev/null
+++ b/components/BlogCard.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="space-y-2">
+    <h3 class="text-2xl text-slate-800 font-semibold">Color formate in CSS</h3>
+    <p class="pr-5 text-slate-700">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea rem, maiores
+      fugit adipisci quis iusto tempora veniam vitae explicabo corporis
+      accusantium facilis iste, libero impedit dolorem perspiciatis dignissimos
+      cumque reprehenderit!
+    </p>
+    <p class="font-semibold">Read more</p>
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index a5ab0d9..2aeef9d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,12 +3,23 @@ let x = ref(10);
 </script>
 
 <template>
-  <div class="container px-3 mx-auto max-w-6xl flex">
-    <div>
-      <h1>This is main section</h1>
+  <div
+    class="container px-5 mx-auto max-w-6xl flex font-poppins space-x-5 antialiased"
+  >
+    <div class="flex-1">
+      <h1 class="text-xl pb-8 tracking-wide text-[#e60067]">
+        RECENTLY PUBLISHED
+      </h1>
+      <div class="space-y-8">
+        <blog-card v-for="n in 10" :key="n" />
+      </div>
     </div>
-    <div>
-      <h1>This is sub section</h1>
+    <div class="max-w-[300px]">
+      <div>
+        <h2 class="text-xl pb-8 tracking-wide text-[#e60067]">
+          TOP CATEGORIES
+        </h2>
+      </div>
     </div>
   </div>
 </template>