diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index c44df7f..e61a33d 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -17,6 +17,9 @@ export default defineConfig({
         title: 'PolyBoard',
         description: 'Custom firmware for Launchpad Pro',
         customCss: ['./src/styles/custom.css'],
+        components: {
+            SiteTitle: './src/components/SiteTitle.astro',
+        },
         social: [
             { icon: 'github', label: 'GitHub', href: 'https://github.com/b4nst/PolyBoard' },
         ],
@@ -37,16 +40,16 @@ export default defineConfig({
             {
                 label: 'Reference',
                 collapsed: true,
-                autogenerate: { directory: 'reference' }
+                items: [
+                    { label: 'Releases', link: '/reference/releases' },
+                    'reference/button-layout',
+                    'reference/faq',
+                ]
             },
             {
                 label: 'Development',
                 collapsed: true,
                 autogenerate: { directory: 'development' }
-            },
-            {
-                label: 'Releases',
-                link: '/releases',
             }
         ],
     })],
diff --git a/docs/src/components/Btn.astro b/docs/src/components/Btn.astro
index 5fdaadb..54c562b 100644
--- a/docs/src/components/Btn.astro
+++ b/docs/src/components/Btn.astro
@@ -12,23 +12,35 @@ const { name, showLabel = true } = Astro.props;
 const buttonIcons: Record<string, string> = {
   'oct-up': 'up-caret',
   'oct-down': 'down-caret',
+  'transpose-up': 'right-caret',
+  'transpose-down': 'left-caret',
   'page-1': '',
   'page-2': '',
   'page-3': '',
   'page-4': '',
+  'interval-1': '',
+  'interval-2': '',
+  'interval-3': '',
+  'interval-4': '',
   'circle': 'approve-check-circle',
   'double': 'list-format',
-  'quantise': 'random',
+  'quantise': 'bars',
   'shift': 'rocket',
 };
 
 const buttonLabels: Record<string, string> = {
   'oct-up': '',
   'oct-down': '',
+  'transpose-up': '',
+  'transpose-down': '',
   'page-1': '1',
   'page-2': '2',
   'page-3': '3',
   'page-4': '4',
+  'interval-1': '1',
+  'interval-2': '2',
+  'interval-3': '3',
+  'interval-4': '4',
   'circle': '',
   'double': '',
   'quantise': '',
@@ -38,25 +50,31 @@ const buttonLabels: Record<string, string> = {
 const buttonColors: Record<string, string> = {
   'oct-up': '#3c3c3c',
   'oct-down': '#3c3c3c',
-  'page-1': '#ffffff',
+  'transpose-up': '#3c3c3c',
+  'transpose-down': '#3c3c3c',
+  'page-1': '#ff7f00',
   'page-2': '#3c3c3c',
   'page-3': '#3c3c3c',
   'page-4': '#3c3c3c',
+  'interval-1': '#3c3c3c',
+  'interval-2': '#3c3c3c',
+  'interval-3': '#ff00ff',
+  'interval-4': '#3c3c3c',
   'circle': '#3c3c3c',
   'double': '#3c3c3c',
-  'quantise': '#ffffff',
+  'quantise': '#3c3c3c',
   'shift': '#3c3c3c',
 };
 
-const isRound = ['oct-up', 'oct-down', 'circle', 'double', 'quantise', 'shift'].includes(name);
+const isRound = ['oct-up', 'oct-down', 'transpose-up', 'transpose-down', 'page-1', 'page-2', 'page-3', 'page-4', 'interval-1', 'interval-2', 'interval-3', 'interval-4', 'circle', 'double', 'quantise', 'shift'].includes(name);
 const icon = buttonIcons[name];
 const label = buttonLabels[name];
 const bgColor = buttonColors[name] || '#3c3c3c';
 ---
 
 <span class:list={['btn', { round: isRound }]} style={`background-color: ${bgColor};`}>
-  {icon && showLabel && <Icon name={icon as any} size="0.9em" />}
-  {label && showLabel && <span class="label">{label}</span>}
+  {icon && <Icon name={icon as any} size="0.9em" />}
+  {label && (showLabel || !icon) && <span class="label">{label}</span>}
 </span>
 
 <style>
diff --git a/docs/src/components/LaunchpadGrid.astro b/docs/src/components/LaunchpadGrid.astro
index 599b9cb..88bc31b 100644
--- a/docs/src/components/LaunchpadGrid.astro
+++ b/docs/src/components/LaunchpadGrid.astro
@@ -2,7 +2,7 @@
 import { Icon } from '@astrojs/starlight/components';
 
 interface Props {
-  variant?: 'full' | 'circle-of-fifths' | 'scales';
+  variant?: 'full' | 'circle-of-fifths' | 'scales' | 'setup' | 'indices' | 'logo';
 }
 
 const { variant = 'full' } = Astro.props;
@@ -14,7 +14,7 @@ const COLOR_CHROMATIC = '#3c3c3c';
 const COLOR_BLACK = '#1a1a1a';
 const COLOR_SELECTED = '#ff00ff';
 const COLOR_OPTION = '#003c3c';
-const COLOR_PAGE_ACTIVE = '#ffffff';
+const COLOR_PAGE_ACTIVE = '#ff7f00'; // Orange for active page
 const COLOR_PAGE_INACTIVE = '#3c3c3c';
 const COLOR_CTRL_HINT = '#3c3c3c';
 const COLOR_WHITE = '#ffffff';
@@ -74,14 +74,15 @@ function isRoot(semitone: number): boolean {
   return (semitone % 12) === 0;
 }
 
-type CellType = 'grid' | 'control' | 'empty';
-type IconName = 'up-caret' | 'down-caret' | 'approve-check-circle' | 'list-format' | 'random' | 'rocket';
+type CellType = 'grid' | 'control' | 'empty' | 'setup';
+type IconName = 'up-caret' | 'down-caret' | 'left-caret' | 'right-caret' | 'approve-check-circle' | 'list-format' | 'bars' | 'rocket';
 
 interface Cell {
   color: string;
   label?: string;
   icon?: IconName;
   type: CellType;
+  darkIcon?: boolean; // Use dark icon color for bright backgrounds
 }
 
 function getGridData(): Cell[][] {
@@ -96,12 +97,21 @@ function getGridData(): Cell[][] {
       const isBottomRow = row === 0;
       const isLeftCol = col === 0;
       const isRightCol = col === 9;
-      const isControl = isTopRow || isBottomRow || isLeftCol || isRightCol;
+      const isCorner = (isTopRow || isBottomRow) && (isLeftCol || isRightCol);
+      const isControl = (isTopRow || isBottomRow || isLeftCol || isRightCol) && !isCorner;
 
-      grid[row][col] = {
-        color: COLOR_BLACK,
-        type: isControl ? 'control' : 'grid'
-      };
+      // Top-left corner is the setup button (small dark circle)
+      if (row === 9 && col === 0) {
+        grid[row][col] = { color: COLOR_BLACK, type: 'setup' };
+      } else if (isCorner) {
+        // Other corners are empty space
+        grid[row][col] = { color: 'transparent', type: 'empty' };
+      } else {
+        grid[row][col] = {
+          color: COLOR_BLACK,
+          type: isControl ? 'control' : 'grid'
+        };
+      }
     }
   }
 
@@ -128,6 +138,110 @@ function getGridData(): Cell[][] {
     }
     // Double button lit
     grid[2][0] = { color: COLOR_SELECTED, icon: 'list-format', type: 'control' };
+  } else if (variant === 'logo') {
+    // Boot logo: P (cyan) and B (magenta)
+    const COLOR_CYAN = '#00ffff';
+    const COLOR_MAGENTA = '#ff00ff';
+    const COLOR_DIM_WHITE = '#3c3c3c';
+
+    // Logo indices from layout.h
+    const LOGO_B = [25, 26, 35, 37, 46, 47, 57]; // Magenta
+    const LOGO_P = [42, 52, 53, 62, 64, 73, 74]; // Cyan
+
+    for (let row = 0; row < 10; row++) {
+      for (let col = 0; col < 10; col++) {
+        const index = row * 10 + col;
+        const isCorner = (row === 0 || row === 9) && (col === 0 || col === 9);
+        const isControl = row === 0 || row === 9 || col === 0 || col === 9;
+
+        let color = COLOR_DIM_WHITE;
+        if (LOGO_B.includes(index)) {
+          color = COLOR_MAGENTA;
+        } else if (LOGO_P.includes(index)) {
+          color = COLOR_CYAN;
+        }
+
+        if (row === 9 && col === 0) {
+          grid[row][col] = { color: COLOR_DIM_WHITE, type: 'setup' };
+        } else if (isCorner) {
+          grid[row][col] = { color: 'transparent', type: 'empty' };
+        } else if (isControl) {
+          grid[row][col] = { color: COLOR_DIM_WHITE, type: 'control' };
+        } else {
+          grid[row][col] = { color, type: 'grid' };
+        }
+      }
+    }
+  } else if (variant === 'indices') {
+    // Button indices reference grid
+    const COLOR_PAD = '#3c3c3c';
+    const COLOR_CTRL = '#2a4a5a';
+    const COLOR_VIRTUAL = '#1a1a1a';
+
+    for (let row = 0; row < 10; row++) {
+      for (let col = 0; col < 10; col++) {
+        const index = row * 10 + col;
+        const isCorner = (row === 0 || row === 9) && (col === 0 || col === 9);
+        const isControl = row === 0 || row === 9 || col === 0 || col === 9;
+
+        if (row === 9 && col === 0) {
+          // Setup button
+          grid[row][col] = { color: COLOR_CTRL, label: '90', type: 'setup' };
+        } else if (isCorner) {
+          // Virtual indices (no physical button)
+          grid[row][col] = { color: COLOR_VIRTUAL, label: String(index), type: 'empty' };
+        } else if (isControl) {
+          grid[row][col] = { color: COLOR_CTRL, label: String(index), type: 'control' };
+        } else {
+          grid[row][col] = { color: COLOR_PAD, label: String(index), type: 'grid' };
+        }
+      }
+    }
+  } else if (variant === 'setup') {
+    // Setup mode grid
+    const COLOR_CYAN = '#00ffff';
+    const COLOR_DIM = '#003c3c';
+
+    // Setup button lit white
+    grid[9][0] = { color: COLOR_WHITE, type: 'setup' };
+
+    // Row 1 (pads 11-18): MIDI Channels 1-8
+    for (let col = 1; col <= 8; col++) {
+      // Channel 1 selected (cyan), others dim
+      const color = col === 1 ? COLOR_CYAN : COLOR_DIM;
+      grid[1][col] = { color, label: String(col), type: 'grid' };
+    }
+
+    // Row 2 (pads 21-28): MIDI Channels 9-16
+    for (let col = 1; col <= 8; col++) {
+      grid[2][col] = { color: COLOR_DIM, label: String(col + 8), type: 'grid' };
+    }
+
+    // Row 3 (pads 31-34): Velocity curves
+    const velocityLabels = ['Li', 'So', 'Ha', 'Fi'];
+    for (let col = 1; col <= 4; col++) {
+      // Linear (first) selected
+      const color = col === 1 ? COLOR_CYAN : COLOR_DIM;
+      grid[3][col] = { color, label: velocityLabels[col - 1], type: 'grid' };
+    }
+
+    // Row 4 (pads 41-42): Aftertouch modes
+    const atLabels = ['Ch', 'Po'];
+    for (let col = 1; col <= 2; col++) {
+      // Channel (first) selected
+      const color = col === 1 ? COLOR_CYAN : COLOR_DIM;
+      grid[4][col] = { color, label: atLabels[col - 1], type: 'grid' };
+    }
+
+    // Top row controls - pages still work
+    grid[9][5] = { color: COLOR_PAGE_ACTIVE, label: '1', type: 'control' };
+    grid[9][6] = { color: COLOR_PAGE_INACTIVE, label: '2', type: 'control' };
+    grid[9][7] = { color: COLOR_PAGE_INACTIVE, label: '3', type: 'control' };
+    grid[9][8] = { color: COLOR_PAGE_INACTIVE, label: '4', type: 'control' };
+
+    // Left column - Circle and Double still work
+    grid[1][0] = { color: COLOR_CTRL_HINT, icon: 'approve-check-circle', type: 'control' };
+    grid[2][0] = { color: COLOR_CTRL_HINT, icon: 'list-format', type: 'control' };
   } else {
     // Full play mode grid
     const interval = 5; // Perfect 4th default
@@ -149,6 +263,8 @@ function getGridData(): Cell[][] {
     // Top row controls
     grid[9][1] = { color: COLOR_CTRL_HINT, icon: 'down-caret', type: 'control' }; // Oct down
     grid[9][2] = { color: COLOR_CTRL_HINT, icon: 'up-caret', type: 'control' }; // Oct up
+    grid[9][3] = { color: COLOR_CTRL_HINT, icon: 'left-caret', type: 'control' }; // Transpose down
+    grid[9][4] = { color: COLOR_CTRL_HINT, icon: 'right-caret', type: 'control' }; // Transpose up
     grid[9][5] = { color: COLOR_PAGE_ACTIVE, label: '1', type: 'control' }; // Page 1
     grid[9][6] = { color: COLOR_PAGE_INACTIVE, label: '2', type: 'control' }; // Page 2
     grid[9][7] = { color: COLOR_PAGE_INACTIVE, label: '3', type: 'control' }; // Page 3
@@ -157,15 +273,16 @@ function getGridData(): Cell[][] {
     // Left column controls
     grid[1][0] = { color: COLOR_CTRL_HINT, icon: 'approve-check-circle', type: 'control' }; // Circle
     grid[2][0] = { color: COLOR_CTRL_HINT, icon: 'list-format', type: 'control' }; // Double
-    grid[4][0] = { color: COLOR_WHITE, icon: 'random', type: 'control' }; // Quantise
+    grid[4][0] = { color: COLOR_CTRL_HINT, icon: 'bars', type: 'control' }; // Quantise
     grid[8][0] = { color: COLOR_CTRL_HINT, icon: 'rocket', type: 'control' }; // Shift
 
     // Right column - velocity curve indicator
     grid[2][9] = { color: COLOR_CTRL_HINT, type: 'control' }; // Scene 2 (Linear active)
 
-    // Bottom row - transpose indicator (neutral)
-    grid[0][4] = { color: COLOR_CTRL_HINT, type: 'control' };
-    grid[0][5] = { color: COLOR_CTRL_HINT, type: 'control' };
+    // Bottom row controls - all lit with dim hint
+    for (let col = 1; col <= 8; col++) {
+      grid[0][col] = { color: COLOR_CTRL_HINT, type: 'control' };
+    }
   }
 
   return grid;
@@ -187,7 +304,13 @@ const gridData = getGridData();
       <div class="row">
         {row.map((cell) => (
           <div
-            class:list={['pad', { control: cell.type === 'control' }]}
+            class:list={['pad', {
+              control: cell.type === 'control',
+              setup: cell.type === 'setup',
+              empty: cell.type === 'empty',
+              'has-label': cell.type === 'empty' && cell.label,
+              'dark-icon': cell.darkIcon
+            }]}
             style={`background-color: ${cell.color};`}
           >
             {cell.icon && <Icon name={cell.icon} size="16px" />}
@@ -245,6 +368,33 @@ const gridData = getGridData();
     border-radius: 50%;
   }
 
+  .pad.setup {
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    max-width: 20px;
+    max-height: 20px;
+    margin: 8px;
+  }
+
+  .pad.empty:not(.has-label) {
+    background: transparent !important;
+  }
+
+  .pad.empty.has-label {
+    opacity: 0.5;
+  }
+
+  .pad.dark-icon {
+    color: #1a1a1a;
+  }
+
+  .pad.dark-icon :global(svg) {
+    color: #1a1a1a;
+  }
+
   .pad :global(svg) {
     margin: 0;
     padding: 0;
@@ -268,6 +418,15 @@ const gridData = getGridData();
       max-width: 28px;
       max-height: 28px;
     }
+    .pad.setup {
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      min-height: 16px;
+      max-width: 16px;
+      max-height: 16px;
+      margin: 6px;
+    }
     .label {
       font-size: 8px;
     }
diff --git a/docs/src/components/SiteTitle.astro b/docs/src/components/SiteTitle.astro
new file mode 100644
index 0000000..f3ca406
--- /dev/null
+++ b/docs/src/components/SiteTitle.astro
@@ -0,0 +1,28 @@
+---
+/**
+ * Custom SiteTitle component with bi-color logo
+ * Poly (cyan) + Board (magenta)
+ */
+---
+
+<a href="/PolyBoard/" class="site-title sl-flex">
+  <span class="poly">Poly</span><span class="board">Board</span>
+</a>
+
+<style>
+  .site-title {
+    font-weight: 600;
+    font-size: var(--sl-text-lg);
+    text-decoration: none;
+    color: var(--sl-color-white);
+    gap: 0;
+  }
+
+  .poly {
+    color: #00ffff;
+  }
+
+  .board {
+    color: #ff00ff;
+  }
+</style>
diff --git a/docs/src/content/docs/development/architecture.mdx b/docs/src/content/docs/development/architecture.mdx
index 5b74801..59369fc 100644
--- a/docs/src/content/docs/development/architecture.mdx
+++ b/docs/src/content/docs/development/architecture.mdx
@@ -218,6 +218,6 @@ RAM (20KB)
 
 ## See Also
 
-- [SDK Constraints](/development/sdk-constraints) - Hardware limitations
-- [Modules Reference](/development/modules) - Detailed module documentation
-- [Contributing Guide](/development/contributing) - Build and test instructions
+- [SDK Constraints](/PolyBoard/development/sdk-constraints) - Hardware limitations
+- [Modules Reference](/PolyBoard/development/modules) - Detailed module documentation
+- [Contributing Guide](/PolyBoard/development/contributing) - Build and test instructions
diff --git a/docs/src/content/docs/development/contributing.mdx b/docs/src/content/docs/development/contributing.mdx
index 3de4443..2e7d8a0 100644
--- a/docs/src/content/docs/development/contributing.mdx
+++ b/docs/src/content/docs/development/contributing.mdx
@@ -408,6 +408,6 @@ Use [Conventional Commits](https://www.conventionalcommits.org/):
 
 ## See Also
 
-- [Architecture Overview](/development/architecture) - System design
-- [SDK Constraints](/development/sdk-constraints) - Hardware limitations
-- [Modules Reference](/development/modules) - Code documentation
+- [Architecture Overview](/PolyBoard/development/architecture) - System design
+- [SDK Constraints](/PolyBoard/development/sdk-constraints) - Hardware limitations
+- [Modules Reference](/PolyBoard/development/modules) - Code documentation
diff --git a/docs/src/content/docs/development/modules.mdx b/docs/src/content/docs/development/modules.mdx
index 29f6a31..dc598f8 100644
--- a/docs/src/content/docs/development/modules.mdx
+++ b/docs/src/content/docs/development/modules.mdx
@@ -477,5 +477,5 @@ flash.c
 
 ## See Also
 
-- [Architecture Overview](/development/architecture) - High-level design
-- [Contributing Guide](/development/contributing) - Adding features
+- [Architecture Overview](/PolyBoard/development/architecture) - High-level design
+- [Contributing Guide](/PolyBoard/development/contributing) - Adding features
diff --git a/docs/src/content/docs/development/sdk-constraints.mdx b/docs/src/content/docs/development/sdk-constraints.mdx
index 7df3077..e25fb26 100644
--- a/docs/src/content/docs/development/sdk-constraints.mdx
+++ b/docs/src/content/docs/development/sdk-constraints.mdx
@@ -269,5 +269,5 @@ void debug_value(u8 value) {
 
 ## See Also
 
-- [Architecture Overview](/development/architecture) - System design
-- [Modules Reference](/development/modules) - Implementation details
+- [Architecture Overview](/PolyBoard/development/architecture) - System design
+- [Modules Reference](/PolyBoard/development/modules) - Implementation details
diff --git a/docs/src/content/docs/getting-started.mdx b/docs/src/content/docs/getting-started.mdx
index fc382f9..0a594ee 100644
--- a/docs/src/content/docs/getting-started.mdx
+++ b/docs/src/content/docs/getting-started.mdx
@@ -13,7 +13,7 @@ Welcome to PolyBoard! This guide will get you playing in minutes.
 
 - **Novation Launchpad Pro** (original model, not MK3)
 - **USB Cable** for firmware upload
-- **SysEx Tool** - see [Installation](/installation/upload/) for options
+- **SysEx Tool** - see [Installation](/PolyBoard/installation/upload/) for options
 
 ## Install the Firmware
 
@@ -21,7 +21,7 @@ Welcome to PolyBoard! This guide will get you playing in minutes.
 
 1. **Download** the latest `polyboard.syx` from [GitHub Releases](https://github.com/b4nst/PolyBoard/releases/latest)
 
-2. **Enter bootloader mode** - Hold **Setup** (top-left) while plugging in USB
+2. **Enter bootloader mode** - Hold **Setup** (top-left) while powering up
 
 3. **Upload** the firmware using your SysEx tool
 
@@ -29,33 +29,28 @@ Welcome to PolyBoard! This guide will get you playing in minutes.
 
 </Steps>
 
-See [Installation](/installation/download/) for detailed instructions.
+See [Installation](/PolyBoard/installation/download/) for detailed instructions.
 
 ## The Layout
 
 <LaunchpadGrid variant="full" />
 
-- **8×8 Grid** - Your isomorphic keyboard
-- <Btn name="page-1" /><Btn name="page-2" /><Btn name="page-3" /><Btn name="page-4" /> - Page select (or Shift + page for interval)
-- <Btn name="oct-up" /><Btn name="oct-down" /> - Octave up/down
-- <Btn name="circle" /> - Hold to select root note
-- <Btn name="double" /> - Hold to select scale type
-
 ## Quick Controls
 
 | Action | How |
 |--------|-----|
 | **Play notes** | Press the 8×8 grid |
-| **Change octave** | Press <Btn name="oct-up" showLabel={false} /> or <Btn name="oct-down" showLabel={false} /> |
+| **Change octave** | Press <Btn name="oct-down" showLabel={false} /> or <Btn name="oct-up" showLabel={false} /> |
+| **Transpose scale** | Press <Btn name="transpose-down" showLabel={false} /> or <Btn name="transpose-up" showLabel={false} /> |
 | **Switch page** | Tap <Btn name="page-1" showLabel={false} /><Btn name="page-2" showLabel={false} /><Btn name="page-3" showLabel={false} /> or <Btn name="page-4" showLabel={false} /> |
-| **Change interval** | Hold <Btn name="shift" /> + tap page button |
+| **Change interval** | Hold <Btn name="shift" /> + tap <Btn name="page-1" showLabel={false} /><Btn name="page-2" showLabel={false} /><Btn name="page-3" showLabel={false} /> or <Btn name="page-4" showLabel={false} /> |
 | **Change root** | Hold <Btn name="circle" />, tap a note on the circle |
 | **Change scale** | Hold <Btn name="double" />, tap a scale |
 | **Copy page** | Hold source page, tap target page |
-| **Scale lock** | Tap <Btn name="quantise" /> to toggle (can't play wrong notes) |
+| **Scale lock** | Tap <Btn name="quantise" /> to toggle |
 
 ## Next Steps
 
-- [Playing with Pages](/usage/pages/) - Use 4 configs during performance
-- [Scales & Root Selection](/usage/scales/) - Circle of fifths and scale types
-- [All Controls](/usage/controls/) - Complete control reference
+- [Playing with Pages](/PolyBoard/usage/pages/) - Use 4 configs during performance
+- [Scales & Root Selection](/PolyBoard/usage/scales/) - Circle of fifths and scale types
+- [All Controls](/PolyBoard/usage/controls/) - Complete control reference
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 551c060..99b59f4 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -3,18 +3,21 @@ title: PolyBoard
 description: Custom firmware for Launchpad Pro
 template: splash
 hero:
-  title: PolyBoard
+  title: <span class="poly">Poly</span><span class="board">Board</span>
   tagline: Transform your Launchpad Pro into a standalone, scale-aware MIDI instrument
   actions:
     - text: Getting Started
-      link: /getting-started/
+      link: /PolyBoard/getting-started/
       variant: primary
     - text: Installation
-      link: /installation/download/
+      link: /PolyBoard/installation/download/
       variant: secondary
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
+import LaunchpadGrid from '../../components/LaunchpadGrid.astro';
+
+<LaunchpadGrid variant="logo" />
 
 ## Features
 
@@ -49,8 +52,8 @@ PolyBoard is open-source custom firmware for the **Novation Launchpad Pro** (ori
 
 ## Quick Start
 
-1. [Download](/installation/download/) the latest firmware
-2. [Upload](/installation/upload/) it to your Launchpad Pro
+1. [Download](/PolyBoard/installation/download/) the latest firmware
+2. [Upload](/PolyBoard/installation/upload/) it to your Launchpad Pro
 3. Start playing!
 
 ## Repository
diff --git a/docs/src/content/docs/installation/download.mdx b/docs/src/content/docs/installation/download.mdx
index d9fc38b..5c99097 100644
--- a/docs/src/content/docs/installation/download.mdx
+++ b/docs/src/content/docs/installation/download.mdx
@@ -41,4 +41,4 @@ The compiled `polyboard.syx` will be in the `build/` directory.
 
 ## Next Step
 
-Once you have the firmware file, proceed to [Upload](/installation/upload/) to install it on your device.
+Once you have the firmware file, proceed to [Upload](/PolyBoard/installation/upload/) to install it on your device.
diff --git a/docs/src/content/docs/installation/upload.mdx b/docs/src/content/docs/installation/upload.mdx
index 4973116..b547a85 100644
--- a/docs/src/content/docs/installation/upload.mdx
+++ b/docs/src/content/docs/installation/upload.mdx
@@ -32,15 +32,11 @@ You'll need a SysEx tool for your operating system:
 
 <Steps>
 
-1. **Disconnect the Launchpad Pro**
+1. **Enter Bootloader Mode**
 
-   Unplug the USB cable from your Launchpad Pro.
+   Hold down the **Setup** button (top-left corner) while powering up the device. The device will start in bootloader mode.
 
-2. **Enter Bootloader Mode**
-
-   Hold down the **Setup** button (top-left corner) while reconnecting the USB cable. The device will start in bootloader mode.
-
-3. **Send the Firmware**
+2. **Send the Firmware**
 
    <Tabs syncKey="os">
      <TabItem label="macOS">
@@ -68,11 +64,11 @@ You'll need a SysEx tool for your operating system:
      </TabItem>
    </Tabs>
 
-4. **Wait for Completion**
+3. **Wait for Completion**
 
    The grid will briefly scroll "upgrading..." across the display. Wait for the device to reboot automatically.
 
-5. **Verify Installation**
+4. **Verify Installation**
 
    After reboot, you should see the PolyBoard logo (a magenta and teal checkerboard pattern) displayed briefly on the grid.
 
@@ -82,7 +78,7 @@ You'll need a SysEx tool for your operating system:
 
 ### Device not recognized in bootloader mode
 
-- Ensure you're holding **Setup** before connecting USB
+- Ensure you're holding **Setup** while powering up
 - Try a different USB port or cable
 - Make sure the device is connected directly to your computer, not through a hub
 
diff --git a/docs/src/content/docs/reference/button-layout.mdx b/docs/src/content/docs/reference/button-layout.mdx
index 9fea38a..32d71a1 100644
--- a/docs/src/content/docs/reference/button-layout.mdx
+++ b/docs/src/content/docs/reference/button-layout.mdx
@@ -6,6 +6,7 @@ sidebar:
 ---
 
 import { Aside } from '@astrojs/starlight/components';
+import LaunchpadGrid from '../../../components/LaunchpadGrid.astro';
 
 <Aside type="note">
 This page is for developers working on PolyBoard firmware. Users don't need this information.
@@ -13,20 +14,9 @@ This page is for developers working on PolyBoard firmware. Users don't need this
 
 ## Index Map
 
-Button indexing follows a 10x10 grid pattern. Indices in parentheses are virtual (no physical button).
+Button indexing follows a 10x10 grid pattern. Corner indices (dimmed) are virtual - no physical button exists.
 
-```
-(90) 91  92  93  94  95  96  97  98  (99)
- 80  81  82  83  84  85  86  87  88   89
- 70  71  72  73  74  75  76  77  78   79
- 60  61  62  63  64  65  66  67  68   69
- 50  51  52  53  54  55  56  57  58   59
- 40  41  42  43  44  45  46  47  48   49
- 30  31  32  33  34  35  36  37  38   39
- 20  21  22  23  24  25  26  27  28   29
- 10  11  12  13  14  15  16  17  18   19
- (0)  1   2   3   4   5   6   7   8   (9)
-```
+<LaunchpadGrid variant="indices" />
 
 ## Button Regions
 
diff --git a/docs/src/content/docs/usage/controls.mdx b/docs/src/content/docs/usage/controls.mdx
index c5e4c6a..b6c7177 100644
--- a/docs/src/content/docs/usage/controls.mdx
+++ b/docs/src/content/docs/usage/controls.mdx
@@ -78,10 +78,10 @@ Outside of Setup Mode, octave changes are **session-only**. To save permanently,
 
 | Button | Interval | Semitones |
 |--------|----------|-----------|
-| Shift + <Btn name="page-1" /> | Minor 3rd | 3 |
-| Shift + <Btn name="page-2" /> | Major 3rd | 4 |
-| Shift + <Btn name="page-3" /> | Perfect 4th | 5 - *default* |
-| Shift + <Btn name="page-4" /> | Perfect 5th | 7 |
+| <Btn name="shift" /> + <Btn name="interval-1" /> | Minor 3rd | 3 |
+| <Btn name="shift" /> + <Btn name="interval-2" /> | Major 3rd | 4 |
+| <Btn name="shift" /> + <Btn name="interval-3" /> | Perfect 4th | 5 - *default* |
+| <Btn name="shift" /> + <Btn name="interval-4" /> | Perfect 5th | 7 |
 
 :::note[Session vs Saved]
 Outside of Setup Mode, interval changes are **session-only**. To save permanently, make changes while in [Setup Mode](#setup-mode).
@@ -123,18 +123,13 @@ Setup Mode lets you configure per-page settings without constantly writing to fl
 
 ### Setup Mode Grid Layout
 
-```
-Row 8: [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ]  (unused)
-Row 7: [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ]  (unused)
-Row 6: [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ]  (unused)
-Row 5: [  ] [  ] [  ] [  ] [  ] [  ] [  ] [  ]  (unused)
-Row 4: [Ch] [Po] [  ] [  ] [  ] [  ] [  ] [  ]  Aftertouch modes
-Row 3: [Li] [So] [Ha] [Fi] [  ] [  ] [  ] [  ]  Velocity curves
-Row 2: [9 ] [10] [11] [12] [13] [14] [15] [16]  MIDI Channels 9-16
-Row 1: [1 ] [2 ] [3 ] [4 ] [5 ] [6 ] [7 ] [8 ]  MIDI Channels 1-8
-```
+<LaunchpadGrid variant="setup" />
 
-Cyan = active/selected, Dim = inactive/unselected
+- **Rows 1-2**: MIDI Channels (1-8 bottom, 9-16 above)
+- **Row 3**: Velocity curves (Linear, Soft, Hard, Fixed)
+- **Row 4**: Aftertouch mode (Channel, Polyphonic)
+
+Cyan = active/selected, Dim = available option
 
 ### MIDI Channels (Rows 1-2)
 
@@ -185,8 +180,8 @@ This lets you experiment with different keys during a performance without accide
 Transpose shifts your entire grid up or down by **scale degrees** (not semitones). This keeps you in key while moving the pattern higher or lower.
 
 **Controls:**
-- **<Btn name="arrowRight" />** (Right arrow) - Transpose up one scale degree
-- **<Btn name="arrowLeft" />** (Left arrow) - Transpose down one scale degree
+- <Btn name="transpose-up" /> (Right arrow) - Transpose up one scale degree
+- <Btn name="transpose-down" /> (Left arrow) - Transpose down one scale degree
 - **Both arrows pressed together** - Reset to neutral (0)
 
 The full range is **-7 to +7 scale degrees** (one full octave in either direction). For larger shifts, use the octave buttons.
diff --git a/docs/src/content/docs/usage/pages.mdx b/docs/src/content/docs/usage/pages.mdx
index 15e274c..53a1fec 100644
--- a/docs/src/content/docs/usage/pages.mdx
+++ b/docs/src/content/docs/usage/pages.mdx
@@ -60,4 +60,4 @@ All settings copy over (including MIDI channel, velocity curve, etc.). Then adju
 
 ## Persistence
 
-All page settings are automatically saved to flash memory. Your configuration persists across power cycles - just turn on and play.
+Page settings are saved to flash memory when exiting Setup mode. Your configuration persists across power cycles - just turn on and play.
diff --git a/docs/src/content/docs/usage/scales.mdx b/docs/src/content/docs/usage/scales.mdx
index 33b157c..4b0fd9b 100644
--- a/docs/src/content/docs/usage/scales.mdx
+++ b/docs/src/content/docs/usage/scales.mdx
@@ -90,17 +90,17 @@ This means chord shapes are consistent. Learn a major triad shape once, and it w
 
 | Button | Interval | Semitones | Feel |
 |--------|----------|-----------|------|
-| <Btn name="shift" /> + <Btn name="page-1" /> | Minor 3rd | 3 | Compact |
-| <Btn name="shift" /> + <Btn name="page-2" /> | Major 3rd | 4 | Guitar-ish |
-| <Btn name="shift" /> + <Btn name="page-3" /> | **Perfect 4th** | 5 | Default, balanced |
-| <Btn name="shift" /> + <Btn name="page-4" /> | Perfect 5th | 7 | Wide stretches |
+| <Btn name="shift" /> + <Btn name="interval-1" /> | Minor 3rd | 3 | Compact |
+| <Btn name="shift" /> + <Btn name="interval-2" /> | Major 3rd | 4 | Guitar-ish |
+| <Btn name="shift" /> + <Btn name="interval-3" /> | **Perfect 4th** | 5 | Default, balanced |
+| <Btn name="shift" /> + <Btn name="interval-4" /> | Perfect 5th | 7 | Wide stretches |
 
 ## Scale Transposition
 
 Use the **arrow buttons** to transpose the grid up or down within the scale:
 
-- **<Btn name="arrowRight" />** (Right arrow): Transpose up one scale degree
-- **<Btn name="arrowLeft" />** (Left arrow): Transpose down one scale degree
+- <Btn name="transpose-up" /> (Right arrow): Transpose up one scale degree
+- <Btn name="transpose-down" /> (Left arrow): Transpose down one scale degree
 - **Both arrows together**: Reset to neutral (0)
 
 The range is ±7 scale degrees (one full octave). The bottom row LEDs show the current transposition level - all lit means neutral, LEDs turn off from left for positive transpose, from right for negative. This is scale-relative transposition - the pattern shifts by scale degrees, not semitones.
diff --git a/docs/src/pages/releases.astro b/docs/src/pages/reference/releases.astro
similarity index 96%
rename from docs/src/pages/releases.astro
rename to docs/src/pages/reference/releases.astro
index 7b0a961..be6ce4d 100644
--- a/docs/src/pages/releases.astro
+++ b/docs/src/pages/reference/releases.astro
@@ -1,7 +1,7 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import { getCollection } from 'astro:content';
-import Release from '../components/Release.astro';
+import Release from '../../components/Release.astro';
 
 const releases = await getCollection('releases');
 const headings = releases.map((release) => ({
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 332d8ac..fc227f2 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -8,4 +8,13 @@
     --sl-color-accent: hsl(300, 100%, 50%);
     --sl-color-accent-high: hsl(300, 100%, 65%);
   }
+
+  /* Bi-color logo: Poly(cyan) Board(magenta) */
+  .poly {
+    color: #00ffff;
+  }
+
+  .board {
+    color: #ff00ff;
+  }
 }