diff --git a/docs/_layouts/theme.njk b/docs/_layouts/theme.njk
index 63693354c..bbbf4cf87 100644
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -25,8 +25,8 @@ wa_data.palettes = {
   {% endfor %}
 };
 </script>
-<link href="{{ page.url }}../remix.css" rel="stylesheet">
-<script src="{{ page.url }}../remix.js" type="module"></script>
+<link href="/docs/themes/remix.css" rel="stylesheet">
+<script src="/docs/themes/remix.js" type="module"></script>
 {% endblock %}
 
 {% block header %}
diff --git a/docs/docs/themes/remix.js b/docs/docs/themes/remix.js
index f997541f0..322957e82 100644
--- a/docs/docs/themes/remix.js
+++ b/docs/docs/themes/remix.js
@@ -30,8 +30,8 @@ function init() {
 
   codeSnippets = document.querySelector('#usage ~ wa-tab-group.import-stylesheet-code:first-of-type');
   codeSnippets = {
-    html: codeSnippets.querySelector('code.language-html'),
-    css: codeSnippets.querySelector('code.language-css'),
+    html: codeSnippets?.querySelector('code.language-html'),
+    css: codeSnippets?.querySelector('code.language-css'),
   };
 
   data = {
@@ -69,10 +69,10 @@ function init() {
 
   Promise.all(Object.values(selects).map(select => select.updateComplete)).then(() => render());
 
-  return { selects, codeSnippets, data, computed, render };
+  globalThis.remixApp = { selects, codeSnippets, data, computed, render };
 }
 
-globalThis.remixApp = init();
+init()
 
 // Async load CSS for other themes *before* current theme stylesheet
 let themeStylesheet = document.querySelector('#theme-stylesheet');
@@ -149,6 +149,5 @@ function render(changedAspect) {
   }
 }
 
-addEventListener('turbo:render', event => {
-  remixApp = init();
-});
+// make sure to use a stable function reference here.
+addEventListener('turbo:render', init)