diff --git a/assets/tile_background.png b/assets/tile_background.png
new file mode 100644
index 0000000..929e7eb
Binary files /dev/null and b/assets/tile_background.png differ
diff --git a/components/ArchievCard.vue b/components/ArchievCard.vue
index 253c4bb..622bf67 100644
--- a/components/ArchievCard.vue
+++ b/components/ArchievCard.vue
@@ -8,7 +8,9 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="font-ibmmono px-10 mb-4 text-slate-800 group">
+  <div
+    class="font-ibmmono px-10 mb-4 text-slate-800 group shadow-sm bg-white rounded-lg py-4"
+  >
     <div class="flex items-center space-x-3 space-y-2">
       <icon name="ant-design:arrow-right-outlined" />
       <div>
diff --git a/components/FooterCom.vue b/components/FooterCom.vue
index 369ca42..066dbbf 100644
--- a/components/FooterCom.vue
+++ b/components/FooterCom.vue
@@ -4,7 +4,7 @@ const theme = ref("light");
 
 <template>
   <footer class="p-3 mt-10 bg-[#a2d9ff] font-ibmmono">
-    <div class="container px-4 mx-auto max-w-6xl flex justify-center">
+    <div class="container px-4 mx-auto max-w-6xl flex justify-between">
       <ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
         <li>Copyright &#169; 2022 - Present</li>
         <li>|</li>
@@ -15,18 +15,24 @@ const theme = ref("light");
             target="_blank"
             to="https://nurriyad.xyz"
           >
-            Al Asad Nur Riyad
+            Riyad
           </nuxt-link>
         </li>
-        <li>|</li>
+      </ul>
+      <ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
         <li>
-          Site source on
-          <nuxt-link
-            class="underline"
-            target="_blank"
-            to="https://github.com/nurRiyad/blogs"
-          >
-            GitHub.
+          <nuxt-link to="/">
+            <icon size="22px" name="uil:github" />
+          </nuxt-link>
+        </li>
+        <li>
+          <nuxt-link to="/">
+            <icon size="22px" name="uil:linkedin" />
+          </nuxt-link>
+        </li>
+        <li>
+          <nuxt-link to="/">
+            <icon size="22px" name="mdi:stackoverflow" />
           </nuxt-link>
         </li>
       </ul>
diff --git a/components/IndexHero.vue b/components/IndexHero.vue
new file mode 100644
index 0000000..89586dc
--- /dev/null
+++ b/components/IndexHero.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="text-center text-stone-800 font-ibmmono bg-[#a2d9ff]">
+    <h1 class="text-4xl pt-16 pb-2 font-bold">Al Asad Nur Riyad</h1>
+    <p class="mt-3 max-w-md mx-auto text-base">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eum
+      nam magni rem. Nihil reprehenderit dolorum quas, facere soluta commodi.
+    </p>
+  </div>
+</template>
diff --git a/components/ListHero.vue b/components/ListHero.vue
new file mode 100644
index 0000000..456c907
--- /dev/null
+++ b/components/ListHero.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const title = computed(() => {
+  const path = route.fullPath;
+  const splitPath = path.split("/");
+  const name = splitPath.at(1);
+
+  if (name === "blogs") return "All Blogs Post";
+  else if (name === "tags") return "All Tags";
+  else return "About Me";
+});
+</script>
+
+<template>
+  <div class="text-center text-stone-800 bg-[#a2d9ff] mb-5 font-ibmmono">
+    <h1 class="text-4xl p-16 font-bold">{{ title }}</h1>
+  </div>
+</template>
diff --git a/components/NavbarCom.vue b/components/NavbarCom.vue
index d60fe8a..49e9334 100644
--- a/components/NavbarCom.vue
+++ b/components/NavbarCom.vue
@@ -16,20 +16,20 @@ const activeNavbar = computed(() => {
       class="container px-4 mx-auto max-w-6xl flex justify-between text-slate-800"
     >
       <ul class="flex space-x-8 items-end justify-start">
-        <li class="align">
+        <li>
           <nuxt-link
-            class="font-semibold text-xl"
+            class="font-semibold text-base"
             :class="{ underline: activeNavbar === '' }"
             to="/"
           >
-            RafKhata
+            NurRiyad
           </nuxt-link>
         </li>
         <li>
           <nuxt-link
-            :class="{ underline: activeNavbar === 'latest' }"
-            to="/latest"
-            >Latest</nuxt-link
+            :class="{ underline: activeNavbar === 'blogs' }"
+            to="/blogs"
+            >Blogs</nuxt-link
           >
         </li>
         <li>
@@ -37,30 +37,16 @@ const activeNavbar = computed(() => {
             >Tags</nuxt-link
           >
         </li>
+      </ul>
+      <ul class="flex space-x-8 items-end">
         <li>
           <nuxt-link
-            :class="{ underline: activeNavbar === 'archive' }"
-            to="/archive"
-            >Archive</nuxt-link
+            :class="{ underline: activeNavbar === 'about' }"
+            to="/about"
+            >About</nuxt-link
           >
         </li>
-      </ul>
-      <ul class="flex space-x-3 items-end">
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="uil:github" />
-          </nuxt-link>
-        </li>
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="uil:linkedin" />
-          </nuxt-link>
-        </li>
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="mdi:stackoverflow" />
-          </nuxt-link>
-        </li>
+
         <li v-show="theme === 'light'" @click="theme = 'dark'">
           <nuxt-link to="/">
             <icon size="25px" name="ph:sun-dim" />
diff --git a/components/OneLineCard.vue b/components/OneLineCard.vue
deleted file mode 100644
index 8c26e80..0000000
--- a/components/OneLineCard.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  path: String,
-});
-</script>
-
-<template>
-  <div class="group font-semibold antialiased text-slate-800 font-ibmmono">
-    <nuxt-link class="flex items-baseline space-x-3" :to="path">
-      <div class="group-hover:scale-125 transition">
-        <icon name="ant-design:arrow-right-outlined" />
-      </div>
-      <h4 class="group-hover:underline">
-        {{ title }}
-      </h4>
-    </nuxt-link>
-  </div>
-</template>
diff --git a/components/TopicCard.vue b/components/TopicCard.vue
index 6efe32f..56b85ae 100644
--- a/components/TopicCard.vue
+++ b/components/TopicCard.vue
@@ -6,7 +6,7 @@ const props = defineProps({
 const router = useRouter();
 
 const onClick = () => {
-  router.push(`/tags/${props.title}`);
+  router.push(`/tags/${props.title?.toLocaleLowerCase()}`);
 };
 </script>
 
diff --git a/content/git/hellogit.md b/content/git/hellogit.md
new file mode 100644
index 0000000..6804a77
--- /dev/null
+++ b/content/git/hellogit.md
@@ -0,0 +1,47 @@
+---
+title: "Thi is hello git"
+description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley"
+draft: false
+head: true
+author: riyad
+date: 29 Jan 2022
+type: Git
+---
+
+::info-component
+#time
+22 January 2022
+
+#author
+by Md. [Al Asad Nur Riyad](https://www.nurriyad.xyz)
+::
+
+# How to install nuxt 3
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
+
+## Step 01
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+<img src="/img/sdf.jpg" class="mx-auto" alt="drawing" width="200"/>
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+## This is a sub header
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+[google](google.com)
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
diff --git a/layouts/default.vue b/layouts/default.vue
index 4d538c2..e5a1959 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,8 +1,7 @@
 <template>
   <div>
-    <div class="h-10 bg-[#a2d9ff]"></div>
     <navbar-com />
-    <div class="h-10 bg-[#a2d9ff]"></div>
+    <index-hero />
     <img src="@/assets/img/wave.png" class="w-full" alt="this is wave image" />
     <div>
       <slot />
diff --git a/layouts/list.vue b/layouts/list.vue
index 32fc3ea..a19edbc 100644
--- a/layouts/list.vue
+++ b/layouts/list.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="bg-slate-200">
     <navbar-com />
+    <list-hero />
     <div>
       <slot />
     </div>
diff --git a/pages/archive.vue b/pages/about.vue
similarity index 88%
rename from pages/archive.vue
rename to pages/about.vue
index a7dcd4e..25af9a5 100644
--- a/pages/archive.vue
+++ b/pages/about.vue
@@ -26,11 +26,8 @@ const getAllPost = computed(() => {
 
 <template>
   <div
-    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
+    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
   >
-    <h1 class="font-semibold text-3xl mt-10 mb-5 py-3 mx-5 text-slate-800">
-      ALL BLOG POST
-    </h1>
     <div>
       <template v-for="pp in getAllPost" :key="pp">
         <archiev-card
diff --git a/pages/latest.vue b/pages/blogs.vue
similarity index 62%
rename from pages/latest.vue
rename to pages/blogs.vue
index 5892f80..25af9a5 100644
--- a/pages/latest.vue
+++ b/pages/blogs.vue
@@ -5,18 +5,16 @@ definePageMeta({
 
 const { data } = await useAsyncData("home", () => queryContent("/").find());
 
-const getRecentContent = computed(() => {
+const getAllPost = computed(() => {
   const allpost = data.value || [];
   const alltypes = allpost.map((post) => {
     return {
       title: post.title,
-      description: post.description,
       path: post._path,
       date: post.date as string,
-      author: post.author,
+      type: post.type,
     };
   });
-
   alltypes.sort(function (a, b) {
     const c = new Date(a.date);
     const d = new Date(b.date);
@@ -28,19 +26,15 @@ const getRecentContent = computed(() => {
 
 <template>
   <div
-    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
+    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
   >
-    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
-      LATEST CONTENT
-    </h1>
-    <div class="flex justify-between flex-wrap">
-      <template v-for="pp in getRecentContent" :key="pp">
-        <latest-blog-card
+    <div>
+      <template v-for="pp in getAllPost" :key="pp">
+        <archiev-card
           :title="pp.title"
-          :description="pp.description"
           :date="pp.date"
-          :author="pp.author"
           :path="pp.path"
+          :type="pp.type"
         />
       </template>
     </div>
diff --git a/pages/index.vue b/pages/index.vue
index 2aa69d8..26b1843 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { data } = await useAsyncData("home", () => queryContent("/").find());
 
+// get all the unique types from content
 const getTopCategory = computed(() => {
   const allpost = data.value || [];
   const alltypes = allpost.map((post) => post.type);
@@ -8,9 +9,10 @@ const getTopCategory = computed(() => {
   return uniqType;
 });
 
+// get all post in recent time order
 const getRecentContent = computed(() => {
   const allpost = data.value || [];
-  const alltypes = allpost.map((post) => {
+  const customizePost = allpost.map((post) => {
     return {
       title: post.title,
       description: post.description,
@@ -19,23 +21,12 @@ const getRecentContent = computed(() => {
     };
   });
 
-  alltypes.sort(function (a, b) {
+  customizePost.sort(function (a, b) {
     const c = new Date(a.date);
     const d = new Date(b.date);
     return c < d ? 1 : -1;
   });
-  return alltypes;
-});
-
-const getPopularContent = computed(() => {
-  const allpost = data.value || [];
-  const alltypes = allpost.map((post) => {
-    return {
-      title: post.title,
-      path: post._path,
-    };
-  });
-  return alltypes;
+  return customizePost;
 });
 </script>
 
@@ -55,20 +46,12 @@ const getPopularContent = computed(() => {
         </template>
       </div>
     </div>
-    <div class="max-w-[400px]">
+    <div class="basis-1/4">
       <div>
         <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
-
         <template v-for="cat in getTopCategory" :key="cat">
           <topic-card :title="cat" />
         </template>
-
-        <h2 class="text-xl py-8 text-[#e60067]">POPULAR CONTENT</h2>
-        <div class="space-y-5">
-          <template v-for="pp in getPopularContent" :key="pp">
-            <one-line-card :title="pp.title" :path="pp.path" />
-          </template>
-        </div>
       </div>
     </div>
   </div>
diff --git a/pages/tags/index.vue b/pages/tags/index.vue
index 96360b0..7b4a496 100644
--- a/pages/tags/index.vue
+++ b/pages/tags/index.vue
@@ -28,9 +28,6 @@ const getTopCategory = computed(() => {
   <div
     class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
   >
-    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
-      ALL TAGS
-    </h1>
     <div class="flex justify-start flex-wrap">
       <template v-for="ct in getTopCategory" :key="ct">
         <category-card :type="ct.type" :count="ct.count" :path="ct.path" />