diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index bc0b487c5..0ed4214ca 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -26,6 +26,9 @@ const globalData = {
   layout: 'page.njk',
 };
 
+const passThroughExtensions = ['css', 'png', 'svg', 'jpg', 'mp4'];
+const passThrough = ['docs/**/*.js', ...passThroughExtensions.map(ext => '**/*.' + ext)];
+
 export default function (eleventyConfig) {
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
@@ -155,9 +158,18 @@ export default function (eleventyConfig) {
   //   eleventyConfig.addPlugin(formatCodePlugin());
   // }
 
+  eleventyConfig.addPassthroughCopy({
+    'docs/assets': 'assets',
+  });
+
+  for (let glob of passThrough) {
+    eleventyConfig.addPassthroughCopy(glob);
+  }
+
   return {
     markdownTemplateEngine: 'njk',
     dir: {
+      input: 'docs',
       includes: '_includes',
       layouts: '_layouts',
     },
diff --git a/docs/_includes/page-demo.njk b/docs/_includes/page-demo.njk
index 5e40c2b26..9f92d3f5c 100644
--- a/docs/_includes/page-demo.njk
+++ b/docs/_includes/page-demo.njk
@@ -1,5 +1,5 @@
 <div id="page_slots_demo">
-<link rel="stylesheet" href="/assets/examples/page-demo/demo.css">
+<link rel="stylesheet" href="./demo.css">
 {% set slots = components.page.slots %}
 
 <fieldset id="page_slots_fieldset">
@@ -22,5 +22,5 @@
 
 <script type="module">
   const cacheBust = new Date().toString()
-  import(`/assets/examples/page-demo/demo.js?${cacheBust}`)
+  import(`./demo.js?${cacheBust}`)
 </script>
diff --git a/docs/assets/scripts/cheatsheet.js b/docs/docs/components/cheatsheet/cheatsheet.js
similarity index 100%
rename from docs/assets/scripts/cheatsheet.js
rename to docs/docs/components/cheatsheet/cheatsheet.js
diff --git a/docs/docs/components/cheatsheet.njk b/docs/docs/components/cheatsheet/index.njk
similarity index 97%
rename from docs/docs/components/cheatsheet.njk
rename to docs/docs/components/cheatsheet/index.njk
index cac8444f0..6a84aba51 100644
--- a/docs/docs/components/cheatsheet.njk
+++ b/docs/docs/components/cheatsheet/index.njk
@@ -45,7 +45,7 @@ table code {
 	}
 }
 </script>
-<script type="module" src="/assets/scripts/cheatsheet.js"></script>
+<script type="module" src="./cheatsheet.js"></script>
 
 {% for type, all in componentsBy -%}
 {% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}
diff --git a/docs/assets/examples/page-demo/page.css b/docs/docs/components/page/demo-page.css
similarity index 100%
rename from docs/assets/examples/page-demo/page.css
rename to docs/docs/components/page/demo-page.css
diff --git a/docs/assets/examples/page-demo/demo.css b/docs/docs/components/page/demo.css
similarity index 100%
rename from docs/assets/examples/page-demo/demo.css
rename to docs/docs/components/page/demo.css
diff --git a/docs/assets/examples/page-demo/demo.js b/docs/docs/components/page/demo.js
similarity index 95%
rename from docs/assets/examples/page-demo/demo.js
rename to docs/docs/components/page/demo.js
index 52348f7b5..0b9c69973 100644
--- a/docs/assets/examples/page-demo/demo.js
+++ b/docs/docs/components/page/demo.js
@@ -7,7 +7,7 @@ let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][hre
   .join('\n');
 let includes = `${stylesheets}
   <script src="/dist/webawesome.loader.js" type="module"></script>
-  <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
+  <link rel="stylesheet" href="./demo-page.css">`;
 
 async function render() {
   await customElements.whenDefined('wa-checkbox');
diff --git a/docs/docs/themes.md b/docs/docs/themes/index.md
similarity index 88%
rename from docs/docs/themes.md
rename to docs/docs/themes/index.md
index 5236b23f2..ad711c47f 100644
--- a/docs/docs/themes.md
+++ b/docs/docs/themes/index.md
@@ -3,101 +3,8 @@ title: Themes
 description: Everything you need to know about theming Web Awesome.
 layout: page-outline
 ---
-<style>
-  wa-page > main {
-    max-width: 140ch;
 
-    .max-line-length {
-      max-width: 80ch;
-    }
-  }
-
-  .theme-showcase {
-    container: showcase / inline-size;
-
-    background-color: var(--wa-color-surface-lowered);
-    border-radius: var(--wa-border-radius-l);
-    min-height: 16lh;
-    height: 65vh;
-    max-height: 21lh;
-    padding: var(--wa-space-xl);
-    overflow: hidden;
-    margin-block-end: var(--wa-space-xl);
-
-    &.wa-flank {
-      --content-percentage: 60%;
-      --flank-size: 25ch;
-    }
-  }
-
-  .showcase-examples-wrapper {
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
-  .showcase-examples {
-    column-gap: var(--wa-space-xl);
-
-    & wa-card {
-      display: inline-block;
-      width: 100%;
-
-      &:has(+ wa-card) {
-        margin-block-end: var(--wa-space-xl);
-      }
-    }
-  }
-
-  @supports not (zoom: 1) {
-    .showcase-examples {
-      column-count: 1;
-    }
-
-    @container showcase (width > 750px) {
-      .showcase-examples {
-        column-count: 2;
-      }
-    }
-
-    @container showcase (width > 950px) {
-      .showcase-examples {
-        column-count: 3;
-      }
-    }
-  }
-
-  @supports (zoom: 1) {
-    .showcase-examples {
-      column-count: 1;
-      zoom: 40%;
-    }
-
-    @container showcase (width > 350px) {
-      .showcase-examples {
-        column-count: 2;
-      }
-    }
-
-    @container showcase (width > 450px) {
-      .showcase-examples {
-        zoom: 55%;
-      }
-    }
-
-    @container showcase (width > 750px) {
-      .showcase-examples {
-        zoom: 70%;
-      }
-    }
-
-    @container showcase (width > 950px) {
-      .showcase-examples {
-        column-count: 3;
-        zoom: 70%;
-      }
-    }
-  }
-</style>
+<link rel="stylesheet" href="{{ page.url }}showcase.css" />
 
 <div class="theme-showcase wa-flank wa-gap-xl">
   <div>
@@ -277,13 +184,13 @@ Themes are a collection of standardized [CSS custom properties](https://develope
 
 Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
 
-Each theme may also include both light and dark color schemes with the classes `wa-light` and `wa-dark`. 
-You can use these classes to apply a specific color scheme to an entire page or just a section. 
+Each theme may also include both light and dark color schemes with the classes `wa-light` and `wa-dark`.
+You can use these classes to apply a specific color scheme to an entire page or just a section.
 In pre-made themes, we use a light color scheme by default.
 
 
 Additionally, styles may be scope to the `:root` selector to be activated automatically.
-For pre-made themes, *all* custom properties are scoped to `:where(:root)`, the theme class, and `wa-light`. 
+For pre-made themes, *all* custom properties are scoped to `:where(:root)`, the theme class, and `wa-light`.
 
 :::info
 We use `:where(:root)` to give these styles 0 [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) so that they can be easily overridden. If you plan on using multiple themes in your project, we recommend doing the same for your custom themes.
@@ -418,4 +325,4 @@ Web Awesome's default theme has both light and dark styles built in. However, We
 - Remember the user's preference and restore it on subsequent logins
 
 Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
-</div>
\ No newline at end of file
+</div>
diff --git a/docs/docs/themes/showcase.css b/docs/docs/themes/showcase.css
new file mode 100644
index 000000000..3248dc119
--- /dev/null
+++ b/docs/docs/themes/showcase.css
@@ -0,0 +1,93 @@
+wa-page > main {
+  max-width: 140ch;
+
+  .max-line-length {
+    max-width: 80ch;
+  }
+}
+
+.theme-showcase {
+  container: showcase / inline-size;
+
+  background-color: var(--wa-color-surface-lowered);
+  border-radius: var(--wa-border-radius-l);
+  min-height: 16lh;
+  height: 65vh;
+  max-height: 21lh;
+  padding: var(--wa-space-xl);
+  overflow: hidden;
+  margin-block-end: var(--wa-space-xl);
+
+  &.wa-flank {
+    --content-percentage: 60%;
+    --flank-size: 25ch;
+  }
+}
+
+.showcase-examples-wrapper {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.showcase-examples {
+  column-gap: var(--wa-space-xl);
+
+  & wa-card {
+    display: inline-block;
+    width: 100%;
+
+    &:has(+ wa-card) {
+      margin-block-end: var(--wa-space-xl);
+    }
+  }
+}
+
+@supports not (zoom: 1) {
+  .showcase-examples {
+    column-count: 1;
+  }
+
+  @container showcase (width > 750px) {
+    .showcase-examples {
+      column-count: 2;
+    }
+  }
+
+  @container showcase (width > 950px) {
+    .showcase-examples {
+      column-count: 3;
+    }
+  }
+}
+
+@supports (zoom: 1) {
+  .showcase-examples {
+    column-count: 1;
+    zoom: 40%;
+  }
+
+  @container showcase (width > 350px) {
+    .showcase-examples {
+      column-count: 2;
+    }
+  }
+
+  @container showcase (width > 450px) {
+    .showcase-examples {
+      zoom: 55%;
+    }
+  }
+
+  @container showcase (width > 750px) {
+    .showcase-examples {
+      zoom: 70%;
+    }
+  }
+
+  @container showcase (width > 950px) {
+    .showcase-examples {
+      column-count: 3;
+      zoom: 70%;
+    }
+  }
+}
diff --git a/scripts/build.js b/scripts/build.js
index 68cd64e4d..954690f7b 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -259,9 +259,6 @@ async function generateDocs() {
     .toLowerCase()
     .trim();
 
-  // Copy assets
-  await copy(join(docsDir, 'assets'), join(siteDir, 'assets'), { overwrite: true });
-
   // Copy dist (production only)
   if (!isDeveloping) {
     await copy(cdnDir, join(siteDir, 'dist'));