diff --git a/GET_FEATURED.md b/GET_FEATURED.md
index 165f087..95da638 100644
--- a/GET_FEATURED.md
+++ b/GET_FEATURED.md
@@ -10,3 +10,29 @@ Looking to get yourself up there along with others? It's easy!
 
 - Open a "Get Featured" issue via https://github.com/fossunited/forklore/issues/new/choose
 - Add your information and responses to the questions in the issue template
+
+## Submit a blog post
+
+You can submit a blog post by creating a pull request that adds a Markdown file to the `content/blog/` directory.
+
+### Steps:
+
+1. Create markdown file:
+
+```sh
+touch content/blog/<your-post-slug>.md
+```
+
+2. Add front-matter metadata to top of the file:
+
+```markdown
+---
+title: TITLE
+author: username # (if in maintainers list) or simple name to represent
+date: 2025-10-17 # ISO format: YYYY-MM-DD
+description: A short summary of your post that appears in previews.
+tags: ["blog", "example", "topic"] # keep it short
+---
+```
+
+That's it, you can do `yarn run dev` to see the live changes in localhost:3000 or do a PR and let us take care!
diff --git a/assets/css/main.css b/assets/css/main.css
index a292206..61e3d29 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:where(.dark-mode, .dark-mode *));
 
@@ -35,6 +36,8 @@
   --color-secondary-light: #18222a;
   --color-tertiary-dark: #3c4b4e;
   --color-tertiary-light: #eef0f1;
+  --color-quaternary-dark: #495B5F;
+  --color-quaternary-light: #DDE1E3;
 }
 
 html {
@@ -108,6 +111,31 @@ html {
   .sans-text a {
     text-decoration: underline;
   }
+
+  .tag-card {
+    @apply text-sm px-2 py-1;
+    background-color: var(--color-quaternary-light);
+    color: var(--color-secondary-light);
+  }
+
+  .dark-mode .tag-card {
+    background-color: var(--color-quaternary-dark);
+    color: var(--color-secondary-dark);
+  }
+
+  .prose h1 {
+    font-size: 1.6rem;
+  }
+
+  .prose h1 > a,
+  .prose h2 > a,
+  .prose h3 > a,
+  .prose h4 > a,
+  .prose h5 > a,
+  .prose h6 > a {
+    text-decoration: none !important;
+  }
+
 }
 
 @layer base {
diff --git a/components/AuthorLink.vue b/components/AuthorLink.vue
new file mode 100644
index 0000000..0d005aa
--- /dev/null
+++ b/components/AuthorLink.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{ author: string }>()
+
+const maintainer = ref(null)
+
+const fetchMaintainer = async (username: string) => {
+  if (!username) {
+    maintainer.value = null
+    return
+  }
+
+  const { data } = await useAsyncData(
+    () => `maintainer-${username}`,
+    () =>
+      queryCollection('maintainers')
+        .where('username', '==', username)
+        .first()
+  )
+  maintainer.value = data.value
+}
+
+watch(
+  () => props.author,
+  (newAuthor) => {
+    fetchMaintainer(newAuthor)
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <span>
+    <template v-if="maintainer">
+      <NuxtLink :to="`/maintainers/${maintainer.username}`" class="underline text-primary">
+        {{ maintainer.full_name || maintainer.username }}
+      </NuxtLink>
+    </template>
+    <template v-else>
+      <strong>{{ author }}</strong>
+    </template>
+  </span>
+</template>
diff --git a/components/HeaderLinks.vue b/components/HeaderLinks.vue
index 4522234..62fe882 100644
--- a/components/HeaderLinks.vue
+++ b/components/HeaderLinks.vue
@@ -9,7 +9,11 @@ const navbarItems = [
     href: "https://fossunited.org/grants",
   },
   {
-    label: "Discussion Forum",
+    label: "Blog",
+      href: "/blog",
+  },
+  {
+    label: "Forum",
     href: "https://forum.fossunited.org/c/maintainers/",
   },
 ];
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
index dbfa744..3b45d86 100644
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -19,7 +19,7 @@ defineProps(["project"]);
         </a>
       </div>
     </div>
-    <p class="text-sm">
+    <p class="text-sm sans-text">
       {{ project.short_description }}
     </p>
   </div>
diff --git a/content.config.ts b/content.config.ts
index 9602570..d0172a7 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -1,4 +1,5 @@
-import { defineCollection, defineContentConfig, z } from "@nuxt/content";
+import { defineCollection, defineContentConfig, property } from "@nuxt/content";
+import { z } from 'zod'
 
 const maintainerSchema = z.object({
   username: z.string(),
@@ -37,5 +38,21 @@ export default defineContentConfig({
       source: "maintainers/**.json",
       schema: maintainerSchema,
     }),
+    blog: defineCollection({
+      type: 'page',
+      source: 'blog/*.md',
+      schema: z.object({
+        title: z.string(),
+        author: z.string(),
+        description: z.optional(z.string()),
+        date: z.date(),
+        draft: z.optional(z.boolean()),
+        tags: z.optional(z.array(z.string())),
+        hero: z.object({
+          image: property(z.string()).editor({ input: 'media' }),
+          caption: z.optional(z.string())
+        })
+      })
+    })
   },
 });
diff --git a/content/sample-blog.md b/content/sample-blog.md
new file mode 100644
index 0000000..7cf911c
--- /dev/null
+++ b/content/sample-blog.md
@@ -0,0 +1,80 @@
+---
+title: TITLE
+author: username (if in maintainers list or simply name)
+date: 2025-10-17 (ISO format YYYY-MM-DD)
+description: Content appears as small description.
+tags: ["blog", "hello"]
+---
+
+NOTE: Please start writing heading from level-2 (##)
+
+## Heading One
+
+Welcome to the **prose formatting demo**. This blog post covers most of the Markdown formatting styles you'll use.
+
+## Heading Two
+
+Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. `Inline code` looks like this.
+
+Here’s a simple [link to Nuxt](https://nuxt.com).
+
+### Heading Three (`h3`)
+
+> This is a blockquote.
+> It supports multiple lines and renders with indentation.
+
+#### Heading Four
+
+- Unordered list item 1
+- Unordered list item 2
+  - Nested item
+  - Another nested item
+- Final unordered item
+
+1. Ordered list item one
+2. Ordered list item two
+3. Ordered list item three
+
+---
+
+## 📸 Images
+
+![forklore logo](../public/logo/logo.svg)
+
+---
+
+## 🧠 Code Blocks
+
+### JavaScript Example
+
+```js
+export default defineNuxtConfig({
+  modules: ['@nuxt/content'],
+})
+```
+
+
+### Html
+
+```html
+<div class="prose dark:prose-invert">
+  <p>Hello world</p>
+</div>
+```
+
+## Table
+
+| Key | Type      | Description |
+| --- | --------- | ----------- |
+| 1   | Wonderful | Table       |
+| 2   | Wonderful | Data        |
+| 3   | Wonderful | Website     |
+
+
+| Feature        | Supported | Notes                      |
+|----------------|-----------|----------------------------|
+| Headings       | ✅        | `#`, `##`, `###`, etc.     |
+| Lists          | ✅        | Ordered + unordered        |
+| Code blocks    | ✅        | Syntax highlighting works  |
+| Blockquotes    | ✅        | Fully styled               |
+| Tables         | ✅        | Supported by Markdown      |
diff --git a/cspell.json b/cspell.json
index de6a3ba..9da664e 100644
--- a/cspell.json
+++ b/cspell.json
@@ -26,6 +26,7 @@
     "**/*.svg",
     "package.json",
     "content/sample.json",
+    "content/sample-blog.md",
     "**/*.ts"
   ]
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 769d339..babf5a8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,14 +7,26 @@ export default defineNuxtConfig({
   modules: ["@nuxt/content", "@nuxtjs/color-mode"],
   css: ["/assets/css/main.css"],
   vite: {
-    plugins: [tailwindcss()],
+    plugins: [tailwindcss(), require("@tailwindcss/typography")],
   },
   colorMode: {
-    storage: 'cookie',
+    storage: "cookie",
+  },
+  content: {
+    build: {
+      markdown: {
+        toc: {
+          depth: 2,
+        },
+        highlight: {
+          theme: 'one-dark-pro',
+        },
+      },
+    },
   },
   app: {
     head: {
-      viewport: 'width=device-width, initial-scale=1',
+      viewport: "width=device-width, initial-scale=1",
 
       htmlAttrs: {
         lang: "en",
@@ -31,10 +43,15 @@ export default defineNuxtConfig({
     },
   },
   compatibilityDate: "2025-05-15",
+ routeRules: {
+    "/maintainers": {
+      redirect: "/",
+    },
+  },
   nitro: {
-	prerender: {
+    prerender: {
       crawlLinks: true,
-      routes: ['/rss']
-    }
-  }
+      routes: ["/rss"],
+    },
+  },
 });
diff --git a/package.json b/package.json
index f30c657..e2b2ecf 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@nuxt/content": "^3.7.1",
     "@nuxtjs/color-mode": "3.5.2",
     "@tailwindcss/vite": "^4.1.15",
+    "@tailwindcss/typography": "^0.5.19",
     "better-sqlite3": "^12.4.1",
     "feed": "^5.1.0",
     "minisearch": "^7.2.0",
diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
new file mode 100644
index 0000000..e83842d
--- /dev/null
+++ b/pages/blog/[slug].vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import AuthorLink from '@/components/AuthorLink.vue'
+const route = useRoute();
+
+const { data: page } = await useAsyncData(route.path, () => {
+  return queryCollection("blog").path(route.path).first();
+});
+
+const formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+};
+</script>
+
+<template>
+  <div v-if="page" class="max-w-5xl mx-auto px-4 py-12 flex flex-col gap-6">
+    <div
+      class="bg-tertiary-light dark:bg-tertiary-dark border-custom p-8 flex flex-col gap-4"
+    >
+      <h1 class="text-3xl font-bold">{{ page.title }}</h1>
+
+      <div class="text-base text-secondary-light dark:text-secondary-dark">
+        <p>
+          by <AuthorLink :author="page.author" /> • {{ formatDate(page.date) }}
+        </p>
+      </div>
+
+      <div v-if="page.tags?.length" class="flex flex-wrap gap-2 mt-2">
+        <span v-for="tag in page.tags" :key="tag" class="tag-card">
+          {{ tag }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="page.body?.toc?.links?.length"
+      class="toc-wrapper border-l-4 pl-4"
+    >
+      <h2 class="text-lg font-bold mb-2">Table of Contents</h2>
+      <ul class="space-y-1 text-sm list-disc list-inside">
+        <li v-for="link in page.body.toc.links" :key="link.id">
+          <a :href="`#${link.id}`" class="hover:underline">
+            {{ link.text }}
+          </a>
+
+          <ul v-if="link.children" class="ml-4 list-disc">
+            <li v-for="child in link.children" :key="child.id">
+              <a :href="`#${child.id}`" class="hover:underline">
+                {{ child.text }}
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <div class="prose dark:prose-invert sans-text max-w-none px-2">
+      <ContentRenderer :value="page" :prose="true" class="max-w-none" />
+    </div>
+  </div>
+
+  <div v-else class="empty-page text-center py-24">
+    <h1 class="text-2xl font-bold">Page Not Found</h1>
+    <p class="text-gray-500 mt-2">
+      Oops! The content you're looking for doesn't exist.
+    </p>
+    <NuxtLink to="/" class="mt-4 inline-block underline">
+      Go back home
+    </NuxtLink>
+  </div>
+</template>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
new file mode 100644
index 0000000..5710e21
--- /dev/null
+++ b/pages/blog/index.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import AuthorLink from "@/components/AuthorLink.vue";
+
+const { data: posts } = await useAsyncData("blog", () => {
+  return queryCollection("blog").order("date", "DESC").all();
+});
+const formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+};
+
+const router = useRouter();
+</script>
+
+<template>
+  <section class="max-w-5xl mx-auto px-4 py-12">
+    <h1 class="text-3xl font-bold mb-8">Forklore Blog</h1>
+
+    <div class="flex flex-col gap-6">
+      <div
+        v-for="post in posts"
+        :key="post.path"
+        class="flex flex-col border outline-0 hover:outline-1 focus:outline-1 cursor-pointer"
+        role="button"
+        tabindex="0"
+        @click="router.push(post.path)"
+        @keydown.enter="router.push(post.path)"
+        @keydown.space.prevent="router.push(post.path)"
+      >
+        <div
+          class="p-6 bg-tertiary-light dark:bg-tertiary-dark transition-colors duration-300"
+        >
+          <h2 class="font-bold text-xl mb-2">{{ post.title }}</h2>
+
+          <div
+            class="flex items-center justify-between flex-wrap gap-2 text-sm text-secondary-light dark:text-secondary-dark"
+          >
+            <div>
+              by <AuthorLink :author="post.author" /> •
+              {{ formatDate(post.date) }}
+            </div>
+
+            <div class="flex gap-2 flex-wrap mt-1 sm:mt-0">
+              <span
+                v-for="tag in post.tags"
+                :key="tag"
+                class="px-2 py-1 text-xs tag-card"
+              >
+                {{ tag }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="p-6 border-t border-custom-t sans-text">
+          <p class="line-clamp-3">
+            {{ post.description || post.excerpt || "" }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>