diff --git a/src/components/site-footer.marko b/src/components/site-footer.marko
new file mode 100644
index 000000000..90c51bd95
--- /dev/null
+++ b/src/components/site-footer.marko
@@ -0,0 +1,19 @@
+import siteMeta from "./data/site.json"
+style {
+    footer {
+        background: var(--color-menu-background);
+        margin-top: var(--spacing-400);
+        padding: 15px;
+    }
+}
+
+<footer class="page-grid-container">
+    <nav class="primary-nav footer-nav" aria-label="Site navigation">
+        <ul role="menubar">
+            <li><anchor role="menuitem" href="archive/index.html">Archive (v${siteMeta.version})</anchor></li>
+            <li><a role="menuitem" href="https://github.com/eBay/skin">Repo</a></li>
+            <li><a role="menuitem" href="/storybook">Storybook</a></li>
+        </ul>
+    </nav>
+    Copyright &copy; 2025 eBay, Inc. All rights reserved.
+</footer>
\ No newline at end of file
diff --git a/src/components/site-header.marko b/src/components/site-header.marko
index c760db634..914d800de 100644
--- a/src/components/site-header.marko
+++ b/src/components/site-header.marko
@@ -43,14 +43,14 @@ import {components} from './components.marko';
 
         <div class="details__content">
             <nav class="components-nav" aria-labelledby="components-nav__title">
-                <h2 class="components-nav__title">CSS Components</h2>
+                <h2 id="components-nav__title" class="components-nav__title">CSS Components</h2>
                 <ul class="modules-expander__list" role="menubar">
                     <components-list components=components/>
                 </ul>
             </nav>
 
             <nav class="examples-nav" aria-labelledby="examples-nav__title">
-                <h2 class="examples-nav__title">Guides</h2>
+                <h2 id="examples-nav__title" class="examples-nav__title">Guides</h2>
                 <ul class="modules-expander__list" role="menubar">
                     <li>
                         <anchor href="guide/page-grid" role="menuitem">Page Grid Use Guide</anchor>
diff --git a/src/components/site-header.style.scss b/src/components/site-header.style.scss
new file mode 100644
index 000000000..2aa6aac8b
--- /dev/null
+++ b/src/components/site-header.style.scss
@@ -0,0 +1,244 @@
+@import "../sass/variables/variables";
+
+header {
+    background-color: var(--color-background-accent);
+    min-height: 100px;
+}
+
+/* HEADER */
+.app-bar {
+    align-items: center;
+    box-sizing: border-box;
+    color: var(--color-neutral-100);
+    /* display: flex; */
+    display: grid;
+    grid-area: 1 / 1 / span 1 / span 8;
+    /* justify-content: space-between; */
+    margin: 0 auto;
+    padding: var(--spacing-200) 0;
+    width: 100%;
+}
+
+.app-bar__title {
+    margin: 0;
+}
+
+.app-bar__title a,
+.app-bar__title a:visited {
+    color: var(--color-foreground-on-inverse);
+    text-decoration: none;
+}
+
+.app-bar__title a:hover {
+    text-decoration: underline;
+}
+
+.app-bar__links {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.app-bar__links li:not(:last-child)::after {
+    content: "";
+    margin: 0 var(--spacing-100);
+}
+
+.app-bar__links a {
+    color: var(--color-foreground-primary);
+    display: inline-block;
+    padding-block: var(--spacing-150);
+    text-decoration: none;
+}
+
+.app-bar__links a:hover {
+    text-decoration: underline;
+}
+
+.app-bar__links a:focus {
+    outline: 1px auto var(--color-foreground-primary);
+}
+
+.app-bar__links a:visited {
+    color: var(--color-foreground-primary);
+}
+
+.top-bar {
+    align-items: center;
+    display: grid;
+    grid-template:
+        "leading content trailing"
+        "fullrow fullrow fullrow"
+        / 50px 1fr;
+    position: relative;
+}
+
+.app-bar-menu {
+    grid-area: leading;
+}
+
+.app-bar__title {
+    grid-area: content;
+}
+
+.primary-nav:not(.footer-nav) {
+    background-color: var(--color-background-secondary);
+    border: 1px solid var(--color-stroke-subtle);
+    border-radius: 3px;
+    box-shadow: var(--shadow-subtle);
+    display: none;
+    font-size: var(--spacing-200);
+    grid-area: fullrow;
+    padding: var(--spacing-200);
+    position: absolute;
+    top: 3px;
+    width: 90%;
+    z-index: 1;
+}
+
+.primary-nav.footer-nav {
+    display: block;
+    margin-bottom: 10px;
+}
+
+.primary-nav.footer-nav a,
+.primary-nav.footer-nav a:visited {
+    color: var(--color-foreground-secondary);
+}
+
+.primary-nav.footer-nav ul {
+    display: flex;
+    gap: 10px;
+    margin: 0;
+    padding: 0;
+}
+
+.primary-nav.footer-nav ul li::marker {
+    content: "";
+    font-size: 0;
+}
+
+.secondary-nav li {
+    line-height: 1.25em;
+    margin-bottom: 0.75em;
+}
+
+.mobile-nav-toggle {
+    border: 1px solid var(--color-background-primary);
+    border-radius: 2px;
+    /* flex-shrink: 0; */
+    height: 28px;
+    justify-items: center;
+    margin-top: 2px;
+    padding: 0;
+    position: static;
+    width: 28px;
+}
+
+.mobile-menu__icon {
+    align-items: center;
+    display: flex;
+    height: 28px;
+    justify-content: center;
+    width: 28px;
+}
+
+svg.icon.mobile-menu__close {
+    display: none;
+}
+
+.mobile-nav-toggle[aria-expanded="true"] svg.icon.mobile-menu__open {
+    display: none;
+}
+
+.mobile-nav-toggle[aria-expanded="true"] ~ .primary-nav {
+    display: block;
+}
+
+.mobile-nav-toggle[aria-expanded="true"] svg.icon.mobile-menu__close {
+    display: block;
+}
+
+@media screen and (min-width: $_screen-size-SM) {
+    .app-bar {
+        grid-area: 1 / 1 / span 1 / span 16;
+    }
+
+    .modules-expander {
+        padding-left: 30px;
+    }
+}
+
+@media screen and (min-width: $_screen-size-MD) {
+    .modules-expander {
+        display: none;
+    }
+
+    header {
+        min-height: auto;
+    }
+
+    .app-bar {
+        grid-area: 1 / 1 / span 1 / span 16;
+    }
+
+    .top-bar {
+        grid-template-columns: auto auto auto;
+    }
+
+    .app-bar__title {
+        grid-area: leading;
+    }
+
+    .app-bar__links {
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
+        list-style-type: none;
+        margin-left: var(--spacing-100);
+    }
+
+    .app-bar__links a {
+        color: var(--color-foreground-on-inverse);
+        padding-block: 0;
+    }
+
+    .app-bar__links a:focus {
+        outline: 1px auto var(--color-foreground-on-inverse);
+    }
+
+    .app-bar__links a:visited {
+        color: var(--color-foreground-on-inverse);
+    }
+
+    .mobile-nav-toggle {
+        display: none;
+    }
+
+    .primary-nav:not(.footer-nav) {
+        background-color: transparent;
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        display: block;
+        font-size: inherit;
+        grid-area: trailing;
+        justify-self: right;
+        padding: 0;
+        position: static;
+        width: auto;
+    }
+}
+
+@media screen and (min-width: $_screen-size-XL) {
+    #about dl {
+        column-count: 2;
+    }
+}
+
+@media screen and (min-width: $_screen-size-XL3) {
+    .app-bar {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
diff --git a/src/routes/_index/+layout.marko b/src/routes/_index/+layout.marko
index f70aa361a..0ccbabfc1 100644
--- a/src/routes/_index/+layout.marko
+++ b/src/routes/_index/+layout.marko
@@ -1,4 +1,3 @@
-import siteMeta from "../../components/data/site.json"
 <!doctype html>
 <html lang="en">
     <head>
@@ -19,15 +18,6 @@ import siteMeta from "../../components/data/site.json"
                 </main>
             </div>
         </div>
-        <footer class="page-grid-container">
-            <nav class="primary-nav footer-nav" aria-label="Site navigation">
-                <ul role="menubar">
-                    <li><anchor role="menuitem" href="archive/index.html">Archive (v${siteMeta.version})</anchor></li>
-                    <li><a role="menuitem" href="https://github.com/eBay/skin">Repo</a></li>
-                    <li><a role="menuitem" href="/storybook">Storybook</a></li>
-                </ul>
-            </nav>
-            Copyright © 2025 eBay, Inc. All rights reserved.
-        </footer>
+        <site-footer/>
     </body>
 </html>
\ No newline at end of file
diff --git a/src/routes/_index/+layout.style.scss b/src/routes/_index/+layout.style.scss
index 1bae2e0e8..14010ff6d 100644
--- a/src/routes/_index/+layout.style.scss
+++ b/src/routes/_index/+layout.style.scss
@@ -4,7 +4,6 @@
 @import "../static/sass/pygments";
 @import "../static/sass/demo-colors";
 @import "../static/sass/page-grid";
-@import "../static/sass/breakpoints";
 @import "../static/sass/color-schemes";
 @import "../../sass/bundles/skin-full";
 
@@ -33,21 +32,9 @@ body > svg {
 }
 
 h1 {
-    // font-size: 18px;
     font-size: 1.25em;
 }
 
-header {
-    background-color: var(--color-background-accent);
-    min-height: 100px;
-}
-
-footer {
-    background: var(--color-menu-background);
-    margin-top: var(--spacing-400);
-    padding: 15px;
-}
-
 main > div > h2 {
     font-size: var(--font-size-large-1);
     margin-bottom: var(--spacing-100);
@@ -63,228 +50,88 @@ nav h2 {
     font-size: 18px;
 }
 
-/* HEADER */
-.app-bar {
-    align-items: center;
-    box-sizing: border-box;
-    color: var(--color-neutral-100);
-    /* display: flex; */
-    display: grid;
-    grid-area: 1 / 1 / span 1 / span 8;
-    /* justify-content: space-between; */
-    margin: 0 auto;
-    padding: var(--spacing-200) 0;
-    width: 100%;
-}
-
-.app-bar__title {
-    margin: 0;
-}
-
-.app-bar__title a,
-.app-bar__title a:visited {
-    color: var(--color-foreground-on-inverse);
-    text-decoration: none;
-}
-
-.app-bar__title a:hover {
-    text-decoration: underline;
-}
-
-.app-bar__links {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.app-bar__links li:not(:last-child)::after {
-    content: "";
-    margin: 0 var(--spacing-100);
-}
-
-.app-bar__links a {
-    color: var(--color-foreground-primary);
-    display: inline-block;
-    padding-block: var(--spacing-150);
-    text-decoration: none;
-}
-
-.app-bar__links a:hover {
-    text-decoration: underline;
-}
-
-.app-bar__links a:focus {
-    outline: 1px auto var(--color-foreground-primary);
-}
-
-.app-bar__links a:visited {
-    color: var(--color-foreground-primary);
-}
-
-.top-bar {
-    align-items: center;
-    display: grid;
-    grid-template:
-        "leading content trailing"
-        "fullrow fullrow fullrow"
-        / 50px 1fr;
-    position: relative;
-}
-
-.app-bar-menu {
-    grid-area: leading;
-}
-
-.app-bar__title {
-    grid-area: content;
-}
-
-.primary-nav:not(.footer-nav) {
-    background-color: var(--color-background-secondary);
-    border: 1px solid var(--color-stroke-subtle);
-    border-radius: 3px;
-    box-shadow: var(--shadow-subtle);
-    display: none;
-    font-size: var(--spacing-200);
-    grid-area: fullrow;
-    padding: var(--spacing-200);
-    position: absolute;
-    top: 3px;
-    width: 90%;
-    z-index: 1;
-}
-
-.primary-nav.footer-nav {
-    display: block;
-    margin-bottom: 10px;
-}
-
-.primary-nav.footer-nav a,
-.primary-nav.footer-nav a:visited {
-    color: var(--color-foreground-secondary);
-}
-
-.primary-nav.footer-nav ul {
-    display: flex;
-    gap: 10px;
-    margin: 0;
-    padding: 0;
-}
-
-.primary-nav.footer-nav ul li::marker {
-    content: "";
-    font-size: 0;
-}
-
-.secondary-nav li {
-    line-height: 1.25em;
-    margin-bottom: 0.75em;
-}
-
-.mobile-nav-toggle {
-    border: 1px solid var(--color-background-primary);
-    border-radius: 2px;
-    /* flex-shrink: 0; */
-    height: 28px;
-    justify-items: center;
-    margin-top: 2px;
-    padding: 0;
-    position: static;
-    width: 28px;
-}
-
-.mobile-menu__icon {
-    align-items: center;
-    display: flex;
-    height: 28px;
-    justify-content: center;
-    width: 28px;
-}
-
-svg.icon.mobile-menu__close {
+.site-nav {
     display: none;
 }
 
-.mobile-nav-toggle[aria-expanded="true"] svg.icon.mobile-menu__open {
-    display: none;
-}
-
-.mobile-nav-toggle[aria-expanded="true"] ~ .primary-nav {
-    display: block;
-}
+@media screen and (min-width: $_screen-size-SM) {
+    .site-nav {
+        height: calc(100vh - 60px);
+        margin-bottom: var(--spacing-800);
+        overflow-y: scroll;
+        position: sticky;
+        top: 0;
+    }
 
-.mobile-nav-toggle[aria-expanded="true"] svg.icon.mobile-menu__close {
-    display: block;
-}
+    .site-nav h2 {
+        font-size: var(--font-size-18);
+        margin-bottom: var(--spacing-100);
+        margin-top: var(--spacing-200);
+    }
 
-@media screen and (min-width: $_screen-size-SM) {
-    .app-bar {
-        grid-area: 1 / 1 / span 1 / span 16;
+    .site-nav h2:first-of-type {
+        margin-top: var(--spacing-400);
     }
 
-    header {
-        min-height: auto;
+    .site-nav ul {
+        line-height: 1.5em;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
     }
-}
 
-@media screen and (min-width: $_screen-size-MD) {
-    h1 {
-        font-size: var(--font-size-large-2);
+    .site-nav ul:last-child {
+        padding-bottom: var(--spacing-400);
     }
 
-    nav h2 {
-        font-size: initial;
+    .site-nav a {
+        text-decoration: none;
     }
 
-    .app-bar {
-        grid-area: 1 / 1 / span 1 / span 16;
+    .site-nav a:visited {
+        color: var(--color-foreground-primary);
     }
 
-    .top-bar {
-        grid-template-columns: auto auto auto;
+    .demo-color-primitve li::before,
+    .demo-color-token li::before {
+        display: inline-block;
+        width: 50px;
     }
+}
 
-    .app-bar__title {
-        grid-area: leading;
+@media screen and (min-width: $_screen-size-MD) {
+    .site-nav {
+        display: block;
     }
 
-    .app-bar__links {
-        display: flex;
-        flex-direction: row;
-        flex-shrink: 0;
-        list-style-type: none;
-        margin-left: var(--spacing-100);
+    h1 {
+        font-size: var(--font-size-large-2);
     }
 
-    .app-bar__links a {
-        color: var(--color-foreground-on-inverse);
-        padding-block: 0;
+    nav h2 {
+        font-size: initial;
     }
+}
 
-    .app-bar__links a:focus {
-        outline: 1px auto var(--color-foreground-on-inverse);
+@media screen and (min-width: $_screen-size-XL) {
+    .demo-color-primitive {
+        column-count: 4;
     }
 
-    .app-bar__links a:visited {
-        color: var(--color-foreground-on-inverse);
+    .demo-color-swatches,
+    .demo-color-token {
+        column-count: 2;
     }
+}
 
-    .mobile-nav-toggle {
-        display: none;
+@media screen and (min-width: $_screen-size-XL3) {
+    .demo-color-primitive {
+        column-count: 5;
     }
 
-    .primary-nav:not(.footer-nav) {
-        background-color: transparent;
-        border: none;
-        border-radius: 0;
-        box-shadow: none;
-        display: block;
-        font-size: inherit;
-        grid-area: trailing;
-        justify-self: right;
-        padding: 0;
-        position: static;
-        width: auto;
+    .demo-color-swatches,
+    .demo-color-token {
+        column-count: 3;
     }
 }
 
@@ -390,65 +237,11 @@ figure.highlight {
     padding: var(--spacing-100) 0;
 }
 
-// .app-bar {
-//     align-items: center;
-//     box-sizing: border-box;
-//     color: var(--color-neutral-100);
-//     display: flex;
-//     grid-area: 1 / 1 / span 1 / span 8;
-//     justify-content: space-between;
-//     margin: 0 auto;
-//     padding: var(--spacing-200) 0;
-//     width: 100%;
-// }
-
-// @media screen and (min-width: $_screen-size-MD) {
-//     .app-bar {
-//         grid-area: 1 / 1 / span 1 / span 16;
-//     }
-// }
-
-// .app-bar__title {
-//     font-size: var(--font-size-large-2);
-//     margin: 0;
-// }
-
-// .app-bar__links {
-//     display: flex;
-//     flex-direction: row;
-//     flex-shrink: 0;
-//     list-style-type: none;
-//     margin-left: var(--spacing-100);
-//     padding: 0;
-// }
-
-// .app-bar__links li:not(:last-child)::after {
-//     content: "";
-//     margin: 0 var(--spacing-100);
-// }
-
-// .app-bar__links a {
-//     color: var(--color-neutral-100);
-//     text-decoration: none;
-// }
-
 .modules-expander__list a,
 .modules-expander__list a.nav-link:visited {
     color: var(--color-foreground-accent);
 }
 
-// .app-bar__links a:hover {
-//     text-decoration: underline;
-// }
-
-// .app-bar__links a:focus {
-//     outline: 1px auto var(--color-neutral-100);
-// }
-
-// .app-bar__links a:visited {
-//     color: var(--color-neutral-100);
-// }
-
 .section-header {
     display: flex;
     margin: var(--spacing-200) 0;
@@ -466,22 +259,6 @@ figure.highlight {
     padding: 2px 4px;
 }
 
-/* ABOUT SECTION */
-
-#about dl {
-    margin: 16px 0 32px;
-}
-
-#about dt {
-    font-size: 18px;
-    font-weight: bold;
-    margin: 0 0 12px;
-}
-
-#about dd {
-    margin: 0 0 12px;
-}
-
 /* DEMO SECTIONS */
 
 .demo {
@@ -550,53 +327,6 @@ span.demo__inner {
     margin: 1rem 0;
 }
 
-/* CAROUSEL SECTION */
-
-.carousel__list--default-demo li {
-    background-color: var(--color-indigo-200);
-    border-radius: var(--border-radius-50);
-    color: var(--color-foreground-primary);
-    font-size: var(--font-size-large-2);
-    font-weight: bold;
-    height: 120px;
-    line-height: 120px;
-    margin-right: var(--spacing-200);
-    text-align: center;
-    width: 200px;
-}
-
-.carousel__list--discrete-demo li {
-    background-color: var(--color-indigo-200);
-    border-radius: var(--border-radius-50);
-    box-sizing: border-box;
-    color: var(--color-foreground-primary);
-    font-size: var(--font-size-large-2);
-    font-weight: bold;
-    height: 120px;
-    line-height: 120px;
-    margin-right: var(--spacing-200);
-    text-align: center;
-    width: calc(25% - 24px);
-}
-
-.carousel__list--slideshow-demo li {
-    background-color: var(--color-indigo-200);
-    border-radius: var(--border-radius-50);
-    color: var(--color-foreground-primary);
-    font-size: var(--font-size-giant-2);
-    font-weight: bold;
-    height: 300px;
-    line-height: 300px;
-    margin-right: var(--spacing-200);
-    text-align: center;
-    width: 100%;
-}
-
-.carousel__list--discrete-demo li:last-child,
-.carousel__list--slideshow-demo li:last-child {
-    margin-right: 0;
-}
-
 /* UTILITY & LESS SECTION */
 
 .striped-table {
@@ -762,16 +492,4 @@ span.icon {
     color: var(--color-foreground-primary);
 }
 
-/* CHART SECTION */
-
-.donut-chart__graph > div {
-    background-color: var(--color-background-secondary);
-    border-radius: 16px;
-    display: grid;
-    height: 100%;
-    place-items: center;
-    position: absolute;
-    width: 100%;
-}
-
 /* stylelint-enable no-descending-specificity */
diff --git a/src/routes/_index/+page.marko b/src/routes/_index/+page.marko
index c77c7177a..756b4e8cf 100644
--- a/src/routes/_index/+page.marko
+++ b/src/routes/_index/+page.marko
@@ -1,5 +1,21 @@
 import skinGraphic from "../static/skin-graphic.png";
 
+style {
+    #about dl {
+    margin: 16px 0 32px;
+    }
+
+    #about dt {
+        font-size: 18px;
+        font-weight: bold;
+        margin: 0 0 12px;
+    }
+
+    #about dd {
+        margin: 0 0 12px;
+    }
+}
+
 <about/>
 <img class="skin-graphic" src=skinGraphic alt="" />
 <install/>
diff --git a/src/routes/_index/component/carousel/+page.marko b/src/routes/_index/component/carousel/+page.marko
index 988b3e246..eecb57205 100644
--- a/src/routes/_index/component/carousel/+page.marko
+++ b/src/routes/_index/component/carousel/+page.marko
@@ -1,3 +1,50 @@
+style {
+    .carousel__list--default-demo li {
+        background-color: var(--color-indigo-200);
+        border-radius: var(--border-radius-50);
+        color: var(--color-foreground-primary);
+        font-size: var(--font-size-large-2);
+        font-weight: bold;
+        height: 120px;
+        line-height: 120px;
+        margin-right: var(--spacing-200);
+        text-align: center;
+        width: 200px;
+    }
+
+    .carousel__list--discrete-demo li {
+        background-color: var(--color-indigo-200);
+        border-radius: var(--border-radius-50);
+        box-sizing: border-box;
+        color: var(--color-foreground-primary);
+        font-size: var(--font-size-large-2);
+        font-weight: bold;
+        height: 120px;
+        line-height: 120px;
+        margin-right: var(--spacing-200);
+        text-align: center;
+        width: calc(25% - 24px);
+    }
+
+    .carousel__list--slideshow-demo li {
+        background-color: var(--color-indigo-200);
+        border-radius: var(--border-radius-50);
+        color: var(--color-foreground-primary);
+        font-size: var(--font-size-giant-2);
+        font-weight: bold;
+        height: 300px;
+        line-height: 300px;
+        margin-right: var(--spacing-200);
+        text-align: center;
+        width: 100%;
+    }
+
+    .carousel__list--discrete-demo li:last-child,
+    .carousel__list--slideshow-demo li:last-child {
+        margin-right: 0;
+    }
+}
+
 <div id="carousel">
     <section-header metadata=metadata/>
 
diff --git a/src/routes/_index/component/donut-chart/+page.marko b/src/routes/_index/component/donut-chart/+page.marko
index 4d9f16afd..3f0b9dde8 100644
--- a/src/routes/_index/component/donut-chart/+page.marko
+++ b/src/routes/_index/component/donut-chart/+page.marko
@@ -1,3 +1,14 @@
+style {
+    .donut-chart__graph > div {
+        background-color: var(--color-background-secondary);
+        border-radius: 16px;
+        display: grid;
+        height: 100%;
+        place-items: center;
+        position: absolute;
+        width: 100%;
+    }
+}
 <div id="donut-chart">
     <section-header metadata=metadata/>
     <h3>ALPHA: APIs are subject to change</h3>
diff --git a/src/routes/static/sass/breakpoints.scss b/src/routes/static/sass/breakpoints.scss
deleted file mode 100644
index fc6e318d7..000000000
--- a/src/routes/static/sass/breakpoints.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import "../../../sass/variables/variables";
-
-.site-nav {
-    display: none;
-}
-
-@media screen and (min-width: $_screen-size-SM) {
-    .modules-expander {
-        display: none;
-    }
-
-    .site-nav {
-        display: block;
-    }
-}
-
-@media screen and (min-width: $_screen-size-SM) {
-    .site-nav {
-        height: calc(100vh - 60px);
-        margin-bottom: var(--spacing-800);
-        overflow-y: scroll;
-        position: sticky;
-        top: 0;
-    }
-
-    .site-nav h2 {
-        font-size: var(--font-size-18);
-        margin-bottom: var(--spacing-100);
-        margin-top: var(--spacing-200);
-    }
-
-    .site-nav h2:first-of-type {
-        margin-top: var(--spacing-400);
-    }
-
-    .site-nav ul {
-        line-height: 1.5em;
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .site-nav ul:last-child {
-        padding-bottom: var(--spacing-400);
-    }
-
-    .site-nav a {
-        text-decoration: none;
-    }
-
-    .site-nav a:visited {
-        color: var(--color-foreground-primary);
-    }
-
-    .demo-color-primitve li::before,
-    .demo-color-token li::before {
-        display: inline-block;
-        width: 50px;
-    }
-}
-
-@media screen and (min-width: $_screen-size-XL) {
-    #about dl {
-        column-count: 2;
-    }
-
-    .demo-color-primitive {
-        column-count: 4;
-    }
-
-    .demo-color-swatches,
-    .demo-color-token {
-        column-count: 2;
-    }
-}
-
-@media screen and (min-width: $_screen-size-XL3) {
-    .app-bar {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .demo-color-primitive {
-        column-count: 5;
-    }
-
-    .demo-color-swatches,
-    .demo-color-token {
-        column-count: 3;
-    }
-}
diff --git a/src/routes/static/sass/index.scss b/src/routes/static/sass/index.scss
index 3d521c148..3a20e9a77 100644
--- a/src/routes/static/sass/index.scss
+++ b/src/routes/static/sass/index.scss
@@ -4,7 +4,6 @@
 @import "pygments";
 @import "demo-colors";
 @import "page-grid";
-@import "breakpoints";
 @import "color-schemes";
 
 :root {
diff --git a/src/routes/static/sass/page-grid.scss b/src/routes/static/sass/page-grid.scss
index 9624e9fb6..04b632250 100644
--- a/src/routes/static/sass/page-grid.scss
+++ b/src/routes/static/sass/page-grid.scss
@@ -14,16 +14,16 @@ footer {
 }
 
 @media screen and (min-width: $_screen-size-SM) {
-    .site-nav {
-        grid-area: #{1 / 1 / span 1 / span 5};
-    }
+    // .site-nav {
+    //     grid-area: #{1 / 1 / span 1 / span 5};
+    // }
 
     .content {
         grid-area: #{1 / 1 / span 1 / span 16};
     }
 
     main {
-        grid-area: #{1 / 6 / span 1 / span 11};
+        grid-area: #{1 / 1 / span 1 / span 16};
     }
 
     footer {
@@ -33,7 +33,7 @@ footer {
 
 @media screen and (min-width: $_screen-size-MD) {
     .site-nav {
-        grid-area: #{1 / 1 / span 1 / span 3};
+        grid-area: #{1 / 1 / span 1 / span 5};
     }
 
     .content {
@@ -41,7 +41,7 @@ footer {
     }
 
     main {
-        grid-area: #{1 / 4 / span 1 / span 13};
+        grid-area: #{1 / 6 / span 1 / span 11};
     }
 
     footer {
@@ -49,12 +49,12 @@ footer {
     }
 }
 
-@media screen and (min-width: $_screen-size-XL) {
+@media screen and (min-width: $_screen-size-LG) {
     .site-nav {
-        grid-area: #{1 / 1 / span 1 / span 2};
+        grid-area: #{1 / 1 / span 1 / span 3};
     }
 
     main {
-        grid-area: #{1 / 3 / span 1 / span 14};
+        grid-area: #{1 / 4 / span 1 / span 13};
     }
 }