diff --git a/packages/react-common-docs/next.config.js b/packages/react-common-docs/next.config.js
index 7e8c45c..7c6b705 100644
--- a/packages/react-common-docs/next.config.js
+++ b/packages/react-common-docs/next.config.js
@@ -14,6 +14,7 @@ module.exports = {
     ignoreBuildErrors: true,
   },
   poweredByHeader: false,
+  basePath: '/tesseract/web/react/common',
   webpack(...args) {
     const oldWebpack = e.webpack(...args)
     const [config, { defaultLoaders, }] = args
diff --git a/packages/react-common-docs/src/pages/_document.tsx b/packages/react-common-docs/src/pages/_document.tsx
index 3c48a01..51d6aff 100644
--- a/packages/react-common-docs/src/pages/_document.tsx
+++ b/packages/react-common-docs/src/pages/_document.tsx
@@ -1,3 +1,4 @@
+import pkg from '../../../../package.json'
 import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 
@@ -5,6 +6,7 @@ export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet()
     const originalRenderPage = ctx.renderPage
+    const publicUrl = process.env.NODE_ENV === 'production' ? pkg.homepage : ''
 
     try {
       ctx.renderPage = () =>
@@ -19,9 +21,9 @@ export default class MyDocument extends Document {
         styles: (
           <>
             {initialProps.styles}
-            <link rel="stylesheet" href="/global.css" />
-            <link rel="stylesheet" title="Dark" href="/theme/dark.css" />
-            <link rel="alternate stylesheet" title="Light" href="/theme/light.css" />
+            <link rel="stylesheet" href={`${publicUrl}/global.css`} />
+            <link rel="stylesheet" title="Dark" href={`${publicUrl}/theme/dark.css`} />
+            <link rel="alternate stylesheet" title="Light" href={`${publicUrl}/theme/light.css`} />
             {sheet.getStyleElement()}
           </>
         ),