diff --git a/components/BlogCard.vue b/components/BlogCard.vue
index c4c2304..de129be 100644
--- a/components/BlogCard.vue
+++ b/components/BlogCard.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="space-y-2">
-    <h3 class="text-2xl text-slate-800 font-semibold">Color formate in CSS</h3>
+    <h3 class="text-xl text-slate-800 font-semibold">This is a blog title</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!
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
+      esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
     </p>
     <p class="font-semibold">Read more</p>
   </div>
diff --git a/components/OneLineCard.vue b/components/OneLineCard.vue
new file mode 100644
index 0000000..bd0aa5e
--- /dev/null
+++ b/components/OneLineCard.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="antialiased font-poppins hover:underline">
+    <nuxt-link to="/">
+      <h4>
+        <span class="mr-2">
+          <icon calss="bg-red" name="ant-design:arrow-right-outlined" />
+        </span>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, a?
+      </h4>
+    </nuxt-link>
+  </div>
+</template>
diff --git a/components/TopicBtn.vue b/components/TopicBtn.vue
new file mode 100644
index 0000000..f243e6f
--- /dev/null
+++ b/components/TopicBtn.vue
@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="bg-[#a2d9ff] px-2 py-1 m-2 transition hover:scale-105 rounded-md"
+  >
+    Javascript
+  </button>
+</template>
diff --git a/components/TopicCard.vue b/components/TopicCard.vue
new file mode 100644
index 0000000..10f780d
--- /dev/null
+++ b/components/TopicCard.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <topic-btn v-for="n in 7" :key="n" />
+  </div>
+</template>
diff --git a/content/js/hellojs.md b/content/js/hellojs.md
index 070ee0d..c3646cb 100644
--- a/content/js/hellojs.md
+++ b/content/js/hellojs.md
@@ -1 +1,6 @@
+---
+title: sdlfkjs
+des: sdfsdflkj
+---
+
 # hello js
diff --git a/pages/index.vue b/pages/index.vue
index 2aeef9d..990375b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,21 +4,28 @@ let x = ref(10);
 
 <template>
   <div
-    class="container px-5 mx-auto max-w-6xl flex font-poppins space-x-5 antialiased"
+    class="container px-5 mx-auto max-w-6xl flex font-poppins gap-7 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" />
+        <blog-card v-for="n in 7" :key="n" />
       </div>
     </div>
-    <div class="max-w-[300px]">
+    <div class="max-w-[400px]">
       <div>
         <h2 class="text-xl pb-8 tracking-wide text-[#e60067]">
           TOP CATEGORIES
         </h2>
+        <topic-card />
+        <h2 class="text-xl py-8 tracking-wide text-[#e60067]">
+          POPULAR CONTENT
+        </h2>
+        <div class="space-y-5">
+          <one-line-card v-for="n in 5" :key="n" />
+        </div>
       </div>
     </div>
   </div>