diff --git a/archetypes/blog.md b/archetypes/blog.md
index ef90c22..91024d7 100644
--- a/archetypes/blog.md
+++ b/archetypes/blog.md
@@ -1,8 +1,8 @@
 ---
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
-type: "post"
 draft: false
+dsc_family: "" # "PowerShell DSC", "Microsoft DSC", or "Community"
 ---
 
-## {{ replace .Name "-" " " | title }}
\ No newline at end of file
+## {{ replace .Name "-" " " | title }}
diff --git a/assets/css/futuristic.css b/assets/css/futuristic.css
index 297c59c..a8c12e5 100644
--- a/assets/css/futuristic.css
+++ b/assets/css/futuristic.css
@@ -72,16 +72,17 @@
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3);
   --shadow-card: 0 0 0 1px var(--border-color), var(--shadow-md);
 
   /* Typography */
-  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, sans-serif;
+  --font-sans:
+    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
   --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
 
   --text-xs: 0.75rem;
@@ -201,8 +202,8 @@
       #0f172a 50%,
       #1e293b 100%
     );
-    --shadow-card: 0 0 0 1px var(--border-color),
-      0 4px 6px -1px rgb(0 0 0 / 0.3);
+    --shadow-card:
+      0 0 0 1px var(--border-color), 0 4px 6px -1px rgb(0 0 0 / 0.3);
   }
 }
 
@@ -412,7 +413,8 @@ pre code {
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border-color);
-  transition: background-color var(--transition-normal),
+  transition:
+    background-color var(--transition-normal),
     box-shadow var(--transition-normal);
 }
 
@@ -832,10 +834,8 @@ pre code {
 .hero-grid {
   position: absolute;
   inset: 0;
-  background-image: linear-gradient(
-      rgba(255, 255, 255, 0.03) 1px,
-      transparent 1px
-    ),
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 60px 60px;
   mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
@@ -1006,7 +1006,9 @@ pre code {
 
 .card:hover {
   border-color: var(--color-primary);
-  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary);
+  box-shadow:
+    var(--shadow-lg),
+    0 0 0 1px var(--color-primary);
   transform: translateY(-4px);
 }
 
@@ -1840,6 +1842,150 @@ pre code {
   transition: background var(--transition-fast);
 }
 
+/* -----------------------------------------------------------------------------
+   Blog Article with TOC Layout
+   ----------------------------------------------------------------------------- */
+.article-with-toc {
+  display: grid;
+  grid-template-columns: 1fr 260px;
+  gap: var(--space-12);
+  align-items: start;
+}
+
+@media (max-width: 1024px) {
+  .article-with-toc {
+    grid-template-columns: 1fr;
+  }
+
+  .article-toc {
+    display: none;
+  }
+}
+
+.article-body {
+  min-width: 0;
+}
+
+/* TOC sidebar */
+.article-toc {
+  position: relative;
+}
+
+.toc-sticky {
+  position: sticky;
+  top: calc(var(--header-height) + var(--space-6));
+  max-height: calc(100vh - var(--header-height) - var(--space-12));
+  overflow-y: auto;
+  padding: var(--space-5);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+}
+
+.toc-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  margin-bottom: var(--space-3);
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.toc-heading i {
+  font-size: var(--text-sm);
+}
+
+/* Hugo generates a <nav id="TableOfContents"> containing <ul><li><a> */
+.toc-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc-nav li {
+  margin: 0;
+}
+
+.toc-nav a {
+  display: block;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  transition: all var(--transition-fast);
+  line-height: var(--line-height-normal);
+}
+
+.toc-nav a:hover {
+  color: var(--color-primary);
+  background: rgba(59, 130, 246, 0.06);
+  border-left-color: var(--color-primary-light);
+  text-decoration: none;
+}
+
+/* nested h3 items */
+.toc-nav ul ul {
+  padding-left: var(--space-3);
+}
+
+.toc-nav ul ul a {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+
+/* Active TOC item (set via JS below) */
+.toc-nav a.toc-active {
+  color: var(--color-primary);
+  background: rgba(59, 130, 246, 0.08);
+  border-left-color: var(--color-primary);
+  font-weight: 500;
+}
+
+/* -----------------------------------------------------------------------------
+   Blog Section Headers (list page)
+   ----------------------------------------------------------------------------- */
+.blog-section-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  margin-bottom: var(--space-8);
+  padding-bottom: var(--space-6);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.blog-section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+  color: white;
+  font-size: 1.25rem;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.blog-section-title {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  margin-bottom: var(--space-1);
+  line-height: 1.3;
+}
+
+.blog-section-description {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
 .search-result-item:hover,
 .search-result-item.focused {
   background: var(--bg-tertiary);
diff --git a/assets/js/main.js b/assets/js/main.js
index bbe7497..bf70c7a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -12,6 +12,7 @@ document.addEventListener("DOMContentLoaded", () => {
   initCodeHighlight();
   initSmoothScroll();
   initAnimations();
+  initTocHighlight();
 });
 
 /**
@@ -101,7 +102,7 @@ function initHeader() {
 
       lastScroll = currentScroll;
     },
-    { passive: true }
+    { passive: true },
   );
 }
 
@@ -257,20 +258,20 @@ function handleSearch(e) {
     .map(
       (item, index) => `
     <a href="${item.url}" class="search-result-item${
-        index === 0 ? " focused" : ""
-      }" data-index="${index}">
+      index === 0 ? " focused" : ""
+    }" data-index="${index}">
       <div class="search-result-icon">
         <i class="ri-file-text-line"></i>
       </div>
       <div class="search-result-content">
         <div class="search-result-title">${highlightMatch(
           item.title,
-          query
+          query,
         )}</div>
         <div class="search-result-path">${item.section}</div>
       </div>
     </a>
-  `
+  `,
     )
     .join("");
 }
@@ -279,7 +280,7 @@ function highlightMatch(text, query) {
   const regex = new RegExp(`(${escapeRegex(query)})`, "gi");
   return text.replace(
     regex,
-    '<mark style="background: rgba(59, 130, 246, 0.3); color: inherit; padding: 0 2px; border-radius: 2px;">$1</mark>'
+    '<mark style="background: rgba(59, 130, 246, 0.3); color: inherit; padding: 0 2px; border-radius: 2px;">$1</mark>',
   );
 }
 
@@ -353,6 +354,41 @@ function initSmoothScroll() {
   });
 }
 
+/**
+ * TOC Active Highlight
+ * Highlights the current section in the sticky TOC as the user scrolls
+ */
+function initTocHighlight() {
+  const tocNav = document.querySelector(".toc-nav");
+  if (!tocNav) return;
+
+  const tocLinks = Array.from(tocNav.querySelectorAll("a[href^='#']"));
+  if (tocLinks.length === 0) return;
+
+  const headings = tocLinks
+    .map((link) => document.querySelector(link.getAttribute("href")))
+    .filter(Boolean);
+
+  function onScroll() {
+    const scrollY = window.scrollY + 80; // offset for sticky header
+    let current = headings[0];
+
+    for (const heading of headings) {
+      if (heading.offsetTop <= scrollY) {
+        current = heading;
+      }
+    }
+
+    tocLinks.forEach((link) => {
+      const isActive = link.getAttribute("href") === "#" + current.id;
+      link.classList.toggle("toc-active", isActive);
+    });
+  }
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  onScroll();
+}
+
 /**
  * Intersection Observer for Animations
  */
@@ -369,7 +405,7 @@ function initAnimations() {
     {
       threshold: 0.1,
       rootMargin: "0px 0px -50px 0px",
-    }
+    },
   );
 
   document
diff --git a/config.toml b/config.toml
index ba74236..e790c04 100644
--- a/config.toml
+++ b/config.toml
@@ -13,6 +13,10 @@ unsafe = true
 style = "github-dark"
 lineNos = false
 codeFences = true
+[markup.tableOfContents]
+startLevel = 2
+endLevel = 3
+ordered = false
 
 [params]
 # Updated modern color palette
diff --git a/content/blog/DSC-is-dead-long-live-dsc.en.md b/content/blog/DSC-is-dead-long-live-dsc.en.md
index e06a674..0e71866 100644
--- a/content/blog/DSC-is-dead-long-live-dsc.en.md
+++ b/content/blog/DSC-is-dead-long-live-dsc.en.md
@@ -1,10 +1,10 @@
 ---
 title: "DSC is Dead"
 date: 2020-05-30T23:00:00+01:00
-type: "post"
 weight: 2
 draft: false
 author: gaelcolas
+dsc_family: "PowerShell DSC"
 ---
 
 Is DSC really dead? In this PSConfEU session, Michael and Gael address the most common questions about Desired State Configuration, its current state, and where the future might be heading with Guest Configuration and Azure Arc.
diff --git a/content/blog/add-codecov-support-to-repository.md b/content/blog/add-codecov-support-to-repository.md
index 3a076dd..e6f9f46 100644
--- a/content/blog/add-codecov-support-to-repository.md
+++ b/content/blog/add-codecov-support-to-repository.md
@@ -1,8 +1,8 @@
 ---
 title: "Add Code Coverage Support to Repository"
 date: 2020-02-03T19:17:35+01:00
-type: "post"
 draft: false
+dsc_family: "Community"
 author: johlju
 ---
 
diff --git a/content/blog/class-based-dsc-resources.md b/content/blog/class-based-dsc-resources.md
index fcc13cd..f84d698 100644
--- a/content/blog/class-based-dsc-resources.md
+++ b/content/blog/class-based-dsc-resources.md
@@ -1,9 +1,9 @@
 ---
 title: "Class Based DSC Resource only proposal"
 date: 2020-10-02T10:00:00+02:00
-type: "post"
 draft: false
 author: gaelcolas
+dsc_family: "PowerShell DSC"
 ---
 
 The PowerShell team announced plans to focus on class-based DSC resources only for PowerShell 7.2+, moving away from MOF/CIM dependencies. This article explains why this is a good direction, addresses common concerns about backward compatibility and testing, and shares the DSC Community's perspective on this change.
diff --git a/content/blog/convert-a-module-for-continuous-delivery.en.md b/content/blog/convert-a-module-for-continuous-delivery.en.md
index 4e95453..268d89a 100644
--- a/content/blog/convert-a-module-for-continuous-delivery.en.md
+++ b/content/blog/convert-a-module-for-continuous-delivery.en.md
@@ -1,8 +1,8 @@
 ---
 title: "Steps to convert a module for continuous delivery"
 date: 2019-12-30
-type: "post"
 draft: false
+dsc_family: "PowerShell DSC"
 author: johlju
 ---
 
diff --git a/content/blog/convert-master-to-main.en.md b/content/blog/convert-master-to-main.en.md
index 13e4598..e61176b 100644
--- a/content/blog/convert-master-to-main.en.md
+++ b/content/blog/convert-master-to-main.en.md
@@ -1,8 +1,8 @@
 ---
 title: "Steps to rename master branch to main for a DSC Community resource"
 date: 2020-12-26
-type: "post"
 draft: false
+dsc_family: "Community"
 author: dscottraynsford
 ---
 
diff --git a/content/blog/convert-tests-to-pester5-for-dsc-community-repository.md b/content/blog/convert-tests-to-pester5-for-dsc-community-repository.md
index 98d576e..2f99e68 100644
--- a/content/blog/convert-tests-to-pester5-for-dsc-community-repository.md
+++ b/content/blog/convert-tests-to-pester5-for-dsc-community-repository.md
@@ -1,8 +1,8 @@
 ---
 title: "Convert tests to Pester 5 for a DSC Community repository"
 date: 2020-12-28T00:00:00+02:00
-type: "post"
 draft: false
+dsc_family: "PowerShell DSC"
 author: johlju
 ---
 
diff --git a/content/blog/converting-tests-to-pester5.md b/content/blog/converting-tests-to-pester5.md
index 590ed4e..cb75332 100644
--- a/content/blog/converting-tests-to-pester5.md
+++ b/content/blog/converting-tests-to-pester5.md
@@ -1,8 +1,8 @@
 ---
 title: "Converting tests to Pester 5"
 date: 2020-05-17T05:00:00+01:00
-type: "post"
 draft: false
+dsc_family: "PowerShell DSC"
 author: johlju
 ---
 
diff --git a/content/blog/create-an-article.en.md b/content/blog/create-an-article.en.md
index 737dc1c..43f7d3b 100644
--- a/content/blog/create-an-article.en.md
+++ b/content/blog/create-an-article.en.md
@@ -1,9 +1,9 @@
 ---
 title: "Create an Article"
 date: 2019-03-08T12:41:48+08:00
-type: "post"
 weight: 1
 draft: false
+dsc_family: "Community"
 ---
 
 Want to contribute a blog post to the DSC Community website? This guide shows you how to create and submit articles using Hugo and the archetypes template system.
diff --git a/content/blog/dsc-maintenance-windows.en.md b/content/blog/dsc-maintenance-windows.en.md
index c8d5e64..2e7cb2f 100644
--- a/content/blog/dsc-maintenance-windows.en.md
+++ b/content/blog/dsc-maintenance-windows.en.md
@@ -1,8 +1,8 @@
 ---
 title: "Realizing maintenance windows with DSC"
 date: 2019-08-08T18:11:05+02:00
-type: "post"
 draft: false
+dsc_family: "PowerShell DSC"
 author: "raandree"
 ---
 
diff --git a/content/blog/how-to-use-dsc-logging.en.md b/content/blog/how-to-use-dsc-logging.en.md
index 4c05152..24eb66c 100644
--- a/content/blog/how-to-use-dsc-logging.en.md
+++ b/content/blog/how-to-use-dsc-logging.en.md
@@ -1,8 +1,8 @@
 ---
 title: "How to Use DSC Logging"
 date: 2019-09-24T16:37:42+02:00
-type: "post"
 draft: false
+dsc_family: "PowerShell DSC"
 author: ykuijs
 ---
 
diff --git a/content/blog/updating-sampler-github-tasks.md b/content/blog/updating-sampler-github-tasks.md
index f0ed75e..55bc30e 100644
--- a/content/blog/updating-sampler-github-tasks.md
+++ b/content/blog/updating-sampler-github-tasks.md
@@ -1,8 +1,8 @@
 ---
 title: "Updating repo with Sampler.GitHubTasks"
 date: 2020-03-09
-type: "post"
 draft: false
+dsc_family: "Community"
 author: gaelcolas
 ---
 
diff --git a/content/blog/use-dscresource-common-functions-in-module.en.md b/content/blog/use-dscresource-common-functions-in-module.en.md
index bea0fda..dd83352 100644
--- a/content/blog/use-dscresource-common-functions-in-module.en.md
+++ b/content/blog/use-dscresource-common-functions-in-module.en.md
@@ -1,8 +1,8 @@
 ---
 title: "DscResource.Common functions in a DSC module"
 date: 2020-01-11T15:45:00+01:00
-type: "post"
 draft: false
+dsc_family: "PowerShell DSC"
 author: johlju
 ---
 
diff --git a/content/blog/what-is-microsoft-dscv3.md b/content/blog/what-is-microsoft-dscv3.md
index f12e301..fc6c636 100644
--- a/content/blog/what-is-microsoft-dscv3.md
+++ b/content/blog/what-is-microsoft-dscv3.md
@@ -1,9 +1,9 @@
 ---
 title: "What is Microsoft DSC v3"
 date: 2025-07-30T00:00:00+01:00
-type: "post"
 draft: false
 author: johlju
+dsc_family: "Microsoft DSC"
 ---
 
 > Microsoft DSC v3 is a simple, single executable tool that helps you declare and enforce the desired state of your systems in a cross-platform way.
diff --git a/content/blog/your-first-class-based-microsoft-dsc-v3-resource.md b/content/blog/your-first-class-based-microsoft-dsc-v3-resource.md
index ff3a288..459b864 100644
--- a/content/blog/your-first-class-based-microsoft-dsc-v3-resource.md
+++ b/content/blog/your-first-class-based-microsoft-dsc-v3-resource.md
@@ -1,8 +1,8 @@
 ---
 title: "Your first class-based Microsoft DSC v3 resource"
 date: 2025-07-28T00:00:00+01:00
-type: "post"
 draft: false
+dsc_family: "Microsoft DSC"
 author: johlju
 ---
 
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 5a32920..6f6a401 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -17,54 +17,133 @@ <h1 class="hero-title">Blog Posts</h1>
   </div>
 </section>
 
-<!-- Blog Grid -->
+<!-- Blog Sections -->
 <section class="section">
   <div class="container">
-    <!-- Filter Tags -->
-    <div style="display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); justify-content: center;">
-      <a href="/blog" class="tag" style="background: var(--color-primary); color: white;">All Posts</a>
-      {{ $allTags := slice }}
-      {{ range .Data.Pages }}
-        {{ with .Params.tags }}
-          {{ range . }}
-            {{ if not (in $allTags .) }}
-              {{ $allTags = $allTags | append . }}
+
+    {{ $allPages := .Data.Pages.ByDate.Reverse }}
+    {{ $msftPages := where $allPages ".Params.dsc_family" "Microsoft DSC" }}
+    {{ $psPages := where $allPages ".Params.dsc_family" "PowerShell DSC" }}
+    {{ $communityPages := where $allPages ".Params.dsc_family" "Community" }}
+    {{ $uncategorized := where $allPages ".Params.dsc_family" "" }}
+
+    <!-- Microsoft DSC Section -->
+    {{ if gt (len $msftPages) 0 }}
+    <div class="blog-section" style="margin-bottom: var(--space-16);">
+      <div class="blog-section-header">
+        <span class="blog-section-icon" style="background: linear-gradient(135deg, #0078d4 0%, #00bcf2 100%);">
+          <i class="ri-microsoft-line"></i>
+        </span>
+        <div>
+          <h2 class="blog-section-title">Microsoft DSC</h2>
+          <p class="blog-section-description">Articles about Microsoft's cross-platform DSC (v3) tool</p>
+        </div>
+      </div>
+      <div class="grid-auto stagger">
+        {{ range $msftPages }}
+        <a href="{{ .Permalink }}" class="card blog-card card-link">
+          <div class="blog-card-meta">
+            <span class="blog-card-tag" style="background: rgba(0,120,212,0.1); color: #0078d4;">Microsoft DSC</span>
+            <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
+          </div>
+          <h3 class="blog-card-title">{{ .Title }}</h3>
+          <p class="blog-card-excerpt">{{ .Summary | truncate 150 }}</p>
+          <div style="margin-top: auto;">
+            {{ if .ReadingTime }}
+            <span style="font-size: var(--text-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-1);">
+              <i class="ri-time-line"></i>
+              {{ .ReadingTime }} min read
+            </span>
             {{ end }}
-          {{ end }}
+            <span class="blog-card-read-more">
+              Read article
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            </span>
+          </div>
+        </a>
         {{ end }}
-      {{ end }}
-      {{ range $allTags }}
-      <a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
-      {{ end }}
+      </div>
     </div>
+    {{ end }}
 
-    <!-- Blog Posts Grid -->
-    <div class="grid-auto stagger">
-      {{ range .Data.Pages.ByDate.Reverse }}
-      <a href="{{ .Permalink }}" class="card blog-card card-link">
-        <div class="blog-card-meta">
-          <span class="blog-card-tag">
-            {{ with .Params.category }}{{ . }}{{ else }}Article{{ end }}
-          </span>
-          <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
+    <!-- PowerShell DSC Section -->
+    {{ if gt (len $psPages) 0 }}
+    <div class="blog-section" style="margin-bottom: var(--space-16);">
+      <div class="blog-section-header">
+        <span class="blog-section-icon" style="background: linear-gradient(135deg, #012456 0%, #00adef 100%);">
+          <i class="ri-terminal-box-line"></i>
+        </span>
+        <div>
+          <h2 class="blog-section-title">PowerShell DSC</h2>
+          <p class="blog-section-description">Articles covering PowerShell Desired State Configuration</p>
         </div>
-        <h3 class="blog-card-title">{{ .Title }}</h3>
-        <p class="blog-card-excerpt">{{ .Summary | truncate 150 }}</p>
-        <div style="margin-top: auto;">
-          {{ if .ReadingTime }}
-          <span style="font-size: var(--text-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-1);">
-            <i class="ri-time-line"></i>
-            {{ .ReadingTime }} min read
-          </span>
-          {{ end }}
-          <span class="blog-card-read-more">
-            Read article
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
-          </span>
+      </div>
+      <div class="grid-auto stagger">
+        {{ range $psPages }}
+        <a href="{{ .Permalink }}" class="card blog-card card-link">
+          <div class="blog-card-meta">
+            <span class="blog-card-tag" style="background: rgba(0,173,239,0.1); color: #00adef;">PowerShell DSC</span>
+            <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
+          </div>
+          <h3 class="blog-card-title">{{ .Title }}</h3>
+          <p class="blog-card-excerpt">{{ .Summary | truncate 150 }}</p>
+          <div style="margin-top: auto;">
+            {{ if .ReadingTime }}
+            <span style="font-size: var(--text-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-1);">
+              <i class="ri-time-line"></i>
+              {{ .ReadingTime }} min read
+            </span>
+            {{ end }}
+            <span class="blog-card-read-more">
+              Read article
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            </span>
+          </div>
+        </a>
+        {{ end }}
+      </div>
+    </div>
+    {{ end }}
+
+    <!-- Community Section -->
+    {{ $generalPages := $communityPages | append $uncategorized }}
+    {{ if gt (len $generalPages) 0 }}
+    <div class="blog-section" style="margin-bottom: var(--space-16);">
+      <div class="blog-section-header">
+        <span class="blog-section-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);">
+          <i class="ri-community-line"></i>
+        </span>
+        <div>
+          <h2 class="blog-section-title">Community</h2>
+          <p class="blog-section-description">News, guides, and how-tos from the DSC Community</p>
         </div>
-      </a>
-      {{ end }}
+      </div>
+      <div class="grid-auto stagger">
+        {{ range $generalPages }}
+        <a href="{{ .Permalink }}" class="card blog-card card-link">
+          <div class="blog-card-meta">
+            <span class="blog-card-tag">Community</span>
+            <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
+          </div>
+          <h3 class="blog-card-title">{{ .Title }}</h3>
+          <p class="blog-card-excerpt">{{ .Summary | truncate 150 }}</p>
+          <div style="margin-top: auto;">
+            {{ if .ReadingTime }}
+            <span style="font-size: var(--text-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-1);">
+              <i class="ri-time-line"></i>
+              {{ .ReadingTime }} min read
+            </span>
+            {{ end }}
+            <span class="blog-card-read-more">
+              Read article
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            </span>
+          </div>
+        </a>
+        {{ end }}
+      </div>
     </div>
+    {{ end }}
 
     <!-- Empty State -->
     {{ if eq (len .Data.Pages) 0 }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index ebcbe78..6d75825 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -2,14 +2,20 @@
 
 <!-- Article Header -->
 <article class="blog-article">
-  <header class="article-header" style="background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); padding: var(--space-16) 0;">
-    <div class="container" style="max-width: 900px;">
-      <a href="/blog" class="btn btn-ghost" style="margin-bottom: var(--space-6);">
+  <header class="article-header" style="background: var(--gradient-hero); padding: var(--space-16) 0; position: relative; overflow: hidden;">
+    <div class="hero-grid"></div>
+    <div class="container" style="max-width: 1100px; position: relative;">
+      <a href="/blog" class="btn btn-ghost" style="margin-bottom: var(--space-6); color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.2);">
         <i class="ri-arrow-left-line"></i>
         Back to Blog
       </a>
 
-      <!-- Categories -->
+      <!-- Category badge -->
+      {{ with .Params.dsc_family }}
+      <div style="display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4);">
+        <span class="badge badge-primary">{{ . }}</span>
+      </div>
+      {{ else }}
       {{ with .Params.categories }}
       <div style="display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4);">
         {{ range . }}
@@ -17,21 +23,22 @@
         {{ end }}
       </div>
       {{ end }}
+      {{ end }}
 
-      <h1 style="font-size: var(--text-4xl); line-height: 1.2; margin-bottom: var(--space-6); max-width: 800px;">
+      <h1 style="font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); line-height: 1.2; margin-bottom: var(--space-6); max-width: 800px; color: #ffffff;">
         {{ .Title }}
       </h1>
 
       <!-- Meta -->
-      <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); color: var(--text-secondary); font-size: var(--text-sm);">
+      <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); color: rgba(255,255,255,0.65); font-size: var(--text-sm);">
         {{ with .Params.author }}
         <div style="display: flex; align-items: center; gap: var(--space-2);">
-          <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">
+          <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-accent); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; text-transform: uppercase; font-size: var(--text-sm); flex-shrink: 0;">
             {{ substr . 0 1 }}
           </div>
           <div>
-            <div style="color: var(--text-primary); font-weight: 500;">{{ . }}</div>
-            <div style="font-size: var(--text-xs);">Author</div>
+            <div style="color: rgba(255,255,255,0.9); font-weight: 500;">{{ . }}</div>
+            <div style="font-size: var(--text-xs); color: rgba(255,255,255,0.5);">Author</div>
           </div>
         </div>
         {{ end }}
@@ -51,69 +58,68 @@ <h1 style="font-size: var(--text-4xl); line-height: 1.2; margin-bottom: var(--sp
     </div>
   </header>
 
-  <!-- Article Content -->
-  <div class="container" style="max-width: 900px; padding-top: var(--space-12); padding-bottom: var(--space-16);">
-    <div class="article-content">
-      {{ .Content }}
-    </div>
+  <!-- Article Content + TOC -->
+  <div class="container" style="max-width: 1100px; padding-top: var(--space-12); padding-bottom: var(--space-16);">
+    <div class="article-with-toc">
 
-    <!-- Tags -->
-    {{ with .Params.tags }}
-    <div style="margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-primary);">
-      <h4 style="font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-3);">Tags</h4>
-      <div style="display: flex; flex-wrap: wrap; gap: var(--space-2);">
-        {{ range . }}
-        <a href="/tags/{{ . | urlize }}" class="badge" style="text-decoration: none;">
-          {{ . }}
-        </a>
-        {{ end }}
-      </div>
-    </div>
-    {{ end }}
+      <!-- Main Content -->
+      <div class="article-body">
+        <div class="article-content">
+          {{ .Content }}
+        </div>
 
-    <!-- Share Section -->
-    <div style="margin-top: var(--space-8); padding: var(--space-6); background: var(--bg-secondary); border-radius: var(--radius-xl); border: 1px solid var(--border-primary);">
-      <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);">
-        <div>
-          <h4 style="margin-bottom: var(--space-1);">Share this article</h4>
-          <p style="color: var(--text-secondary); font-size: var(--text-sm);">Help spread the word about DSC Community!</p>
+        <!-- Tags -->
+        {{ with .Params.tags }}
+        <div style="margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-color);">
+          <h4 style="font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-3);">Tags</h4>
+          <div style="display: flex; flex-wrap: wrap; gap: var(--space-2);">
+            {{ range . }}
+            <a href="/tags/{{ . | urlize }}" class="badge" style="text-decoration: none;">
+              {{ . }}
+            </a>
+            {{ end }}
+          </div>
         </div>
-        <div style="display: flex; gap: var(--space-2);">
-          <a href="https://twitter.com/intent/tweet?text={{ .Title | urlquery }}&url={{ .Permalink | urlquery }}" target="_blank" rel="noopener" class="btn btn-ghost" style="padding: var(--space-2);" title="Share on Twitter">
-            <i class="ri-twitter-x-line" style="font-size: 1.25rem;"></i>
-          </a>
-          <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink | urlquery }}&title={{ .Title | urlquery }}" target="_blank" rel="noopener" class="btn btn-ghost" style="padding: var(--space-2);" title="Share on LinkedIn">
-            <i class="ri-linkedin-line" style="font-size: 1.25rem;"></i>
-          </a>
-          <a href="https://www.reddit.com/submit?url={{ .Permalink | urlquery }}&title={{ .Title | urlquery }}" target="_blank" rel="noopener" class="btn btn-ghost" style="padding: var(--space-2);" title="Share on Reddit">
-            <i class="ri-reddit-line" style="font-size: 1.25rem;"></i>
-          </a>
+        {{ end }}
+
+        <!-- Share Section -->
+        <div style="margin-top: var(--space-8); padding: var(--space-6); background: var(--bg-secondary); border-radius: var(--radius-xl); border: 1px solid var(--border-color);">
+          <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);">
+            <div>
+              <h4 style="margin-bottom: var(--space-1);">Share this article</h4>
+              <p style="color: var(--text-secondary); font-size: var(--text-sm);">Help spread the word about DSC Community!</p>
+            </div>
+            <div style="display: flex; gap: var(--space-2);">
+              <a href="https://twitter.com/intent/tweet?text={{ .Title | urlquery }}&url={{ .Permalink | urlquery }}" target="_blank" rel="noopener" class="btn btn-ghost" style="padding: var(--space-2);" title="Share on Twitter">
+                <i class="ri-twitter-x-line" style="font-size: 1.25rem;"></i>
+              </a>
+              <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink | urlquery }}&title={{ .Title | urlquery }}" target="_blank" rel="noopener" class="btn btn-ghost" style="padding: var(--space-2);" title="Share on LinkedIn">
+                <i class="ri-linkedin-line" style="font-size: 1.25rem;"></i>
+              </a>
+              <a href="https://www.reddit.com/submit?url={{ .Permalink | urlquery }}&title={{ .Title | urlquery }}" target="_blank" rel="noopener" class="btn btn-ghost" style="padding: var(--space-2);" title="Share on Reddit">
+                <i class="ri-reddit-line" style="font-size: 1.25rem;"></i>
+              </a>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- Navigation -->
-    <nav style="margin-top: var(--space-12); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);">
-      {{ with .PrevInSection }}
-      <a href="{{ .Permalink }}" style="text-decoration: none; padding: var(--space-5); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); transition: all 0.2s ease;">
-        <span style="display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-1);">
-          <i class="ri-arrow-left-line"></i> Previous
-        </span>
-        <span style="color: var(--text-primary); font-weight: 500;">{{ .Title | truncate 50 }}</span>
-      </a>
-      {{ else }}
-      <div></div>
+      <!-- Right TOC Sidebar -->
+      {{ if .TableOfContents }}
+      <aside class="article-toc">
+        <div class="toc-sticky">
+          <h4 class="toc-heading">
+            <i class="ri-list-unordered"></i>
+            On this page
+          </h4>
+          <nav class="toc-nav">
+            {{ .TableOfContents }}
+          </nav>
+        </div>
+      </aside>
       {{ end }}
 
-      {{ with .NextInSection }}
-      <a href="{{ .Permalink }}" style="text-decoration: none; padding: var(--space-5); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); text-align: right; transition: all 0.2s ease;">
-        <span style="display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-1);">
-          Next <i class="ri-arrow-right-line"></i>
-        </span>
-        <span style="color: var(--text-primary); font-weight: 500;">{{ .Title | truncate 50 }}</span>
-      </a>
-      {{ end }}
-    </nav>
+    </div>
   </div>
 </article>