diff --git a/website/assets/css/main.css b/website/assets/css/main.css
index 141fc526..fb72b11f 100644
--- a/website/assets/css/main.css
+++ b/website/assets/css/main.css
@@ -7,7 +7,46 @@
  * scope typographic styles with .md
  */
 
-.md p { @apply my-4; }
+.md p { @apply mb-8 }
+.md p a { @apply underline  text-blue-primary hover:text-blue-lighter}
+
+.md h1 { @apply text-4xl mb-4}
+
+.md h2 { @apply text-3xl mb-3}
+.md h2 a { @apply text-gray-100 hover:text-gray-80}
+
+.md h3 { @apply text-2xl mb-2}
+.md h3 a { @apply text-gray-100 hover:text-gray-80}
+
+.md h4 { @apply text-xl font-medium mb-2}
+.md h4 a { @apply text-gray-100 hover:text-gray-80}
+
+.md h5 { @apply text-lg font-medium mb-2}
+
+.md h6 { @apply font-medium mb-2}
+
+.md ul,
+.md ol {@apply mb-8}
+.md ul li { @apply list-inside pl-4; list-style-type: square;}
+.md ol li { @apply list-inside pl-4; list-style-type: number;}
+
+.md blockquote {@apply bg-cream-10 pl-6 pr-4 py-4 mb-8 border-l-4 border-l-blue-lighter}
+
+.md blockquote p { @apply italic mb-4}
+.md blockquote > *:last-child { @apply mb-0; }
+.md blockquote li { @apply font-medium not-italic pl-0 list-none}
+
+.md pre { @apply my-8 p-4; }
+
+.md table {@apply w-full mb-8 border border-gray-20}
+.md tr {@apply h-10 text-left}
+.md th { @apply border-b border-b-gray-20 font-mono text-sm}
+.md td, .md th {@apply px-4}
+
+
+/* Code highlighting */
+.shiki { background-color: #282c34; }
+
 
 /**
  * UTILITIES
@@ -16,4 +55,4 @@
 
 .hover\:pause-animation:hover {
   animation-play-state: paused;
-}
\ No newline at end of file
+}
diff --git a/website/components/mobile-nav.vue b/website/components/mobile-nav.vue
new file mode 100644
index 00000000..69d70d2c
--- /dev/null
+++ b/website/components/mobile-nav.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="bg-gray-90 h-screen flex flex-col px-5 py-4">
+    <div class="flex justify-between items-center mb-6 h-9">
+    <NuxtLink to="/">
+        <img src="/images/logo.png" class="h-6" alt="Aldea Computer" />
+    </NuxtLink>
+    <CaLogoGithub class="text-white"/>
+    </div>
+    <nav class="md:hidden block px-2">
+      <ul class="flex flex-col text-xl">
+        <li v-for="node of navTree" class="p-4 text-white active:bg-gray-80 rounded-sm">
+          <NuxtLink :to="node.link">{{ node.text }}</NuxtLink>
+        </li>
+      </ul>
+    </nav>
+    <div class="md:flex flex-col justify-between text-white">
+      <ul>
+        <li class="inline-block px-2" v-for="link of socialLinks">
+            <a :href="link.url"
+            target="_blank"
+            rel="noopener noreferrer">
+            <component :is="link.icon" class="w-6 h-7" />
+          </a>
+        </li>
+      </ul>
+      <p class="p-2 text-sm">Terms, Privacy & Acceptable Use</p>
+      <p class="p-2 text-sm">Copyright &copy; 2023 Aldea Computer Company</p>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup lang="ts">
+import {
+CaLogoTwitter,
+CaLogoLinkedin,
+CaLogoGithub,
+} from '~/icons'
+
+const navTree: NavLink[] = [
+{
+text: 'Blog',
+link: '/blog',
+}, {
+text: 'About',
+link: '/about/faqs',
+}, {
+text: 'Docs',
+link: 'https://docs.aldea.computer',
+}
+]
+
+const socialLinks: SocialLink[] = [
+{ icon: CaLogoTwitter, url: 'https://twitter.com/aldeacomputer' },
+{ icon: CaLogoLinkedin, url: 'https://www.linkedin.com/company/aldea-computer/' },
+{ icon: CaLogoGithub, url: 'https://github.com/orgs/aldeacomputer' },
+]
+</script>
\ No newline at end of file
diff --git a/website/components/related-content.vue b/website/components/related-content.vue
new file mode 100644
index 00000000..67616c07
--- /dev/null
+++ b/website/components/related-content.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class=" bg-gray-90 py-24 md:py-32 px-4">
+      <h3 class="mb-16 font-mono text-base text-gray-50 text-center">See more:</h3>
+      <div class="flex flex-col md:flex-row md:px-20 xl:px-60 gap-4 mb-16">
+        <NuxtLink
+          class="p-4 flex-auto md:w-1/3 flex flex-col border border-gray-50 hover:border-blue-interactive rounded cursor-pointer"
+          v-for="item of items"
+          :to="item.link">
+          <span class="self-end text-cream-20">
+            <CaArrowUpRight class="w-5 h-5" />
+          </span>
+          <h3 class="mt-2 mb-3 font-mono text-3xl font-light text-cream-20">
+          {{ item.title }}
+          </h3>
+          <p class="font-mono text-sm text-cream-20">{{ item.description }}</p>
+        </NuxtLink>
+      </div>
+  </div>
+</template>
+  
+<script setup lang="ts">
+import { CaArrowUpRight } from '~/icons'
+
+defineProps<{
+  items: RelatedItem[];
+}>()
+
+</script>
\ No newline at end of file
diff --git a/website/content/about/another-page.md b/website/content/about/another-page.md
deleted file mode 100644
index 62c80efa..00000000
--- a/website/content/about/another-page.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: generic
----
-
-# Another page... fascinating!
-
-Ullamco ut ex duis elit nisi voluptate nostrud aliquip. Ullamco qui labore adipisicing veniam reprehenderit elit adipisicing labore adipisicing sint sunt elit mollit duis nisi. Elit veniam labore laboris est. Cupidatat elit et consectetur. Ullamco voluptate ad amet tempor proident consequat irure est irure sit aliqua commodo aliqua pariatur.
-
-Incididunt laborum in id eiusmod Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation.
-
-Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
\ No newline at end of file
diff --git a/website/content/about/faqs.md b/website/content/about/faqs.md
new file mode 100644
index 00000000..16a0b322
--- /dev/null
+++ b/website/content/about/faqs.md
@@ -0,0 +1,30 @@
+---
+layout: generic
+icon: CaArrowRight
+---
+
+# FAQs
+
+## Llamco minim id deserunt exercitatio? 
+
+Incididunt laborum in id eiusmod **Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu.** Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation. Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
+
+
+### Ut ex duis elit nisi voluptate nostrud aliquip. 
+Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation. Est culpa et aute in. Eu fugiat ea cupidatat. Veniam `sint occaecat ut minim incididunt` pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
+
+
+#### Ullamco qui veniam reprehenderit lit adipisicing labore adipisicing sint sunt elit mollit duis nisi. 
+Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
+
+##### Elit veniam labore laboris est. Cupidatat elit et consectetur. Ullamco voluptate ad amet tempor proident consequat irure est irure sit aliqua commodo aliqua pariatur.
+Incididunt laborum in id eiusmod Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation. Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id. Incididunt laborum in id eiusmod Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit ad officia est ad cupidatat ut minim nulla. Ex proident minim id deserunt exercitation. Est culpa et aute in. Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id.
+
+###### Incididunt laborum in id eiusmod 
+
+Est culpa et aute in. *Eu fugiat ea cupidatat*. Veniam sint occaecat ut minim **incididunt pariatur non**. Commodo cillum incididunt cillum pariatur nostrud. `Non ex aliqua et in deserunt` cillum id.   
+Eu fugiat ea cupidatat. Veniam sint occaecat ut minim incididunt pariatur non. Commodo cillum incididunt cillum pariatur nostrud. Non ex aliqua et in deserunt cillum id. Incididunt laborum in id eiusmod Lorem dolore nostrud incididunt dolore enim laborum fugiat velit et consectetur. Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit.
+
+[span]
+
+Ex ut id pariatur dolore culpa velit commodo id elit do nostrud eu. Ad eiusmod cupidatat exercitation proident velit. [More info...](https://aldea.computer/)
\ No newline at end of file
diff --git a/website/content/about/misadventures-of-markdown.md b/website/content/about/misadventures-of-markdown.md
new file mode 100644
index 00000000..05fd54dd
--- /dev/null
+++ b/website/content/about/misadventures-of-markdown.md
@@ -0,0 +1,60 @@
+---
+layout: generic
+---
+
+# The Misadventures of Markdown Man
+
+Once upon a time, in a **bold** and _italic_ kingdom called *Markdownville*, there lived a dashing hero named Markdown Man. His mission in life was to spread the joy of `code` and bring smiles to the faces of the townspeople through the power of ~~strikethrough~~ humor.
+
+## The Mysterious Link
+
+One day, Markdown Man woke up to discover a mysterious [link](https://example.com) on his bed. Curiosity overwhelmed him, and he clicked the link without hesitation. Little did he know, it was a trap set by the mischievous *Markdown Monster*!
+
+With a loud roar, the monster appeared out of thin air, `code` syntax swirling around him like a tornado. Markdown Man had to think quickly. He reached into his backpack and pulled out a bag of unordered lists:
+
+- 🍎
+- 🍊
+- 🍌
+
+He tossed the fruits at the monster, hoping to distract him. But the Markdown Monster was no fool. He retaliated with a barrage of numbers.
+
+1. Markdown Man ducked.
+2. Markdown Man dodged.
+3. And finally, Markdown Man countered with a 10x `code` strike!
+
+With the Markdown Monster defeated, Markdown Man celebrated his victory by performing a victory dance in his ~~strikethrough~~ stylish markdown cape. The townspeople cheered and **applauded** his bravery.
+
+> "Markdown Man, our hero! You saved us with your magical syntax powers!"
+> - Mayor Markdown
+
+And so, Markdown Man continued his adventures, using his knowledge of headers, emphasis, `code blocks`, [links](https://example.com), ~~strikethroughs~~, unordered lists, ordered lists, blockquotes, and more to bring cheer and order to the land of Markdownville.
+
+### A Mardown Man code snippet:
+
+Here's a code snippet showcasing Markdown Man's code prowess:
+
+```python
+def defeat_markdown_monster():
+    # Let's defeat the Markdown Monster!
+    count = 0
+    while count < 10:
+        print("Markdown Man strikes!")
+        count += 1
+```
+
+### A Mardown Man table:
+
+And here's a table highlighting some of Markdown Man's abilities:
+
+| Syntax          | Description                                      |
+| --------------- | ------------------------------------------------ |
+| Headers         | Used for section headings                        |
+| Emphasis        | Used for emphasizing text                         |
+| `Code blocks`   | Used for displaying code snippets                 |
+| [Links](https://example.com)   | Used for creating clickable links              |
+| ~~Strikethroughs~~ | Used for striking through text                    |
+| Unordered lists | Used for displaying bullet point lists            |
+| Ordered lists   | Used for displaying numbered lists                |
+| Blockquotes     | Used for emphasizing quoted text                  |
+
+The end.
\ No newline at end of file
diff --git a/website/content/about/how-aldea-works.md b/website/content/about/tokenomics.md
similarity index 98%
rename from website/content/about/how-aldea-works.md
rename to website/content/about/tokenomics.md
index d49d66eb..f7aea25b 100644
--- a/website/content/about/how-aldea-works.md
+++ b/website/content/about/tokenomics.md
@@ -2,7 +2,7 @@
 layout: generic
 ---
 
-# How Aldea Works
+# Tokenomics
 
 Eu cupidatat veniam labore. Lorem sit veniam enim culpa reprehenderit velit. Proident anim adipisicing incididunt elit veniam laboris aliquip cupidatat. Est cupidatat veniam consequat ad ipsum ullamco qui labore duis officia laboris.
 
diff --git a/website/content/blog/1.first-post.md b/website/content/blog/1.first-post.md
new file mode 100644
index 00000000..dcf5ef89
--- /dev/null
+++ b/website/content/blog/1.first-post.md
@@ -0,0 +1,12 @@
+---
+layout: article
+pubdate: 2023-10-20
+author: Aaron
+summary: Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
+---
+
+# First Post
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. **Lorem tempor ex mollit nisi culpa quis.** Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
+
+Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
\ No newline at end of file
diff --git a/website/content/blog/1.my-first-post.md b/website/content/blog/1.my-first-post.md
deleted file mode 100644
index 9657b765..00000000
--- a/website/content/blog/1.my-first-post.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-layout: article
-pubdate: 2023-10-19
----
-
-# My first blog post
-
-Cupidatat exercitation tempor aute. Dolore tempor veniam quis sunt voluptate cupidatat quis magna dolor velit Lorem aute magna Lorem veniam. Ex sint non velit officia sunt irure voluptate dolore laborum enim duis Lorem ullamco culpa. Culpa id sit et exercitation nisi pariatur eu enim adipisicing. Eiusmod laboris est sit amet occaecat.
-
-Dolore elit cillum adipisicing est labore veniam aliquip et et laborum eiusmod magna est enim. Excepteur ipsum commodo ullamco irure ex laboris elit laboris irure adipisicing mollit velit. Quis deserunt sint nostrud. Minim ullamco tempor do magna anim ipsum ullamco. Lorem deserunt id adipisicing aliqua. Consequat id aliquip ullamco et magna et id fugiat officia aute enim laborum. Cupidatat voluptate aute esse. Id magna laborum culpa id proident cupidatat nisi do magna laboris consequat eu non.
-
-Adipisicing elit ex proident ipsum ea. Nulla magna ea enim irure Lorem labore minim. Pariatur nisi occaecat aliqua adipisicing veniam pariatur qui anim qui eu est tempor sunt anim ipsum. Reprehenderit pariatur ea elit eiusmod exercitation nulla tempor sint anim velit consectetur nostrud et elit anim. Sunt ut irure anim.
\ No newline at end of file
diff --git a/website/content/blog/2.another-post.md b/website/content/blog/2.another-post.md
index 5e297121..f743f90a 100644
--- a/website/content/blog/2.another-post.md
+++ b/website/content/blog/2.another-post.md
@@ -1,12 +1,13 @@
 ---
 layout: article
 pubdate: 2023-10-20
+author: Aaron
+summary: Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
 ---
 
 # Wow another post!
 
-Excepteur nisi sint culpa consequat Lorem magna quis laboris mollit incididunt et adipisicing tempor mollit quis. Quis cillum exercitation ipsum cupidatat reprehenderit ex mollit do dolor. Esse aliqua irure nulla commodo sunt. Sunt et ullamco in commodo ea irure sunt incididunt laborum do est id irure voluptate.
-
 Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
 
-Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
\ No newline at end of file
+Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
+
diff --git a/website/content/blog/3.another-one copy.md b/website/content/blog/3.another-one copy.md
new file mode 100644
index 00000000..9ec4b33d
--- /dev/null
+++ b/website/content/blog/3.another-one copy.md	
@@ -0,0 +1,14 @@
+---
+layout: article
+pubdate: 2023-10-21
+author: Rius
+summary: Ex sint non velit officia sunt irure voluptate dolore laborum enim duis Lorem ullamco culpa. Culpa id sit et exercitation nisi pariatur eu enim adipisicing. Eiusmod laboris est sit amet occaecat.
+---
+
+# Quis anim nisi voluptate non ea.
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
+
+Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
\ No newline at end of file
diff --git a/website/content/blog/4.another-one.md b/website/content/blog/4.another-one.md
new file mode 100644
index 00000000..9ec4b33d
--- /dev/null
+++ b/website/content/blog/4.another-one.md
@@ -0,0 +1,14 @@
+---
+layout: article
+pubdate: 2023-10-21
+author: Rius
+summary: Ex sint non velit officia sunt irure voluptate dolore laborum enim duis Lorem ullamco culpa. Culpa id sit et exercitation nisi pariatur eu enim adipisicing. Eiusmod laboris est sit amet occaecat.
+---
+
+# Quis anim nisi voluptate non ea.
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
+
+Esse tempor dolore cupidatat in sunt. Amet cillum nisi ea fugiat. Voluptate consequat exercitation nulla commodo ad esse excepteur aliquip qui irure sint. Et enim tempor laborum ipsum veniam excepteur enim elit aute consectetur culpa eu. Enim cillum ipsum in exercitation. Velit tempor eiusmod mollit cillum sit reprehenderit commodo in dolore est officia.
+
+Quis anim nisi voluptate non ea. Laborum laboris nisi laboris laborum laboris consequat laboris ut est aute nostrud pariatur ut quis aliqua. Irure nulla quis laboris aliquip fugiat. Lorem tempor ex mollit nisi culpa quis. Non qui sunt ad duis adipisicing qui et occaecat sint dolor. Aute qui dolore cupidatat sunt labore nulla excepteur nulla consectetur anim. Incididunt ex sint culpa sint laborum. Occaecat ea culpa amet tempor eiusmod laboris.
\ No newline at end of file
diff --git a/website/icons.ts b/website/icons.ts
index bf13905e..2da90ee3 100644
--- a/website/icons.ts
+++ b/website/icons.ts
@@ -1,10 +1,10 @@
-// Little hack to silence annoying types not found error
-
 export {
   CaArrowDown,
   CaArrowRight,
+  CaArrowUpRight,
   CaBlockStorage,
   CaCheckmarkOutline,
+  CaDocument,
   CaDotMark,
   CaEdgeCluster,
   CaExplore,
diff --git a/website/layouts/article.vue b/website/layouts/article.vue
index e6e37dd0..37f50952 100644
--- a/website/layouts/article.vue
+++ b/website/layouts/article.vue
@@ -1,18 +1,38 @@
 <template>
   <NuxtLayout name="default">
-    <div class="p-12">
-      <p class="mb-4">ARTICLE LAYOUT</p>
-      <div class="md">
-        <slot />
+    <div class="w-full grid grid-cols-4 md:grid-cols-8 lg:grid-cols-10 gap-4 animate-fade-up">
+      <div class="py-12 mx-4 lg:mx-0 col-span-4 md:col-start-2 md:col-span-6 lg:col-start-3">
+        <img src="https://unsplash.it/1000/240" class="w-full mb-12">
+        <div class="max-w-2xl mx-auto">
+          <div class="md">
+            <slot />
+          </div>
+          <div class="flex items-center gap-4 mt-8 mb-24">
+            <img src="https://unsplash.it/44/44" class="rounded-full h-11">
+              <div>
+                <span class="text-md block">Posted by: <strong>{{ page.author }}</strong></span>
+                <span class="text-sm mb-0">{{ $formatDate(page.pubdate) }}</span>
+              </div>
+          </div> 
+        </div>
       </div>
-
-      <!-- recents posts: for side column -->
-      <ul>
-        <li v-for="page of posts">
-          <NuxtLink :to="page._path" class="text-blue-500 underline">{{ page.title }}</NuxtLink>
-        </li>
-      </ul>
     </div>
+    <div class="w-full flex flex-col md:px-4 place-items-center">
+        <p class="mb-16 font-mono">Recent posts</p>
+          <ul class="md:flex gap-4 mb-8">
+            <li v-for="page of posts" class="mb-6">
+              <NuxtLink :to="page._path">
+                <img src= "https://unsplash.it/400/200" class="mb-2 w-full md:min-win-400 grayscale hover:filter-none"/>
+                <h2 class="text-xl">{{ page.title }}</h2>
+                <span class="text-xs">{{ $formatDate(page.pubdate) }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+     
+
+      
+
   </NuxtLayout>
 </template>
 
@@ -20,6 +40,7 @@
 <script setup lang="ts">
 const route = useRoute()
 const { page } = useContent()
+const { $formatDate } = useNuxtApp()
 
 const { data: posts } = await useAsyncData(`recent:${route.path}`, () => {
   return queryContent('blog')
diff --git a/website/layouts/default.vue b/website/layouts/default.vue
index 30265115..c3bab3a9 100644
--- a/website/layouts/default.vue
+++ b/website/layouts/default.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="flex flex-col min-h-screen">
-    <header class="w-full h-20 px-5 md:px-10 py-5 text-light bg-gray-100 flex items-center justify-between">
+    <header class="w-full h-16 md:h-20 px-5 md:px-10 py-5 text-light bg-gray-100 flex items-center justify-between">
       <NuxtLink to="/">
-        <img src="/images/logo.png" width="120" alt="Aldea Computer" />
+        <img src="/images/logo.png" class="h-7 md:h-8" alt="Aldea Computer" />
       </NuxtLink>
-      <div class="hidden md:block">
-        <nav>
-          <ul class="flex gap-4 font-mono text-sm">
-            <li v-for="node of navTree">
+      <div>
+        <CaLogoGithub class="block md:hidden"/>
+        <nav class="hidden md:block">
+          <ul class="flex gap-8 text-base">
+            <li v-for="node of navTree" class="hover:text-blue-interactive  transition-colors">
               <NuxtLink :to="node.link">{{ node.text }}</NuxtLink>
             </li>
           </ul>
@@ -15,6 +16,9 @@
       </div>
     </header>
 
+
+    
+
     <main class="flex-auto w-full">
       <slot />
     </main>
@@ -22,18 +26,18 @@
     <footer class="w-full px-5 md:px-10 py-12 md:py-20 bg-gray-100 text-cream-20">
       <div class="w-full max-w-7xl mx-auto md:flex flex-row-reverse justify-between gap-4">
         <div class="mb-20 md:mb-0">
-          <ul class="mb-10 font-mono text-sm text-right space-y-5">
+          <ul class="mb-10 text-md text-right space-y-5">
             <li v-for="node of navTree">
               <NuxtLink
                 :to="node.link"
-                class="underline decoration-transparent hover:text-white hover:decoration-inherit transition-colors">
+                class="hover:text-blue-interactive transition-colors">
                 {{  node.text }}
               </NuxtLink>
             </li>
           </ul>
 
           <ul class="space-x-4 text-right">
-            <li class="inline-block" v-for="link of socialLinks">
+            <li class="inline-block hover:text-blue-interactive transition-colors" v-for="link of socialLinks">
               <a :href="link.url"
                 target="_blank"
                 rel="noopener noreferrer">
@@ -65,7 +69,7 @@ const navTree: NavLink[] = [
     link: '/blog',
   }, {
     text: 'About',
-    link: '/about/how-aldea-works',
+    link: '/about/faqs',
   }, {
     text: 'Docs',
     link: 'https://docs.aldea.computer',
@@ -77,4 +81,7 @@ const socialLinks: SocialLink[] = [
   { icon: CaLogoLinkedin, url: 'https://www.linkedin.com/company/aldea-computer/' },
   { icon: CaLogoGithub, url: 'https://github.com/orgs/aldeacomputer' },
 ]
-</script>
\ No newline at end of file
+</script>
+
+
+
diff --git a/website/layouts/generic.vue b/website/layouts/generic.vue
index a23bdd7c..2dae4168 100644
--- a/website/layouts/generic.vue
+++ b/website/layouts/generic.vue
@@ -1,28 +1,72 @@
 <template>
   <NuxtLayout name="default">
-    <div class="p-12">
-      <p class="mb-4">GENERIC LAYOUT</p>
-      <div class="md">
-        <slot />
+    <div class="lg:hidden">
+      <div class="inline-flex items-center w-full gap-x-1.5 bg-white px-3 py-2 text-sm ring-1 ring-inset ring-gray-300">
+        <NuxtLink class="inline-flex items-center gap-2 font-mono text-sm w-full p-2">{{ page.title }}</NuxtLink>
+        <CaArrowDown class="-mr-1 h-5 w-5" aria-hidden="true"></CaArrowDown>
+      </div>
+    </div>
+
+    <div class="py-4 md:py-12 grid grid-cols-2 gap-4 md:grid-cols-8 xl:grid-cols-10">
+      <div class="hidden lg:block lg:col-start-2 lg:col-span-2">
+        <ul>
+          <li v-for="child of siblings">
+            <NuxtLink
+              class="inline-flex items-center gap-2 p-2 font-mono text-sm w-full hover:bg-slate-50 active:bg-slate-100"
+              :to="child._path">
+              <component :is="iconFor(child.icon)" />
+              <span>{{ child.title }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
       </div>
 
-      <!-- siblings: for side column -->
-      <ul>
-        <li v-for="page of siblings">
-          <NuxtLink :to="page._path" class="text-blue-500 underline">{{ page.title }}</NuxtLink>
-        </li>
-      </ul>
+      <div class="m-4 md:m-0 col-span-6 md:col-start-2 lg:col-span-4">
+        <div class="md">
+          <slot />
+        </div>
+      </div>
     </div>
+
+    <RelatedContent :items="relatedItems" />
+
   </NuxtLayout>
 </template>
 
 <script setup lang="ts">
+import * as icons from '~/icons'
+const CaArrowDown = icons.CaArrowDown
+
 const route = useRoute()
 const { page } = useContent()
 
 const { data: siblings } = await useAsyncData(`siblings:${route.path}`, () => {
   return queryContent(page.value._dir)
-    .where({ $not: { _id: page.value._id } })
     .find()
 })
+
+const relatedItems: RelatedItem[] = [
+  {
+    title: "Docs",
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non sodales odio.',
+    link: "https://docs.aldea.computer",
+  },
+  {
+    title: "About",
+    description: "What Aldea is and how it works",
+    link: "/about/faqs",
+  },
+  {
+    title: "Tutorial",
+    description: "Learn how to code with Aldea",
+    link: "https://docs.aldea.computer",
+  }
+]
+
+function iconFor(icon?: keyof typeof icons) {
+  if (typeof icon === 'string' && Object.keys(icons).includes(icon)) {
+    return icons[icon]
+  }
+  return icons.CaDocument
+}
 </script>
\ No newline at end of file
diff --git a/website/nuxt.config.ts b/website/nuxt.config.ts
index 6f95f03c..100b9ea0 100644
--- a/website/nuxt.config.ts
+++ b/website/nuxt.config.ts
@@ -5,7 +5,7 @@ export default defineNuxtConfig({
       link: [
         { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
         { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400&family=IBM+Plex+Sans:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300&display=swap' },
+        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400&family=IBM+Plex+Sans:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400&display=swap' },
       ],
       script: [
         { src: 'https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js' },
@@ -20,6 +20,10 @@ export default defineNuxtConfig({
 
   content: {
     documentDriven: true,
+    highlight: {
+      theme: 'nord',
+      preload: ['python', 'javascript', 'typescript'],
+    }
   },
 
   css: [
diff --git a/website/package.json b/website/package.json
index 5fa281e6..72252efc 100644
--- a/website/package.json
+++ b/website/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@nuxt/content": "^2.8.5",
+    "dayjs": "^1.11.10",
     "shiki": "^0.14.5"
   }
 }
diff --git a/website/pages/blog.vue b/website/pages/blog.vue
index 325a1439..51ea490c 100644
--- a/website/pages/blog.vue
+++ b/website/pages/blog.vue
@@ -1,22 +1,55 @@
 <template>
   <NuxtLayout>
-    <div class="p-12">
-      <p class="mb-4">BLOG PAGE</p>
-      <ul class="space-y-4">
-        <li v-for="post of posts">
-          <h2><NuxtLink :to="post._path" class="font-bold text-blue-500">{{ post.title }}</NuxtLink></h2>
-          <p>{{  post.description }}</p>
-        </li>
-      </ul>
-    </div>
+      <div class="w-full grid grid-cols-4 md:grid-cols-8 lg:grid-cols-10 gap-4 animate-fade-up">
+        <div class="py-8 md:py-12 px-4 lg:px-0 col-span-4 md:col-span-8 lg:col-start-2">
+          <h1 class="font-light text-4xl mb-8">Blog Page</h1>
+          <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-4 lg:gap-6">
+            <li v-for="post of posts" class="pb-4 grayscale hover:filter-none">
+              <NuxtLink :to="post._path" class="text-2xl">
+                <img src= "https://unsplash.it/600/300" class="w-full"/>
+                <div class="px-2">
+                  <span class="font-medium font-mono text-sm text-gray-60">{{ $formatDate(post.pubdate) }}</span>
+                  <h2 class="mb-2">{{ post.title }}</h2>
+                  <p class="text-base mb-4">{{ post.summary }}</p>
+                  <div class="flex items-center gap-2">
+                    <img src="https://unsplash.it/24/24" class="rounded-full">
+                    <span class="text-sm">Posted by: <strong>{{ post.author }}</strong></span>
+                  </div>
+                </div>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <RelatedContent :items="relatedItems" />
   </NuxtLayout>
 </template>
 
 <script setup lang="ts">
+const { $formatDate } = useNuxtApp()
+
 const { data: posts } = await useAsyncData('blog', () => {
   return queryContent('blog')
     .limit(10)
     .sort({ pubdate: -1 })
     .find()
 })
+
+const relatedItems: RelatedItem[] = [
+  {
+    title: "Docs",
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non sodales odio.',
+    link: "https://docs.aldea.computer",
+  },
+  {
+    title: "About",
+    description: "What Aldea is and how it works",
+    link: "/about/faqs",
+  },
+  {
+    title: "Tutorial",
+    description: "Learn how to code with Aldea",
+    link: "https://docs.aldea.computer",
+  }
+]
 </script>
\ No newline at end of file
diff --git a/website/pages/index.vue b/website/pages/index.vue
index 0c5afe1c..93510e4a 100644
--- a/website/pages/index.vue
+++ b/website/pages/index.vue
@@ -2,7 +2,6 @@
   <NuxtLayout>
     <div id="top" style="height: calc(100vh-80px)">
       <div class="px-5 md:px-10 py-10 flex flex-col items-center justify-between flex-auto">
-        <div></div>
         <div class="w-full max-w-7xl md:grid grid-cols-10 items-center gap-4">
           <div class="py-12 col-span-7 lg:col-span-6 animate-fade-up">
             <h1 class="mb-8 text-4xl lg:text-6xl font-light leading-extratight">
@@ -275,7 +274,6 @@ const timelineYears: TimelineItem[] = [
 #scale {
   @apply relative pb-56;
 }
-
 #scale::before {
   @apply absolute left-0 right-0 bottom-0 h-44 rotate-180;
   content: ' ';
@@ -284,10 +282,9 @@ const timelineYears: TimelineItem[] = [
   background-repeat: no-repeat;
   background-size: 1280px auto;
 }
-
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   #scale::before {
     background-image: url('/images/city@2x.png');
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/website/plugins/helpers.ts b/website/plugins/helpers.ts
new file mode 100644
index 00000000..71f2f5de
--- /dev/null
+++ b/website/plugins/helpers.ts
@@ -0,0 +1,11 @@
+import dayjs from 'dayjs'
+
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      formatDate: (dateTime: string): string => {
+        return dayjs(dateTime).format('D MMM YYYY')
+      }
+    }
+  }
+})
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index a6444e4a..519e8e75 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -51,6 +51,7 @@ export default {
         blue: {
           primary: '#2C799B',
           lighter: '#64A7BF',
+          interactive: '#8FC2D7',
         },
         red: {
           primary: '#C4462D',
diff --git a/website/types/index.d.ts b/website/types/index.d.ts
index 02e40e51..5f2d4d9c 100644
--- a/website/types/index.d.ts
+++ b/website/types/index.d.ts
@@ -55,6 +55,12 @@ declare global {
   interface Window {
     Tally: any;
   }
+
+  interface RelatedItem {
+    title: string;
+    description: string;
+    link: string;
+  }
 }
 
 
diff --git a/yarn.lock b/yarn.lock
index 738b6d98..0dd008db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -171,6 +171,7 @@ __metadata:
     "@nuxt/content": ^2.8.5
     "@nuxt/devtools": latest
     autoprefixer: ^10.4.16
+    dayjs: ^1.11.10
     nuxt: ^3.7.4
     postcss: ^8.4.31
     shiki: ^0.14.5
@@ -7759,6 +7760,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.10":
+  version: 1.11.10
+  resolution: "dayjs@npm:1.11.10"
+  checksum: a6b5a3813b8884f5cd557e2e6b7fa569f4c5d0c97aca9558e38534af4f2d60daafd3ff8c2000fed3435cfcec9e805bcebd99f90130c6d1c5ef524084ced588c4
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:^1.11.9":
   version: 1.11.9
   resolution: "dayjs@npm:1.11.9"