diff --git a/components/LatestBlogCard.vue b/components/LatestBlogCard.vue
index e983b14..f1995b8 100644
--- a/components/LatestBlogCard.vue
+++ b/components/LatestBlogCard.vue
@@ -1,25 +1,38 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  description: String,
+  date: String,
+  author: String,
+  path: String,
+});
+</script>
+
 <template>
   <div class="bg-white mx-5 my-2 p-5 max-w-[530px] rounded-md shadow-lg group">
-    <nuxt-link to="/" class="group-hover:text-sky-500">
-      <h4 class="text-xl font-medium py-1">This is latest blog card</h4>
+    <nuxt-link :to="path" class="group-hover:text-sky-500">
+      <h4 class="text-xl font-medium py-1">{{ title }}</h4>
     </nuxt-link>
     <div class="text-xs text-slate-500 pb-3 flex space-x-4">
       <div class="flex items-center space-x-1">
         <icon name="material-symbols:av-timer" />
-        <span class=""> Create at 10 Dec 2022 </span>
+        <span class=""> Create {{ date }}</span>
       </div>
       <div class="flex items-center space-x-1">
         <icon name="mdi:face-man" />
-        <nuxt-link class="hover:underline" to="/">by riyad</nuxt-link>
+        <nuxt-link
+          class="hover:underline"
+          target="_blank"
+          to="https://www.nurriyad.xyz/"
+          >by {{ author }}</nuxt-link
+        >
       </div>
     </div>
 
     <p class="pb-2 text-slate-600">
-      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur
-      reprehenderit sit possimus quibusdam ad facilis, consectetur beatae
-      inventore sunt non.
+      {{ description }}
     </p>
-    <nuxt-link class="group-hover:text-sky-500" to="/">
+    <nuxt-link :to="path" class="group-hover:text-sky-500">
       <p class="font-medium">
         Read More
         <span class="hidden group-hover:inline"> ->> </span>
diff --git a/content/js/hellojs.md b/content/js/hellojs.md
index 0263807..15d7478 100644
--- a/content/js/hellojs.md
+++ b/content/js/hellojs.md
@@ -1,6 +1,6 @@
 ---
 title: "Title of the page"
-description: "meta description of the page"
+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
diff --git a/pages/latest.vue b/pages/latest.vue
index 118bc58..0f81273 100644
--- a/pages/latest.vue
+++ b/pages/latest.vue
@@ -2,7 +2,28 @@
 definePageMeta({
   layout: "list",
 });
+
 const { data } = await useAsyncData("home", () => queryContent("/").find());
+
+const getRecentContent = 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,
+    };
+  });
+
+  alltypes.sort(function (a, b) {
+    const c = new Date(a.date);
+    const d = new Date(b.date);
+    return c < d ? 1 : -1;
+  });
+  return alltypes;
+});
 </script>
 
 <template>
@@ -11,7 +32,15 @@ const { data } = await useAsyncData("home", () => queryContent("/").find());
       LATEST CONTENT
     </h1>
     <div class="flex justify-between flex-wrap">
-      <latest-blog-card v-for="n in 20" :key="n" />
+      <template v-for="pp in getRecentContent" :key="pp">
+        <latest-blog-card
+          :title="pp.title"
+          :description="pp.description"
+          :date="pp.date"
+          :author="pp.author"
+          :path="pp.path"
+        />
+      </template>
     </div>
   </div>
 </template>