diff --git a/.github/workflows/publish-gh-pages.yml b/.github/workflows/publish-gh-pages.yml
index 5daa40c..dd9d443 100644
--- a/.github/workflows/publish-gh-pages.yml
+++ b/.github/workflows/publish-gh-pages.yml
@@ -21,6 +21,8 @@ jobs:
           node-version: latest
 
       - name: build
+        env:
+          PUBLIC_PATH: /metacubexd
         run: |
           pnpm install
           pnpm build
diff --git a/src/App.tsx b/src/App.tsx
index 631b2b1..841896c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,10 @@ export const App = () => {
   })
 
   return (
-    <div class="app relative" data-theme={curTheme()}>
+    <div
+      class="relative min-h-screen p-4 subpixel-antialiased"
+      data-theme={curTheme()}
+    >
       <div class="sticky inset-x-0 top-0 z-50 flex items-center rounded-md bg-base-200 px-4 py-2">
         <Show when={location.pathname !== '/setup'}>
           <Header />
diff --git a/src/index.css b/src/index.css
index 7b75e52..510ff1d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,9 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 @tailwind variants;
-
-.app {
-  min-height: 100vh;
-  padding: 1rem;
-  @apply subpixel-antialiased;
-}
diff --git a/src/index.tsx b/src/index.tsx
index 0333bda..f6113db 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,11 @@
+import '~/index.css'
+
 /* @refresh reload */
 import 'solid-devtools'
 import { render } from 'solid-js/web'
 
 import { Router, hashIntegration } from '@solidjs/router'
 import { App } from './App'
-import './index.css'
 
 const root = document.getElementById('root')
 
diff --git a/vite.config.ts b/vite.config.ts
index 1e08ea9..6023df9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite'
 import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
+  base: process.env.PUBLIC_PATH || '/',
   resolve: {
     alias: {
       '~': '/src',