diff --git a/app.vue b/app.vue
index 63479f0..61334c5 100644
--- a/app.vue
+++ b/app.vue
@@ -6,3 +6,14 @@
     </NuxtLayout>
   </div>
 </template>
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>
diff --git a/content/blogs/1. hello-world.md b/content/blogs/1. hello-world.md
index c76909d..d474026 100644
--- a/content/blogs/1. hello-world.md	
+++ b/content/blogs/1. hello-world.md	
@@ -33,6 +33,28 @@ Typescipt
 
 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.
 
+```ts
+
+<script lang="ts" setup>
+useHead({
+  title: 'Home',
+  meta: [
+    {
+      name: 'description',
+      content: 'Home',
+    },
+  ],
+  titleTemplate: "Riyad's Blog - %s",
+})
+
+// Get Last 6 Publish Post from the content/blog directory
+const { data } = await useAsyncData('home', () =>
+  queryContent('/blogs').limit(6).sort({ _id: -1 }).find()
+)
+</script>
+
+```
+
 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.
 
 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/nuxt.config.ts b/nuxt.config.ts
index b203eb2..159d8a7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,6 +8,7 @@ export default defineNuxtConfig({
       titleTemplate: "%s - Riyad's Blog",
       meta: [{ name: 'description', content: "Riyad's awesome blog" }],
     },
+    pageTransition: { name: 'page', mode: 'out-in' },
   },
 
   typescript: {
@@ -15,4 +16,10 @@ export default defineNuxtConfig({
   },
 
   modules: ['@nuxt/content', '@nuxtjs/tailwindcss', 'nuxt-icon'],
+
+  content: {
+    highlight: {
+      theme: 'dracula',
+    },
+  },
 })