diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index fcfe247..2bd3fe1 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -11,6 +11,7 @@ import StoryMode from "./pages/StoryMode.svelte";
 import Welcome from "./pages/Welcome.svelte";
 import { parseJSON } from "./index";
 import arenaImages from "./arena-images";
+import { currentTheme, THEMES } from "./settings";
 
 const backgroundImage =
   arenaImages[Math.floor(Math.random() * arenaImages.length)];
@@ -33,6 +34,15 @@ let eventsVisible = $state(false);
 
 let showGuiSettings = $state(false);
 
+let mainClassString = $derived(
+  (
+    THEMES[$currentTheme] ??
+    (window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? THEMES["Dark blurred"]
+      : THEMES["Light"])
+  ).join(" "),
+);
+
 let paths: {
   tagName: string | null;
   repo: string | null;
@@ -44,8 +54,11 @@ let paths: {
 
 <Toaster />
 
-<main style={`background-image: url("${backgroundImage}")`}>
-  <div class={"navbar " + (activePage == "welcome" ? "offset" : "")}>
+<main
+  class={mainClassString}
+  style={`background-image: url("${backgroundImage}")`}
+>
+  <div class={"navbar blurred" + (activePage == "welcome" ? " offset" : "")}>
     <div>
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -105,7 +118,10 @@ let paths: {
             >GUI Settings</button
           >
           <button
-            onclick={()=>{activePage = "welcome"}}
+            onclick={()=>{
+              activePage = "welcome";
+              (document.activeElement as HTMLElement)?.blur()}
+            }
             >Re-open setup screen</button
           >
         </div>
@@ -158,14 +174,17 @@ let paths: {
     height: 3rem;
     justify-content: space-between;
     padding: 0.1rem;
-    /* Nice transparent blur */
-    background-color: rgba(0, 0, 0, 0.6);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    /* background: var(--background-alt);
-    color: var(--foreground-alt); */
+    background: var(--background);
+    color: var(--foreground);
     transition: translate 0.2s ease-in-out;
   }
+
+  .navbar:has(.dropdown:focus-within) {
+    /* We cannot set z-index in the child because it is implicitly set to
+        0 here unless specified due to the backdrop-filter (i think?) */
+    z-index: 1;
+  }
+
   .navbar.offset {
     translate: 0 -100%;
   }
@@ -234,7 +253,7 @@ let paths: {
     border-radius: 0.2rem;
   }
   #events img {
-    filter: invert() brightness(90%);
+    filter: invert() brightness(var(--icon-brightness));
     width: 20px;
     vertical-align: middle;
     margin-bottom: 4px;
diff --git a/frontend/src/components/BotList.svelte b/frontend/src/components/BotList.svelte
index e6020b6..1b8dcf4 100644
--- a/frontend/src/components/BotList.svelte
+++ b/frontend/src/components/BotList.svelte
@@ -4,7 +4,7 @@ import { Browser } from "@wailsio/runtime";
 import SuperJSON from "superjson";
 import toast from "svelte-5-french-toast";
 import { flip } from "svelte/animate";
-import { App, BotInfo } from "../../bindings/gui";
+import { App, BotInfo, HumanInfo, PsyonixBotInfo } from "../../bindings/gui";
 import infoIcon from "../assets/info_icon.svg";
 import defaultIcon from "../assets/rlbot_mono.png";
 import starIcon from "../assets/star.svg";
@@ -110,11 +110,6 @@ $effect(() => {
 });
 
 let selectedAgent: [BotInfo, string, string] | null = $state(null);
-$effect(() => {
-  if (!showInfoModal && !showLoadoutEditor) {
-    selectedAgent = null;
-  }
-});
 
 const filteredBots: DraggablePlayer[] = $derived.by(() =>
   filterBots(bots, selectedTags, showHuman, searchQuery),
@@ -315,7 +310,7 @@ function SelectedToggleFavorite() {
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   {#each filteredBots as bot (bot.id)}
     <div
-      class="bot"
+      class="bot blurred"
       use:draggable={{
         container: "botlist",
         dragData: SuperJSON.stringify(bot),
@@ -324,7 +319,14 @@ function SelectedToggleFavorite() {
       animate:flip={{ duration: flipDurationMs }}
       onclick={() => handleBotClick(bot)}
     >
-      <img src={bot.icon || defaultIcon} alt="icon" />
+      <img
+        src={bot.icon || defaultIcon}
+        alt="icon"
+        style={ /* Fix light and dark theme for default icon */
+          (!bot.icon || bot.player instanceof HumanInfo)
+          ? "filter: brightness(var(--icon-brightness))" : ""
+        }
+      />
       <p>{bot.displayName}</p>
       {#if bot.uniquePathSegment}
         <span class="unique-bot-identifier">({bot.uniquePathSegment})</span>
@@ -353,14 +355,21 @@ function SelectedToggleFavorite() {
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   {#each filteredScripts as script (script.id)}
-    <div class="bot" animate:flip={{ duration: flipDurationMs }} onclick={() => toggleScript(script.id)}>
+    <div class="bot blurred" animate:flip={{ duration: flipDurationMs }} onclick={() => toggleScript(script.id)}>
       <Switch
         checked={enabledScripts[script.id]}
         width={36}
         height={22}
         onchange={() => toggleScript(script.id)}
       />
-      <img src={script.icon || defaultIcon} alt="icon" />
+      <img
+        src={script.icon || defaultIcon}
+        alt="icon"
+        style={ /* Fix light and dark theme for default icon */
+          (!script.icon)
+          ? "filter: brightness(var(--icon-brightness))" : ""
+        }
+      />
       <p>{script.displayName}</p>
       {#if script.uniquePathSegment}
         <span class="unique-bot-identifier">({script.uniquePathSegment})</span>
@@ -426,7 +435,7 @@ function SelectedToggleFavorite() {
 
     {#if selectedAgent[2]}
     <div class="info-logo">
-      <img src={selectedAgent[2]} alt="icon" />
+      <img src={selectedAgent[2]} alt="icon"/>
     </div>
     {/if}
 
@@ -485,7 +494,7 @@ function SelectedToggleFavorite() {
     padding: 0.5rem 1rem;
     border-radius: 0;
     cursor: pointer;
-    background-color: var(--background-alt);
+    /*background-color: var(--background-alt);*/
   }
   .tag-buttons button:first-child {
     border-radius: var(--border-radius) 0 0 var(--border-radius);
@@ -536,7 +545,7 @@ function SelectedToggleFavorite() {
     font-size: 1rem;
   }
   .info-button img {
-    filter: invert() brightness(90%);
+    filter: invert() brightness(var(--icon-brightness));
     height: 100%;
     width: auto;
   }
diff --git a/frontend/src/components/BotpackToast.svelte b/frontend/src/components/BotpackToast.svelte
index e78be1b..5f57e80 100644
--- a/frontend/src/components/BotpackToast.svelte
+++ b/frontend/src/components/BotpackToast.svelte
@@ -15,7 +15,7 @@ let {
 
 <style>
   img {
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));
     width: 24px;
     height: 24px;
     margin-right: 0.25em;
diff --git a/frontend/src/components/Events.svelte b/frontend/src/components/Events.svelte
index 1d3d124..f63d45a 100644
--- a/frontend/src/components/Events.svelte
+++ b/frontend/src/components/Events.svelte
@@ -228,7 +228,7 @@ async function fetchEvents() {
     margin-left: 0.5rem;
   }
   p img {
-    filter: invert() brightness(90%);
+    filter: invert() brightness(var(--icon-brightness));
     width: 24px;
     margin-bottom: 3px;
     vertical-align: middle;
diff --git a/frontend/src/components/GuiSettings.svelte b/frontend/src/components/GuiSettings.svelte
index ecf8b90..2a9ae09 100644
--- a/frontend/src/components/GuiSettings.svelte
+++ b/frontend/src/components/GuiSettings.svelte
@@ -1,16 +1,26 @@
 <script lang="ts">
+import { currentTheme, THEMES } from "../settings";
 import Modal from "./Modal.svelte";
+import NiceSelect from "./NiceSelect.svelte";
 
 // TODO: Save settings, svelte store + localstorage?
 //       Perhaps change all localstorage state to svelte stores?
+
 let { visible = $bindable(false) } = $props();
 </script>
 
 <Modal bind:visible title="GUI Settings">
   <div class="inner">
-    <h3>Not implemented yet</h3>
+
+    <label>Theme</label>
+    <NiceSelect
+      bind:value={$currentTheme}
+      options={Object.fromEntries(
+        Object.keys(THEMES).map(k => [k, k])
+      )}
+      placeholder="Select a theme"
+    />
     <!-- TODO: Match start timeouts -->
-    <!-- TODO: Dark/Light themes -->
     <!-- TODO: Refresh bots behavior (remove on refresh, remove not found agents, etc.) -->
     <!-- TODO: Telemetry settings if added -->
     <!-- TODO: Auto update botpack -->
@@ -21,7 +31,7 @@ let { visible = $bindable(false) } = $props();
   .inner {
     display: flex;
     justify-content: center;
-    align-items: center;
+    flex-direction: column;
     height: 100%;
   }
   h3 {
diff --git a/frontend/src/components/LoadoutEditor/ItemField.svelte b/frontend/src/components/LoadoutEditor/ItemField.svelte
index 30024a9..06f5653 100644
--- a/frontend/src/components/LoadoutEditor/ItemField.svelte
+++ b/frontend/src/components/LoadoutEditor/ItemField.svelte
@@ -144,7 +144,7 @@ function randomizeItem() {
     padding: 0 0.5rem;
   }
   button.randomize > img {
-    filter: invert() brightness(90%);
+    filter: invert() brightness(var(--icon-brightness));
     vertical-align: middle;
     width: 20px;
     height: 20px;
diff --git a/frontend/src/components/LoadoutEditor/TeamEditor.svelte b/frontend/src/components/LoadoutEditor/TeamEditor.svelte
index 877b10c..c257396 100644
--- a/frontend/src/components/LoadoutEditor/TeamEditor.svelte
+++ b/frontend/src/components/LoadoutEditor/TeamEditor.svelte
@@ -101,7 +101,7 @@ function randomizeTeamLoadout() {
     margin-left: auto;
   }
   button.randomize > img {
-    filter: invert() brightness(90%);
+    filter: invert() brightness(var(--icon-brightness));
     vertical-align: middle;
     width: 24px;
     height: 24px;
diff --git a/frontend/src/components/MatchSettings/Main.svelte b/frontend/src/components/MatchSettings/Main.svelte
index 28c5877..4361d5d 100644
--- a/frontend/src/components/MatchSettings/Main.svelte
+++ b/frontend/src/components/MatchSettings/Main.svelte
@@ -298,10 +298,10 @@ const ALL_MAPS = getMaps();
     gap: 0.3rem;
   }
   .mutator label {
-    color:lightgrey;
+    color: var(--foreground);
   }
   label.mutatorChanged {
-    color: orange;
+    color: var(--orange);
   }
   .bottomButtons {
     display: flex;
@@ -316,12 +316,16 @@ const ALL_MAPS = getMaps();
   }
   .mutatorResetButton {
     background-color: red;
+    color: white
   }
 
   .extraoptions > * {
     margin-bottom: 0.5rem;
   }
 
+  button.start, button.stop {
+    color: white
+  }
   button.start {
     background-color: #15680e;
   }
diff --git a/frontend/src/components/Modal.svelte b/frontend/src/components/Modal.svelte
index 244638f..89f7f73 100644
--- a/frontend/src/components/Modal.svelte
+++ b/frontend/src/components/Modal.svelte
@@ -90,6 +90,7 @@ function handleMouseDown(e: MouseEvent) {
     border-radius: 0.6rem;
     min-width: 20vw;
     min-height: 20vh;
+    box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.5);
   }
   header {
     padding: 0.2rem;
@@ -105,7 +106,7 @@ function handleMouseDown(e: MouseEvent) {
   header button {
     padding: 0px;
     background-color: transparent;
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));
   }
   .modalBody {
     padding: 1rem;
diff --git a/frontend/src/components/PathsViewer.svelte b/frontend/src/components/PathsViewer.svelte
index f696e7f..be5def5 100644
--- a/frontend/src/components/PathsViewer.svelte
+++ b/frontend/src/components/PathsViewer.svelte
@@ -207,7 +207,7 @@ function addFile() {
     padding: 0px;
   }
   .path button img {
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));
   }
   .repair {
     color: var(--foreground);
diff --git a/frontend/src/components/Teams/Main.svelte b/frontend/src/components/Teams/Main.svelte
index 018cff4..7f5a2ca 100644
--- a/frontend/src/components/Teams/Main.svelte
+++ b/frontend/src/components/Teams/Main.svelte
@@ -25,7 +25,7 @@ function toggleTeam(team: "blue" | "orange") {
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="teams">
-    <div class="team box blue" onclick={() => toggleTeam('blue')} class:selected={selectedTeam === 'blue'}>
+    <div class="team box blurred blue" onclick={() => toggleTeam('blue')} class:selected={selectedTeam === 'blue'}>
         <header class="blue">
             <h3>Blue team</h3>
             <div style="flex: 1;"></div>
@@ -33,7 +33,7 @@ function toggleTeam(team: "blue" | "orange") {
         </header>
         <TeamBotList bind:items={bluePlayers} bind:globalAutoStart />
     </div>
-    <div class="team box orange" onclick={() => toggleTeam('orange')} class:selected={selectedTeam === 'orange'}>
+    <div class="team box blurred orange" onclick={() => toggleTeam('orange')} class:selected={selectedTeam === 'orange'}>
         <header class="orange">
             <h3>Orange team</h3>
             <div style="flex: 1;"></div>
@@ -57,10 +57,6 @@ function toggleTeam(team: "blue" | "orange") {
     .teams > .team {
         width: 50%;
         padding: 0px 0;
-        /* Nice transparent blur */
-        background-color: rgba(0, 0, 0, 0.7);
-        -webkit-backdrop-filter: blur(10px);
-        backdrop-filter: blur(10px);
         display: flex;
         flex-direction: column;
         border: 2px solid transparent;
@@ -76,6 +72,10 @@ function toggleTeam(team: "blue" | "orange") {
     }
     header {
         border: 2px solid;
+        color: white;
+    }
+    header h3 {
+        color: white !important;
     }
     header.blue {
         border-color: #0054a6;
diff --git a/frontend/src/components/Teams/TeamBotList.svelte b/frontend/src/components/Teams/TeamBotList.svelte
index 0b84828..5c28db6 100644
--- a/frontend/src/components/Teams/TeamBotList.svelte
+++ b/frontend/src/components/Teams/TeamBotList.svelte
@@ -5,7 +5,7 @@ import { untrack } from "svelte";
 import { flip } from "svelte/animate";
 import { fade } from "svelte/transition";
 import type { DraggablePlayer } from "../..";
-import {BotInfo, PsyonixBotInfo} from "../../../bindings/gui";
+import { BotInfo, HumanInfo, PsyonixBotInfo } from "../../../bindings/gui";
 import closeIcon from "../../assets/close.svg";
 import duplicateIcon from "../../assets/duplicate.svg";
 import editIcon from "../../assets/edit.svg";
@@ -15,10 +15,10 @@ import PlayerOverridesModal from "./PlayerOverridesModal.svelte";
 
 let {
   items = $bindable(),
-  globalAutoStart = $bindable(true)
+  globalAutoStart = $bindable(true),
 }: {
-  items: DraggablePlayer[],
-  globalAutoStart: boolean,
+  items: DraggablePlayer[];
+  globalAutoStart: boolean;
 } = $props();
 
 function remove(id: string): any {
@@ -31,32 +31,33 @@ function dupe(id: string): any {
     // Create a copy with a new ID
     const newItem = {
       ...items[index],
-      overrides: {...items[index].overrides},
-      id: crypto.randomUUID() // Generate a new unique ID
+      overrides: { ...items[index].overrides },
+      id: crypto.randomUUID(), // Generate a new unique ID
     };
     // Insert the new item after the original
     items = [...items.slice(0, index + 1), newItem, ...items.slice(index + 1)];
   }
 }
 
-let editedPlayer: DraggablePlayer | undefined = $state(undefined)
-let showEditPrompt = $state(false)
+let editedPlayer: DraggablePlayer | undefined = $state(undefined);
+let showEditPrompt = $state(false);
 
 async function showEditModal(d: DraggablePlayer) {
   if (d) {
-    editedPlayer = d
+    editedPlayer = d;
     showEditPrompt = true;
   }
 }
 
 function reasonsForManualStart(d: DraggablePlayer): string[] {
-  let reasons: string[] = []
+  let reasons: string[] = [];
   if (d.player instanceof BotInfo) {
     if (!globalAutoStart) reasons.push("Auto-start disabled in Extra");
-    if (!d.player.config.settings.runCommand) reasons.push("No run_command declared");
+    if (!d.player.config.settings.runCommand)
+      reasons.push("No run_command declared");
     if (!d.overrides.autoStart) reasons.push("Auto-start disabled for bot");
   }
-  return reasons
+  return reasons;
 }
 
 function canAutoStart(d: DraggablePlayer): boolean {
@@ -64,8 +65,12 @@ function canAutoStart(d: DraggablePlayer): boolean {
 }
 
 function hasOverrides(d: DraggablePlayer): boolean {
-  let expectedName = (d.player instanceof BotInfo) ? d.displayName : "";
-  return d.overrides.name !== expectedName || !d.overrides.autoStart || d.overrides.loadout != null
+  let expectedName = d.player instanceof BotInfo ? d.displayName : "";
+  return (
+    d.overrides.name !== expectedName ||
+    !d.overrides.autoStart ||
+    d.overrides.loadout != null
+  );
 }
 
 // :fire: :fire: :fire:
@@ -147,7 +152,7 @@ const dnd_container_namespace = `team_${crypto.randomUUID()}`;
         out:fade={{ duration: 100 }}
       >
         <div
-          class="bot"
+          class="bot blurred"
           use:draggable={{
             container: `${dnd_container_namespace}_${i}`,
             dragData: SuperJSON.stringify(bot),
@@ -156,7 +161,14 @@ const dnd_container_namespace = `team_${crypto.randomUUID()}`;
           }}
           onclick={e => e.stopPropagation()}
         >
-          <img src={bot.icon || defaultIcon} alt="icon" />
+          <img
+            src={bot.icon || defaultIcon}
+            alt="icon"
+            style={ /* Fix light and dark theme for default icon */
+              (!bot.icon || bot.player instanceof HumanInfo)
+              ? "filter: brightness(var(--icon-brightness))" : ""
+            }
+          />
           <p>{bot.displayName === bot.overrides.name || (bot.player instanceof PsyonixBotInfo && bot.overrides.name === "") ? bot.displayName : `${bot.overrides.name}`}</p>
           {#if bot.uniquePathSegment}
             <span class="unique-bot-identifier">({bot.uniquePathSegment})</span>
@@ -268,7 +280,7 @@ const dnd_container_namespace = `team_${crypto.randomUUID()}`;
   :is(.close, .duplicate, .edit) img {
     height: 100%;
     width: auto;
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));
   }
   :is(.has-overrides) img {
     filter: invert(68%) sepia(66%) saturate(2755%) hue-rotate(360deg) brightness(103%) contrast(104%);
diff --git a/frontend/src/global.css b/frontend/src/global.css
index c5763f5..d69b325 100644
--- a/frontend/src/global.css
+++ b/frontend/src/global.css
@@ -11,10 +11,14 @@
   --foreground-opp-alt: var(--background);
 
   --link-color: #0099ff;
+  --orange: orange;
+
+  --icon-brightness: 0.9;
+  --blur-alpha: 0.7;
+  --blur-radius: 1.2rem;
 }
 
-/* TODO: introduce light mode */
-/* :root {
+:root:has(main.lightTheme) {
     --background: #e9e9e9;
     --background-but: #fff;
     --background-alt: #fff;
@@ -22,12 +26,33 @@
     --background-opp-alt: var(--foreground);
 
     --foreground: #000;
-    --foreground-alt: #000;
+    --foreground-alt: #222;
     --foreground-opp: var(--background-alt);
     --foreground-opp-alt: var(--background);
 
     --link-color: #007bff;
-} */
+    --orange: #c43700;
+
+    --icon-brightness: 0.2;
+    --blur-alpha: 0.6;
+    --blur-radius: 1rem;
+}
+
+
+/* Blur all .blurred elements and buttons by default */
+main.blur :is(.blurred, button) {
+    background-color: rgb(from var(--blur-rgb, var(--background)) r g b / var(--blur-alpha));
+    -webkit-backdrop-filter: blur(var(--blur-radius));
+    backdrop-filter: blur(var(--blur-radius));
+    isolation: isolate;
+}
+
+main.blur.lightTheme :is(.blurred, button) {
+    --background: #fff;
+}
+main.blur.lightTheme :is(.blurred, button) :is(h1,h2,h3,h4,h5,h6) {
+    color: var(--foreground-alt)
+}
 
 * {
   box-sizing: border-box;
@@ -74,6 +99,7 @@ a:any-link {
 /* Button styling */
 button {
   background-color: var(--background-but);
+  --blur-rgb: var(--background-but);
   color: var(--foreground);
   border: solid 1px transparent;
   margin: 0px;
@@ -85,6 +111,7 @@ button {
 }
 button[type="submit"] {
   background-color: #1a6a1d;
+  color: white;
 }
 button:hover:not([disabled]) {
   box-shadow: 0px 0px 8rem 0px rgba(150, 150, 150, 0.25) inset;
@@ -121,11 +148,12 @@ input {
   width: max-content;
   background-color: var(--background-alt);
   border-radius: 0.2rem;
-  box-shadow: 0px 0px 0.5rem 0px rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.3);
 
   transition: opacity 150ms;
   opacity: 0;
   z-index: -999;
+  pointer-events: none;
 }
 
 .dropdown > .dropmenu.right {
@@ -141,5 +169,6 @@ input {
 
 .dropdown:focus-within > .dropmenu {
   opacity: 1;
-  z-index: 1;
+  z-index: 100;
+  pointer-events: inherit;
 }
diff --git a/frontend/src/pages/Home.svelte b/frontend/src/pages/Home.svelte
index 1fb3534..6822020 100644
--- a/frontend/src/pages/Home.svelte
+++ b/frontend/src/pages/Home.svelte
@@ -391,7 +391,7 @@ function handleSearch(event: Event) {
 </script>
 
 <div class="page">
-  <div class="availableBots box">
+  <div class="availableBots box blurred">
     <header>
       <h1>Bots</h1>
       <div class="dropdown">
@@ -424,7 +424,7 @@ function handleSearch(event: Event) {
 
   <div class="teams"><Teams bind:bluePlayers bind:orangePlayers bind:selectedTeam bind:globalAutoStart={extraOptions.autoStartAgents} /></div>
 
-  <div class="box">
+  <div class="box blurred">
     <MatchSettings
       onStart={onMatchStart}
       onStop={onMatchStop}
@@ -475,7 +475,7 @@ function handleSearch(event: Event) {
     padding: 0px;
   }
   .reloadButton img {
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));
   }
   .teams {
     display: flex;
diff --git a/frontend/src/pages/RocketHost.svelte b/frontend/src/pages/RocketHost.svelte
index 313b0db..2f71511 100644
--- a/frontend/src/pages/RocketHost.svelte
+++ b/frontend/src/pages/RocketHost.svelte
@@ -368,7 +368,7 @@ let launcherOptionsVisible = $state(false);
     padding: 0px;
   }
   button.close > img {
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));;
     height: 28px;
     width: 28px;
   }
diff --git a/frontend/src/pages/StoryMode.svelte b/frontend/src/pages/StoryMode.svelte
index 1d1fa99..178fe96 100644
--- a/frontend/src/pages/StoryMode.svelte
+++ b/frontend/src/pages/StoryMode.svelte
@@ -13,6 +13,7 @@
     align-items: center;
   }
   h1 {
+    color: white;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
 </style>
diff --git a/frontend/src/settings.ts b/frontend/src/settings.ts
index 6100f5d..520acd4 100644
--- a/frontend/src/settings.ts
+++ b/frontend/src/settings.ts
@@ -1,6 +1,22 @@
 import { writable } from "svelte/store";
 import { MAPS_STANDARD } from "./arena-names";
 
+export const THEMES = {
+  "Light blurred": ["lightTheme", "blur"],
+  "Light": ["lightTheme"],
+  "Dark blurred": ["darkTheme", "blur"],
+  "Dark": ["darkTheme"],
+  "Follow system": null
+} as const;
+
+export const currentTheme = writable(
+  localStorage.getItem("APP_THEME") as keyof typeof THEMES || "Follow system"
+)
+currentTheme.subscribe((value)=>{
+  console.log("Theme is now", value)
+  localStorage.setItem("APP_THEME", value);
+})
+
 export const mapStore = writable(
   localStorage.getItem("MS_MAP") || MAPS_STANDARD["DFH Stadium"],
 );