diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56598f5f..1cd4d22b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
  * Feature: New "repeat" modifier [#406](https://github.com/xenharmonic-devs/scale-workshop/issues/406)
  * Feature: Implement multi-channel MIDI mode compatible with the Lumatone [#649](https://github.com/xenharmonic-devs/scale-workshop/pull/649)
  * Feature: Show labels, ratios, cents and frequencies on the tuning table [#534](https://github.com/xenharmonic-devs/scale-workshop/issues/534)
+ * Feature: Full width view dedicated to the MOS pyramid [#700](https://github.com/xenharmonic-devs/scale-workshop/issues/700)
  * Bug fix: Extreme ratios now only break parts of the tuning table that do not have IEEE floating point representation and format better when non-finite [#631](https://github.com/xenharmonic-devs/scale-workshop/issues/631), [#632](https://github.com/xenharmonic-devs/scale-workshop/issues/632)
  * Style fix: Make checkbox and radio button labels more consistent [#644](https://github.com/xenharmonic-devs/scale-workshop/issues/644)
  * Beta cycle issues: [#643](https://github.com/xenharmonic-devs/scale-workshop/issues/643), [#640](https://github.com/xenharmonic-devs/scale-workshop/issues/640), [#577](https://github.com/xenharmonic-devs/scale-workshop/issues/577), [#513](https://github.com/xenharmonic-devs/scale-workshop/issues/513), [#658](https://github.com/xenharmonic-devs/scale-workshop/issues/658), [#664](https://github.com/xenharmonic-devs/scale-workshop/issues/664), [#666](https://github.com/xenharmonic-devs/scale-workshop/issues/666)
diff --git a/package-lock.json b/package-lock.json
index 69e943d8..9a9f6d55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,10 @@
         "isomorphic-qwerty": "^0.0.2",
         "ji-lattice": "^0.0.3",
         "jszip": "^3.10.1",
-        "moment-of-symmetry": "^0.5.2",
+        "moment-of-symmetry": "^0.6.0",
         "pinia": "^2.1.7",
         "qs": "^6.12.0",
-        "sonic-weave": "^0.2.0",
+        "sonic-weave": "^0.3.1",
         "sw-synth": "^0.1.0",
         "temperaments": "^0.5.3",
         "values.js": "^2.1.1",
@@ -4381,9 +4381,9 @@
       }
     },
     "node_modules/moment-of-symmetry": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/moment-of-symmetry/-/moment-of-symmetry-0.5.3.tgz",
-      "integrity": "sha512-+CTxeGrJioy71uyYzNn7Kk5F73fqbSVIAXE69O+6/0sdNWxwgcVw7eCnjX5AHW4tJelhvHVeJyaAgP2CCLnzrg==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/moment-of-symmetry/-/moment-of-symmetry-0.6.0.tgz",
+      "integrity": "sha512-0dpJfCm4bcsEAhQazehWvQxm75UM1B2aZsKPNmeUgsLW/DvL9EOL2/qSVE472mGG+opFe9G7Ou02PN59sJPBPA==",
       "dependencies": {
         "xen-dev-utils": "^0.7.0"
       },
@@ -5455,11 +5455,11 @@
       }
     },
     "node_modules/sonic-weave": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/sonic-weave/-/sonic-weave-0.2.0.tgz",
-      "integrity": "sha512-dc9Gd0V5hSR2Xc1nXopLjuqas39UcDEfqRDl6GmQQ3riHW/eaLCSlSfhh2Xo91L2sZHnL1n9oJEbnEbxNSmQBw==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/sonic-weave/-/sonic-weave-0.3.1.tgz",
+      "integrity": "sha512-Eovb+KrRXsIJiMHEzM+Ft96NEf6CoyUWnN3XDfysgSCVyr8Rlzcfqv9Vquz9zINC3vXcs1ACC7rT4ecPhOeI/Q==",
       "dependencies": {
-        "moment-of-symmetry": "^0.5.3",
+        "moment-of-symmetry": "^0.6.0",
         "xen-dev-utils": "^0.7.0"
       },
       "bin": {
diff --git a/package.json b/package.json
index 6c97fb3f..c5750449 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,10 @@
     "isomorphic-qwerty": "^0.0.2",
     "ji-lattice": "^0.0.3",
     "jszip": "^3.10.1",
-    "moment-of-symmetry": "^0.5.2",
+    "moment-of-symmetry": "^0.6.0",
     "pinia": "^2.1.7",
     "qs": "^6.12.0",
-    "sonic-weave": "^0.2.0",
+    "sonic-weave": "^0.3.1",
     "sw-synth": "^0.1.0",
     "temperaments": "^0.5.3",
     "values.js": "^2.1.1",
diff --git a/src/App.vue b/src/App.vue
index 61a4a162..a0ac7174 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -474,6 +474,9 @@ function panic() {
         <RouterLink to="/about"><strong>Sw</strong></RouterLink>
       </li>
       <li><RouterLink to="/">Build Scale</RouterLink></li>
+      <li v-if="state.showMosTab">
+        <RouterLink to="/mos">MOS</RouterLink>
+      </li>
       <li><RouterLink to="/analysis">Analysis</RouterLink></li>
       <li><RouterLink to="/lattice">Lattice</RouterLink></li>
       <li><RouterLink to="/vk">Virtual Keyboard</RouterLink></li>
@@ -610,6 +613,7 @@ nav a:first-of-type {
   line-height: 1;
   padding-right: 1em;
   text-align: right;
+  color: var(--color-text-mute);
 }
 #app-footer a {
   color: var(--color-text-mute);
diff --git a/src/components/MosPyramid.vue b/src/components/MosPyramid.vue
new file mode 100644
index 00000000..0e65d984
--- /dev/null
+++ b/src/components/MosPyramid.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { mosScaleInfo } from 'moment-of-symmetry'
+import { computed } from 'vue'
+import { dot } from 'xen-dev-utils'
+
+const props = defineProps<{
+  selected: string
+  rows: number
+  vertical: number
+  horizontal: number
+  hardness: { n: number; d: number }
+}>()
+
+const emit = defineEmits(['easter-egg', 'mos'])
+
+const viewBox = computed(
+  () => `${props.horizontal - props.rows / 2} ${props.vertical - 0.5} ${props.rows} ${props.rows}`
+)
+
+type BasicInfo = {
+  x: number
+  y: number
+  name: string
+  abbreviation: string
+  pattern: string
+  udp: string
+  equaveMonzo: [number, number]
+  brightGeneratorMonzo: [number, number]
+}
+
+const basics = computed(() => {
+  const v = props.vertical
+  const rows: BasicInfo[][] = []
+  // Do two extra rows to compensate for potentially non-square container.
+  for (let size = Math.max(2, v); size < props.rows + v + 4; ++size) {
+    const row: BasicInfo[] = []
+    for (let numL = 1; numL < size; ++numL) {
+      const numS = size - numL
+      const info = mosScaleInfo(numL, numS)
+      const p = info.numberOfPeriods
+      // Brightest for woods
+      let udp = `${size - p}|0(${p})`
+      if (size > 2 * p) {
+        // Major-like for everything else
+        udp = `${size - p * 2}|${p}`
+        if (p > 1) {
+          udp += `(${p})`
+        }
+      }
+      row.push({
+        x: numL - size / 2,
+        y: size - 2,
+        name: info.name ?? info.mosPattern,
+        abbreviation: info.abbreviation ?? info.mosPattern,
+        pattern: info.mosPattern,
+        udp,
+        equaveMonzo: [numL, numS],
+        brightGeneratorMonzo: info.brightGeneratorMonzo
+      })
+    }
+    rows.push(row)
+  }
+  return rows
+})
+
+const generators = computed(() => {
+  const { n, d } = props.hardness
+  return basics.value.map((row) =>
+    row.map((i) => `${dot(i.brightGeneratorMonzo, [n, d])}\\${dot(i.equaveMonzo, [n, d])}`)
+  )
+})
+</script>
+
+<template>
+  <svg width="100%" height="100%" :viewBox="viewBox">
+    <image
+      href="@/assets/img/spoob.png"
+      x="-1"
+      y="-5"
+      width="2"
+      height="2"
+      @click="emit('easter-egg')"
+    />
+
+    <template v-for="(row, i) of basics" :key="i">
+      <g
+        v-for="(info, j) of row"
+        :key="j"
+        @click="emit('mos', info.name, info.pattern, info.udp)"
+        :class="{ selected: selected === info.pattern }"
+      >
+        <rect :x="info.x - 0.45" :y="info.y - 0.45" width="0.9" height="0.9" />
+        <text
+          :x="info.x - 0.4"
+          :y="info.y - 0.3"
+          font-size="0.11"
+          dominant-baseline="middle"
+          text-anchor="start"
+        >
+          {{ info.pattern }}
+        </text>
+        <text
+          :x="info.x + 0.4"
+          :y="info.y - 0.3"
+          font-size="0.11"
+          dominant-baseline="middle"
+          text-anchor="end"
+        >
+          {{ generators[i][j] }}
+        </text>
+        <text
+          :x="info.x"
+          :y="info.y"
+          font-size="0.25"
+          dominant-baseline="middle"
+          text-anchor="middle"
+        >
+          {{ info.abbreviation }}
+        </text>
+        <text
+          :x="info.x"
+          :y="info.y + 0.3"
+          font-size="0.09"
+          dominant-baseline="middle"
+          text-anchor="middle"
+        >
+          {{ info.name }}
+        </text>
+      </g>
+    </template>
+  </svg>
+</template>
+
+<style scoped>
+image {
+  cursor: pointer;
+}
+g {
+  cursor: pointer;
+}
+rect {
+  fill: var(--color-accent-background);
+  stroke: var(--color-accent-text-btn);
+  stroke-width: 0.01;
+}
+g:hover > rect {
+  fill: var(--color-accent);
+  stroke: var(--color-accent);
+}
+.selected > rect {
+  fill: var(--color-background-mute);
+  stroke-width: 0.02;
+}
+text {
+  fill: var(--color-accent-text-btn);
+}
+g:hover > text {
+  fill: white;
+}
+</style>
diff --git a/src/components/ScaleRule.vue b/src/components/ScaleRule.vue
index bccfca2a..c9ebcca1 100644
--- a/src/components/ScaleRule.vue
+++ b/src/components/ScaleRule.vue
@@ -3,9 +3,13 @@ import type { Scale } from '@/scale'
 import { computed } from 'vue'
 import { mmod, valueToCents } from 'xen-dev-utils'
 
-const props = defineProps<{
-  scale: Scale
-}>()
+const props = withDefaults(
+  defineProps<{
+    scale: Scale
+    orientation: 'horizontal' | 'vertical'
+  }>(),
+  { orientation: 'horizontal' }
+)
 
 const ticksAndColors = computed(() => {
   const equaveCents = valueToCents(props.scale.equaveRatio)
@@ -32,7 +36,7 @@ const ticksAndColors = computed(() => {
 </script>
 
 <template>
-  <svg width="100%" height="10">
+  <svg width="100%" height="10" v-if="orientation === 'horizontal'">
     <line x1="0.5%" y1="50%" x2="99.5%" y2="50%" style="stroke: var(--color-text)" />
     <line
       v-for="([tick, color], i) of ticksAndColors"
@@ -44,4 +48,16 @@ const ticksAndColors = computed(() => {
       :style="'stroke:' + color + ';'"
     />
   </svg>
+  <svg width="10" height="100%" v-else>
+    <line y1="0.5%" x1="50%" y2="99.5%" x2="50%" style="stroke: var(--color-text)" />
+    <line
+      v-for="([tick, color], i) of ticksAndColors"
+      :key="i"
+      :y1="tick"
+      x1="5%"
+      :y2="tick"
+      x2="95%"
+      :style="'stroke:' + color + ';'"
+    />
+  </svg>
 </template>
diff --git a/src/components/modals/generation/MosScale.vue b/src/components/modals/generation/MosScale.vue
index d6a4d190..22799120 100644
--- a/src/components/modals/generation/MosScale.vue
+++ b/src/components/modals/generation/MosScale.vue
@@ -311,6 +311,9 @@ function edoClick(info: MosScaleInfo) {
           ><i>{{ modal.hardness }}</i>
         </template>
         <i v-else>{{ modal.previewName }}</i>
+        <template v-if="modal.method === 'pyramid'">
+          <RouterLink class="right" to="/mos">Fullscreen view</RouterLink>
+        </template>
       </div>
     </template>
   </Modal>
@@ -327,6 +330,9 @@ function edoClick(info: MosScaleInfo) {
 .pyramid button {
   font-size: small;
 }
+.right {
+  margin-left: auto;
+}
 @media only screen and (max-width: 38rem) {
   .pyramid {
     text-align: left;
diff --git a/src/router/index.ts b/src/router/index.ts
index 677804c3..5b85c763 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -87,6 +87,11 @@ const router = createRouter({
       name: 'qwerty',
       component: () => import('../views/VirtualQwerty.vue')
     },
+    {
+      path: '/mos',
+      name: 'mos',
+      component: () => import('../views/MosView.vue')
+    },
     // Root aliases mainly for compatibility with old SW1 URLs.
     {
       path: '/index.html',
diff --git a/src/stores/state.ts b/src/stores/state.ts
index 23463e62..93b1dad7 100644
--- a/src/stores/state.ts
+++ b/src/stores/state.ts
@@ -22,6 +22,7 @@ export const useStateStore = defineStore('state', () => {
   const centsFractionDigits = ref(parseInt(storage.getItem('centsFractionDigits') ?? '3', 10))
   const decimalFractionDigits = ref(parseInt(storage.getItem('decimalFractionDigits') ?? '5', 10))
   const showVirtualQwerty = ref(storage.getItem('showVirtualQwerty') === 'true')
+  const showMosTab = ref(storage.getItem('showMosTab') === 'true')
   const showKeyboardLabel = ref(storage.getItem('showKeyboardLabel') !== 'false')
   const showKeyboardCents = ref(storage.getItem('showKeyboardCents') !== 'false')
   const showKeyboardRatio = ref(storage.getItem('showKeyboardRatio') !== 'false')
@@ -55,6 +56,7 @@ export const useStateStore = defineStore('state', () => {
     centsFractionDigits,
     decimalFractionDigits,
     showVirtualQwerty,
+    showMosTab,
     showKeyboardLabel,
     showKeyboardCents,
     showKeyboardRatio,
@@ -92,6 +94,7 @@ export const useStateStore = defineStore('state', () => {
     centsFractionDigits,
     decimalFractionDigits,
     showVirtualQwerty,
+    showMosTab,
     showKeyboardLabel,
     showKeyboardCents,
     showKeyboardRatio,
diff --git a/src/views/MosView.vue b/src/views/MosView.vue
new file mode 100644
index 00000000..029e9aba
--- /dev/null
+++ b/src/views/MosView.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import MosPyramid from '@/components/MosPyramid.vue'
+import ScaleRule from '@/components/ScaleRule.vue'
+import { useScaleStore } from '@/stores/scale'
+import { debounce } from '@/utils'
+import { getHardness } from 'moment-of-symmetry'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Fraction } from 'xen-dev-utils'
+
+const scale = useScaleStore()
+const router = useRouter()
+
+const message = ref('Your scale will be replaced with a MOS scale upon interaction.')
+
+const hardness = ref(2)
+
+const rationalHardness = computed(() =>
+  isFinite(hardness.value) ? new Fraction(hardness.value).simplify(0.03) : { n: 1, d: 0 }
+)
+
+const hardnessRange = computed(() =>
+  getHardness(rationalHardness.value.n, rationalHardness.value.d)
+)
+
+const hardnessSlider = computed({
+  get: () => 1 - 1 / hardness.value,
+  set(newValue: number) {
+    // There's something wrong with how input ranges are handled.
+    if (typeof newValue !== 'number') {
+      newValue = parseFloat(newValue)
+    }
+    if (!isNaN(newValue)) {
+      hardness.value = 1 / (1 - newValue)
+      message.value = 'Loading...'
+      updateScale()
+    }
+  }
+})
+
+const horizontal = ref(0)
+const vertical = ref(2)
+
+const name = ref('Diatonic')
+const pattern = ref('5L 2s')
+const udp = ref('5|1')
+
+function computeScale() {
+  const h = rationalHardness.value
+  const hStr = h.d ? (h as Fraction).toFraction() : 'inf'
+  scale.name = name.value.charAt(0).toUpperCase() + name.value.slice(1)
+  scale.sourceText = `MOS {\n  ${pattern.value} ${udp.value}\n  hardness = ${hStr}\n}\nJ4 = baseFrequency\nautomos()`
+  scale.computeScale()
+  message.value = ' '
+}
+
+const updateScale = debounce(computeScale)
+
+function mos(mosName: string, mosPattern: string, udpStr: string) {
+  name.value = mosName
+  pattern.value = mosPattern
+  udp.value = udpStr
+  message.value = 'Loading...'
+  updateScale()
+}
+
+function done() {
+  computeScale()
+  router.push('/')
+}
+
+const EASTER_EGG_SOURCE = `// Create a fairly even lattice using the generators
+parallelotope([3, 5, 7], [1, 1, 1], [0, 0, 1], 1\\6)
+// Temper out the Spoob comma
+PrimeMapping(1200.000, 1901.955, 2786.316, 3368.819, 4151.323)
+`
+
+function easterEgg() {
+  scale.name = 'Spoob'
+  scale.sourceText = EASTER_EGG_SOURCE
+  scale.computeScale()
+  router.push('/')
+}
+</script>
+
+<template>
+  <main>
+    <div class="grid-container">
+      <div class="scale-rule">
+        <ScaleRule :scale="scale.scale" orientation="vertical" />
+      </div>
+      <MosPyramid
+        class="pyramid"
+        @easter-egg="easterEgg"
+        @mos="mos"
+        :selected="pattern"
+        :rows="7"
+        :horizontal="horizontal"
+        :vertical="vertical"
+        :hardness="rationalHardness"
+      ></MosPyramid>
+      <div class="pan-controls">
+        <div>
+          <button class="arrow" @click="horizontal--">⇦</button>
+          <button class="arrow" @click="horizontal++">⇨</button>
+        </div>
+        <div>
+          <button class="arrow" @click="vertical--">⇧</button>
+          <button class="arrow" @click="vertical++">⇩</button>
+        </div>
+        <button class="done" @click="done">done</button>
+      </div>
+    </div>
+    <div class="controls control-group">
+      <label for="hardness">Hardness ({{ hardnessRange }})</label>
+      <input
+        id="hardness"
+        class="control"
+        type="range"
+        min="0"
+        max="1"
+        step="any"
+        v-model="hardnessSlider"
+      />
+      <span class="message"
+        ><i>{{ message }}</i></span
+      >
+    </div>
+  </main>
+</template>
+
+<style scoped>
+main {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+}
+.grid-container {
+  height: 87%;
+  display: grid;
+  gap: 0.5em;
+}
+.controls {
+  height: 13%;
+}
+.message {
+  font-size: smaller;
+  height: 1em;
+}
+.arrow {
+  font-weight: bold;
+  font-size: xx-large;
+}
+.done {
+  margin-top: 1em;
+  font-size: x-large;
+}
+
+/* Content layout (small) */
+.grid-container {
+  grid-template-columns: 10px 1fr;
+  grid-template-rows: 6fr 1fr;
+}
+.scale-rule {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+}
+.pyramid {
+  grid-column: 2;
+  grid-row: 1;
+}
+.pan-controls {
+  grid-column: 2;
+  grid-row: 2;
+}
+.pan-controls > div {
+  display: inline-block;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+/* Content layout (medium-large) */
+@media screen and (min-width: 600px) {
+  .grid-container {
+    grid-template-columns: 10px 1fr 4em;
+    grid-template-rows: 1fr;
+  }
+  .scale-rule {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .pyramid {
+    grid-column: 2;
+    grid-row: 1;
+  }
+  .pan-controls {
+    grid-column: 3;
+    grid-row: 1;
+  }
+  .pan-controls > div {
+    display: block;
+  }
+}
+</style>
diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index 958ce4a3..a3abbeaf 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -38,6 +38,10 @@ const scale = useScaleStore()
         </div>
         <h2>Advanced</h2>
         <div class="control-group">
+          <div class="control checkbox-container">
+            <input id="mos-tab" type="checkbox" v-model="state.showMosTab" />
+            <label for="mos-tab" class="right-of-checkbox">MOS tab in top menu</label>
+          </div>
           <div class="control checkbox-container">
             <input id="virtual-qwerty" type="checkbox" v-model="state.showVirtualQwerty" />
             <label for="virtual-qwerty" class="right-of-checkbox">Virtual QWERTY in top menu</label>