diff --git a/assets/img/sdf.jpg b/assets/img/sdf.jpg
new file mode 100644
index 0000000..f3680ed
Binary files /dev/null and b/assets/img/sdf.jpg differ
diff --git a/pages/about.vue b/pages/about.vue
index c392579..b041f2a 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -2,41 +2,40 @@
 definePageMeta({
   layout: "list",
 });
-
-const { data } = await useAsyncData("about", () => queryContent("/").find());
-
-const getAllPost = computed(() => {
-  const allpost = data.value || [];
-  const alltypes = allpost.map((post) => {
-    return {
-      title: post.title,
-      path: post._path,
-      date: post.date as string,
-      type: post.type,
-    };
-  });
-  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>
   <div
     class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
   >
-    <div>
-      <template v-for="pp in getAllPost" :key="pp">
-        <archiev-card
-          :title="pp.title"
-          :date="pp.date"
-          :path="pp.path"
-          :type="pp.type"
+    <div class="flex gap-14">
+      <div class="m-2 rounded-lg object-cover">
+        <img
+          class="ring ring-blue-500 rounded-lg h-48"
+          src="@/assets/img/sdf.jpg"
+          alt="profile pic"
         />
-      </template>
+      </div>
+      <div class="basis-3/4 bg-white p-4 rounded-lg">
+        <div class="pb-3">
+          <h1 class="font-semibold text-xl">Md. AL Asad Nur Riyad</h1>
+          <h3 class="text-sm">Software Engineer @AppsCode</h3>
+        </div>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sint,
+          perspiciatis, tenetur commodi quasi doloremque magni minus hic itaque
+          in saepe a assumenda totam quidem suscipit impedit, aliquam earum
+          molestias.
+        </p>
+
+        <p>
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus
+          quibusdam tempore minus dignissimos nam sed ipsa eos odio numquam amet
+          hic similique quae rem repellat fugit perspiciatis excepturi quidem,
+          sequi obcaecati maiores laboriosam optio nostrum, modi eligendi?
+          Accusamus, quidem nobis!
+        </p>
+      </div>
     </div>
   </div>
 </template>