diff --git a/frontend/src/app.scss b/frontend/src/app.scss
index 052ec15..53bb026 100644
--- a/frontend/src/app.scss
+++ b/frontend/src/app.scss
@@ -16,3 +16,8 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 @import "@fortawesome/fontawesome-free/scss/solid.scss";
 @import "@fortawesome/fontawesome-free/scss/brands.scss";
 @import "@fortawesome/fontawesome-free/scss/v4-shims.scss";
+
+// https://github.com/mefechoel/svelte-navigator#what-are-the-weird-rectangles-around-the-headings-in-my-app
+h1:focus {
+    outline: none;
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index dae47f3..df518ab 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,12 +4,17 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [svelte()],
+
+  // https://github.com/mefechoel/svelte-navigator#im-using-vite-why-am-i-getting-errors-with-svelte-navigator
+  optimizeDeps: { exclude: ["svelte-navigator"] },
+
   build: {
     manifest: true,
     rollupOptions: {
       input: 'src/main.ts'
     }
   },
+
   server: {
     origin: 'http://localhost:5173'
   }