diff --git a/app.vue b/app.vue
index 4809281..8e7f33e 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <NuxtLayout>
-      <NuxtPage/>
+      <NuxtPage />
     </NuxtLayout>
   </div>
 </template>
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/assets/css/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/components/logo/name.vue b/components/logo/name.vue
new file mode 100644
index 0000000..ff422d2
--- /dev/null
+++ b/components/logo/name.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="66"
+    height="31"
+    viewBox="0 0 66 31"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 2C0 0.89543 0.895431 0 2 0H64C65.1046 0 66 0.89543 66 2V29C66 30.1046 65.1046 31 64 31H2C0.895429 31 0 30.1046 0 29V2Z"
+      fill="#E5E5E5"
+    />
+    <path
+      d="M15.912 19V10.24H18.684C19.268 10.24 19.772 10.348 20.196 10.564C20.628 10.78 20.964 11.084 21.204 11.476C21.444 11.86 21.564 12.316 21.564 12.844C21.564 13.42 21.416 13.928 21.12 14.368C20.832 14.808 20.44 15.12 19.944 15.304L21.684 19H20.004L18.48 15.52H17.412V19H15.912ZM17.412 14.2H18.684C19.108 14.2 19.44 14.084 19.68 13.852C19.92 13.62 20.04 13.3 20.04 12.892C20.04 12.476 19.92 12.152 19.68 11.92C19.44 11.68 19.108 11.56 18.684 11.56H17.412V14.2ZM23.1073 19V17.632H25.4113V13.756H23.4073V12.4H26.8513V17.632H28.8913V19H23.1073ZM26.0113 11.296C25.7073 11.296 25.4673 11.22 25.2913 11.068C25.1153 10.908 25.0273 10.696 25.0273 10.432C25.0273 10.168 25.1153 9.96 25.2913 9.808C25.4673 9.648 25.7073 9.568 26.0113 9.568C26.3153 9.568 26.5553 9.648 26.7313 9.808C26.9073 9.96 26.9953 10.168 26.9953 10.432C26.9953 10.696 26.9073 10.908 26.7313 11.068C26.5553 11.22 26.3153 11.296 26.0113 11.296ZM31.3826 21.16L32.3066 18.64L29.8466 12.4H31.4906L32.7146 15.772C32.7786 15.956 32.8426 16.18 32.9066 16.444C32.9706 16.7 33.0186 16.912 33.0506 17.08C33.0906 16.912 33.1426 16.7 33.2066 16.444C33.2706 16.18 33.3346 15.956 33.3986 15.772L34.5506 12.4H36.1346L32.9546 21.16H31.3826ZM39.4539 19.12C38.7739 19.12 38.2379 18.94 37.8459 18.58C37.4539 18.22 37.2579 17.736 37.2579 17.128C37.2579 16.48 37.4739 15.98 37.9059 15.628C38.3379 15.276 38.9499 15.1 39.7419 15.1H41.3859V14.536C41.3859 14.216 41.2819 13.968 41.0739 13.792C40.8659 13.608 40.5819 13.516 40.2219 13.516C39.8939 13.516 39.6219 13.588 39.4059 13.732C39.1899 13.876 39.0619 14.072 39.0219 14.32H37.5579C37.6299 13.696 37.9099 13.2 38.3979 12.832C38.8859 12.464 39.5099 12.28 40.2699 12.28C41.0779 12.28 41.7139 12.484 42.1779 12.892C42.6499 13.292 42.8859 13.836 42.8859 14.524V19H41.4339V17.848H41.1939L41.4339 17.524C41.4339 18.012 41.2539 18.4 40.8939 18.688C40.5339 18.976 40.0539 19.12 39.4539 19.12ZM39.9459 17.992C40.3699 17.992 40.7139 17.884 40.9779 17.668C41.2499 17.452 41.3859 17.172 41.3859 16.828V16.024H39.7659C39.4619 16.024 39.2179 16.112 39.0339 16.288C38.8499 16.464 38.7579 16.696 38.7579 16.984C38.7579 17.296 38.8619 17.544 39.0699 17.728C39.2859 17.904 39.5779 17.992 39.9459 17.992ZM46.8173 19.12C46.1613 19.12 45.6293 18.892 45.2213 18.436C44.8213 17.98 44.6213 17.368 44.6213 16.6V14.812C44.6213 14.036 44.8213 13.42 45.2213 12.964C45.6213 12.508 46.1533 12.28 46.8173 12.28C47.3613 12.28 47.7933 12.436 48.1133 12.748C48.4333 13.052 48.5933 13.472 48.5933 14.008L48.2573 13.66H48.6053L48.5573 12.088V10.24H50.0573V19H48.5933V17.74H48.2573L48.5933 17.392C48.5933 17.928 48.4333 18.352 48.1133 18.664C47.7933 18.968 47.3613 19.12 46.8173 19.12ZM47.3453 17.824C47.7293 17.824 48.0253 17.712 48.2333 17.488C48.4493 17.256 48.5573 16.936 48.5573 16.528V14.872C48.5573 14.464 48.4493 14.148 48.2333 13.924C48.0253 13.692 47.7293 13.576 47.3453 13.576C46.9613 13.576 46.6613 13.688 46.4453 13.912C46.2293 14.136 46.1213 14.456 46.1213 14.872V16.528C46.1213 16.944 46.2293 17.264 46.4453 17.488C46.6613 17.712 46.9613 17.824 47.3453 17.824Z"
+      fill="black"
+    />
+    <circle cx="25.5" cy="10.5" r="1.5" fill="#00C8C8" />
+    <path
+      d="M2 1H64V-1H2V1ZM65 2V29H67V2H65ZM64 30H2V32H64V30ZM1 29V2H-1V29H1ZM2 30C1.44771 30 1 29.5523 1 29H-1C-1 30.6569 0.343143 32 2 32V30ZM65 29C65 29.5523 64.5523 30 64 30V32C65.6569 32 67 30.6569 67 29H65ZM64 1C64.5523 1 65 1.44771 65 2H67C67 0.343147 65.6569 -1 64 -1V1ZM2 -1C0.343146 -1 -1 0.343146 -1 2H1C1 1.44772 1.44772 1 2 1V-1Z"
+      fill="black"
+      fill-opacity="0.1"
+    />
+  </svg>
+</template>
diff --git a/components/page/footer.vue b/components/main/footer.vue
similarity index 52%
rename from components/page/footer.vue
rename to components/main/footer.vue
index 8cc04af..e86efc4 100644
--- a/components/page/footer.vue
+++ b/components/main/footer.vue
@@ -1,13 +1,19 @@
 <template>
   <nav class="bg-gray-900 text-white py-5 border-b border-gray-700">
     <div class="container flex justify-between mx-auto">
-      <NuxtLink to="/" class="text-2xl font-medium">Elon's Blog</NuxtLink>
+      <NuxtLink to="/" class="text-2xl font-medium">
+        Elon's Blog
+      </NuxtLink>
       <ul class="nav flex space-x-5">
         <li>
-          <NuxtLink to="/categories">Categories</NuxtLink>
+          <NuxtLink to="/categories">
+            Categories
+          </NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/blogs">Blogs</NuxtLink>
+          <NuxtLink to="/blogs">
+            Blogs
+          </NuxtLink>
         </li>
       </ul>
     </div>
diff --git a/components/main/header.vue b/components/main/header.vue
new file mode 100644
index 0000000..48b48b0
--- /dev/null
+++ b/components/main/header.vue
@@ -0,0 +1,21 @@
+<template>
+  <nav class="py-5 border-b border-gray-700">
+    <div class="container flex justify-between mx-auto">
+      <NuxtLink to="/" class="text-2xl font-medium">
+        Riyad's Blog
+      </NuxtLink>
+      <ul class="nav flex space-x-5">
+        <li>
+          <NuxtLink to="/categories">
+            Categories
+          </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/blogs">
+            Blogs
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
diff --git a/components/page/header.vue b/components/page/header.vue
deleted file mode 100644
index 8cc04af..0000000
--- a/components/page/header.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <nav class="bg-gray-900 text-white py-5 border-b border-gray-700">
-    <div class="container flex justify-between mx-auto">
-      <NuxtLink to="/" class="text-2xl font-medium">Elon's Blog</NuxtLink>
-      <ul class="nav flex space-x-5">
-        <li>
-          <NuxtLink to="/categories">Categories</NuxtLink>
-        </li>
-        <li>
-          <NuxtLink to="/blogs">Blogs</NuxtLink>
-        </li>
-      </ul>
-    </div>
-  </nav>
-</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 9d32216..8cce2e4 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <PageHeader />
+    <MainHeader />
     <div class="h-full">
       <slot />
     </div>
-    <PageFooter />
+    <MainFooter />
   </div>
 </template>
diff --git a/package.json b/package.json
index 672138d..45dfbcf 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,14 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
+  
   },
   "devDependencies": {
     "@nuxt/content": "^2.3.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
+    "@tailwindcss/typography": "^0.5.8",
     "nuxt": "3.0.0",
-    "prettier": "2.8.1",
-    "@tailwindcss/typography": "^0.5.8"
+    "prettier": "2.8.1"
+    
   }
 }