diff --git a/index.html b/index.html
index 2bf5d01..b58b0d6 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
   <meta name="apple-mobile-web-app-title" content="OmniTools" />
   <link rel="manifest" href="/site.webmanifest" />
-  <link href="/assets/fonts/quicksand/quick-sand.css" rel="stylesheet" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>OmniTools</title>
 </head>
diff --git a/public/assets/background-dark.png b/src/assets/background-dark.png
similarity index 100%
rename from public/assets/background-dark.png
rename to src/assets/background-dark.png
diff --git a/public/assets/background.svg b/src/assets/background.svg
similarity index 100%
rename from public/assets/background.svg
rename to src/assets/background.svg
diff --git a/public/assets/fonts/quicksand/Quicksand-VariableFont_wght.ttf b/src/assets/fonts/quicksand/Quicksand-VariableFont_wght.ttf
similarity index 100%
rename from public/assets/fonts/quicksand/Quicksand-VariableFont_wght.ttf
rename to src/assets/fonts/quicksand/Quicksand-VariableFont_wght.ttf
diff --git a/public/assets/fonts/quicksand/quick-sand.css b/src/assets/fonts/quicksand/quick-sand.css
similarity index 100%
rename from public/assets/fonts/quicksand/quick-sand.css
rename to src/assets/fonts/quicksand/quick-sand.css
diff --git a/public/assets/fonts/quicksand/quicksand-italic.ttf b/src/assets/fonts/quicksand/quicksand-italic.ttf
similarity index 100%
rename from public/assets/fonts/quicksand/quicksand-italic.ttf
rename to src/assets/fonts/quicksand/quicksand-italic.ttf
diff --git a/src/components/App.tsx b/src/components/App.tsx
index a578cc8..925ca3e 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -59,7 +59,7 @@ function App() {
         >
           <CustomSnackBarProvider>
             <UserTypeFilterProvider>
-              <BrowserRouter>
+              <BrowserRouter basename={import.meta.env.BASE_URL}>
                 <Navbar
                   mode={mode}
                   onChangeMode={() => {
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index fbec4a1..6c2d9a8 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -34,7 +34,9 @@ i18n
       escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
     },
     backend: {
-      loadPath: '/locales/{{lng}}/{{ns}}.json'
+      loadPath: `${
+        (import.meta as any).env.BASE_URL?.replace(/\/$/, '') || ''
+      }/locales/{{lng}}/{{ns}}.json`
     },
     detection: {
       lookupLocalStorage: 'lang',
diff --git a/src/index.tsx b/src/index.tsx
index 5e897af..720fd22 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import 'tailwindcss/tailwind.css';
+import 'assets/fonts/quicksand/quick-sand.css';
 import App from 'components/App';
 
 const container = document.getElementById('root') as HTMLDivElement;
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index c65d24f..fca39aa 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -4,6 +4,8 @@ import Categories from './Categories';
 import { Helmet } from 'react-helmet';
 import { useUserTypeFilter } from 'providers/UserTypeFilterProvider';
 import UserTypeFilter from '@components/UserTypeFilter';
+import backgroundDark from 'assets/background-dark.png';
+import backgroundLight from 'assets/background.svg';
 
 export default function Home() {
   const theme = useTheme();
@@ -16,10 +18,8 @@ export default function Home() {
         lg: 5
       }}
       sx={{
-        background: `url(/assets/${
-          theme.palette.mode === 'dark'
-            ? 'background-dark.png'
-            : 'background.svg'
+        background: `url(${
+          theme.palette.mode === 'dark' ? backgroundDark : backgroundLight
         })`,
         backgroundColor: 'background.default'
       }}
diff --git a/vite.config.ts b/vite.config.ts
index e6faab7..a7df857 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,22 +1,26 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config https://vitest.dev/config
-export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
-  define: {
-    'process.env': {}
-  },
-  optimizeDeps: {
-    exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
-  },
-  test: {
-    globals: true,
-    environment: 'happy-dom',
-    setupFiles: '.vitest/setup',
-    include: ['**/*.test.{ts,tsx}']
-  },
-  worker: { format: 'es' }
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  return {
+    base: env.BASE_URL || '/',
+    plugins: [react(), tsconfigPaths()],
+    define: {
+      'process.env': {}
+    },
+    optimizeDeps: {
+      exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
+    },
+    test: {
+      globals: true,
+      environment: 'happy-dom',
+      setupFiles: '.vitest/setup',
+      include: ['**/*.test.{ts,tsx}']
+    },
+    worker: { format: 'es' }
+  };
 });