diff --git a/src/lib/components/Offline.svelte b/src/lib/components/Offline.svelte
new file mode 100644
index 0000000..0a8a00e
--- /dev/null
+++ b/src/lib/components/Offline.svelte
@@ -0,0 +1,72 @@
+<div class="offline-container">
+  <div class="flicker">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M2.28 3L1 4.27l1.47 1.47c-.43.26-.86.55-1.27.86L3 9c.53-.4 1.08-.75 1.66-1.07l2.23 2.23c-.74.34-1.45.75-2.09 1.24l1.8 2.4c.78-.58 1.66-1.03 2.6-1.33L11.75 15c-1.25.07-2.41.5-3.35 1.2L12 21l2.46-3.27L17.74 21L19 19.72M12 3c-2.15 0-4.2.38-6.1 1.07l2.39 2.4C9.5 6.16 10.72 6 12 6c3.38 0 6.5 1.11 9 3l1.8-2.4C19.79 4.34 16.06 3 12 3m0 6c-.38 0-.75 0-1.12.05l3.19 3.2c1.22.28 2.36.82 3.33 1.55l1.8-2.4C17.2 9.89 14.7 9 12 9"
+      ></path>
+    </svg>
+    <h1>YOU ARE OFFLINE</h1>
+  </div>
+  <p>Please check your internet connection.</p>
+  <p class="explanation">
+    An internet connection is required to sync your wallet and make
+    transactions.
+  </p>
+</div>
+
+<style>
+  .offline-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    text-align: center;
+    color: var(--text-color);
+    font-family: "Press Start 2P", "VT323", monospace, sans-serif;
+    text-shadow: 1px 1px 0 #000;
+  }
+
+  h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-top: 1rem;
+    color: var(--primary-color);
+  }
+
+  p {
+    font-size: 1rem;
+    margin-top: 1rem;
+    color: var(--accent-color);
+  }
+
+  .explanation {
+    margin-top: 2rem;
+    max-width: 40ch;
+    line-height: 1.5;
+    color: var(--text-color);
+    font-size: 0.8rem;
+    opacity: 0.8;
+  }
+
+  .flicker {
+    animation: flicker 1.5s infinite;
+  }
+
+  @keyframes flicker {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.7;
+    }
+  }
+</style>
diff --git a/src/lib/components/PasswordDialog.svelte b/src/lib/components/PasswordDialog.svelte
index c69e063..95694a3 100644
--- a/src/lib/components/PasswordDialog.svelte
+++ b/src/lib/components/PasswordDialog.svelte
@@ -6,7 +6,8 @@
     openWallet,
   } from "$lib/wallet.svelte";
   import { browser } from "$app/environment";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
+  import { fly } from "svelte/transition";
 
   let { onunlock }: { onunlock: () => void } = $props();
 
@@ -14,8 +15,11 @@
   let password = $state("");
   let error = $state("");
   let isValidating = $state(false);
+  let show = $state(false);
 
-  onMount(() => {
+  onMount(async () => {
+    show = true;
+    await tick();
     dialogEl?.showModal();
   });
 
@@ -41,45 +45,50 @@
   }
 </script>
 
-<dialog bind:this={dialogEl}>
-  <h2>Unlock Wallet</h2>
-  <p>Enter your wallet password to decrypt your seed.</p>
-  {#if error}
-    <p
-      style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
-    >
-      {error}
-    </p>
-  {/if}
-  <input
-    type="password"
-    class="retro-input"
-    bind:value={password}
-    placeholder="Password"
-    disabled={isValidating}
-    onkeydown={(e) => {
-      if (e.key === "Enter" && !isValidating) {
-        attemptUnlock();
-      }
-    }}
-  />
-  <div style="margin-top:1rem;text-align:center;">
-    <button
-      class="retro-btn primary"
+{#if show}
+  <dialog
+    bind:this={dialogEl}
+    transition:fly={{ y: 250, duration: 250, delay: 0.5 }}
+  >
+    <h2>Unlock Wallet</h2>
+    <p>Enter your wallet password to decrypt your seed.</p>
+    {#if error}
+      <p
+        style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
+      >
+        {error}
+      </p>
+    {/if}
+    <input
+      type="password"
+      class="retro-input"
+      bind:value={password}
+      placeholder="Password"
       disabled={isValidating}
-      onclick={() => {
-        attemptUnlock();
-      }}>{isValidating ? "Validating..." : "Unlock"}</button
-    >
-  </div>
-</dialog>
+      onkeydown={(e) => {
+        if (e.key === "Enter" && !isValidating) {
+          attemptUnlock();
+        }
+      }}
+    />
+    <div style="margin-top:1rem;text-align:center;">
+      <button
+        class="retro-btn primary"
+        disabled={isValidating}
+        onclick={() => {
+          attemptUnlock();
+        }}>{isValidating ? "Validating..." : "Unlock"}</button
+      >
+    </div>
+  </dialog>
+{/if}
 
 <style>
   dialog {
     z-index: 2000;
   }
   dialog::backdrop {
-    background: rgba(0, 0, 0, 1);
+    background: transparent;
   }
   h2 {
     margin-top: 0;
diff --git a/src/lib/components/PaymentHistoryItem.svelte b/src/lib/components/PaymentHistoryItem.svelte
index 6d8e4bb..594bd7d 100644
--- a/src/lib/components/PaymentHistoryItem.svelte
+++ b/src/lib/components/PaymentHistoryItem.svelte
@@ -59,10 +59,7 @@
             ...{payment.txId?.slice(-16)}
           </a>
         {:else if (payment as Payment).details.type === "lightning"}
-          <a
-            href="https://liquid.network/tx/{payment.claimTxId}"
-            target="_blank"
-          >
+          <a href="https://liquid.network/tx/{payment.txId}" target="_blank">
             ...{payment.txId?.slice(-16)}
           </a>
         {/if}
diff --git a/src/lib/components/SplashScreen.svelte b/src/lib/components/SplashScreen.svelte
index 353a8d1..07b4401 100644
--- a/src/lib/components/SplashScreen.svelte
+++ b/src/lib/components/SplashScreen.svelte
@@ -1,158 +1,247 @@
 <script lang="ts">
-  let containerEl: HTMLDivElement;
-  let mouseX = $state(0);
-  let mouseY = $state(0);
-
-  function handleMouseMove(event: MouseEvent) {
-    if (!containerEl) return;
-    const { clientX, clientY } = event;
-    const { left, top, width, height } = containerEl.getBoundingClientRect();
-    mouseX = (clientX - left - width / 2) / (width / 2);
-    mouseY = (clientY - top - height / 2) / (height / 2);
-  }
+  let { closing = false } = $props();
 </script>
 
-<div
-  class="splash-screen"
-  bind:this={containerEl}
-  onmousemove={handleMouseMove}
-  onmouseleave={() => {
-    mouseX = 0;
-    mouseY = 0;
-  }}
->
-  <div class="grid-container" style="--mouse-x: {mouseX}; --mouse-y: {mouseY};">
-    <div class="grid" />
+<div class="splash-screen" class:closing>
+  <div class="content">
+    <div class="logo-container">
+      <img src="/logo-no-text.png" alt="Portal BTC Logo" class="logo" />
+    </div>
+
+    <div class="branding">
+      <h1 class="app-name">
+        <span class="portal">PORTAL</span><span class="btc">BTC</span>
+      </h1>
+      <p class="tagline">Your portal to everything Bitcoin</p>
+    </div>
+
+    <div class="loading-container">
+      <div class="loading-bar">
+        <div class="loading-fill"></div>
+      </div>
+      <div class="loading-text">Initializing wallet...</div>
+    </div>
   </div>
-  <div class="logo-container">
-    <img src="/favicon.png" alt="Portal BTC Logo" class="logo" />
+  <div class="arx-branding">
+    <span class="powered-by">Powered by</span>
+    <img src="/arx-logo.svg" alt="Arx" class="arx-logo" />
   </div>
-  <div class="scanlines"></div>
 </div>
 
 <style>
+  .splash-screen.closing {
+    animation: wipe-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
+  }
+
+  @keyframes wipe-out {
+    from {
+      clip-path: circle(150% at top right);
+    }
+    to {
+      clip-path: circle(0% at top right);
+    }
+  }
+
   .splash-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
-    color: white;
-    opacity: 1;
-    transition: opacity 1s ease-out;
     overflow: hidden;
   }
 
-  .grid-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    perspective: 400px;
-    transform-style: preserve-3d;
-    transform: rotateX(calc(var(--mouse-y) * -5deg))
-      rotateY(calc(var(--mouse-x) * 5deg));
-    transition: transform 0.2s linear;
-  }
-
-  .grid {
-    position: absolute;
-    width: 250vw;
-    height: 250vh;
-    top: -75vh;
-    left: -75vw;
-    background-image:
-      linear-gradient(rgba(0, 255, 255, 0.4) 1px, transparent 1px),
-      linear-gradient(to right, rgba(0, 255, 255, 0.4) 1px, transparent 1px);
-    background-size: 50px 50px;
-    transform: rotateX(80deg) translateY(200px) translateZ(-300px);
-    animation: moveGrid 5s linear infinite;
-    will-change: background-position;
-  }
-
-  @keyframes moveGrid {
-    from {
-      background-position: 0 0;
-    }
-    to {
-      background-position: 0 -100px;
-    }
+  .content {
+    text-align: center;
   }
 
   .logo-container {
     position: relative;
-    width: 40vw;
-    max-width: 300px;
-    animation: flicker 3s infinite;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 2rem;
+    animation: logoFloat 4s ease-in-out infinite;
+  }
+
+  @keyframes logoFloat {
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
   }
 
   .logo {
-    width: 100%;
-    height: auto;
-    object-fit: contain;
-    animation: pulse 2.5s infinite ease-in-out;
-    filter: drop-shadow(0 0 7px #ff00ff) drop-shadow(0 0 15px #00ffff)
-      drop-shadow(0 0 20px #ff00ff);
-  }
-
-  @keyframes pulse {
-    0% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
-
-  @keyframes flicker {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.95;
-    }
-    52% {
-      opacity: 1;
-    }
-    55% {
-      opacity: 0.98;
-    }
-    56% {
-      opacity: 1;
-    }
-  }
-
-  .scanlines {
-    position: fixed;
-    top: 0;
-    left: 0;
+    position: relative;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
-      to bottom,
-      rgba(18, 16, 16, 0) 50%,
-      rgba(0, 0, 0, 0.25) 50%
-    );
-    background-size: 100% 4px;
-    animation: scanlines 0.2s linear infinite;
-    pointer-events: none;
-    z-index: 10000;
+    object-fit: contain;
+    filter: drop-shadow(0 0 10px black) drop-shadow(0 0 20px black);
   }
 
-  @keyframes scanlines {
+  .branding {
+    margin-bottom: 1.5rem;
+  }
+
+  .app-name {
+    font-size: 2rem;
+    margin: 0 0 1rem 0;
+    letter-spacing: 0.2em;
+    line-height: 1.2;
+  }
+
+  .portal {
+    color: var(--primary-color);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .btc {
+    color: var(--accent-color);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .tagline {
+    font-size: 0.6rem;
+    color: rgba(255, 255, 255, 0.8);
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+    margin: 0;
+    letter-spacing: 0.1em;
+    animation: fadeInUp 1s ease-out 1s both;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .loading-container {
+    animation: fadeInUp 1s ease-out 1.5s both;
+  }
+
+  .loading-bar {
+    width: 200px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--accent-color);
+    border-radius: 2px;
+    margin: 0 auto 1rem;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .loading-fill {
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      var(--primary-color) 0%,
+      var(--accent-color) 50%,
+      var(--primary-color) 100%
+    );
+    border-radius: 2px;
+    animation: loadingProgress 3s ease-in-out infinite;
+  }
+
+  @keyframes loadingProgress {
     0% {
-      background-position: 0 0;
+      width: 0%;
+      transform: translateX(-100%);
+    }
+    50% {
+      width: 100%;
+      transform: translateX(0%);
     }
     100% {
-      background-position: 0 4px;
+      width: 100%;
+      transform: translateX(100%);
+    }
+  }
+
+  .loading-text {
+    font-size: 0.5rem;
+    color: rgba(255, 255, 255, 0.9);
+    letter-spacing: 0.1em;
+    animation: loadingText 2s ease-in-out infinite;
+  }
+
+  @keyframes loadingText {
+    0%,
+    20% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    80%,
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .arx-branding {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    opacity: 0;
+    animation: fadeInUp 1s ease-out 2s both;
+  }
+
+  .powered-by {
+    font-size: 0.85rem;
+    color: white;
+    -webkit-text-fill-color: white;
+    -webkit-text-stroke: 1px;
+  }
+
+  .arx-logo {
+    height: 2rem;
+    filter: drop-shadow(0 0 5px black);
+  }
+
+  @media (max-width: 768px) {
+    .app-name {
+      font-size: 1.5rem;
+    }
+
+    .tagline {
+      font-size: 0.5rem;
+    }
+
+    .logo-container {
+      width: 100px;
+      height: 100px;
+    }
+
+    .loading-bar {
+      width: 150px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .app-name {
+      font-size: 1.2rem;
+    }
+
+    .logo-container {
+      width: 80px;
+      height: 80px;
     }
   }
 </style>
diff --git a/src/lib/components/ToggleSwitch.svelte b/src/lib/components/ToggleSwitch.svelte
new file mode 100644
index 0000000..9d3aa97
--- /dev/null
+++ b/src/lib/components/ToggleSwitch.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+  let {
+    label,
+    checked = $bindable(),
+  }: {
+    label: string;
+    checked: boolean;
+  } = $props();
+</script>
+
+<div class="switch-container">
+  <span class="switch-label">{label}</span>
+  <label class="switch">
+    <input type="checkbox" bind:checked />
+    <div class="track">
+      <div class="knob" />
+    </div>
+  </label>
+</div>
+
+<style>
+  .switch-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    font-family: "Press Start 2P", monospace;
+  }
+
+  .switch-label {
+    font-size: 0.8rem;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 40px;
+    cursor: pointer;
+    user-select: none;
+    transform: translateY(-50%);
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      145deg,
+      var(--surface-alt-color) 0%,
+      #1a1a1a 100%
+    );
+    border: 3px solid var(--accent-color);
+    border-radius: 4px;
+    box-shadow: 2px 2px 0 #000;
+  }
+
+  .switch:active .track {
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 0 #000;
+  }
+
+  .knob {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 40px;
+    height: 30px;
+    background: linear-gradient(145deg, var(--primary-color) 0%, #d4af00 100%);
+    border: 2px solid #000;
+    border-radius: 2px;
+    transition: transform 0.2s ease-in-out;
+    z-index: 1;
+    box-shadow:
+      inset 0 0 2px rgba(255, 255, 255, 0.3),
+      inset 0 0 5px rgba(0, 0, 0, 0.5);
+  }
+
+  input:checked ~ .track .knob {
+    transform: translateX(41px);
+  }
+</style>
diff --git a/src/lib/online.svelte.ts b/src/lib/online.svelte.ts
new file mode 100644
index 0000000..cf71c57
--- /dev/null
+++ b/src/lib/online.svelte.ts
@@ -0,0 +1,24 @@
+import { writable } from "svelte/store";
+
+function createOnline() {
+  const { subscribe, set } = writable(navigator.onLine);
+
+  function handleOnline() {
+    set(true);
+  }
+
+  function handleOffline() {
+    set(false);
+  }
+
+  if (typeof window !== "undefined") {
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+  }
+
+  return {
+    subscribe,
+  };
+}
+
+export const online = createOnline();
diff --git a/src/lib/settings.svelte.ts b/src/lib/settings.svelte.ts
new file mode 100644
index 0000000..8b99cf0
--- /dev/null
+++ b/src/lib/settings.svelte.ts
@@ -0,0 +1,28 @@
+import { persistentDbWritable } from "$lib/index";
+import type { Writable } from "svelte/store";
+import Dexie, { type Table } from "dexie";
+
+interface MetaEntry {
+  key: string;
+  value: string;
+}
+
+class SettingsDB extends Dexie {
+    meta!: Table<MetaEntry, string>;
+
+    constructor() {
+        super("settings");
+        this.version(1).stores({
+            meta: "&key"
+        });
+    }
+}
+
+const settingsDB = new SettingsDB();
+
+export const shaderEnabled: Writable<boolean> = persistentDbWritable<boolean, SettingsDB>(
+    "shaderEnabled",
+    true,
+
+    settingsDB
+);
diff --git a/src/lib/style.css b/src/lib/style.css
index 77fa773..09531f2 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -31,8 +31,7 @@ body {
   letter-spacing: 0.5px;
   line-height: 1.2;
   text-shadow: 1px 1px 0 #000;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
 }
 
 .app-wrapper {
@@ -44,14 +43,6 @@ body {
   padding: 2rem 1rem 4rem;
 }
 
-.container {
-  width: 100%;
-  max-width: 28rem;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
 .send-receive-buttons {
   display: flex;
   gap: 0.75rem;
@@ -68,6 +59,9 @@ body {
   box-shadow:
     0 0 0 4px #000,
     0 0 0 8px var(--primary-color);
+  .header {
+    cursor: pointer;
+  }
 }
 
 .retro-card::before {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 74c55c3..7b59dbe 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,6 +10,9 @@
   import SplashScreen from "$lib/components/SplashScreen.svelte";
   import ErrorDialog from "$lib/components/ErrorDialog.svelte";
   import InstallPrompt from "$lib/components/InstallPrompt.svelte";
+  import { online } from "$lib/online.svelte";
+  import Offline from "$lib/components/Offline.svelte";
+  import { shaderEnabled } from "$lib/settings.svelte";
 
   type AppError = {
     message: string;
@@ -18,6 +21,7 @@
 
   let { children } = $props();
   let showSplash = $state(true);
+  let closingSplash = $state(false);
   let currentError = $state<AppError | null>(null);
   let showInstallPrompt = $state(false);
   let deferredPrompt: Event | undefined = $state(undefined);
@@ -45,7 +49,10 @@
 
   onMount(() => {
     setTimeout(() => {
-      showSplash = false;
+      closingSplash = true;
+      setTimeout(() => {
+        showSplash = false;
+      }, 1000);
     }, 3000);
 
     window.addEventListener("error", (event: ErrorEvent) => {
@@ -89,34 +96,82 @@
   <title>Portal BTC</title>
 </svelte:head>
 
-{#if showInstallPrompt && deferredPrompt}
-  <InstallPrompt onInstall={handleInstallClick} />
-{:else if showSplash}
-  <SplashScreen />
-{:else}
-  <main class="app-wrapper">
-    {#if showSettingsButton}
-      <div class="settings-button-container">
-        <button class="retro-btn settings-btn" onclick={goToSettings}>
-          <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
-          Settings
-        </button>
-      </div>
-    {/if}
-
-    {#if isOnSetup || $walletState.open}
-      {@render children()}
-    {/if}
-  </main>
-
-  {#if !$walletState.open && !isOnSetup}
+<div class="container" class:retro-shader={$shaderEnabled}>
+  {#if !$online}
+    <Offline />
+  {:else if showInstallPrompt && deferredPrompt}
+    <InstallPrompt onInstall={handleInstallClick} />
+  {:else if showSplash}
+    <SplashScreen closing={closingSplash} />
+  {:else if !$walletState.open && !isOnSetup}
     <PasswordDialog onunlock={() => startNwc()} />
-  {/if}
-{/if}
+  {:else}
+    <main class="app-wrapper">
+      {#if showSettingsButton}
+        <div class="settings-button-container">
+          <button class="retro-btn settings-btn" onclick={goToSettings}>
+            <iconify-icon icon="mdi:cog" width="16" height="16"></iconify-icon>
+            Settings
+          </button>
+        </div>
+      {/if}
 
-<ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+      {@render children()}
+    </main>
+  {/if}
+
+  <ErrorDialog error={currentError} onclose={() => (currentError = null)} />
+</div>
 
 <style>
+  .container {
+    height: 100vh;
+    max-height: 100vh;
+    width: 100vw;
+    overflow-y: auto;
+  }
+  .retro-shader {
+    position: relative;
+  }
+
+  .retro-shader::before {
+    content: " ";
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background:
+      linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+      linear-gradient(
+        90deg,
+        rgba(255, 0, 0, 0.06),
+        rgba(0, 255, 0, 0.02),
+        rgba(0, 0, 255, 0.06)
+      );
+    z-index: 2000;
+    background-size:
+      100% 2px,
+      3px 100%;
+    background-attachment: fixed;
+    pointer-events: none;
+  }
+
+  .retro-shader::after {
+    content: " ";
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(18, 16, 16, 0.1);
+    opacity: 0;
+    z-index: 2001;
+    pointer-events: none;
+  }
+
   .settings-button-container {
     position: absolute;
     top: 1rem;
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index c151eb3..26968f3 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -4,6 +4,8 @@
   import LightningSettings from "$lib/components/LightningSettings.svelte";
   import NostrWalletConnect from "$lib/components/NostrWalletConnect.svelte";
   import DangerZone from "$lib/components/DangerZone.svelte";
+  import { shaderEnabled } from "$lib/settings.svelte";
+  import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
 
   function goBack() {
     goto("/");
@@ -22,6 +24,13 @@
 
   <NostrWalletConnect />
 
+  <details class="retro-card" open>
+    <summary class="header">
+      <h2>Design</h2>
+    </summary>
+    <ToggleSwitch label="Shader" bind:checked={$shaderEnabled} />
+  </details>
+
   <div class="retro-card">
     <h2>Source Code</h2>
     <Button
diff --git a/static/arx-logo.svg b/static/arx-logo.svg
new file mode 100644
index 0000000..a14e0f8
--- /dev/null
+++ b/static/arx-logo.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.2"
+   viewBox="0 0 3987.6099 6244.6216"
+   width="3987.6099"
+   height="6244.6216"
+   id="svg1"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050" />
+  <style
+     id="style1"> .s0 { fill: #c2d7e7 } .s1 { fill: #fdfdfd } .s2 { fill: #142c41 }</style>
+  <path
+     id="Light"
+     class="s1"
+     d="M 2047.0254,3159.6218 C 1461.6624,3194.8033 918.41269,2809.1297 652.31429,2304.715 420.63489,1886.8544 376.33589,1361.8821 578.78749,923.61237 848.14569,302.33457 1555.9153,-47.313655 2215.0057,5.1751851 2713.5324,36.599365 3194.5365,326.61397 3423.2951,776.02647 c 326.4734,606.66293 258.822,1437.02873 -247.8021,1926.50213 -298.4795,289.1249 -710.5796,466.3747 -1128.4676,457.0932 z"
+     inkscape:export-filename="logo-clean.svg"
+     inkscape:export-xdpi="96"
+     inkscape:export-ydpi="96" />
+  <path
+     id="Pedestal"
+     class="s1"
+     d="m 424.02539,4420.6218 c 1108.03331,0 2216.06671,0 3324.10001,0 -170.7,293.3333 -341.4,586.6667 -512.1,880 200,314.6667 400,629.3333 600,944 -1210.6667,0 -2421.3333,0 -3632.00001,0 150.6667,-386.6667 301.3333,-773.3333 452,-1160 -165.7,0 -331.4,0 -497.1,0 88.3667,-221.3333 176.7333,-442.6667 265.1,-664 z" />
+  <path
+     id="Text"
+     class="s2"
+     d="m 577.66559,4603.4538 c -28.1975,0.066 -58.9572,21.5944 -68.7657,48.002 -131.7097,354.6066 -429.124399,1133.097 -505.7498994,1333.9961 -10.0389,26.3203 4.7156,48.0401 32.9095004,48.498 l 200.634399,3.2598 c 27.6413,0.4489 58.7126,-19.8335 69.1822,-45.3906 27.9461,-68.2189 54.8047,-136.8656 81.5024,-205.5801 10.0021,-25.7433 40.506,-46.4258 68.1498,-46.1895 l 367.8119,3.1446 c 27.6438,0.2363 58.3322,21.2305 68.5565,46.8867 25.936,65.0826 51.9349,130.1403 78.0572,195.1484 10.2976,25.6269 41.07781,46.3926 68.72271,46.3926 h 212.7357 c 28.1978,0 42.661,-21.2386 32.3367,-47.4492 -246.6808,-626.249 -436.72221,-1146.7173 -510.09081,-1331.8203 -10.3799,-26.1876 -42.1473,-47.8771 -70.3416,-48.3047 -41.8817,-0.6352 -83.7643,-0.6918 -125.651,-0.5938 z m 2499.83511,2.2403 c -87.9767,-0.2738 -145.8368,0.01 -183.0369,0.6152 -28.1909,0.4613 -70.7446,3.1194 -95.0722,4.8867 231.5137,386.7792 333.8622,560.1966 375.7837,633.7715 13.9344,24.4562 14.8131,65.8182 1.267,90.4668 -18.5705,33.7908 -47.065,83.4634 -80.1123,139.459 -14.039,23.7881 -37.0124,62.2326 -51.1563,85.959 -54.6242,91.6322 -117.4978,197.3241 -160.5529,269.9961 -14.0793,23.7643 -36.8885,62.3057 -50.7202,86.2148 -14.2402,24.6151 -26.9723,47.1217 -37.0098,65.3711 -13.5643,24.6614 -4.1648,57.6907 21.4026,58.541 15.4093,0.5125 35.9376,0.748 63.1892,0.8496 27.6444,0.1031 72.4661,0.07 100.111,0.07 h 60.0665 c 27.6448,0 61.5774,-19.1993 75.8224,-42.8652 50.8791,-84.5285 98.6651,-163.2666 141.2834,-233.1465 14.3827,-23.5827 37.7388,-61.7958 52.3178,-85.2578 20.0025,-32.1901 38.0062,-60.5868 51.9169,-81.9355 15.0466,-23.0919 42.4637,-23.1045 57.5169,-0.018 13.737,21.0687 31.4511,48.9996 51.1075,80.6445 14.5748,23.4644 37.9125,61.6894 52.2316,85.3106 33.617,55.4551 67.8435,112.604 92.237,154.0293 14.0154,23.8009 36.1856,62.7119 49.8228,86.7324 10.1928,17.9535 40.8633,32.1259 68.5037,31.6289 110.3728,-1.9847 179.6206,-3.5839 220.3711,-4.8828 27.6058,-0.8799 40.8825,-23.1917 27.6674,-47.3516 -12.3182,-22.5205 -28.9957,-52.1238 -48.153,-85.4199 -13.775,-23.9417 -36.3926,-62.5963 -50.3448,-86.4356 -47.7024,-81.5056 -112.2333,-191.7046 -163.8926,-279.8808 -13.9629,-23.8331 -36.6154,-62.4656 -50.4836,-86.3535 -26.6572,-45.9168 -49.8701,-86.6183 -65.9756,-115.6055 -13.6697,-24.6037 -13.726,-65.8138 0.1428,-90.2988 8.965,-15.8276 20.0182,-34.9325 32.3503,-55.8946 14.0062,-23.8074 37.0614,-62.2045 51.2072,-85.9296 30.865,-51.7672 65.8936,-110.9326 93.5157,-157.9161 13.9992,-23.8116 36.5742,-62.4905 50.3879,-86.4101 4.7654,-8.2517 9.2245,-15.9998 13.2881,-23.0879 13.7346,-23.957 35.1863,-63.2612 49.3262,-86.9766 0.3626,-0.6081 0.7286,-1.2226 1.0969,-1.8398 14.1562,-23.7189 37.5701,-61.9127 50.8553,-86.127 0.1872,-0.3413 0.3739,-0.6807 0.5592,-1.0195 13.3884,-24.4791 -2.3214,-48.2782 -30.4713,-48.5762 -18.3545,-0.1942 -40.6795,-0.197 -65.3166,0.012 -27.6436,0.2339 -72.4566,1.0637 -100.0972,1.5469 l -60.0822,1.0488 c -27.6406,0.4832 -61.3204,20.2241 -75.2104,44.0997 -48.9466,84.1349 -81.1815,139.8936 -102.2813,176.7011 -13.7368,23.9635 -35.723,62.9793 -49.1189,87.1348 -4.8832,8.8053 -9.8245,17.7504 -14.6099,26.4434 -13.3202,24.1969 -34.0805,63.9395 -48.9527,87.2109 -3.9968,6.254 -21.0127,-7.6356 -35.3771,-31.1797 -9.0592,-14.8484 -19.8959,-32.9157 -31.7676,-52.9902 -14.0605,-23.7756 -36.5336,-62.5136 -50.5248,-86.3301 -27.0129,-45.9829 -56.0253,-94.6154 -78.7865,-132.1699 -14.3168,-23.6218 -38.0102,-61.6281 -52.6619,-85.045 -12.9933,-20.7661 -45.935,-37.7147 -73.5795,-37.8007 z m -1320.1586,2.3867 c -55.3039,-0.2313 -107.8186,0.126 -152.2409,1.3457 -27.6336,0.7587 -53.2598,2.3697 -57.2607,2.8945 l -0.8682,50.9922 c -5.581,355.4008 -1.5943,710.9564 -1.0461,1066.4297 0.043,27.6137 0.1192,72.3859 0.2015,100 l 0.4595,154.2793 c 0.084,28.1664 23.0089,51.3553 51.2031,51.793 l 194.2271,3.0136 c 28.1942,0.4377 50.7775,-22.0386 50.4406,-50.2031 -1.7624,-147.3354 -3.5247,-294.6724 -5.2871,-442.0078 -0.337,-28.1645 21.9467,-54.7415 49.901,-58.4316 50.7601,-6.7009 104.6161,-9.494 148.698,12.0195 24.69,12.0495 55.2068,46.2484 70.7639,69.0469 46.4495,68.0697 70.406,149.1811 104.2171,224.7617 11.2758,25.2058 31.5356,65.1574 43.3743,90.1113 16.1797,34.1042 32.3603,68.2083 48.5401,102.3125 11.8387,24.954 43.8464,45.2185 71.4893,45.5176 77.259,0.8359 154.6017,2.8125 231.7862,1.2344 27.6376,-0.5651 40.3851,-21.7757 28.4007,-46.6602 -82.4309,-171.1607 -167.7121,-341.0875 -245.7293,-514.3184 -11.5683,-25.6859 -1.7775,-59.3282 20.859,-76.121 28.4399,-21.0983 55.5906,-44.0548 77.6798,-71.5645 17.2667,-21.5037 39.2211,-60.8633 50.8513,-85.8984 63.5098,-136.7118 59.322,-307.6305 -27.8043,-431.4727 -15.882,-22.5749 -46.3757,-55.589 -66.081,-74.9512 -53.2085,-52.2817 -112.6194,-93.0127 -195.8127,-105.8535 -27.2999,-4.2137 -54.5793,-7.277 -61.0423,-7.6269 -72.9865,-3.9522 -264.0078,-9.9489 -429.9199,-10.6426 z m 347.0781,263.3144 a 192.40074,180.99107 0 0 1 192.4007,180.9903 192.40074,180.99107 0 0 1 -192.4007,180.9902 192.40074,180.99107 0 0 1 -2.4714,-0.1836 c -2.4286,0.1639 -4.8472,0.3672 -7.3187,0.3672 h -165.4529 c -59.0058,0 -106.5088,-47.4503 -106.5088,-106.3906 V 4977.907 c 0,-58.9404 47.503,-106.3907 106.5088,-106.3907 h 165.4529 c 1.6422,0 3.2391,0.1714 4.8627,0.2442 a 192.40074,180.99107 0 0 1 4.9274,-0.3653 z m -1443.37901,319.793 c 8.4707,0.3426 15.8926,5.7688 18.7806,13.7305 l 80.8396,222.8379 c 8.429,23.2336 -8.9215,47.739 -33.6604,47.541 l -159.3485,-1.2754 c -23.5122,-0.1882 -39.0239,-24.5157 -29.2531,-45.8789 l 102.8112,-224.7852 c 3.5227,-7.7029 11.3596,-12.5123 19.8306,-12.1699 z"
+     style="fill:#003366;fill-opacity:1;stroke-width:1.00055" />
+  <path
+     id="Bear-Outline"
+     class="s2"
+     d="m 1717.5508,553.34637 c -33.9311,-1.7921 -68.1731,-0.032 -101.625,6.0762 -163.0065,54.6289 -221.2815,268.9492 -134.2012,410.5 -146.2324,242.22683 -229.071,519.24463 -248.6367,801.10943 -70.135,163.7424 -181.704,314.3396 -223.1621,492.8906 -119.63331,452.8105 -118.90141,930.7978 -38.61131,1390.289 -1.8497,156.1893 12.3208,300.6327 22.3027,478.2696 6.75491,146.5618 6.88491,146.5743 -168.0606,148.7226 -62.1435,0.9058 -124.2881,1.8129 -186.4316,2.7188 -57.816,133.6831 -53.2734,145.1223 40.0684,136.2851 950.90081,5.1295 1915.98061,9.7791 2866.83591,0.4434 -36.0908,-62.7959 -60.086,-136.5225 -154.3965,-137.2246 -68.6015,-0.9663 -137.506,-2.5377 -206.1074,-3.5039 -19.339,-131.3552 -18.6374,-131.2439 -85.123,-367.7363 84.1832,-530.6194 145.8524,-1080.9376 0.9726,-1607.5977 -44.8595,-178.9901 -127.6906,-344.9621 -227.6875,-498.9551 7.3266,-162.2871 -89.3624,-328.9344 -95.0703,-472.0078 68.0549,-122.7551 65.6067,-262.2617 62.9082,-397.70313 -80.186,-32.9447 -166.2746,-59.5147 -122.2754,-167.8887 -15.5925,-185.4956 -272.2456,-243.4079 -383.9453,-106.1113 -90.5429,34.1042 -221.7348,-30.4222 -332.4297,-10.125 -115.2798,30.9776 -172.4837,-102.7379 -285.3242,-98.4512 z m 346.4883,3041.53913 c 7.863,0.6822 15.0527,6.4482 19.1035,19.6523 67.8117,84.9318 139.9245,173.392 163.9609,282.0547 15.4184,116.4283 -31.2646,228.0659 -60.8203,338.416 h -208.9648 c -19.8861,-2.6316 -45.4854,8.1577 -59.625,-9.4082 -3.745,-31.9155 -13.9667,-63.1066 -21.4864,-94.498 -15.7932,-65.8647 -36.5509,-132.6225 -32.2812,-201.0625 10.2711,-110.6242 81.4735,-201.7783 148.7578,-285.2325 l 17.8125,-21.8613 c 5.4581,-16.2115 20.4379,-29.1975 33.543,-28.0605 z"
+     style="fill:#003366;fill-opacity:1" />
+  <path
+     id="Bear-White"
+     class="s1"
+     d="m 1635.0254,719.92177 c -144.733,53.4137 75.7878,332.57123 39.2422,140.7328 -38.4256,-118.1456 80.0085,-79.0619 130.6578,-41.0328 -16.5407,-75.0351 -92.0676,-139.6419 -169.9,-99.7 z m 833.6,19.5 c 21.9106,37.0061 143.2763,148.6436 85.6484,19.1734 -22.0825,-20.7175 -56.7698,-30.9405 -85.6484,-19.1734 z m -483.6,72.3 c -217.7906,72.9278 -315.5888,337.71333 -252.45,548.26253 46.2302,194.0174 178.6219,356.0929 321.3875,487.5156 -32.8133,-117.5418 -80.5002,-288.4353 43.9625,-376.0781 148.1309,-108.6262 332.2437,-147.9195 507.3,-190.5125 75.2759,-42.4225 89.8698,-169.977 -31.6125,-123.05 -139.4752,-63.3651 28.2845,-197.31413 115.4125,-144.2375 -95.2543,-64.49173 -260.1658,-10.033 -270,-142.00003 -121.9753,-58.0656 -276.563,-64.0994 -413.3828,-64.8844 z m -486,584.80003 c -79.1781,215.7965 -68.5044,460.9057 29,669.1 -23.4597,54.5452 -87.1507,-187.607 -121,-40.8 -195.1645,332.7637 -265.6131,728.8426 -242.9,1110.8 22.3442,263.0664 84.3814,519.5997 131.3125,778.85 9.6011,71.3332 56.0566,158.0772 -25.3289,200.7026 l -118.6461,123.3224 c 192.4667,-1.8333 386.4958,1.0208 578.9625,-0.8125 -36.5698,-90.3096 -81.3495,-190.9565 -124.8,-278.0625 5.3748,-188.2961 25.6897,-376.091 31.375,-564.175 -43.4151,-111.1137 -79.0402,-267.3099 -64.475,-341.4375 0.048,-8.7591 0.4233,-8.4684 79.7406,-64.0422 57.714,52.4042 58.9397,53.6453 136.5366,61.6142 -15.9591,-149.0688 -80.7166,-246.1255 -145.9626,-357.2726 -78.3703,-107.3716 -63.6677,-242.0413 -27.5646,-361.9869 22.7248,-83.292 157.2504,145.672 150.5703,138.1344 92.4876,129.3076 179.512,261.9098 283.1797,382.5656 141.1897,-182.8321 263.2654,-375.1093 409.6625,-554.9375 31.5627,59.9424 75.6606,221.0562 52.5375,309.5375 -78.6311,108.2019 -155.1191,223.4457 -210.2962,343.8943 l 0.096,200.1057 c 67.9609,-57.4661 266.8488,-210.4287 200.5875,-201.95 22.8513,124.8177 101.9622,260.1644 -6.9283,367.0439 -70.405,116.2721 -21.7782,259.5255 -23.6559,387.4432 6.7148,86.3677 9.9611,172.9432 13.9967,259.4629 -15.4188,71.5302 -160.2353,223.8562 -104.317,263.9876 182.7723,-0.096 365.5447,-0.1917 548.317,-0.2876 -57.081,-82.6854 -208.6796,-143.1587 -141.575,-261.25 59.5347,-363.9621 172.9043,-724.915 146.3531,-1097.6043 -12.5564,-320.0503 -117.5079,-632.6398 -284.7779,-904.6457 -18.9386,47.74 -113.2574,158.0807 -61.8375,34.2625 58.9721,-167.2649 78.8023,-358.2328 12.8375,-526.4625 -116.8663,307.6078 -338.3441,558.0438 -555,800 -199.3795,-233.2213 -424.5226,-465.2375 -514.0625,-766.4875 -6.9176,-24.1085 -14.2058,-118.4115 -31.9375,-108.6125 z"
+     sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccc" />
+  <path
+     id="Eye"
+     class="s2"
+     d="m 2117.4254,972.32177 c -23,18 -41.6,36.00003 -41.1,40.00003 0.4,4 13.3,7.3 28.7,7.3 15.4,0 42.4,5.4 60,12 l 32,12 c 40.3,-42.9 56.5,-55.50003 62,-55.70003 5.5,-0.2 10,-3.9 10,-8.3 0,-4.4 -15.3,-15.1 -34,-23.8 -18.7,-8.7 -43.4,-15.9 -54.8,-16 -12.4,-0.1 -37.8,13 -62.8,32.5 z" />
+</svg>
diff --git a/static/logo-no-text.png b/static/logo-no-text.png
new file mode 100644
index 0000000..e2a5d9e
Binary files /dev/null and b/static/logo-no-text.png differ