diff --git a/app.vue b/app.vue
index 3ea9076..03c259e 100644
--- a/app.vue
+++ b/app.vue
@@ -78,4 +78,14 @@ useHead({
   opacity: 0;
   filter: blur(1rem);
 }
+
+.layout-enter-active,
+.layout-leave-active {
+  transition: all 0.4s;
+}
+.layout-enter-from,
+.layout-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
 </style>
diff --git a/components/about/footer.vue b/components/about/footer.vue
new file mode 100644
index 0000000..847412a
--- /dev/null
+++ b/components/about/footer.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="py-5 border-t mt-5 text-zinc-700">
+    <div class="px-6 container max-w-5xl mx-auto">
+      <div class="grid grid-cols-1 md:grid-cols-2">
+        <div class="flex flex-col my-5 md:my-0 md:justify-self-start">
+          <p class="text-black text-base font-semibold">
+            Quick Link
+          </p>
+          <NuxtLink to="/" class="hover:underline">
+            Home
+          </NuxtLink>
+          <NuxtLink to="/categories" class="hover:underline">
+            Categories
+          </NuxtLink>
+          <NuxtLink to="/blogs" class="hover:underline">
+            Archive
+          </NuxtLink>
+          <NuxtLink to="https://www.nurriyad.xyz/" target="_blank" class="hover:underline">
+            About Me
+          </NuxtLink>
+        </div>
+        <div>
+          <p class="text-black text-base font-semibold">
+            Connect
+          </p>
+          <p>
+            I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you
+            have an interesting idea, either open source or paid let's connect.
+          </p>
+
+          <a
+            href="mailto: alasadnurriyad4@gmail.com"
+            class="block text-center w-full bg-sky-700 p-2 rounded-lg text-white mt-3 text-sm"
+          >
+            Sent Mail
+          </a>
+        </div>
+      </div>
+
+      <div class="border-t mt-5 text-center p-2">
+        © 2020-2022 No Right is reserved. Who cares 🤷‍♂️? It's
+        <a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline">open source</a>
+        anyway.
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/components/main/header.vue b/components/main/header.vue
index 62eb115..3965b83 100644
--- a/components/main/header.vue
+++ b/components/main/header.vue
@@ -5,16 +5,16 @@ const path = computed(() => route.fullPath.replace('/', ''))
 </script>
 
 <template>
-  <div class="py-5 border-b text-zinc-700">
+  <div class="py-5 border-b font-semibold">
     <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline ">
       <ul class="flex items-baseline space-x-5">
-        <li class="">
-          <NuxtLink to="/" class="text-2xl text-black font-bold " :class="{ underline: path === '' }">
-            Home
+        <li class="text-lg sm:text-2xl font-bold">
+          <NuxtLink to="/" :class="{ underline: path === '' }">
+            Riyad's Blog
           </NuxtLink>
         </li>
       </ul>
-      <ul class="flex items-center space-x-3 font-bold ">
+      <ul class="flex items-center space-x-3 sm:space-x-6 text-sm sm:text-lg">
         <li>
           <NuxtLink to="/blogs" :class="{ underline: path === 'blogs' }">
             Blogs
@@ -25,9 +25,9 @@ const path = computed(() => route.fullPath.replace('/', ''))
             Categories
           </NuxtLink>
         </li>
-        <li title="About Me" :class="{ underline: path === 'myself' }">
-          <NuxtLink to="/myself" aria-label="About me">
-            About Me
+        <li title="About Me" :class="{ underline: path === 'about' }">
+          <NuxtLink to="/about" aria-label="About me">
+            About
           </NuxtLink>
         </li>
       </ul>
diff --git a/layouts/bio.vue b/layouts/bio.vue
new file mode 100644
index 0000000..056748d
--- /dev/null
+++ b/layouts/bio.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="gd-container font-spacegrotesk">
+    <header class="fixed w-full bg-white z-10">
+      <MainHeader />
+    </header>
+    <main>
+      <div class="p-9" />
+      <slot />
+    </main>
+    <footer>
+      <AboutFooter />
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.gd-container {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  min-height: 100vh;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d1f1bbb..2160b88 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,6 +9,7 @@ export default defineNuxtConfig({
       meta: [{ name: 'description', content: 'Riyad\'s awesome blog' }],
     },
     pageTransition: { name: 'page', mode: 'out-in' },
+    layoutTransition: { name: 'layout', mode: 'out-in' },
   },
 
   typescript: {
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 0000000..6bb29be
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'bio',
+})
+</script>
+
+<template>
+  <div class="py-5">
+    <div class="grid grid-cols-8 px-6 py-9 gap-5 container max-w-5xl  mx-auto">
+      <div class="col-span-5  max-w-md">
+        <h1 class="text-4xl  pb-2 font-bold ">
+          Al Asad Nur Riyad
+        </h1>
+        <div class="my-3 space-x-3 pb-10">
+          <NuxtLink
+            to="https://github.com/nurRiyad"
+            target="_blank"
+            class="p-2 bg-gray-300 rounded-md"
+            aria-label="Github"
+          >
+            <Icon name="fa:github" size="1em" />
+          </NuxtLink>
+          <NuxtLink
+            to="https://www.linkedin.com/in/nur-riyad/"
+            target="_blank"
+            class="p-2 bg-gray-300 rounded-md"
+            aria-label="LinkedIn"
+          >
+            <Icon name="fa:linkedin-square" size="1em" />
+          </NuxtLink>
+          <NuxtLink
+            to="https://twitter.com/qdnvubp"
+            target="_blank"
+            class="p-2 bg-gray-300 rounded-md"
+            aria-label="Twitter"
+          >
+            <Icon name="fa:twitter-square" size="1em" />
+          </NuxtLink>
+          <NuxtLink
+            to="https://stackoverflow.com/users/16781395/nur-riyad"
+            target="_blank"
+            class="p-2 bg-gray-300 rounded-md"
+            aria-label="StackOverflow"
+          >
+            <Icon name="fa:stack-overflow" size="1em" />
+          </NuxtLink>
+        </div>
+        <h3 class="text-3xl font-semibold pb-12">
+          Software Engineer, Lorem, ipsum. Lorem, ipsum dolor.
+        </h3>
+
+        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam ipsam eos aliquam alias eligendi praesentium molestias veniam delectus dolorem, similique sint voluptatum amet adipisci vero ad consequatur expedita nulla commodi dolor veritatis atque. Optio perferendis harum asperiores quas consequuntur, autem repellat ea enim quibusdam sed praesentium, pariatur quos cumque blanditiis.</p>
+      </div>
+      <div class="col-span-3">
+        <NuxtImg
+          src="/riyad.jpg"
+          width="450"
+          height="500"
+          quality="50"
+          class="rounded-md"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pages/myself.vue b/pages/myself.vue
deleted file mode 100644
index 617e9f0..0000000
--- a/pages/myself.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const x = ref(10)
-</script>
-
-<template>
-  <div>
-    <h1>{{ x }}</h1>
-  </div>
-</template>
diff --git a/public/riyad.jpg b/public/riyad.jpg
new file mode 100644
index 0000000..f3680ed
Binary files /dev/null and b/public/riyad.jpg differ