diff --git a/src/main.ts b/src/main.ts
index 7289ce9..6316ccd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,9 @@
-if (location.pathname === "/waybar") {
+if (location.pathname === import.meta.env.BASE_URL + "/waybar") {
   import("./routes/waybar/waybar").then(({ createWaybarPage }) =>
     createWaybarPage()
   );
 }
 
-if (location.pathname === "/") {
+if (location.pathname === import.meta.env.BASE_URL) {
   import("./routes/root/root").then(({ createRootPage }) => createRootPage());
 }
diff --git a/src/routes/root/root.ts b/src/routes/root/root.ts
index b44739c..c3e5434 100644
--- a/src/routes/root/root.ts
+++ b/src/routes/root/root.ts
@@ -3,6 +3,8 @@ const appElement = document.getElementById("app")!;
 
 export const createRootPage = async () => {
   appElement.innerHTML = `
-    <iframe id="waybar-iframe" src="/waybar"></iframe>
+    <iframe id="waybar-iframe" src="${
+      import.meta.env.BASE_URL
+    }/waybar"></iframe>
   `;
 };
diff --git a/src/routes/waybar/configParser.ts b/src/routes/waybar/configParser.ts
index 7cdc73a..2d48426 100644
--- a/src/routes/waybar/configParser.ts
+++ b/src/routes/waybar/configParser.ts
@@ -282,7 +282,9 @@ export interface WaybarConfig {
 }
 
 export const parseConfig = async () => {
-  const response = await fetch("/resources/config.jsonc");
+  const response = await fetch(
+    import.meta.env.BASE_URL + "/resources/config.jsonc"
+  );
   const jsoncString = await response.text();
   return parse(jsoncString) as WaybarConfig;
 };
diff --git a/src/routes/waybar/utils.ts b/src/routes/waybar/utils.ts
index 066e63f..2ed9938 100644
--- a/src/routes/waybar/utils.ts
+++ b/src/routes/waybar/utils.ts
@@ -4,9 +4,9 @@ export const clamp = (val: number, min: number, max: number) =>
   Math.min(Math.max(val, min), max);
 
 const fetchFontAwesomeStylesheet = async () => {
-  const raw = await fetch("/fontawesome/css/fontawesome.min.css").then((res) =>
-    res.text()
-  );
+  const raw = await fetch(
+    import.meta.env.BASE_URL + "/fontawesome/css/fontawesome.min.css"
+  ).then((res) => res.text());
   return raw;
 };
 
diff --git a/src/routes/waybar/waybar.ts b/src/routes/waybar/waybar.ts
index 45e9079..dcc43ee 100644
--- a/src/routes/waybar/waybar.ts
+++ b/src/routes/waybar/waybar.ts
@@ -9,7 +9,7 @@ const appElement = document.getElementById("app")!;
 export const createWaybarPage = async () => {
   const styleElement = document.createElement("link");
   styleElement.rel = "stylesheet";
-  styleElement.href = "/resources/style.css";
+  styleElement.href = import.meta.env.BASE_URL + "/resources/style.css";
   document.head.appendChild(styleElement);
 
   const config = await parseConfig();
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..fc1702f
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  base: "/waybar-online",
+});