diff --git a/components/content/CustomTag.vue b/components/content/CustomTag.vue
deleted file mode 100644
index 8f984e7..0000000
--- a/components/content/CustomTag.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="flex w-full justify-center text-xs md:text-base">
-    <div class="md:flex text-black content-center gap-7">
-      <div class="flex items-center">
-        <LogoDate />
-        <slot name="date"></slot>
-      </div>
-      <div class="flex items-center gap-2 flex-wrap underline">
-        <LogoTag />
-        <slot name="tag1"></slot>
-        <slot name="tag2"></slot>
-        <slot name="tag3"></slot>
-        <slot name="tag4"></slot>
-        <slot name="tag5"></slot>
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/components/content/CustomTitle.vue b/components/content/CustomTitle.vue
deleted file mode 100644
index 9ec75bf..0000000
--- a/components/content/CustomTitle.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="text-center mt-8">
-    <slot />
-  </div>
-</template>
diff --git a/content/blogs/1. hello-world.md b/content/blogs/1. hello-world.md
index d474026..45319d5 100644
--- a/content/blogs/1. hello-world.md	
+++ b/content/blogs/1. hello-world.md	
@@ -1,34 +1,15 @@
 ---
-title: 'How to create a blog site with nuxt3 and nuxt-content-v2 Par 1'
-description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eum, odit earum porro beatae explicabo quisquam asperiores aliquam similique ipsam non deleniti qui sint ad maxime culpa accusantium. Deleniti.'
-time: 10Jan2022
-tags: ['sdf', 'javascript', 'nuxt']
+title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
+date: 1st Jan 2023
+description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat,
+image: https://res.cloudinary.com/dmecmyphj/image/upload/v1673372476/nuxt-blog/intro-to-ts-dmecmyphj_rox0jz.jpg
+alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
+ogImage: https://res.cloudinary.com/dmecmyphj/image/upload/v1673372476/nuxt-blog/intro-to-ts-dmecmyphj_rox0jz.jpg
+provider: cloudinary
+tags: ['nuxt', 'nuxt-content', 'vue', 'typescirpt']
+published: true
 ---
 
-::CustomTitle
-
-# How to create a blog size with nuxt3 and nuxt-content-v2
-
-::
-
-<img class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover" src="/blogs/hello-man/cover.jpg" alt="resdlkf"/>
-
-::CustomTag
-
-#date
-31 Dec 2023
-
-#tag1
-Javascript
-
-#tag2
-Typescipt
-
-#tag3
-Typescipt
-
-::
-
 ## Details
 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
diff --git a/pages/blogs/[blog].vue b/pages/blogs/[blog].vue
index 8786a2f..809f727 100644
--- a/pages/blogs/[blog].vue
+++ b/pages/blogs/[blog].vue
@@ -1,9 +1,59 @@
+<script setup lang="ts">
+import type { BlogPost } from '@/types/blog'
+const { path } = useRoute()
+const articles = await queryContent(path).findOne()
+
+const data = computed<BlogPost>(() => {
+  return {
+    title: articles.title || 'no-title available',
+    description: articles.description || 'no-descriptoin available',
+    image:
+      articles.image ||
+      'https://res.cloudinary.com/dmecmyphj/image/upload/v1673378250/nuxt-blog/no-image_cyyits.png',
+    alt: articles.alt || 'no alter data available',
+    ogImage:
+      articles.ogImage ||
+      'https://res.cloudinary.com/dmecmyphj/image/upload/v1673378250/nuxt-blog/no-image_cyyits.png',
+    provider: articles.provider,
+    date: articles.date || 'not-date-available',
+    tags: articles.tags || [],
+    published: articles.published || false,
+  }
+})
+</script>
+
 <template>
   <main class="px-6 container max-w-5xl mx-auto">
+    <header>
+      <h1 class="text-5xl m-7 font-bold text-center">{{ data.title || '' }}</h1>
+      <NuxtImg
+        :src="data.image || ''"
+        :alt="data.alt || ''"
+        class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover"
+      />
+      <div class="flex w-full justify-center text-xs md:text-base my-8">
+        <div class="md:flex text-black content-center gap-7">
+          <div class="flex items-center font-semibold">
+            <LogoDate />
+            <p>{{ data.date || '' }}</p>
+          </div>
+          <div class="flex items-center gap-2 flex-wrap my-5">
+            <LogoTag />
+            <template v-for="tag in data.tags">
+              <p class="bg-gray-200 rounded-md px-3 py-1 font-semibold">{{ tag }}</p>
+            </template>
+          </div>
+        </div>
+      </div>
+    </header>
     <div
       class="prose md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg"
     >
-      <ContentDoc />
+      <ContentDoc>
+        <template #not-found>
+          <h1>Document not found</h1>
+        </template>
+      </ContentDoc>
     </div>
   </main>
 </template>
diff --git a/pages/blogs/index.vue b/pages/blogs/index.vue
index f5d1d2e..38247a5 100644
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -15,7 +15,7 @@ const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
     <div class="space-y-5 my-5">
-      <template v-for="post in data" :key="n">
+      <template v-for="post in data" :key="post.title">
         <ArchiveCard
           :title="post.title"
           :description="post.description"
diff --git a/pages/categories/[category].vue b/pages/categories/[category].vue
index 3c75988..f58c02d 100644
--- a/pages/categories/[category].vue
+++ b/pages/categories/[category].vue
@@ -32,7 +32,7 @@ const { data } = await useAsyncData('home', () =>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryTopic />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="post in data" :key="n">
+      <template v-for="post in data" :key="post.title">
         <BlogCard
           :title="post.title"
           :description="post.description"
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index c561677..bb31f28 100644
--- a/pages/categories/index.vue
+++ b/pages/categories/index.vue
@@ -30,7 +30,7 @@ const topics = [
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryHero />
     <div class="flex flex-wrap px-6 mt-12 gap-3">
-      <template v-for="topic in topics" :key="n">
+      <template v-for="topic in topics" :key="topic">
         <CategoryCard :title="makeFirstCharUpper(topic)" />
       </template>
     </div>
diff --git a/pages/index.vue b/pages/index.vue
index 25b8360..f89e04c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -19,7 +19,7 @@ const { data } = await useAsyncData('home', () =>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <MainHero />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="post in data" :key="n">
+      <template v-for="post in data" :key="post.title">
         <BlogCard
           :title="post.title"
           :description="post.description"
diff --git a/types/blog.ts b/types/blog.ts
new file mode 100644
index 0000000..4092612
--- /dev/null
+++ b/types/blog.ts
@@ -0,0 +1,11 @@
+export interface BlogPost {
+  title: string
+  date: string
+  description: string
+  image: string
+  alt: string
+  ogImage: string
+  provider: string
+  tags: string[]
+  published: boolean
+}