diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js
index 1e18bebe9..3b6a9287a 100644
--- a/packages/webawesome/docs/.eleventy.js
+++ b/packages/webawesome/docs/.eleventy.js
@@ -227,7 +227,11 @@ export default async function (eleventyConfig) {
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+    // We use WA (free) via the public CDN for CodePen examples
+    return (
+      `https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@${packageData.version}/dist-cdn/` +
+      (location || '').replace(/^\//, '')
+    );
   });
 
   // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
diff --git a/packages/webawesome/docs/_includes/head.njk b/packages/webawesome/docs/_includes/head.njk
index 8c5394274..63adce616 100644
--- a/packages/webawesome/docs/_includes/head.njk
+++ b/packages/webawesome/docs/_includes/head.njk
@@ -25,12 +25,12 @@
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
 
 <script type="module">
-  document.addEventListener("wa-discovery-complete", loadLayout)
+  document.addEventListener('wa-discovery-complete', loadLayout)
   function loadLayout () {
-    if (!customElements.get("wa-layout")) {
-      import("{% cdnUrl 'components/page/page.js' %}")
+    if (!customElements.get('wa-page')) {
+      import('https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/components/page/page.js')
         .catch((e) => {
-        // known errors with dual registration. This is only a thing in the free repo.
+          // known errors with dual registration. This is only a thing in the free repo.
         })
     }
   }