diff --git a/web/src/app.html b/web/src/app.html
index 77a5ff52..a8b06f9e 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -1,12 +1,21 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<script>
+		localStorage.theme === 'dark' ||
+			(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+			? document.documentElement.classList.add('dark')
+			: document.documentElement.classList.add('light');
+	</script>
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/web/src/css/theme.css b/web/src/css/theme.css
index e99d2c4c..1b109183 100644
--- a/web/src/css/theme.css
+++ b/web/src/css/theme.css
@@ -7,6 +7,7 @@
     --content: 0, 0, 0;
 
     --input-background: 249, 250, 251;
+    --input-background-error: 254, 242, 242;
     --input-border: 209, 213, 219;
     --input-border-focus: 36, 39, 52;
     --input-ring: 148, 163, 184;
@@ -32,6 +33,7 @@
     --content: 255, 255, 255;
 
     --input-background: 36, 39, 52;
+    --input-background-error: 69, 10, 10;
     --input-border: 43, 46, 61;
     --input-border-focus: 108, 115, 150;
     --input-ring: 108, 115, 150;
diff --git a/web/src/hooks.server.ts b/web/src/hooks.server.ts
index c7ef0c5f..c2d6d694 100644
--- a/web/src/hooks.server.ts
+++ b/web/src/hooks.server.ts
@@ -1,9 +1,7 @@
-import { createInstance } from '$lib/pocketbase'
+import { createInstance, pb } from '$lib/pocketbase'
 import type { Handle } from '@sveltejs/kit'
 
 export const handle: Handle = async ({ event, resolve }) => {
-  const pb = createInstance()
-
   // load the store data from the request cookie string
   pb.authStore.loadFromCookie(event.request.headers.get('cookie') || '')
   try {
@@ -15,7 +13,7 @@ export const handle: Handle = async ({ event, resolve }) => {
     // clear the auth store on failed refresh
     pb.authStore.clear()
   }
-
+  
   event.locals.pb = pb
   event.locals.user = pb.authStore.model
 
diff --git a/web/src/lib/components/base/button.svelte b/web/src/lib/components/base/button.svelte
index 7e1c343d..120f5373 100644
--- a/web/src/lib/components/base/button.svelte
+++ b/web/src/lib/components/base/button.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <button
-    class={extraClasses}
+    class="{extraClasses} flex items-center justify-center"
     class:btn-primary={primary}
     class:btn-secondary={secondary}
     class:btn-large={large}
diff --git a/web/src/lib/components/base/text_field.svelte b/web/src/lib/components/base/text_field.svelte
index d0d8feec..b642829c 100644
--- a/web/src/lib/components/base/text_field.svelte
+++ b/web/src/lib/components/base/text_field.svelte
@@ -27,7 +27,7 @@
             {name}
             class="bg-input-background border border-input-border rounded-md p-3 transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full {extraClasses}"
             class:border-red-400={error.length > 0}
-            class:bg-red-50={error.length > 0}
+            class:bg-input-background-error={error.length > 0}
             {autocomplete}
             use:typeAction
             bind:value
diff --git a/web/src/lib/stores/theme_store.ts b/web/src/lib/stores/theme_store.ts
index 46c0936e..dae28a22 100644
--- a/web/src/lib/stores/theme_store.ts
+++ b/web/src/lib/stores/theme_store.ts
@@ -6,7 +6,10 @@ type Theme = "dark" | "light"
 export const theme: Writable<Theme> = writable(browser && localStorage.getItem("theme") as Theme || "light" );
 
 export function toggleTheme() {
-    const newTheme = get(theme) === "light" ? "dark" : "light";
+    const currentTheme = get(theme);
+    const newTheme = currentTheme === "light" ? "dark" : "light";
+    document.documentElement.classList.remove(currentTheme)
+    document.documentElement.classList.add(newTheme)    
     theme.set(newTheme)
     localStorage.setItem("theme", newTheme);
 }
\ No newline at end of file
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 9df78de7..d24a1004 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -2,7 +2,6 @@
     import Toast from "$lib/components/base/toast.svelte";
     import Footer from "$lib/components/footer.svelte";
     import NavBar from "$lib/components/nav_bar.svelte";
-    import { theme } from "$lib/stores/theme_store";
     import "@fortawesome/fontawesome-free/css/all.min.css";
     import "../css/app.css";
     import "../css/components.css";
@@ -10,12 +9,10 @@
 </script>
 
 <svelte:head>
-    <title> | wanderer</title>
+    <title>| wanderer</title>
 </svelte:head>
-<div class="theme {$theme}">
-    <NavBar></NavBar>
-    <Toast></Toast>
-    <slot />
+<NavBar></NavBar>
+<Toast></Toast>
+<slot />
 
-    <Footer></Footer>
-</div>
+<Footer></Footer>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 86cd6821..74464f93 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -130,7 +130,7 @@
         class="grid grid-cols-1 lg:grid-cols-2 justify-items-center gap-8 py-8"
     >
         {#each $categories as category}
-            <a href="/trails?category={category.id}">
+            <a href="/trails?category={category.id}" data-sveltekit-preload-data="off">
                 <CategoryCard {category}></CategoryCard>
             </a>
         {/each}
diff --git a/web/src/routes/trail/edit/[id]/+page.ts b/web/src/routes/trail/edit/[id]/+page.ts
index 5ba61159..8f0fef1d 100644
--- a/web/src/routes/trail/edit/[id]/+page.ts
+++ b/web/src/routes/trail/edit/[id]/+page.ts
@@ -1,6 +1,6 @@
 import { Trail } from "$lib/models/trail";
 import { categories_index } from "$lib/stores/category_store";
-import { trail, trails_show } from "$lib/stores/trail_store";
+import { trails_show } from "$lib/stores/trail_store";
 import { error, type Load } from "@sveltejs/kit";
 
 export const load: Load = async ({ params }) => {
diff --git a/web/src/routes/trail/view/[id]/+page.svelte b/web/src/routes/trail/view/[id]/+page.svelte
index 2f97e18a..b4540077 100644
--- a/web/src/routes/trail/view/[id]/+page.svelte
+++ b/web/src/routes/trail/view/[id]/+page.svelte
@@ -274,7 +274,7 @@
                         <button
                             class="leaflet-control fa fa-{mapFullScreen
                                 ? 'minimize'
-                                : 'maximize'} rounded-full text-lg bg-white px-[14px] py-2 hover:bg-gray-100"
+                                : 'maximize'} rounded-full text-lg bg-white text-black px-[14px] py-2 hover:bg-gray-100"
                             style="cursor: pointer !important"
                             on:click={() => toggleMapFullScreen()}
                         ></button>
diff --git a/web/src/routes/trail/view/[id]/+page.ts b/web/src/routes/trail/view/[id]/+page.ts
index 7f374312..d156fff1 100644
--- a/web/src/routes/trail/view/[id]/+page.ts
+++ b/web/src/routes/trail/view/[id]/+page.ts
@@ -2,9 +2,5 @@ import { trails_show } from "$lib/stores/trail_store";
 import type { Load } from "@sveltejs/kit";
 
 export const load: Load = async ({ params }) => {
-    try {
-        await trails_show(params.id!, true)
-    }catch(e) {
-        
-    }
+    await trails_show(params.id!, true)
 };
\ No newline at end of file
diff --git a/web/static/imgs/empty_state.webp b/web/static/imgs/empty_state.webp
index de6ffa18..4b50cad0 100644
Binary files a/web/static/imgs/empty_state.webp and b/web/static/imgs/empty_state.webp differ
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 9e490f55..25d14472 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -12,6 +12,7 @@ export default {
         'secondary-hover': 'rgba(var(--secondary-hover))',
 
         'input-background': 'rgba(var(--input-background))',
+        'input-background-error': 'rgba(var(--input-background-error))',
         'input-border': 'rgba(var(--input-border))',
         'input-border-focus': 'rgba(var(--input-border-focus))',
         'input-ring': 'rgba(var(--input-ring))',
