diff --git a/apps/web/src/lib/components/general/AppHeader.svelte b/apps/web/src/lib/components/general/AppHeader.svelte
index 500541f4..a6c0fa86 100644
--- a/apps/web/src/lib/components/general/AppHeader.svelte
+++ b/apps/web/src/lib/components/general/AppHeader.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import { modalStore } from "$lib/stores/modal";
+    import { panelStore } from "$lib/stores/panel";
     import { darkTheme, getStyles, isMobile } from "$lib/stores/styles";
     import type { SupabaseClient } from "@supabase/supabase-js";
     import { getContext } from "svelte";
@@ -13,6 +14,17 @@
     };
 
     $: cssVarStyles = getStyles("0");
+
+    // Spinning animation state for theme toggle
+    let spinning = false;
+
+    const toggleTheme = () => {
+        spinning = true;
+        darkTheme.set(!$darkTheme);
+        setTimeout(() => {
+            spinning = false;
+        }, 500);
+    };
 </script>
 
 <nav
@@ -31,9 +43,7 @@ dark:border-zinc-700 border-zinc-200"
         </div>
 
         <div id="right" class="sm:space-x-6 space-x-4 flex items-center">
-            <button
-                on:click={() => ($darkTheme = !$darkTheme)}
-                class="btn-circ">
+            <button on:click={toggleTheme} class="btn-circ">
                 {#if $darkTheme}
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +51,7 @@ dark:border-zinc-700 border-zinc-200"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor"
-                        class="btn-icon">
+                        class="btn-icon {spinning ? 'spin' : ''}">
                         <path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -54,7 +64,7 @@ dark:border-zinc-700 border-zinc-200"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor"
-                        class="btn-icon">
+                        class="btn-icon {spinning ? 'spin' : ''}">
                         <path
                             stroke-linecap="round"
                             stroke-linejoin="round"
@@ -63,7 +73,7 @@ dark:border-zinc-700 border-zinc-200"
                 {/if}
             </button>
 
-            <button class="btn-circ" on:click={() => modalStore.push("theme")}>
+            <button class="btn-circ" on:click={() => panelStore.open("theme")}>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -135,4 +145,17 @@ dark:border-zinc-700 border-zinc-200"
     .btn-icon {
         @apply w-5 h-5;
     }
+
+    .spin {
+        animation: spin 0.5s ease-in-out;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
 </style>
diff --git a/apps/web/src/lib/components/general/ModalLib.svelte b/apps/web/src/lib/components/general/ModalLib.svelte
index 3c9ab7f5..3b4fe0d2 100644
--- a/apps/web/src/lib/components/general/ModalLib.svelte
+++ b/apps/web/src/lib/components/general/ModalLib.svelte
@@ -10,10 +10,6 @@
     import Feedback from "./Feedback.svelte";
     import FeedbackPop from "./FeedbackPop.svelte";
 
-    // Style Modals
-    import Theme from "./style/Theme.svelte";
-    import Palettes from "./style/Palettes.svelte";
-
     // Event Modals
     import ManageEvents from "../recal/modals/events/ManageEvents.svelte";
     import EditEvent from "../recal/modals/events/EditEvent.svelte";
@@ -28,8 +24,6 @@
         rstats: RecalStats,
         feedback: Feedback,
         feedbackpop: FeedbackPop,
-        theme: Theme,
-        palettes: Palettes,
         manageEvents: ManageEvents,
         editEvent: EditEvent,
         deleteEvent: DeleteEvent
diff --git a/apps/web/src/lib/components/general/style/Palettes.svelte b/apps/web/src/lib/components/general/style/Palettes.svelte
deleted file mode 100644
index 97a3ccf3..00000000
--- a/apps/web/src/lib/components/general/style/Palettes.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-    import StdModal from "$lib/components/ui/StdModal.svelte";
-    import { colorPalettes } from "$lib/scripts/ReCal+/palettes";
-    import Palette from "./Palette.svelte";
-
-    export let showModal: boolean = false;
-</script>
-
-<StdModal title="Themes" stdClose={true} {showModal}>
-    <div class="flex flex-col gap-2" slot="main">
-        <div class="settings-area flex gap-2 flex-wrap justify-center">
-            {#each Object.keys(colorPalettes) as palette}
-                <Palette colors={colorPalettes[palette]} title={palette} />
-            {/each}
-        </div>
-    </div>
-</StdModal>
-
-<style lang="postcss">
-    .settings-area {
-        @apply p-4 border-t-2
-    border-zinc-600/30 dark:border-zinc-200/30;
-    }
-</style>
diff --git a/apps/web/src/lib/components/general/style/Theme.svelte b/apps/web/src/lib/components/general/style/Theme.svelte
deleted file mode 100644
index c29c0b99..00000000
--- a/apps/web/src/lib/components/general/style/Theme.svelte
+++ /dev/null
@@ -1,101 +0,0 @@
-<script lang="ts">
-    import { calColors, type CalColors } from "$lib/stores/styles";
-    import { rgbToHSL, hslToRGB } from "$lib/scripts/convert";
-    import { modalStore } from "$lib/stores/modal";
-    import { DEFAULT_RCARD_COLORS } from "$lib/stores/styles";
-    import { onMount } from "svelte";
-    import StdModal from "$lib/components/ui/StdModal.svelte";
-    import StdButton from "$lib/components/ui/StdButton.svelte";
-
-    export let showModal: boolean = false;
-
-    // Convert hslColors to rgb
-    let rgbColors: Record<string, string> = {};
-
-    /**
-     * Save colors to store and close modal
-     */
-    const saveColors = () => {
-        // Convert rgbColors to hsl
-        let hslColors: CalColors = Object.entries(rgbColors)
-            .map(([key, value]) => [key, rgbToHSL(value)])
-            .reduce(
-                (acc, [key, value]) => ({ ...acc, [key]: value }),
-                {}
-            ) as CalColors;
-
-        calColors.set(hslColors);
-        modalStore.pop();
-    };
-
-    /**
-     * Reset colors to default
-     */
-    const resetColors = () => {
-        rgbColors = Object.entries(DEFAULT_RCARD_COLORS)
-            .map(([key, value]) => [key, hslToRGB(value)])
-            .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
-    };
-
-    onMount(() => {
-        rgbColors = Object.entries($calColors)
-            .map(([key, value]) => [key, hslToRGB(value)])
-            .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
-    });
-</script>
-
-<StdModal title="Color Settings" {showModal} stdClose={false}>
-    <div class="flex flex-col gap-2" slot="main">
-        <!-- Card Colors -->
-        <div class="settings-area" id="options">
-            <h2 class="text-lg font-bold mb-2">Card Colors</h2>
-            <div class="flex flex-wrap gap-2 justify-center">
-                {#each Object.keys($calColors) as color}
-                    <div class="flex flex-col items-center">
-                        <input
-                            type="color"
-                            class="dark:bg-zinc-800/50 bg-zinc-200/50
-                        w-14 h-8 2 cursor-pointer"
-                            bind:value={rgbColors[color]} />
-                        <div class="text-sm font-light">
-                            {color === "-1"
-                                ? "Preview"
-                                : color === "E"
-                                  ? "Events"
-                                  : `Color ${parseInt(color) + 1}`}
-                        </div>
-                    </div>
-                {/each}
-            </div>
-        </div>
-
-        <StdButton
-            message="View Themes"
-            onClick={() => modalStore.push("palettes")}
-            scheme="2" />
-    </div>
-
-    <div
-        class="flex gap-2 border-t-2 border-zinc-200 dark:border-zinc-600
-     mt-2 pt-2"
-        slot="buttons">
-        <StdButton
-            message="Cancel"
-            onClick={() => modalStore.pop()}
-            scheme="-1" />
-
-        <StdButton
-            message="Reset to Default"
-            onClick={resetColors}
-            scheme="1" />
-
-        <StdButton message="Save" onClick={saveColors} />
-    </div>
-</StdModal>
-
-<style lang="postcss">
-    .settings-area {
-        @apply p-4 border-t-2
-    border-zinc-600/30 dark:border-zinc-200/30;
-    }
-</style>
diff --git a/apps/web/src/lib/components/general/style/ThemePanel.svelte b/apps/web/src/lib/components/general/style/ThemePanel.svelte
new file mode 100644
index 00000000..6d6c672c
--- /dev/null
+++ b/apps/web/src/lib/components/general/style/ThemePanel.svelte
@@ -0,0 +1,298 @@
+<script lang="ts">
+    import SidePanel from "$lib/components/ui/SidePanel.svelte";
+    import { panelStore } from "$lib/stores/panel";
+    import {
+        darkTheme,
+        calColors,
+        DEFAULT_RCARD_COLORS,
+        type CalColors
+    } from "$lib/stores/styles";
+    import { colorPalettes } from "$lib/scripts/ReCal+/palettes";
+    import { rgbToHSL, hslToRGB } from "$lib/scripts/convert";
+
+    $: open = $panelStore === "theme";
+
+    // Spinning animation state for theme toggle
+    let spinning = false;
+
+    const toggleTheme = () => {
+        spinning = true;
+        darkTheme.set(!$darkTheme);
+        setTimeout(() => {
+            spinning = false;
+        }, 500);
+    };
+
+    // Dark palettes that should auto-enable dark mode
+    const DARK_PALETTES = new Set([
+        "Midnight",
+        "Cobalt",
+        "Shadow",
+        "Crimson",
+        "Aurora",
+        "Pixel"
+    ]);
+
+    // Track the last selected theme for "Reset to Theme" functionality
+    let lastSelectedTheme: { name: string; colors: CalColors } | null = null;
+
+    /**
+     * Apply a preset palette
+     */
+    const applyPalette = (name: string, colors: CalColors) => {
+        const hslColors: CalColors = Object.entries(colors)
+            .map(([key, value]) => [key, rgbToHSL(value)])
+            .reduce(
+                (acc, [key, value]) => ({ ...acc, [key]: value }),
+                {}
+            ) as CalColors;
+
+        calColors.set(hslColors);
+        lastSelectedTheme = { name, colors: hslColors };
+
+        // Auto-toggle dark mode for dark palettes
+        if (DARK_PALETTES.has(name)) {
+            darkTheme.set(true);
+        } else {
+            darkTheme.set(false);
+        }
+    };
+
+    /**
+     * Update a single color (live)
+     */
+    const updateColor = (key: string, rgbValue: string) => {
+        const hslValue = rgbToHSL(rgbValue);
+        calColors.set({ ...$calColors, [key]: hslValue });
+    };
+
+    /**
+     * Reset to last selected theme
+     */
+    const resetToTheme = () => {
+        if (lastSelectedTheme) {
+            calColors.set(lastSelectedTheme.colors);
+        }
+    };
+
+    /**
+     * Reset to app default colors
+     */
+    const resetToDefault = () => {
+        calColors.set(DEFAULT_RCARD_COLORS);
+        darkTheme.set(false);
+        lastSelectedTheme = null;
+    };
+
+    /**
+     * Get the display label for a color key
+     */
+    const getColorLabel = (key: string): string => {
+        if (key === "-1") return "Preview";
+        if (key === "E") return "Events";
+        return String(parseInt(key) + 1);
+    };
+
+    // Sort palette colors for display: E first, then 0-6, then -1 last
+    const sortPaletteColors = (colors: CalColors): string[] => {
+        return Object.entries(colors)
+            .sort(([a], [b]) => {
+                if (a === "E") return -1;
+                if (b === "E") return 1;
+                if (a === "-1") return 1;
+                if (b === "-1") return -1;
+                return parseInt(a) - parseInt(b);
+            })
+            .map(([_, value]) => value);
+    };
+</script>
+
+<SidePanel
+    {open}
+    title="Theme Settings"
+    width="340px"
+    on:close={() => panelStore.close()}>
+    <div class="p-4 space-y-6">
+        <!-- Dark Mode Toggle -->
+        <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+                {#if $darkTheme}
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                        class="w-5 h-5 dark:text-zinc-100 {spinning
+                            ? 'spin'
+                            : ''}">
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+                    </svg>
+                {:else}
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                        class="w-5 h-5 dark:text-zinc-100 {spinning
+                            ? 'spin'
+                            : ''}">
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+                    </svg>
+                {/if}
+                <span class="font-medium dark:text-zinc-100">Dark Mode</span>
+            </div>
+            <button
+                on:click={toggleTheme}
+                class="relative w-11 h-6 rounded-full transition-colors
+                       {$darkTheme
+                    ? 'bg-blue-600'
+                    : 'bg-zinc-300 dark:bg-zinc-600'}">
+                <span
+                    class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow
+                           transition-transform {$darkTheme
+                        ? 'translate-x-5'
+                        : 'translate-x-0'}" />
+            </button>
+        </div>
+
+        <!-- Preset Themes -->
+        <div>
+            <h3
+                class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 mb-3">
+                Preset Themes
+            </h3>
+            <div class="grid grid-cols-2 gap-2">
+                {#each Object.entries(colorPalettes) as [name, colors]}
+                    <button
+                        class="palette-card"
+                        on:click={() => applyPalette(name, colors)}>
+                        <div class="flex flex-col">
+                            {#each sortPaletteColors(colors) as color}
+                                <div
+                                    class="h-3 w-full"
+                                    style="background-color: {color}" />
+                            {/each}
+                        </div>
+                        <span
+                            class="text-xs font-medium py-1 dark:text-zinc-100">
+                            {name}
+                        </span>
+                    </button>
+                {/each}
+            </div>
+        </div>
+
+        <!-- Custom Colors -->
+        <div>
+            <h3
+                class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 mb-2">
+                Custom Colors
+            </h3>
+            <div
+                class="grid grid-cols-3 gap-2 p-3 rounded-lg bg-zinc-100/50 dark:bg-zinc-800/50">
+                {#each Object.keys($calColors).sort((a, b) => {
+                    if (a === "E") return 1;
+                    if (b === "E") return 1;
+                    if (a === "-1") return 1;
+                    if (b === "-1") return -1;
+                    return parseInt(a) - parseInt(b);
+                }) as colorKey}
+                    <label class="color-swatch" title={getColorLabel(colorKey)}>
+                        <div class="color-input-wrapper">
+                            <input
+                                type="color"
+                                value={hslToRGB($calColors[colorKey])}
+                                on:input={e =>
+                                    updateColor(
+                                        colorKey,
+                                        e.currentTarget.value
+                                    )}
+                                class="color-input" />
+                            <div
+                                class="color-display"
+                                style="background-color: {hslToRGB(
+                                    $calColors[colorKey]
+                                )}" />
+                        </div>
+                        <span
+                            class="text-[10px] text-zinc-500 dark:text-zinc-400 font-medium">
+                            {getColorLabel(colorKey)}
+                        </span>
+                    </label>
+                {/each}
+            </div>
+        </div>
+
+        <!-- Reset Buttons -->
+        <div class="flex gap-2">
+            {#if lastSelectedTheme}
+                <button
+                    on:click={resetToTheme}
+                    class="flex-1 py-2 px-3 rounded-lg text-sm font-medium
+                           bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300
+                           hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">
+                    Reset to {lastSelectedTheme.name}
+                </button>
+            {/if}
+            <button
+                on:click={resetToDefault}
+                class="flex-1 py-2 px-3 rounded-lg text-sm font-medium
+                       bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300
+                       hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">
+                Reset to Default
+            </button>
+        </div>
+    </div>
+</SidePanel>
+
+<style lang="postcss">
+    .palette-card {
+        @apply rounded-lg overflow-hidden border-2
+               border-zinc-200 dark:border-zinc-700
+               hover:border-zinc-400 dark:hover:border-zinc-500
+               transition-colors cursor-pointer;
+    }
+
+    .color-swatch {
+        @apply flex flex-col items-center gap-0.5 cursor-pointer;
+    }
+
+    .color-input-wrapper {
+        @apply relative w-10 h-10;
+    }
+
+    .color-input {
+        @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
+    }
+
+    .color-display {
+        @apply w-10 h-10 rounded-md shadow-sm
+               border border-zinc-400/50
+               transition-all pointer-events-none;
+    }
+
+    .color-swatch:hover .color-display {
+        @apply scale-105 border-zinc-500;
+    }
+
+    .spin {
+        animation: spin 0.5s ease-in-out;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>
diff --git a/apps/web/src/lib/components/recal/calendar/CalBox.svelte b/apps/web/src/lib/components/recal/calendar/CalBox.svelte
index 0abe2fdc..583e85fb 100644
--- a/apps/web/src/lib/components/recal/calendar/CalBox.svelte
+++ b/apps/web/src/lib/components/recal/calendar/CalBox.svelte
@@ -170,7 +170,8 @@
             $eventHoverRev = null;
         }
     }}>
-    <div class="text-xs z-40 -space-y-1 relative overflow-x-clip overflow-y-visible">
+    <div
+        class="text-xs z-40 -space-y-1 relative overflow-x-clip overflow-y-visible">
         <div class="font-light text-2xs leading-3 pb-[1px]">
             {valuesToTimeLabel(
                 params.section.start_time,
diff --git a/apps/web/src/lib/components/recal/left/Handlebar.svelte b/apps/web/src/lib/components/recal/left/Handlebar.svelte
index fddbae5a..cda5db41 100644
--- a/apps/web/src/lib/components/recal/left/Handlebar.svelte
+++ b/apps/web/src/lib/components/recal/left/Handlebar.svelte
@@ -16,6 +16,11 @@
         handlebarEl.setPointerCapture(e.pointerId);
         document.body.style.cursor = "row-resize";
         document.body.style.userSelect = "none";
+
+        // Add window-level listeners to ensure cleanup even if pointer leaves element/window
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerUp);
     }
 
     function handlePointerMove(e: PointerEvent) {
@@ -38,7 +43,21 @@
     function handlePointerUp(e: PointerEvent) {
         if (!isDragging) return;
         isDragging = false;
-        handlebarEl.releasePointerCapture(e.pointerId);
+
+        // Clean up window-level listeners
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+        window.removeEventListener("pointercancel", handlePointerUp);
+
+        // Release pointer capture if we still have it
+        if (handlebarEl && e.pointerId !== undefined) {
+            try {
+                handlebarEl.releasePointerCapture(e.pointerId);
+            } catch {
+                // Pointer capture may already be released
+            }
+        }
+
         document.body.style.cursor = "";
         document.body.style.userSelect = "";
     }
@@ -57,9 +76,6 @@
         if (!isDragging) isHovering = false;
     }}
     on:pointerdown={handlePointerDown}
-    on:pointermove={handlePointerMove}
-    on:pointerup={handlePointerUp}
-    on:pointercancel={handlePointerUp}
     on:dblclick={handleDoubleClick}>
     <!-- Full-width horizontal line -->
     <div class="handlebar-line"></div>
diff --git a/apps/web/src/lib/components/ui/SidePanel.svelte b/apps/web/src/lib/components/ui/SidePanel.svelte
new file mode 100644
index 00000000..845f6a1f
--- /dev/null
+++ b/apps/web/src/lib/components/ui/SidePanel.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { createEventDispatcher, onMount } from "svelte";
+    import { fly, fade } from "svelte/transition";
+
+    export let open: boolean = false;
+    export let title: string = "";
+    export let width: string = "320px";
+
+    const dispatch = createEventDispatcher();
+
+    const close = () => {
+        dispatch("close");
+    };
+
+    const handleKeydown = (e: KeyboardEvent) => {
+        if (e.key === "Escape" && open) {
+            close();
+        }
+    };
+
+    onMount(() => {
+        document.addEventListener("keydown", handleKeydown);
+        return () => document.removeEventListener("keydown", handleKeydown);
+    });
+</script>
+
+{#if open}
+    <!-- Backdrop -->
+    <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+    <div
+        class="fixed inset-0 bg-black/20 z-50"
+        transition:fade={{ duration: 200 }}
+        on:click={close} />
+
+    <!-- Panel -->
+    <div
+        class="fixed top-0 right-0 h-full bg-white dark:bg-zinc-900 shadow-xl z-50
+               border-l-2 border-zinc-300 dark:border-zinc-700
+               flex flex-col overflow-hidden"
+        style="width: {width};"
+        transition:fly={{ x: 320, duration: 200, opacity: 1 }}>
+        <!-- Header -->
+        <div
+            class="flex items-center justify-between p-4 border-b
+                    border-zinc-200 dark:border-zinc-700">
+            <h2 class="text-lg font-semibold dark:text-zinc-100">{title}</h2>
+            <button
+                on:click={close}
+                class="p-1 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800
+                       text-zinc-500 dark:text-zinc-400 transition-colors">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    class="w-5 h-5">
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+
+        <!-- Content -->
+        <div class="flex-1 overflow-y-auto">
+            <slot />
+        </div>
+    </div>
+{/if}
diff --git a/apps/web/src/lib/scripts/ReCal+/palettes.ts b/apps/web/src/lib/scripts/ReCal+/palettes.ts
index b2a79d87..c912eb2c 100644
--- a/apps/web/src/lib/scripts/ReCal+/palettes.ts
+++ b/apps/web/src/lib/scripts/ReCal+/palettes.ts
@@ -136,15 +136,26 @@ export const colorPalettes: Record<string, CalColors> = {
         "6": "#b61f4c",
         "E": "#2e0812"
     },
+    Pixel: {
+        "-1": "#A8A8A8",
+        "0": "#8a004d",
+        "1": "#005c99",
+        "2": "#007040",
+        "3": "#99005c",
+        "4": "#00668a",
+        "5": "#008050",
+        "6": "#a3005c",
+        "E": "#1a1a2e"
+    },
     Midnight: {
         "-1": "#A8A8A8",
-        "0": "#295270",
-        "1": "#304f71",
-        "2": "#374c72",
-        "3": "#3e4a73",
-        "4": "#444773",
-        "5": "#4b4474",
-        "6": "#524175",
+        "0": "#1a5568",
+        "1": "#1a4a5a",
+        "2": "#255060",
+        "3": "#2a4578",
+        "4": "#3a3a72",
+        "5": "#453580",
+        "6": "#503570",
         "E": "#1a3246"
     },
     Cobalt: {
diff --git a/apps/web/src/lib/stores/panel.ts b/apps/web/src/lib/stores/panel.ts
new file mode 100644
index 00000000..f9aa1f88
--- /dev/null
+++ b/apps/web/src/lib/stores/panel.ts
@@ -0,0 +1,19 @@
+/**
+ * @file Store for managing side panel state
+ */
+
+import { writable } from "svelte/store";
+
+export type PanelType = "theme" | null;
+
+function createPanelStore() {
+    const { subscribe, set } = writable<PanelType>(null);
+
+    return {
+        subscribe,
+        open: (panel: PanelType) => set(panel),
+        close: () => set(null)
+    };
+}
+
+export const panelStore = createPanelStore();
diff --git a/apps/web/src/routes/(apps)/+layout.svelte b/apps/web/src/routes/(apps)/+layout.svelte
index 5a2f743d..b1bb5124 100644
--- a/apps/web/src/routes/(apps)/+layout.svelte
+++ b/apps/web/src/routes/(apps)/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import AppHeader from "$lib/components/general/AppHeader.svelte";
     import ModalLib from "$lib/components/general/ModalLib.svelte";
+    import ThemePanel from "$lib/components/general/style/ThemePanel.svelte";
     import { setContext } from "svelte";
 
     export let data;
@@ -8,6 +9,7 @@
 </script>
 
 <ModalLib />
+<ThemePanel />
 <div class="h-screen w-screen flex flex-col bg-zinc-50 dark:bg-zinc-900">
     <AppHeader />
     <slot />