diff --git a/.github/workflows/sync_canon.yml b/.github/workflows/sync_canon.yml
index e6365bb1dd..ea4f0ebb45 100644
--- a/.github/workflows/sync_canon.yml
+++ b/.github/workflows/sync_canon.yml
@@ -26,11 +26,11 @@ jobs:
         with:
           cache-prefix: ${{ runner.os }}-v20.x
 
-      - name: Checkout backstage/canon-docs
+      - name: Checkout backstage/canon-storybook
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          repository: backstage/canon-docs
-          path: canon-docs
+          repository: backstage/canon-storybook
+          path: canon-external-docs
           token: ${{ secrets.GH_SERVICE_ACCOUNT_TOKEN }}
 
       - name: Configure Git
@@ -43,14 +43,14 @@ jobs:
         run: |
           yarn build
 
-      - name: Replace contents of canon-docs repo with docs build output
-        working-directory: canon-docs
+      - name: Replace contents of canon-external-docs repo with docs build output
+        working-directory: canon-external-docs
         run: |
           git rm -rf .
-          cp -R out/. .
+          cp -R ../canon-docs/out/. .
 
-      - name: Commit to canon-docs repo
-        working-directory: canon-docs
+      - name: Commit to canon-storybook repo
+        working-directory: canon-external-docs
         run: |
           git add .
           git commit -am "Canon Docs build for backstage/backstage@${{ github.sha }}"
diff --git a/canon-docs/next.config.mjs b/canon-docs/next.config.mjs
index 9d2e12cefb..4177bd8408 100644
--- a/canon-docs/next.config.mjs
+++ b/canon-docs/next.config.mjs
@@ -2,18 +2,8 @@ import createMDX from '@next/mdx';
 
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
-  /**
-   * Enable static exports for the App Router.
-   *
-   * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
-   */
   output: 'export',
-  /**
-   * Disable server-based image optimization. Next.js does not support
-   * dynamic features with static exports.
-   *
-   * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
-   */
+  assetPrefix: '/',
   images: {
     unoptimized: true,
   },
diff --git a/canon-docs/public/.nojekyll b/canon-docs/public/.nojekyll
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/canon-docs/public/CNAME b/canon-docs/public/CNAME
new file mode 100644
index 0000000000..01f6d196cc
--- /dev/null
+++ b/canon-docs/public/CNAME
@@ -0,0 +1 @@
+canon.backstage.io
\ No newline at end of file
diff --git a/canon-docs/src/app/(docs)/page.mdx b/canon-docs/src/app/(docs)/page.mdx
index 4b93ed6694..09d4d83ea3 100644
--- a/canon-docs/src/app/(docs)/page.mdx
+++ b/canon-docs/src/app/(docs)/page.mdx
@@ -1,6 +1,9 @@
 import { CodeBlock } from '@/components/CodeBlock';
 
-<img src="header.png" style={{ width: '100%', marginBottom: '32px' }} />
+<img
+  src="header.png"
+  style={{ width: '100%', marginBottom: '32px', marginTop: '64px' }}
+/>
 
 Welcome to the Canon, the new design library for Backstage plugins. This
 project is still under active development but we will make sure to document