diff --git a/web/static/css/c64.css b/web/static/css/c64.css
index 1737690..99744e9 100644
--- a/web/static/css/c64.css
+++ b/web/static/css/c64.css
@@ -150,6 +150,22 @@ body {
   min-height: 0;
 }
 
+.c64-grid.has-expanded-window {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.c64-grid.has-expanded-window > .c64-quadrant:not(.window-expanded),
+.c64-grid.has-expanded-window > #source-viewer:not(.window-expanded) {
+  display: none;
+}
+
+.c64-grid.has-expanded-window > .c64-quadrant.window-expanded {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  min-height: 0;
+}
+
 /* ── QUADRANTS ── */
 .c64-quadrant {
   border: 2px solid var(--c64-border);
@@ -515,6 +531,7 @@ ol li::before {
 /* ── TABS (ABOUT / FAQ) ── */
 .tab-bar {
   display: flex;
+  align-items: flex-end;
   gap: 4px;
   margin-bottom: 12px;
   border-bottom: 1px solid var(--c64-border);
@@ -547,6 +564,28 @@ ol li::before {
   content: '> ';
 }
 
+.window-toggle-btn {
+  font-family: var(--font);
+  font-size: 0.8rem;
+  line-height: 1;
+  color: var(--c64-bg);
+  background: var(--c64-text);
+  border: 1px solid var(--c64-border);
+  border-bottom: none;
+  width: 2rem;
+  min-width: 2rem;
+  padding: 6px 0;
+  cursor: pointer;
+  margin-left: auto;
+  margin-bottom: -1px;
+}
+
+.window-toggle-btn:hover,
+.window-toggle-btn:focus {
+  background: var(--c64-white);
+  outline: none;
+}
+
 .tab-panel { display: none; }
 .tab-panel.visible { display: block; }
 
@@ -620,6 +659,14 @@ ol li::before {
     grid-template-rows: auto;
   }
 
+  .c64-grid.has-expanded-window {
+    display: block;
+  }
+
+  .c64-grid.has-expanded-window > .c64-quadrant.window-expanded {
+    min-height: calc(100vh - 180px);
+  }
+
   .c64-quadrant {
     overflow-y: visible;
     overflow-x: hidden;
diff --git a/web/templates/index.html b/web/templates/index.html
index 000cc4e..1db4c36 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -262,6 +262,10 @@ <h3>&gt; HOW TO PARTICIPATE</h3>
 {% block scripts %}
 <script src="{{ get_url(path='js/puzzle.js') }}"></script>
 <script>
+  const grid = document.querySelector('.c64-grid');
+  const windowPanels = Array.from(document.querySelectorAll('.c64-quadrant'));
+  let expandedWindow = null;
+
   const fallbackCopyText = (value) => {
     const input = document.createElement('input');
     input.value = value;
@@ -274,6 +278,65 @@ <h3>&gt; HOW TO PARTICIPATE</h3>
     document.body.removeChild(input);
   };
 
+  function getWindowLabel(panel) {
+    const activeTab = panel?.querySelector('.tab-btn.active');
+    return (activeTab?.textContent || panel?.id || 'WINDOW').trim();
+  }
+
+  function updateWindowToggle(button, expanded) {
+    const label = getWindowLabel(button.closest('.c64-quadrant'));
+    button.textContent = expanded ? '-' : '+';
+    button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+    button.setAttribute('aria-label', (expanded ? 'Collapse ' : 'Expand ') + label + ' window');
+  }
+
+  function collapseExpandedWindow() {
+    if (!expandedWindow || !grid) return;
+
+    const button = expandedWindow.querySelector('[data-window-toggle]');
+    expandedWindow.classList.remove('window-expanded');
+    grid.classList.remove('has-expanded-window');
+    expandedWindow = null;
+
+    if (button) updateWindowToggle(button, false);
+  }
+
+  function expandWindow(panel) {
+    if (!panel || !grid) return;
+
+    if (expandedWindow === panel) {
+      collapseExpandedWindow();
+      return;
+    }
+
+    collapseExpandedWindow();
+    expandedWindow = panel;
+    panel.classList.add('window-expanded');
+    grid.classList.add('has-expanded-window');
+
+    const button = panel.querySelector('[data-window-toggle]');
+    if (button) updateWindowToggle(button, true);
+  }
+
+  windowPanels.forEach((panel) => {
+    const tabBar = panel.querySelector('.tab-bar');
+    if (!tabBar) return;
+
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'window-toggle-btn';
+    button.dataset.windowToggle = '';
+    updateWindowToggle(button, false);
+    button.addEventListener('click', () => expandWindow(panel));
+    tabBar.appendChild(button);
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && expandedWindow) {
+      collapseExpandedWindow();
+    }
+  });
+
   // Render fields and implementations below the code block
   function renderDocDetails(viewer, symbolPath) {
     const index = window.FE_DOC_INDEX;
@@ -424,12 +487,15 @@ <h3>&gt; HOW TO PARTICIPATE</h3>
       btn.classList.add('active');
       document.querySelectorAll('#about .tab-panel').forEach(p => p.classList.remove('visible'));
       document.getElementById(btn.dataset.tab).classList.add('visible');
+      const toggle = document.querySelector('#about [data-window-toggle]');
+      if (toggle) updateWindowToggle(toggle, expandedWindow?.id === 'about');
     });
   });
 
   // ── FAQ links (footer + about text) ──
   function switchToFaq(e) {
     e.preventDefault();
+    collapseExpandedWindow();
     const faqTab = document.querySelector('#about .tab-btn[data-tab="faq-content"]');
     if (faqTab) faqTab.click();
     document.getElementById('about').scrollIntoView({ behavior: 'smooth' });