diff --git a/components/ArchievCard.vue b/components/ArchievCard.vue
new file mode 100644
index 0000000..9e98c9a
--- /dev/null
+++ b/components/ArchievCard.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="px-5 font-mono mb-5">
+    <h4 class="font-semibold text-slate-800 text-xl antialiased p-2">
+      Typescript
+    </h4>
+    <div class="px-10">
+      <archive-post-card v-for="n in 5" :key="n" />
+    </div>
+  </div>
+</template>
diff --git a/components/ArchivePostCard.vue b/components/ArchivePostCard.vue
new file mode 100644
index 0000000..e6b380f
--- /dev/null
+++ b/components/ArchivePostCard.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="font-mono">
+    <nuxt-link class="flex items-baseline space-x-3 space-y-2" to="/">
+      <icon name="arcticons:blogger" />
+      <h4 class="text-blue-600 hover:underline">
+        <span class="mr-4 text-slate-600">22-10-2020</span> This is a archive
+        post link
+      </h4>
+    </nuxt-link>
+  </div>
+</template>
diff --git a/components/CategoryCard.vue b/components/CategoryCard.vue
index aefcdf3..edad0c9 100644
--- a/components/CategoryCard.vue
+++ b/components/CategoryCard.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="bg-white mx-5 my-2 p-6 min-w-[530px] rounded-md shadow-lg">
-    <nuxt-link to="/js" class="hover:underline">
+    <nuxt-link to="/category/js" class="hover:underline">
       <div class="flex items-center">
-        <h4 class="text-5xl text-slate-800 font-medium py-1">BajaScript</h4>
+        <h4 class="text-2xl text-slate-800 font-medium py-1">VUe</h4>
       </div>
     </nuxt-link>
 
diff --git a/components/OneLineCard.vue b/components/OneLineCard.vue
index 422458d..0ba0b44 100644
--- a/components/OneLineCard.vue
+++ b/components/OneLineCard.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="font-semibold antialiased font-poppins hover:underline">
-    <nuxt-link to="/">
-      <h4>
-        <span class="mr-2">
-          <icon calss="bg-red" name="ant-design:arrow-right-outlined" />
-        </span>
-        How to use vite in your nuxt 3 project a a a riyad
-      </h4>
+  <div
+    class="font-semibold antialiased text-slate-800 font-poppins hover:underline"
+  >
+    <nuxt-link class="flex items-baseline space-x-3" to="/">
+      <div class="hover:scale-125 transition">
+        <icon name="ant-design:arrow-right-outlined" />
+      </div>
+      <h4>How to use vite in your nuxt 3 project a a a riyad</h4>
     </nuxt-link>
   </div>
 </template>
diff --git a/content/docker/sldkfsldf.md b/content/docker/sldkfsldf.md
new file mode 100644
index 0000000..16d2161
--- /dev/null
+++ b/content/docker/sldkfsldf.md
@@ -0,0 +1 @@
+sdlfjksldfkj
diff --git a/pages/archive.vue b/pages/archive.vue
index 92440de..d5dd5ed 100644
--- a/pages/archive.vue
+++ b/pages/archive.vue
@@ -1,5 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "list",
+});
+const { data } = await useAsyncData("home", () => queryContent("/").find());
+</script>
+
 <template>
-  <div>
-    <p>This is archive page</p>
+  <div class="container mx-auto max-w-6xl font-mono antialiased">
+    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
+      ALL CONTENTS
+    </h1>
+    <div>
+      <archiev-card v-for="n in 5" :key="n" />
+    </div>
   </div>
 </template>
diff --git a/pages/category/[topic].vue b/pages/category/[topic].vue
index c9a2c2f..c1aaaca 100644
--- a/pages/category/[topic].vue
+++ b/pages/category/[topic].vue
@@ -1,5 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "list",
+});
+const { data } = await useAsyncData("home", () => queryContent("/").find());
+</script>
+
 <template>
-  <div>
-    <h1>This is the {{ $route.params.topic }}</h1>
+  <div class="container mx-auto max-w-6xl font-poppins antialiased">
+    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
+      ALL JAVASCRIPT POST
+    </h1>
+    <div class="flex justify-between flex-wrap">
+      <latest-blog-card v-for="n in 20" :key="n" />
+    </div>
   </div>
 </template>