diff --git a/assets/scss/components/_wompum.scss b/assets/scss/components/_wompum.scss
index af3fd8f..269037c 100644
--- a/assets/scss/components/_wompum.scss
+++ b/assets/scss/components/_wompum.scss
@@ -2,69 +2,44 @@
     &-container {
         width: 100%;
         margin: 0 auto;
+
+        & .wompum-grid,
+        & .wompum-article-grid {
+            gap: 2px;
+        }
+
+        &--wide-gap .wompum-grid,
+        &--wide-gap .wompum-article-grid {
+            gap: 1rem;
+        }
+
+        &--no-gap .wompum-grid,
+        &--no-gap .wompum-article-grid {
+            gap: 0;
+        }
     }
 
     &-grid,
     &-article-grid {
         display: grid;
-        gap: 0;
-        padding: 0;
         width: 100%;
     }
 
-    // General grid styles
-    &-grid {
-        gap: 2px; // Tighter spacing for general grids
-        
-        &[data-rows="1"] {
-            .wompum-cell {
-                height: 100%;
-            }
-        }
-    }
-
-    // Article grid styles
-    &-article-grid {
-        gap: 3px; // Wider spacing for article grids
-
-        .single-default &,
-        .single-article & {
-            gap: 1rem;
-        }
-    }
-
     &-cell {
         width: 100%;
         transition: background-color 0.3s ease;
-
-        // Default background for uninitialized cells
         background-color: var(--sand-500);
 
-        // Different styling for cells in article grids
-        .wompum-article-grid & {
-            &[data-section="narrator"] {
-                min-height: 35px;
-            }
-            &[data-section="subject"] {
-                min-height: 40px;
-            }
-            &[data-section="facilitator"] {
-                min-height: 35px;
-            }
+        &--narrator {
+            min-height: 35px;
         }
 
-        // Fallback patterns using prime numbers
-        // (these will be overridden by JS-generated colors when initialized)
-        &:nth-child(7n+1) {
-            background-color: var(--sand-100);
+        &--subject {
+            min-height: 40px;
         }
 
-        &:nth-child(5n+2) {
-            background-color: var(--sand-900);
-        }
-
-        &:nth-child(11n+3) {
-            background-color: var(--sand-500);
+        &--facilitator {
+            min-height: 35px;
         }
     }
 }
diff --git a/content/about.md b/content/about.md
index c9bb6b6..2a408e2 100644
--- a/content/about.md
+++ b/content/about.md
@@ -1,5 +1,6 @@
 ---
 title: "About"
+wompum: "About The Protocol Oral History Project"
 include_partials: ["facilitator-list.html","wompum-demo.html"]
 ---
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7af53b1..646d6fc 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,8 +1,10 @@
 {{ define "main" }}
     <article class="single-default">
-      <header class="mb-4">{{ partial "article-wompum.html" . }}</header>
+      <header class="mb-8 wompum-container wompum-container--wide-gap">
+        <div class="wompum-grid h-96" data-text="{{ .Params.wompum | default .Title }}" data-columns="7" data-rows="5"></div>
+      </header>
 
-      <div class="prose lg:prose-xl p-4 mx-auto">
+      <div class="prose lg:prose-xl p-4 mx-auto mt-4">
         <p class="font-bold text-6xl">{{ .Title }}</p>
         {{ .Content }}
         
diff --git a/layouts/articles/single.html b/layouts/articles/single.html
index f79ce82..95bfa6b 100644
--- a/layouts/articles/single.html
+++ b/layouts/articles/single.html
@@ -2,9 +2,9 @@
     
     <article class="single-article">
 
-      <header class="mb-4">{{ partial "article-wompum.html" . }}</header>
+      <header class="mb-4 wompum-container wompum-container--wide-gap">{{ partial "article-wompum.html" . }}</header>
 
-      <div class="flex gap-4">
+      <div class="flex gap-4 mt-4">
         <aside class="lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:w-1/3 p-4 font-iosevka">
           {{ if .Params.headshot }}
           <div class="narrator__container w-48 mb-2" data-text="{{ .Params.narrator }}">
diff --git a/layouts/partials/article-list.html b/layouts/partials/article-list.html
index 24039ea..d03f9f8 100644
--- a/layouts/partials/article-list.html
+++ b/layouts/partials/article-list.html
@@ -5,7 +5,7 @@
     {{- $page = .page -}}
 {{- end -}}
 <li class="flex gap-4 items-center">
-  <a class="flex-1 min-w-0" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
+  <a class="flex-1 min-w-0 wompum-container" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
   <time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
     <p>{{ $page.Date.Format "Jan" }}</p>
     <p>{{ $page.Date.Format "02" }}</p>
diff --git a/layouts/partials/article-wompum.html b/layouts/partials/article-wompum.html
index e33b8fa..7efdaa4 100644
--- a/layouts/partials/article-wompum.html
+++ b/layouts/partials/article-wompum.html
@@ -1,7 +1,5 @@
-<div class="wompum-container">
-  <div class="wompum-article-grid"
-       data-metadata="{{ dict "narrator" .Params.narrator "subject" .Params.subject "facilitator" .Params.facilitator | jsonify }}"
-       data-columns="7"
-       data-rows="5">
-  </div>
+<div class="wompum-article-grid"
+     data-metadata="{{ dict "narrator" .Params.narrator "subject" .Params.subject "facilitator" .Params.facilitator | jsonify }}"
+     data-columns="7"
+     data-rows="5">
 </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 8b3212f..59f425c 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -15,8 +15,8 @@
       </ul>
     </nav>
   </div>
-  <div class="wompum-container">
-    <div class="wompum-grid h-2"
+  <div class="wompum-container wompum-container--wide-gap px-4">
+    <div class="wompum-grid h-1"
          data-text="{{ .Site.Title }}"
          data-columns="7"
          data-rows="1">
diff --git a/static/js/wompum.js b/static/js/wompum.js
index 5369d40..419adc4 100644
--- a/static/js/wompum.js
+++ b/static/js/wompum.js
@@ -137,7 +137,8 @@ class ArticleGrid extends WompumGrid {
             else if (column >= this.gridSize.columns - facilitatorColumns) section = 'facilitator';
             else section = 'subject';
             
-            cell.className = 'wompum-cell';
+            // Use BEM modifiers for sections
+            cell.className = `wompum-cell wompum-cell--${section}`;
             cell.setAttribute('data-cell-index', i);
             cell.setAttribute('data-section', section);
             cell.setAttribute('data-column', column);