diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..1b6457c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/components/blog/card.vue b/components/blog/card.vue
new file mode 100644
index 0000000..bdad52c
--- /dev/null
+++ b/components/blog/card.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+  excerpt?: string;
+  image?: string;
+  slug?: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="grid shadow-xl group overflow-hidden rounded max-w-md p-5 m-5 bg-slate-700 text-white"
+  >
+    <h1 class="text-xl">
+      Riyad ipsum dolor sit amet, consectetur adipisicing elit. Saepe, commodi?
+    </h1>
+    <p class="text-sm">
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat autem
+      sit ratione vitae dolores porro in fuga quae corporis quis?
+    </p>
+  </div>
+</template>
diff --git a/components/page/footer.vue b/components/page/footer.vue
index 768f60d..8cc04af 100644
--- a/components/page/footer.vue
+++ b/components/page/footer.vue
@@ -1,3 +1,15 @@
 <template>
-  <div>This is a page footer</div>
-</template>
\ No newline at end of file
+  <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/components/page/header.vue b/components/page/header.vue
index 4c5c340..8cc04af 100644
--- a/components/page/header.vue
+++ b/components/page/header.vue
@@ -1,3 +1,15 @@
 <template>
-  <div>This is a page header</div>
-</template>
\ No newline at end of file
+  <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 5222c75..9d32216 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <PageHeader/>
-    <div class="h-full bg-slate-600">
+    <PageHeader />
+    <div class="h-full">
       <slot />
     </div>
-    <PageFooter/>
+    <PageFooter />
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5421c6a..333275f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,16 +1,15 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-
   app: {
     head: {
       charset: "utf-16",
       viewport: "width=device-width,initial-scale=1",
       title: "Elon's Blog",
-      titleTemplate: "%s - Elon's Blog",
-      meta: [{ name: "description", content: "Elon's awesome blog" }],
+      titleTemplate: "%s - Riyad's Blog",
+      meta: [{ name: "description", content: "Riyad's awesome blog" }],
     },
   },
-  
+
   typescript: {
     strict: true,
   },
diff --git a/package.json b/package.json
index ec548d6..5edd40f 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "devDependencies": {
     "@nuxt/content": "^2.3.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
-    "nuxt": "3.0.0"
+    "nuxt": "3.0.0",
+    "prettier": "2.8.1"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index b509eb9..6b1266b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-
-
 useHead({
   title: "Home",
   meta: [
@@ -11,12 +9,18 @@ useHead({
   ],
   titleTemplate: "Elon's Blog - %s",
 });
-
 </script>
 <template>
   <main>
-    
-   <h1>This ia main section</h1>
+    <div class="flex m-5 p-3 flex-wrap">
+      <template v-for="n in 10" :key="n">
+        <BlogCard
+          title="sldkfsl"
+          excerpt="sldkfj"
+          image="sdlfkj"
+          slug="sdlkfj"
+        />
+      </template>
+    </div>
   </main>
 </template>
-
diff --git a/yarn.lock b/yarn.lock
index 8140fb9..a32d20f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4871,6 +4871,11 @@ postcss@^8.1.10, postcss@^8.2.15, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prettier@2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.1.tgz#4e1fd11c34e2421bc1da9aea9bd8127cd0a35efc"
+  integrity sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==
+
 pretty-bytes@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.0.0.tgz#928be2ad1f51a2e336add8ba764739f9776a8140"