diff --git a/apps/web/src/app.pcss b/apps/web/src/app.pcss
index 0b46222f..ace6af4b 100644
--- a/apps/web/src/app.pcss
+++ b/apps/web/src/app.pcss
@@ -1,17 +1,91 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto:wght@300;400;700&family=Playfair+Display:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+:root {
+    --bg-light: hsl(0, 0%, 100%);
+    --bg-dark: hsl(240, 6%, 10%);
+    --noise-opacity: 0;
+    --noise-frequency: 1.5;
+    --gradient-background: none;
+    --app-font: "Lato", sans-serif;
+}
+
+body {
+    font-family: var(--app-font);
+}
+
 .std-area {
-    @apply overflow-auto 
+    @apply overflow-auto
     focus:outline-std-blue
-    bg-white dark:bg-zinc-900
     text-zinc-900 dark:text-zinc-100
-     border-zinc-200 dark:border-zinc-700;
+    border-zinc-200 dark:border-zinc-700;
+    background-color: var(--bg-light);
     border-width: 1px;
 }
 
+.dark .std-area {
+    background-color: var(--bg-dark);
+}
+
+@layer components {
+    /* Themed panel/control backgrounds - slightly offset from main bg */
+    .themed-panel {
+        background-color: color-mix(in srgb, var(--bg-light) 90%, #000);
+    }
+    .dark .themed-panel {
+        background-color: color-mix(in srgb, var(--bg-dark) 85%, #fff);
+    }
+
+    /* Lighter variant for nested panels */
+    .themed-panel-light {
+        background-color: color-mix(in srgb, var(--bg-light) 95%, #000);
+    }
+    .dark .themed-panel-light {
+        background-color: color-mix(in srgb, var(--bg-dark) 90%, #fff);
+    }
+}
+
+/* Background effects class for noise and glows */
+.bg-effects {
+    position: relative;
+    isolation: isolate;
+}
+
+/* Gradient glows layer */
+.bg-effects::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--gradient-background);
+    pointer-events: none;
+    z-index: -2;
+}
+
+/* Noise texture layer */
+.bg-effects::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    filter: url(#pageNoise);
+    opacity: var(--noise-opacity);
+    pointer-events: none;
+    z-index: -1;
+}
+
+/* Subtler noise background for dark mode */
+.dark .bg-effects::after {
+    background: rgba(0, 0, 0, 0.1);
+}
+
 body.waiting {
     cursor: wait;
 }
@@ -31,3 +105,13 @@ body.waiting {
 ::-webkit-scrollbar-thumb {
     @apply bg-zinc-400/40;
 }
+
+/* Playfair Display: lowercase course codes/titles */
+body.font-playfair .serif-lowercase {
+    text-transform: lowercase;
+}
+
+/* JetBrains Mono: smaller section headers */
+body.font-jetbrains .section-header {
+    font-size: 0.8rem;
+}
diff --git a/apps/web/src/lib/components/general/style/GradientCanvas.svelte b/apps/web/src/lib/components/general/style/GradientCanvas.svelte
new file mode 100644
index 00000000..03a1d85f
--- /dev/null
+++ b/apps/web/src/lib/components/general/style/GradientCanvas.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import type { GradientConfig } from "$lib/stores/styles";
+    import { hslToRGB, hslToRGBComponents } from "$lib/scripts/convert";
+
+    export let gradients: GradientConfig[] = [];
+    export let selectedId: string | null = null;
+    export let globalOpacity: number = 0.15;
+
+    const dispatch = createEventDispatcher<{
+        select: { id: string };
+        move: { id: string; x: number; y: number };
+    }>();
+
+    let canvasEl: HTMLElement;
+    let isDragging = false;
+    let draggedGradientId: string | null = null;
+    let justFinishedDragging = false;
+
+    // Generate preview gradient CSS
+    $: previewCSS =
+        gradients.length > 0
+            ? gradients
+                  .map(g => {
+                      const rgb = hslToRGBComponents(g.color);
+                      const scaledBlur = (g.size / 100) * g.blur;
+                      return `radial-gradient(${g.shape} at ${g.x}% ${g.y}%, rgba(${rgb}, ${globalOpacity * g.opacity}) 0%, transparent ${scaledBlur}%)`;
+                  })
+                  .join(", ")
+            : "none";
+
+    function handlePointerDown(e: PointerEvent, gradientId: string) {
+        e.stopPropagation();
+        isDragging = true;
+        draggedGradientId = gradientId;
+        dispatch("select", { id: gradientId });
+
+        document.body.style.cursor = "grabbing";
+        document.body.style.userSelect = "none";
+
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerUp);
+    }
+
+    function handlePointerMove(e: PointerEvent) {
+        if (!isDragging || !draggedGradientId || !canvasEl) return;
+
+        const rect = canvasEl.getBoundingClientRect();
+        const x = Math.max(
+            0,
+            Math.min(100, ((e.clientX - rect.left) / rect.width) * 100)
+        );
+        const y = Math.max(
+            0,
+            Math.min(100, ((e.clientY - rect.top) / rect.height) * 100)
+        );
+
+        dispatch("move", { id: draggedGradientId, x, y });
+    }
+
+    function handlePointerUp() {
+        isDragging = false;
+        draggedGradientId = null;
+        justFinishedDragging = true;
+
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+        window.removeEventListener("pointercancel", handlePointerUp);
+
+        // Reset flag after a short delay to allow click event to be ignored
+        setTimeout(() => {
+            justFinishedDragging = false;
+        }, 10);
+    }
+
+    function handleCanvasClick(e: MouseEvent) {
+        // Only deselect if clicking on canvas background and not just finished dragging
+        if (e.target === canvasEl && !justFinishedDragging) {
+            dispatch("select", { id: "" });
+        }
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={canvasEl}
+    class="canvas-container"
+    style="background: {previewCSS};"
+    on:click={handleCanvasClick}>
+    <!-- Grid overlay -->
+    <div class="grid-overlay"></div>
+
+    <!-- Gradient handles -->
+    {#each gradients as gradient (gradient.id)}
+        <button
+            type="button"
+            class="gradient-handle"
+            class:selected={gradient.id === selectedId}
+            class:dragging={gradient.id === draggedGradientId}
+            style="
+                left: {gradient.x}%;
+                top: {gradient.y}%;
+                background-color: {hslToRGB(gradient.color)};
+            "
+            on:pointerdown={e => handlePointerDown(e, gradient.id)}>
+            <span class="sr-only">Gradient {gradient.id}</span>
+        </button>
+    {/each}
+</div>
+
+<style lang="postcss">
+    .canvas-container {
+        @apply relative w-full rounded-lg overflow-hidden;
+        aspect-ratio: 16 / 9;
+        background-color: var(--bg-light);
+        border: 1px solid theme(colors.zinc.300);
+    }
+
+    :global(.dark) .canvas-container {
+        background-color: var(--bg-dark);
+        border-color: theme(colors.zinc.600);
+    }
+
+    .grid-overlay {
+        @apply absolute inset-0 pointer-events-none opacity-20;
+        background-image: linear-gradient(
+                to right,
+                theme(colors.zinc.400) 1px,
+                transparent 1px
+            ),
+            linear-gradient(
+                to bottom,
+                theme(colors.zinc.400) 1px,
+                transparent 1px
+            );
+        background-size: 20% 20%;
+    }
+
+    .gradient-handle {
+        @apply absolute w-4 h-4 rounded-full cursor-grab;
+        @apply border-2 border-white shadow-md;
+        transform: translate(-50%, -50%);
+    }
+
+    .gradient-handle.selected {
+        @apply ring-2 ring-blue-500 ring-offset-1;
+    }
+
+    .gradient-handle.dragging {
+        @apply cursor-grabbing scale-110;
+    }
+
+    :global(.dark) .gradient-handle {
+        @apply border-zinc-800;
+    }
+</style>
diff --git a/apps/web/src/lib/components/general/style/GradientEditor.svelte b/apps/web/src/lib/components/general/style/GradientEditor.svelte
new file mode 100644
index 00000000..c1d202ec
--- /dev/null
+++ b/apps/web/src/lib/components/general/style/GradientEditor.svelte
@@ -0,0 +1,250 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import type { GradientConfig, GradientShape } from "$lib/stores/styles";
+    import { hslToRGB, rgbToHSL } from "$lib/scripts/convert";
+
+    export let gradient: GradientConfig;
+
+    const dispatch = createEventDispatcher<{
+        update: GradientConfig;
+        delete: { id: string };
+    }>();
+
+    function updateField<K extends keyof GradientConfig>(
+        key: K,
+        value: GradientConfig[K]
+    ) {
+        dispatch("update", { ...gradient, [key]: value });
+    }
+
+    function handleColorChange(e: Event) {
+        const target = e.target as HTMLInputElement;
+        const hslValue = rgbToHSL(target.value);
+        updateField("color", hslValue);
+    }
+
+    function handleDelete() {
+        dispatch("delete", { id: gradient.id });
+    }
+</script>
+
+<div class="editor-container">
+    <div class="editor-header">
+        <span class="editor-title">Edit Gradient</span>
+        <button
+            type="button"
+            class="delete-btn"
+            on:click={handleDelete}
+            title="Delete gradient">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                class="w-4 h-4">
+                <path
+                    fill-rule="evenodd"
+                    d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.519.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
+                    clip-rule="evenodd" />
+            </svg>
+        </button>
+    </div>
+
+    <!-- Color -->
+    <div class="field-row">
+        <span class="field-label">Color</span>
+        <label class="color-input-wrapper">
+            <input
+                type="color"
+                value={hslToRGB(gradient.color)}
+                on:input={handleColorChange}
+                class="color-input" />
+            <div
+                class="color-display"
+                style="background-color: {hslToRGB(gradient.color)}">
+            </div>
+        </label>
+    </div>
+
+    <!-- Position X -->
+    <div class="field-row">
+        <span class="field-label">Position X</span>
+        <label class="slider-wrapper">
+            <input
+                type="range"
+                min="0"
+                max="100"
+                step="1"
+                value={gradient.x}
+                on:input={e => updateField("x", Number(e.currentTarget.value))}
+                class="slider" />
+            <span class="slider-value">{Math.round(gradient.x)}%</span>
+        </label>
+    </div>
+
+    <!-- Position Y -->
+    <div class="field-row">
+        <span class="field-label">Position Y</span>
+        <label class="slider-wrapper">
+            <input
+                type="range"
+                min="0"
+                max="100"
+                step="1"
+                value={gradient.y}
+                on:input={e => updateField("y", Number(e.currentTarget.value))}
+                class="slider" />
+            <span class="slider-value">{Math.round(gradient.y)}%</span>
+        </label>
+    </div>
+
+    <!-- Size -->
+    <div class="field-row">
+        <span class="field-label">Size</span>
+        <label class="slider-wrapper">
+            <input
+                type="range"
+                min="10"
+                max="100"
+                step="1"
+                value={gradient.size}
+                on:input={e =>
+                    updateField("size", Number(e.currentTarget.value))}
+                class="slider" />
+            <span class="slider-value">{Math.round(gradient.size)}%</span>
+        </label>
+    </div>
+
+    <!-- Opacity -->
+    <div class="field-row">
+        <span class="field-label">Opacity</span>
+        <label class="slider-wrapper">
+            <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.05"
+                value={gradient.opacity}
+                on:input={e =>
+                    updateField("opacity", Number(e.currentTarget.value))}
+                class="slider" />
+            <span class="slider-value"
+                >{Math.round(gradient.opacity * 100)}%</span>
+        </label>
+    </div>
+
+    <!-- Blur -->
+    <div class="field-row">
+        <span class="field-label">Blur</span>
+        <label class="slider-wrapper">
+            <input
+                type="range"
+                min="10"
+                max="100"
+                step="1"
+                value={gradient.blur}
+                on:input={e =>
+                    updateField("blur", Number(e.currentTarget.value))}
+                class="slider" />
+            <span class="slider-value">{Math.round(gradient.blur)}%</span>
+        </label>
+    </div>
+
+    <!-- Shape -->
+    <div class="field-row">
+        <span class="field-label">Shape</span>
+        <div class="shape-toggle">
+            <button
+                type="button"
+                class="shape-btn"
+                class:active={gradient.shape === "ellipse"}
+                on:click={() => updateField("shape", "ellipse")}>
+                Ellipse
+            </button>
+            <button
+                type="button"
+                class="shape-btn"
+                class:active={gradient.shape === "circle"}
+                on:click={() => updateField("shape", "circle")}>
+                Circle
+            </button>
+        </div>
+    </div>
+</div>
+
+<style lang="postcss">
+    .editor-container {
+        @apply mt-3 pt-3 space-y-2;
+        @apply border-t border-zinc-200 dark:border-zinc-700;
+    }
+
+    .editor-header {
+        @apply flex items-center justify-between mb-2;
+    }
+
+    .editor-title {
+        @apply text-xs font-medium text-zinc-600 dark:text-zinc-400;
+    }
+
+    .delete-btn {
+        @apply p-1 rounded text-zinc-400 hover:text-red-500;
+        @apply hover:bg-red-50 dark:hover:bg-red-900/20;
+        @apply transition-colors;
+    }
+
+    .field-row {
+        @apply flex items-center gap-2;
+    }
+
+    .field-label {
+        @apply text-[10px] text-zinc-500 dark:text-zinc-400 w-16 shrink-0;
+    }
+
+    .color-input-wrapper {
+        @apply relative flex-1 h-6;
+    }
+
+    .color-input {
+        @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
+    }
+
+    .color-display {
+        @apply w-full h-full rounded border border-zinc-300 dark:border-zinc-600;
+        @apply pointer-events-none;
+    }
+
+    .slider-wrapper {
+        @apply flex items-center gap-2 flex-1;
+    }
+
+    .slider {
+        @apply flex-1 h-1.5 rounded-full appearance-none cursor-pointer;
+        @apply bg-zinc-300 dark:bg-zinc-600;
+    }
+
+    .slider::-webkit-slider-thumb {
+        @apply appearance-none w-3 h-3 rounded-full bg-blue-600 cursor-pointer;
+    }
+
+    .slider::-moz-range-thumb {
+        @apply w-3 h-3 rounded-full border-0 bg-blue-600 cursor-pointer;
+    }
+
+    .slider-value {
+        @apply text-[10px] text-zinc-500 dark:text-zinc-400 w-8 text-right;
+    }
+
+    .shape-toggle {
+        @apply flex gap-1 flex-1;
+    }
+
+    .shape-btn {
+        @apply flex-1 py-1 px-2 text-[10px] rounded;
+        @apply bg-zinc-100 dark:bg-zinc-700;
+        @apply text-zinc-600 dark:text-zinc-400;
+        @apply transition-colors;
+    }
+
+    .shape-btn.active {
+        @apply bg-blue-600 text-white;
+    }
+</style>
diff --git a/apps/web/src/lib/components/general/style/GradientList.svelte b/apps/web/src/lib/components/general/style/GradientList.svelte
new file mode 100644
index 00000000..97b5084f
--- /dev/null
+++ b/apps/web/src/lib/components/general/style/GradientList.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import type { GradientConfig } from "$lib/stores/styles";
+    import { MAX_GRADIENTS } from "$lib/stores/styles";
+    import { hslToRGB } from "$lib/scripts/convert";
+
+    export let gradients: GradientConfig[] = [];
+    export let selectedId: string | null = null;
+
+    const dispatch = createEventDispatcher<{
+        select: { id: string };
+        add: void;
+    }>();
+
+    function handleSelect(id: string) {
+        dispatch("select", { id });
+    }
+
+    function handleAdd() {
+        dispatch("add");
+    }
+
+    $: canAdd = gradients.length < MAX_GRADIENTS;
+</script>
+
+<div class="list-container">
+    <div class="list-header">
+        <span class="list-title">Gradients</span>
+        <span class="list-count">{gradients.length}/{MAX_GRADIENTS}</span>
+    </div>
+
+    <div class="gradient-items">
+        {#each gradients as gradient, index (gradient.id)}
+            <button
+                type="button"
+                class="gradient-item"
+                class:selected={gradient.id === selectedId}
+                on:click={() => handleSelect(gradient.id)}>
+                <div
+                    class="gradient-swatch"
+                    style="background-color: {hslToRGB(gradient.color)}">
+                </div>
+                <span class="gradient-index">{index + 1}</span>
+            </button>
+        {/each}
+
+        {#if canAdd}
+            <button type="button" class="add-btn" on:click={handleAdd}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    class="w-4 h-4">
+                    <path
+                        d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+                </svg>
+            </button>
+        {/if}
+    </div>
+</div>
+
+<style lang="postcss">
+    .list-container {
+        @apply mt-3;
+    }
+
+    .list-header {
+        @apply flex items-center justify-between mb-2;
+    }
+
+    .list-title {
+        @apply text-[10px] font-medium text-zinc-500 dark:text-zinc-400;
+    }
+
+    .list-count {
+        @apply text-[10px] text-zinc-400 dark:text-zinc-500;
+    }
+
+    .gradient-items {
+        @apply flex flex-wrap gap-1.5;
+    }
+
+    .gradient-item {
+        @apply relative w-8 h-8 rounded-lg overflow-hidden;
+        @apply border border-zinc-300 dark:border-zinc-600;
+        @apply transition-all duration-100;
+    }
+
+    .gradient-item:hover {
+        @apply scale-110;
+    }
+
+    .gradient-item.selected {
+        @apply ring-2 ring-blue-500 ring-offset-1;
+    }
+
+    :global(.dark) .gradient-item.selected {
+        @apply ring-offset-zinc-800;
+    }
+
+    .gradient-swatch {
+        @apply absolute inset-0;
+    }
+
+    .gradient-index {
+        @apply absolute bottom-0 right-0 px-1;
+        @apply text-[8px] font-bold text-white;
+        @apply bg-black/40 rounded-tl;
+    }
+
+    .add-btn {
+        @apply w-8 h-8 rounded-lg;
+        @apply border border-dashed border-zinc-300 dark:border-zinc-600;
+        @apply flex items-center justify-center;
+        @apply text-zinc-400 dark:text-zinc-500;
+        @apply hover:border-blue-500 hover:text-blue-500;
+        @apply transition-colors;
+    }
+</style>
diff --git a/apps/web/src/lib/components/general/style/ThemePanel.svelte b/apps/web/src/lib/components/general/style/ThemePanel.svelte
index 92fec56a..30ff093b 100644
--- a/apps/web/src/lib/components/general/style/ThemePanel.svelte
+++ b/apps/web/src/lib/components/general/style/ThemePanel.svelte
@@ -5,10 +5,25 @@
         darkTheme,
         calColors,
         DEFAULT_RCARD_COLORS,
-        type CalColors
+        bgColors,
+        DEFAULT_BG_COLORS,
+        bgEffects,
+        DEFAULT_BG_EFFECTS,
+        appFont,
+        FONT_OPTIONS,
+        DEFAULT_FONT,
+        createGradient,
+        MAX_GRADIENTS,
+        type CalColors,
+        type BgColors,
+        type BackgroundEffects,
+        type GradientConfig
     } from "$lib/stores/styles";
-    import { colorPalettes } from "$lib/scripts/ReCal+/palettes";
+    import { colorPalettes, type Palette } from "$lib/scripts/ReCal+/palettes";
     import { rgbToHSL, hslToRGB } from "$lib/scripts/convert";
+    import GradientCanvas from "./GradientCanvas.svelte";
+    import GradientEditor from "./GradientEditor.svelte";
+    import GradientList from "./GradientList.svelte";
 
     $: open = $panelStore === "theme";
 
@@ -37,14 +52,38 @@
 
     // Track the last selected theme for "Reset to Theme" functionality
     // Load from localStorage on init
-    let lastSelectedTheme: { name: string; colors: CalColors } | null = null;
+    let lastSelectedTheme: {
+        name: string;
+        colors: CalColors;
+        bgColors: BgColors;
+    } | null = null;
 
     // Load last selected theme from localStorage on mount
     if (typeof window !== "undefined") {
         const stored = localStorage.getItem(LAST_THEME_KEY);
         if (stored) {
             try {
-                lastSelectedTheme = JSON.parse(stored);
+                const parsed = JSON.parse(stored);
+                // Handle migration from old format without bgColors
+                if (parsed.bgColors) {
+                    lastSelectedTheme = parsed;
+                } else if (parsed.name && colorPalettes[parsed.name]) {
+                    // Reconstruct bgColors from palette
+                    const palette = colorPalettes[parsed.name];
+                    lastSelectedTheme = {
+                        ...parsed,
+                        bgColors: {
+                            light: rgbToHSL(palette.bgLight),
+                            dark: rgbToHSL(palette.bgDark)
+                        }
+                    };
+                    localStorage.setItem(
+                        LAST_THEME_KEY,
+                        JSON.stringify(lastSelectedTheme)
+                    );
+                } else {
+                    lastSelectedTheme = parsed;
+                }
             } catch {
                 localStorage.removeItem(LAST_THEME_KEY);
             }
@@ -54,8 +93,8 @@
     /**
      * Apply a preset palette
      */
-    const applyPalette = (name: string, colors: CalColors) => {
-        const hslColors: CalColors = Object.entries(colors)
+    const applyPalette = (name: string, palette: Palette) => {
+        const hslColors: CalColors = Object.entries(palette.colors)
             .map(([key, value]) => [key, rgbToHSL(value)])
             .reduce(
                 (acc, [key, value]) => ({ ...acc, [key]: value }),
@@ -63,7 +102,20 @@
             ) as CalColors;
 
         calColors.set(hslColors);
-        lastSelectedTheme = { name, colors: hslColors };
+
+        // Apply background colors from palette
+        const themeBgColors: BgColors = {
+            light: rgbToHSL(palette.bgLight),
+            dark: rgbToHSL(palette.bgDark)
+        };
+        bgColors.set(themeBgColors);
+
+        // Store theme with both colors and bgColors
+        lastSelectedTheme = {
+            name,
+            colors: hslColors,
+            bgColors: themeBgColors
+        };
 
         // Persist to localStorage
         if (typeof window !== "undefined") {
@@ -90,11 +142,23 @@
     };
 
     /**
-     * Reset to last selected theme
+     * Reset to last selected theme (both colors and background)
      */
     const resetToTheme = () => {
         if (lastSelectedTheme) {
             calColors.set(lastSelectedTheme.colors);
+            if (lastSelectedTheme.bgColors) {
+                bgColors.set(lastSelectedTheme.bgColors);
+            }
+        }
+    };
+
+    /**
+     * Reset background colors to last selected theme
+     */
+    const resetBgToTheme = () => {
+        if (lastSelectedTheme?.bgColors) {
+            bgColors.set(lastSelectedTheme.bgColors);
         }
     };
 
@@ -103,8 +167,12 @@
      */
     const resetToDefault = () => {
         calColors.set(DEFAULT_RCARD_COLORS);
+        bgColors.set(DEFAULT_BG_COLORS);
+        bgEffects.set(DEFAULT_BG_EFFECTS);
+        appFont.set(DEFAULT_FONT);
         darkTheme.set(false);
         lastSelectedTheme = null;
+        effectsExpanded = false;
 
         // Remove from localStorage
         if (typeof window !== "undefined") {
@@ -112,6 +180,110 @@
         }
     };
 
+    /**
+     * Update background color
+     */
+    const updateBgColor = (mode: "light" | "dark", rgbValue: string) => {
+        const hslValue = rgbToHSL(rgbValue);
+        bgColors.set({ ...$bgColors, [mode]: hslValue });
+    };
+
+    /**
+     * Reset background colors to default
+     */
+    const resetBgColors = () => {
+        bgColors.set(DEFAULT_BG_COLORS);
+    };
+
+    /**
+     * Reset effects to default
+     */
+    const resetEffects = () => {
+        bgEffects.set(DEFAULT_BG_EFFECTS);
+    };
+
+    /**
+     * Update noise settings
+     */
+    const updateNoise = (key: keyof BackgroundEffects["noise"], value: any) => {
+        bgEffects.set({
+            ...$bgEffects,
+            noise: { ...$bgEffects.noise, [key]: value }
+        });
+    };
+
+    /**
+     * Update glow settings
+     */
+    const updateGlow = (key: keyof BackgroundEffects["glows"], value: any) => {
+        bgEffects.set({
+            ...$bgEffects,
+            glows: { ...$bgEffects.glows, [key]: value }
+        });
+    };
+
+    // Selected gradient for editing
+    let selectedGradientId: string | null = null;
+
+    $: selectedGradient = $bgEffects.glows.gradients.find(
+        g => g.id === selectedGradientId
+    );
+
+    /**
+     * Handle gradient selection
+     */
+    const handleGradientSelect = (e: CustomEvent<{ id: string }>) => {
+        selectedGradientId = e.detail.id || null;
+    };
+
+    /**
+     * Handle gradient position change (from canvas drag)
+     */
+    const handleGradientMove = (
+        e: CustomEvent<{ id: string; x: number; y: number }>
+    ) => {
+        const { id, x, y } = e.detail;
+        const updatedGradients = $bgEffects.glows.gradients.map(g =>
+            g.id === id ? { ...g, x, y } : g
+        );
+        updateGlow("gradients", updatedGradients);
+    };
+
+    /**
+     * Handle gradient update (from editor)
+     */
+    const handleGradientUpdate = (e: CustomEvent<GradientConfig>) => {
+        const updated = e.detail;
+        const updatedGradients = $bgEffects.glows.gradients.map(g =>
+            g.id === updated.id ? updated : g
+        );
+        updateGlow("gradients", updatedGradients);
+    };
+
+    /**
+     * Handle gradient delete
+     */
+    const handleGradientDelete = (e: CustomEvent<{ id: string }>) => {
+        const { id } = e.detail;
+        const updatedGradients = $bgEffects.glows.gradients.filter(
+            g => g.id !== id
+        );
+        updateGlow("gradients", updatedGradients);
+        if (selectedGradientId === id) {
+            selectedGradientId = null;
+        }
+    };
+
+    /**
+     * Add a new gradient
+     */
+    const handleAddGradient = () => {
+        if ($bgEffects.glows.gradients.length >= MAX_GRADIENTS) return;
+        const newGradient = createGradient();
+        updateGlow("gradients", [...$bgEffects.glows.gradients, newGradient]);
+        selectedGradientId = newGradient.id;
+    };
+
     /**
      * Get the display label for a color key
      */
@@ -122,8 +294,8 @@
     };
 
     // Sort palette colors for display: E first, then 0-6, then -1 last
-    const sortPaletteColors = (colors: CalColors): string[] => {
-        return Object.entries(colors)
+    const sortPaletteColors = (palette: Palette): string[] => {
+        return Object.entries(palette.colors)
             .sort(([a], [b]) => {
                 if (a === "E") return -1;
                 if (b === "E") return 1;
@@ -133,6 +305,9 @@
             })
             .map(([_, value]) => value);
     };
+
+    // State for collapsible sections - auto-expand if any effects are enabled
+    let effectsExpanded = $bgEffects.noise.enabled || $bgEffects.glows.enabled;
 </script>
 
 <SidePanel
@@ -191,19 +366,54 @@
             </button>
         </div>
 
+        <!-- Font Selector -->
+        <div>
+            <h3
+                class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 mb-2">
+                Typography
+            </h3>
+            <div class="grid grid-cols-2 gap-2">
+                {#each FONT_OPTIONS as font}
+                    <button
+                        on:click={() => appFont.set(font.name)}
+                        class="font-button {$appFont === font.name
+                            ? 'ring-2 selected-item'
+                            : 'border-zinc-300 dark:border-zinc-600 hover:border-zinc-400 dark:hover:border-zinc-500'}"
+                        style={$appFont === font.name
+                            ? `--ring-color: ${$calColors["0"]}; border-color: ${$calColors["0"]}`
+                            : ""}>
+                        <span
+                            class="text-3xl dark:text-zinc-100"
+                            style="font-family: '{font.name}', {font.fallback}">
+                            Aa
+                        </span>
+                        <span
+                            class="text-[12px] text-zinc-500 dark:text-zinc-400 truncate w-full text-center">
+                            {font.name}
+                        </span>
+                    </button>
+                {/each}
+            </div>
+        </div>
+
         <!-- Preset Themes -->
         <div>
             <h3
                 class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 mb-3">
-                Preset Themes
+                Themes
             </h3>
             <div class="grid grid-cols-2 gap-2">
-                {#each Object.entries(colorPalettes) as [name, colors]}
+                {#each Object.entries(colorPalettes) as [name, palette]}
                     <button
-                        class="palette-card"
-                        on:click={() => applyPalette(name, colors)}>
+                        class="palette-card {lastSelectedTheme?.name === name
+                            ? 'ring-2 selected-item'
+                            : ''}"
+                        style={lastSelectedTheme?.name === name
+                            ? `--ring-color: ${$calColors["0"]}; border-color: ${$calColors["0"]}`
+                            : ""}
+                        on:click={() => applyPalette(name, palette)}>
                         <div class="flex flex-col">
-                            {#each sortPaletteColors(colors) as color}
+                            {#each sortPaletteColors(palette) as color}
                                 <div
                                     class="h-3 w-full"
                                     style="background-color: {color}" />
@@ -218,6 +428,75 @@
             </div>
         </div>
 
+        <!-- Background Colors -->
+        <div>
+            <h3
+                class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 mb-2">
+                Background Colors
+            </h3>
+            <div
+                class="flex gap-4 p-3 rounded-lg bg-zinc-100/50 dark:bg-zinc-800/50">
+                <label
+                    class="color-swatch flex-1"
+                    title="Light Mode Background">
+                    <div class="color-input-wrapper w-full">
+                        <input
+                            type="color"
+                            value={hslToRGB($bgColors.light)}
+                            on:input={e =>
+                                updateBgColor("light", e.currentTarget.value)}
+                            class="color-input" />
+                        <div
+                            class="color-display w-full"
+                            style="background-color: {hslToRGB(
+                                $bgColors.light
+                            )}" />
+                    </div>
+                    <span
+                        class="text-[10px] text-zinc-500 dark:text-zinc-400 font-medium">
+                        Light Mode
+                    </span>
+                </label>
+                <label class="color-swatch flex-1" title="Dark Mode Background">
+                    <div class="color-input-wrapper w-full">
+                        <input
+                            type="color"
+                            value={hslToRGB($bgColors.dark)}
+                            on:input={e =>
+                                updateBgColor("dark", e.currentTarget.value)}
+                            class="color-input" />
+                        <div
+                            class="color-display w-full"
+                            style="background-color: {hslToRGB(
+                                $bgColors.dark
+                            )}" />
+                    </div>
+                    <span
+                        class="text-[10px] text-zinc-500 dark:text-zinc-400 font-medium">
+                        Dark Mode
+                    </span>
+                </label>
+            </div>
+            <div class="flex gap-2 mt-2">
+                {#if lastSelectedTheme?.bgColors}
+                    <button
+                        on:click={resetBgToTheme}
+                        class="flex-1 py-1.5 px-3 rounded-lg text-xs font-medium
+                               bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400
+                               hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">
+                        Reset to {lastSelectedTheme.name}
+                    </button>
+                {/if}
+                <button
+                    on:click={resetBgColors}
+                    class="flex-1 py-1.5 px-3 rounded-lg text-xs font-medium
+                           bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400
+                           hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">
+                    Reset to Default
+                </button>
+            </div>
+        </div>
+
         <!-- Custom Colors -->
         <div>
             <h3
@@ -259,6 +538,197 @@
             </div>
         </div>
 
+        <!-- Background Effects (Collapsible) -->
+        <div class="border-t border-zinc-200 dark:border-zinc-700 pt-4">
+            <button
+                on:click={() => (effectsExpanded = !effectsExpanded)}
+                class="flex items-center justify-between w-full text-left">
+                <h3
+                    class="text-sm font-semibold text-zinc-600 dark:text-zinc-400">
+                    Advanced Background Effects
+                </h3>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    class="w-4 h-4 text-zinc-500 transition-transform {effectsExpanded
+                        ? 'rotate-180'
+                        : ''}">
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                </svg>
+            </button>
+
+            {#if effectsExpanded}
+                <div class="mt-3 space-y-4">
+                    <!-- Noise Settings -->
+                    <div
+                        class="p-3 rounded-lg bg-zinc-100/50 dark:bg-zinc-800/50">
+                        <div class="flex items-center justify-between mb-3">
+                            <span
+                                class="text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                                Noise Texture
+                            </span>
+                            <button
+                                on:click={() =>
+                                    updateNoise(
+                                        "enabled",
+                                        !$bgEffects.noise.enabled
+                                    )}
+                                class="relative w-9 h-5 rounded-full transition-colors
+                                       {$bgEffects.noise.enabled
+                                    ? 'bg-blue-600'
+                                    : 'bg-zinc-300 dark:bg-zinc-600'}">
+                                <span
+                                    class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow
+                                           transition-transform {$bgEffects
+                                        .noise.enabled
+                                        ? 'translate-x-4'
+                                        : 'translate-x-0'}" />
+                            </button>
+                        </div>
+
+                        {#if $bgEffects.noise.enabled}
+                            <div class="space-y-2">
+                                <div>
+                                    <span
+                                        class="text-[10px] text-zinc-500 dark:text-zinc-400">
+                                        Opacity: {Math.round(
+                                            $bgEffects.noise.opacity * 100
+                                        )}%
+                                    </span>
+                                    <input
+                                        type="range"
+                                        min="0"
+                                        max="1"
+                                        step="0.05"
+                                        value={$bgEffects.noise.opacity}
+                                        on:input={e =>
+                                            updateNoise(
+                                                "opacity",
+                                                parseFloat(
+                                                    e.currentTarget.value
+                                                )
+                                            )}
+                                        class="slider" />
+                                </div>
+                                <div>
+                                    <span
+                                        class="text-[10px] text-zinc-500 dark:text-zinc-400">
+                                        Grain Size: {$bgEffects.noise.baseFrequency.toFixed(
+                                            1
+                                        )}
+                                    </span>
+                                    <input
+                                        type="range"
+                                        min="0.5"
+                                        max="3"
+                                        step="0.1"
+                                        value={$bgEffects.noise.baseFrequency}
+                                        on:input={e =>
+                                            updateNoise(
+                                                "baseFrequency",
+                                                parseFloat(
+                                                    e.currentTarget.value
+                                                )
+                                            )}
+                                        class="slider" />
+                                </div>
+                            </div>
+                        {/if}
+                    </div>
+
+                    <!-- Glow Settings -->
+                    <div
+                        class="p-3 rounded-lg bg-zinc-100/50 dark:bg-zinc-800/50">
+                        <div class="flex items-center justify-between mb-3">
+                            <span
+                                class="text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                                Gradient Glows
+                            </span>
+                            <button
+                                on:click={() =>
+                                    updateGlow(
+                                        "enabled",
+                                        !$bgEffects.glows.enabled
+                                    )}
+                                class="relative w-9 h-5 rounded-full transition-colors
+                                       {$bgEffects.glows.enabled
+                                    ? 'bg-blue-600'
+                                    : 'bg-zinc-300 dark:bg-zinc-600'}">
+                                <span
+                                    class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow
+                                           transition-transform {$bgEffects
+                                        .glows.enabled
+                                        ? 'translate-x-4'
+                                        : 'translate-x-0'}" />
+                            </button>
+                        </div>
+
+                        {#if $bgEffects.glows.enabled}
+                            <!-- Canvas Preview -->
+                            <GradientCanvas
+                                gradients={$bgEffects.glows.gradients}
+                                selectedId={selectedGradientId}
+                                globalOpacity={$bgEffects.glows.globalOpacity}
+                                on:select={handleGradientSelect}
+                                on:move={handleGradientMove} />
+
+                            <!-- Gradient List -->
+                            <GradientList
+                                gradients={$bgEffects.glows.gradients}
+                                selectedId={selectedGradientId}
+                                on:select={handleGradientSelect}
+                                on:add={handleAddGradient} />
+
+                            <!-- Selected Gradient Editor -->
+                            {#if selectedGradient}
+                                <GradientEditor
+                                    gradient={selectedGradient}
+                                    on:update={handleGradientUpdate}
+                                    on:delete={handleGradientDelete} />
+                            {/if}
+
+                            <!-- Global Intensity -->
+                            <div
+                                class="mt-3 pt-3 border-t border-zinc-200 dark:border-zinc-700">
+                                <span
+                                    class="text-[10px] text-zinc-500 dark:text-zinc-400">
+                                    Global Intensity: {Math.round(
+                                        $bgEffects.glows.globalOpacity * 100
+                                    )}%
+                                </span>
+                                <input
+                                    type="range"
+                                    min="0"
+                                    max="0.5"
+                                    step="0.02"
+                                    value={$bgEffects.glows.globalOpacity}
+                                    on:input={e =>
+                                        updateGlow(
+                                            "globalOpacity",
+                                            parseFloat(e.currentTarget.value)
+                                        )}
+                                    class="slider" />
+                            </div>
+                        {/if}
+                    </div>
+
+                    <button
+                        on:click={resetEffects}
+                        class="w-full py-1.5 px-3 rounded-lg text-xs font-medium
+                               bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400
+                               hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors">
+                        Reset Effects
+                    </button>
+                </div>
+            {/if}
+        </div>
+
         <!-- Reset Buttons -->
         <div class="flex gap-2">
             {#if lastSelectedTheme}
@@ -289,6 +759,18 @@
                transition-colors cursor-pointer;
     }
 
+    .font-button {
+        @apply flex flex-col items-center justify-center
+               p-2 rounded-lg border-2
+               bg-zinc-50 dark:bg-zinc-800/50
+               transition-all cursor-pointer;
+        aspect-ratio: 1;
+    }
+
+    .selected-item {
+        --tw-ring-color: var(--ring-color);
+    }
+
     .color-swatch {
         @apply flex flex-col items-center gap-0.5 cursor-pointer;
     }
@@ -323,4 +805,19 @@
             transform: rotate(360deg);
         }
     }
+
+    .slider {
+        @apply w-full h-1.5 rounded-full appearance-none cursor-pointer
+               bg-zinc-300 dark:bg-zinc-600;
+    }
+
+    .slider::-webkit-slider-thumb {
+        @apply appearance-none w-3.5 h-3.5 rounded-full
+               bg-blue-600 cursor-pointer;
+    }
+
+    .slider::-moz-range-thumb {
+        @apply w-3.5 h-3.5 rounded-full border-0
+               bg-blue-600 cursor-pointer;
+    }
 </style>
diff --git a/apps/web/src/lib/components/recal/Top.svelte b/apps/web/src/lib/components/recal/Top.svelte
index d042db78..bfec7021 100644
--- a/apps/web/src/lib/components/recal/Top.svelte
+++ b/apps/web/src/lib/components/recal/Top.svelte
@@ -164,7 +164,7 @@
         dark:text-zinc-100 text-sm">
     <div class="justify-between flex">
         <div
-            class="bg-zinc-100 dark:bg-zinc-800
+            class="themed-panel
             flex gap-2 w-fit p-1 h-8 mb-1 rounded-sm">
             {#each Object.keys(ACTIVE_TERMS).map( x => parseInt(x) ) as activeTerm}
                 <button
@@ -244,7 +244,7 @@
 
     <div class="w-auto overflow-x-auto overflow-y-hidden">
         <div
-            class="bg-zinc-100 dark:bg-zinc-800 flex gap-2 w-fit
+            class="themed-panel flex gap-2 w-fit
             p-1 h-8 font-normal rounded-sm">
             {#key $retop}
                 {#await fetchUserSchedules(supabase, $currentTerm)}
@@ -270,7 +270,8 @@
                                 class="card {$currentSchedule === schedule.id
                                     ? 'flex items-center gap-4'
                                     : 'termchoice'}"
-                                class:selected={$currentSchedule === schedule.id}
+                                class:selected={$currentSchedule ===
+                                    schedule.id}
                                 on:click={() =>
                                     $currentSchedule === schedule.id
                                         ? modalStore.push("editSchedule")
@@ -295,7 +296,7 @@
                         {/each}
                     </div>
                     <button
-                        class="card termchoice"
+                        class="card add-button"
                         on:click={() => {
                             handleAddSchedule();
                         }}>
@@ -314,7 +315,7 @@
                     </button>
                 {:catch}
                     <button
-                        class="card termchoice"
+                        class="card add-button"
                         on:click={() => modalStore.push("addSchedule")}>
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -370,6 +371,16 @@
         @apply bg-zinc-200 dark:bg-zinc-700 duration-150;
     }
 
+    .add-button:hover {
+        background-color: var(--bg);
+        color: var(--text);
+        transition-duration: 150ms;
+    }
+
+    .add-button:hover svg {
+        @apply text-current;
+    }
+
     .selected {
         background-color: var(--bg);
         color: var(--text);
diff --git a/apps/web/src/lib/components/recal/calendar/CalBox.svelte b/apps/web/src/lib/components/recal/calendar/CalBox.svelte
index b0042539..df09fb58 100644
--- a/apps/web/src/lib/components/recal/calendar/CalBox.svelte
+++ b/apps/web/src/lib/components/recal/calendar/CalBox.svelte
@@ -178,7 +178,7 @@
                 params.section.end_time
             )}
         </div>
-        <div class="font-normal">
+        <div class="font-normal serif-lowercase">
             {courseCode}
             {params.section.title}
         </div>
diff --git a/apps/web/src/lib/components/recal/left/Events.svelte b/apps/web/src/lib/components/recal/left/Events.svelte
index 446d0fcf..c05f94e9 100644
--- a/apps/web/src/lib/components/recal/left/Events.svelte
+++ b/apps/web/src/lib/components/recal/left/Events.svelte
@@ -33,7 +33,7 @@
     <div
         style={cssVarStyles}
         class="text-base font-normal ml-1 dark:text-zinc-100
-                flex items-center justify-between h-6">
+                flex items-center justify-between h-6 serif-lowercase section-header">
         <span>
             {scheduleEvents.length} Custom
             {scheduleEvents.length === 1 ? "Event" : "Events"}
@@ -73,7 +73,7 @@
                         stroke-linejoin="round"
                         d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5" />
                 </svg>
-                <p>Show</p>
+                <p class="serif-lowercase section-header">Show</p>
             {/if}
         </button>
     </div>
@@ -164,7 +164,7 @@
 
 <style lang="postcss">
     .icon {
-        @apply w-5 h-5;
+        @apply w-4 h-4;
     }
 
     #addButton {
diff --git a/apps/web/src/lib/components/recal/left/Saved.svelte b/apps/web/src/lib/components/recal/left/Saved.svelte
index 6addcd1d..12c24c74 100644
--- a/apps/web/src/lib/components/recal/left/Saved.svelte
+++ b/apps/web/src/lib/components/recal/left/Saved.svelte
@@ -37,7 +37,7 @@
         <div
             bind:this={headerEl}
             class="text-base font-normal dark:text-zinc-100 ml-1
-                    flex items-center justify-between">
+                    flex items-center justify-between serif-lowercase section-header">
             <span>
                 {saved.length} Saved
                 {saved.length === 1 ? "Course" : "Courses"}
@@ -58,7 +58,7 @@
                         d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
                 </svg>
 
-                <p class="calbut">Export</p>
+                <p class="calbut serif-lowercase section-header">Export</p>
             </button>
         </div>
 
diff --git a/apps/web/src/lib/components/recal/left/SearchBar.svelte b/apps/web/src/lib/components/recal/left/SearchBar.svelte
index 3a26f525..3b44990b 100644
--- a/apps/web/src/lib/components/recal/left/SearchBar.svelte
+++ b/apps/web/src/lib/components/recal/left/SearchBar.svelte
@@ -106,8 +106,8 @@
     <div class="flex gap-2">
         <input
             type="text"
-            placeholder="Search"
-            class="search-input std-area rounded-md"
+            placeholder="Search..."
+            class="search-input std-area rounded-md section-header serif-lowercase text-sm"
             bind:this={inputBar}
             on:input={triggerSearch}
             on:focus={() => (searchFocused = true)}
@@ -206,11 +206,19 @@
     }
 
     .disabled {
-        @apply bg-zinc-200 dark:bg-zinc-700 text-zinc-900
-    dark:text-zinc-100;
+        background-color: color-mix(in srgb, var(--bg-light) 90%, #000);
+        @apply text-zinc-700 dark:text-zinc-300;
+    }
+
+    :global(.dark) .disabled {
+        background-color: color-mix(in srgb, var(--bg-dark) 85%, #fff);
     }
 
     .disabled:hover {
-        @apply bg-zinc-300 dark:bg-zinc-600;
+        background-color: color-mix(in srgb, var(--bg-light) 85%, #000);
+    }
+
+    :global(.dark) .disabled:hover {
+        background-color: color-mix(in srgb, var(--bg-dark) 80%, #fff);
     }
 </style>
diff --git a/apps/web/src/lib/components/recal/left/SearchResults.svelte b/apps/web/src/lib/components/recal/left/SearchResults.svelte
index 5e19a329..2fb4e58b 100644
--- a/apps/web/src/lib/components/recal/left/SearchResults.svelte
+++ b/apps/web/src/lib/components/recal/left/SearchResults.svelte
@@ -26,7 +26,7 @@
 {#if $searchResults.length > 0}
     <div
         bind:this={headerEl}
-        class="text-base font-normal dark:text-zinc-100 ml-1">
+        class="text-base font-normal dark:text-zinc-100 ml-1 serif-lowercase">
         {$searchResults.length} Search
         {$searchResults.length === 1 ? "Result" : "Results"}
     </div>
diff --git a/apps/web/src/lib/components/recal/left/elements/CourseCard.svelte b/apps/web/src/lib/components/recal/left/elements/CourseCard.svelte
index 25f0976b..35b82679 100644
--- a/apps/web/src/lib/components/recal/left/elements/CourseCard.svelte
+++ b/apps/web/src/lib/components/recal/left/elements/CourseCard.svelte
@@ -154,10 +154,10 @@
         <button
             class="text-xs font-light text-left w-[75%] p-1"
             on:click={() => (flipped = !flipped)}>
-            <div class="font-normal">
+            <div class="font-normal serif-lowercase">
                 {code}
             </div>
-            <div>
+            <div class="serif-lowercase">
                 {title}
             </div>
 
diff --git a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
index e50775e7..dd0a5c4f 100644
--- a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
+++ b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
@@ -49,7 +49,7 @@
     <div class="w-[60%]">
         <p
             id="title"
-            class="text-sm p-1 overflow-clip {isSelected
+            class="text-sm p-1 overflow-clip serif-lowercase {isSelected
                 ? ''
                 : 'dark:text-zinc-100'}">
             {customEvent.title}
diff --git a/apps/web/src/lib/components/recal/modals/AdvancedSearch.svelte b/apps/web/src/lib/components/recal/modals/AdvancedSearch.svelte
index b8f1f765..de5f2973 100644
--- a/apps/web/src/lib/components/recal/modals/AdvancedSearch.svelte
+++ b/apps/web/src/lib/components/recal/modals/AdvancedSearch.svelte
@@ -248,17 +248,21 @@
 
 <style lang="postcss">
     .filter-group {
-        @apply rounded-md border border-zinc-200 bg-white overflow-hidden;
+        @apply rounded-md border border-zinc-200 overflow-hidden;
+        background-color: color-mix(in srgb, var(--bg-light) 95%, #000);
     }
     :global(.dark) .filter-group {
-        @apply border-zinc-700 bg-zinc-800/80;
+        @apply border-zinc-700;
+        background-color: color-mix(in srgb, var(--bg-dark) 90%, #fff);
     }
 
     .filter-group-header {
-        @apply px-2 py-1 bg-zinc-100 border-b border-zinc-200 text-zinc-600;
+        @apply px-2 py-1 border-b border-zinc-200 text-zinc-600;
+        background-color: color-mix(in srgb, var(--bg-light) 90%, #000);
     }
     :global(.dark) .filter-group-header {
-        @apply bg-zinc-700/50 border-zinc-700 text-zinc-400;
+        @apply border-zinc-700 text-zinc-400;
+        background-color: color-mix(in srgb, var(--bg-dark) 85%, #fff);
     }
 
     .filter-item {
@@ -266,10 +270,12 @@
     }
 
     .filter-expansion {
-        @apply px-2 py-1.5 bg-zinc-50 border-t border-zinc-100;
+        @apply px-2 py-1.5 border-t border-zinc-100;
+        background-color: color-mix(in srgb, var(--bg-light) 95%, #000);
     }
     :global(.dark) .filter-expansion {
-        @apply bg-zinc-900/50 border-zinc-700;
+        @apply border-zinc-700;
+        background-color: color-mix(in srgb, var(--bg-dark) 90%, #fff);
     }
 
     /* Secondary pills are smaller than main filter pills */
diff --git a/apps/web/src/lib/components/recal/modals/events/EditEvent.svelte b/apps/web/src/lib/components/recal/modals/events/EditEvent.svelte
index bc190e73..30b4a4ea 100644
--- a/apps/web/src/lib/components/recal/modals/events/EditEvent.svelte
+++ b/apps/web/src/lib/components/recal/modals/events/EditEvent.svelte
@@ -238,7 +238,7 @@
                     </p>
                     {#each times as time, i}
                         <div
-                            class="bg-zinc-100 dark:bg-zinc-800
+                            class="themed-panel
                             rounded-md p-4 relative mt-2">
                             <!-- Delete Button -->
                             <button
diff --git a/apps/web/src/lib/components/recal/modals/events/ManageEvents.svelte b/apps/web/src/lib/components/recal/modals/events/ManageEvents.svelte
index dde0e1f7..82b1bc4c 100644
--- a/apps/web/src/lib/components/recal/modals/events/ManageEvents.svelte
+++ b/apps/web/src/lib/components/recal/modals/events/ManageEvents.svelte
@@ -50,7 +50,7 @@
                 gap-2 md:gap-4">
                 {#each $customEvents as event}
                     <div
-                        class="bg-zinc-100 dark:bg-zinc-800 rounded-md p-4 flex justify-between gap-4">
+                        class="themed-panel rounded-md p-4 flex justify-between gap-4">
                         <div class="overflow-x-hidden">
                             <h3 class="text-lg font-semibold">{event.title}</h3>
                             <p class="text-sm mb-2 italic">
diff --git a/apps/web/src/lib/components/ui/NoiseFilter.svelte b/apps/web/src/lib/components/ui/NoiseFilter.svelte
new file mode 100644
index 00000000..86a3416e
--- /dev/null
+++ b/apps/web/src/lib/components/ui/NoiseFilter.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { bgEffects } from "$lib/stores/styles";
+</script>
+
+<!-- SVG Noise Filter Definition - Hidden but available app-wide -->
+<svg style="position: absolute; width: 0; height: 0;">
+    <defs>
+        <filter id="pageNoise">
+            <feTurbulence
+                type="fractalNoise"
+                baseFrequency={$bgEffects.noise.baseFrequency}
+                numOctaves="6"
+                stitchTiles="stitch" />
+            <feColorMatrix type="saturate" values="0" />
+            <feComponentTransfer>
+                <feFuncA type="discrete" tableValues="0 0 0 1 1" />
+            </feComponentTransfer>
+        </filter>
+    </defs>
+</svg>
diff --git a/apps/web/src/lib/components/ui/SidePanel.svelte b/apps/web/src/lib/components/ui/SidePanel.svelte
index 845f6a1f..34f5ef58 100644
--- a/apps/web/src/lib/components/ui/SidePanel.svelte
+++ b/apps/web/src/lib/components/ui/SidePanel.svelte
@@ -34,7 +34,7 @@
 
     <!-- Panel -->
     <div
-        class="fixed top-0 right-0 h-full bg-white dark:bg-zinc-900 shadow-xl z-50
+        class="fixed top-0 right-0 h-full panel-bg shadow-xl z-50
                border-l-2 border-zinc-300 dark:border-zinc-700
                flex flex-col overflow-hidden"
         style="width: {width};"
@@ -69,3 +69,12 @@
         </div>
     </div>
 {/if}
+
+<style lang="postcss">
+    .panel-bg {
+        background-color: var(--bg-light);
+    }
+    :global(.dark) .panel-bg {
+        background-color: var(--bg-dark);
+    }
+</style>
diff --git a/apps/web/src/lib/scripts/ReCal+/palettes.ts b/apps/web/src/lib/scripts/ReCal+/palettes.ts
index c912eb2c..6f83cae7 100644
--- a/apps/web/src/lib/scripts/ReCal+/palettes.ts
+++ b/apps/web/src/lib/scripts/ReCal+/palettes.ts
@@ -1,183 +1,253 @@
 // Credits: https://coolors.co/palettes/popular/7%20colors
 import type { CalColors } from "$lib/stores/styles";
 
-// Title -> CalColors
-export const colorPalettes: Record<string, CalColors> = {
+export type Palette = {
+    colors: CalColors;
+    bgLight: string; // hex color for light mode background
+    bgDark: string; // hex color for dark mode background
+};
+
+// Title -> Palette
+export const colorPalettes: Record<string, Palette> = {
     Bright: {
-        "-1": "#a8a8a8",
-        "0": "#9ee09e",
-        "1": "#feb44d",
-        "2": "#9fc2d0",
-        "3": "#fcfc7d",
-        "4": "#ff6461",
-        "5": "#ff99cc",
-        "6": "#cc99c8",
-        "E": "#e0e8f0"
+        colors: {
+            "-1": "#a8a8a8",
+            "0": "#9ee09e",
+            "1": "#feb44d",
+            "2": "#9fc2d0",
+            "3": "#fcfc7d",
+            "4": "#ff6461",
+            "5": "#ff99cc",
+            "6": "#cc99c8",
+            "E": "#e0e8f0"
+        },
+        bgLight: "#ffffff",
+        bgDark: "#18181b"
     },
     // From the original ReCal
     Legacy: {
-        "-1": "#e6e6e6",
-        "0": "#D0DECF",
-        "1": "#d5dcec",
-        "2": "#ebd2db",
-        "3": "#faf4cb",
-        "4": "#e7dcce",
-        "5": "#d1e7e4",
-        "6": "#dcd5e2",
-        "E": "#e6e8f0"
+        colors: {
+            "-1": "#e6e6e6",
+            "0": "#D0DECF",
+            "1": "#d5dcec",
+            "2": "#ebd2db",
+            "3": "#faf4cb",
+            "4": "#e7dcce",
+            "5": "#d1e7e4",
+            "6": "#dcd5e2",
+            "E": "#e6e8f0"
+        },
+        bgLight: "#fafaf8",
+        bgDark: "#18181b"
     },
     Coastal: {
-        "-1": "#e6e6e6",
-        "0": "#b8e0d2",
-        "1": "#d6eadf",
-        "2": "#eac4d5",
-        "3": "#f9e2ae",
-        "4": "#95d5b2",
-        "5": "#a2d2ff",
-        "6": "#cdb4db",
-        "E": "#f0f9f4"
+        colors: {
+            "-1": "#e6e6e6",
+            "0": "#b8e0d2",
+            "1": "#d6eadf",
+            "2": "#eac4d5",
+            "3": "#f9e2ae",
+            "4": "#95d5b2",
+            "5": "#a2d2ff",
+            "6": "#cdb4db",
+            "E": "#f0f9f4"
+        },
+        bgLight: "#f8fcfa",
+        bgDark: "#18181b"
     },
     Sunset: {
-        "-1": "#e6e6e6",
-        "0": "#ffecd2",
-        "1": "#ffd6a5",
-        "2": "#fdcfe8",
-        "3": "#fff5ba",
-        "4": "#c8f7dc",
-        "5": "#d4e4f7",
-        "6": "#e8d4f7",
-        "E": "#fff8f0"
+        colors: {
+            "-1": "#e6e6e6",
+            "0": "#ffecd2",
+            "1": "#ffd6a5",
+            "2": "#fdcfe8",
+            "3": "#fff5ba",
+            "4": "#c8f7dc",
+            "5": "#d4e4f7",
+            "6": "#e8d4f7",
+            "E": "#fff8f0"
+        },
+        bgLight: "#fffcf8",
+        bgDark: "#18181b"
     },
     Crayon: {
-        "-1": "#e6e6e6",
-        "0": "#ffadad",
-        "1": "#ffd6a5",
-        "2": "#fdffb6",
-        "3": "#caffbf",
-        "4": "#9bf6ff",
-        "5": "#a0c4ff",
-        "6": "#bdb2ff",
-        "E": "#fff0f0"
+        colors: {
+            "-1": "#e6e6e6",
+            "0": "#ffadad",
+            "1": "#ffd6a5",
+            "2": "#fdffb6",
+            "3": "#caffbf",
+            "4": "#9bf6ff",
+            "5": "#a0c4ff",
+            "6": "#bdb2ff",
+            "E": "#fff0f0"
+        },
+        bgLight: "#fffefa",
+        bgDark: "#18181b"
     },
     Minty: {
-        "-1": "#e6e6e6",
-        "0": "#84ffc9",
-        "1": "#8af2d2",
-        "2": "#91e5db",
-        "3": "#97d9e4",
-        "4": "#9dcced",
-        "5": "#a4bff6",
-        "6": "#aab2ff",
-        "E": "#e6fff0"
+        colors: {
+            "-1": "#e6e6e6",
+            "0": "#84ffc9",
+            "1": "#8af2d2",
+            "2": "#91e5db",
+            "3": "#97d9e4",
+            "4": "#9dcced",
+            "5": "#a4bff6",
+            "6": "#aab2ff",
+            "E": "#e6fff0"
+        },
+        bgLight: "#f2fcf9",
+        bgDark: "#152224"
     },
     Sweet: {
-        "-1": "#e6e6e6",
-        "0": "#f5cbd9",
-        "1": "#eeccde",
-        "2": "#e7cce4",
-        "3": "#e0cde9",
-        "4": "#d8ceee",
-        "5": "#d1cef4",
-        "6": "#cacff9",
-        "E": "#fdf0ff"
+        colors: {
+            "-1": "#e6e6e6",
+            "0": "#f5cbd9",
+            "1": "#eeccde",
+            "2": "#e7cce4",
+            "3": "#e0cde9",
+            "4": "#d8ceee",
+            "5": "#d1cef4",
+            "6": "#cacff9",
+            "E": "#fdf0ff"
+        },
+        bgLight: "#fbf7fd",
+        bgDark: "#231e29"
     },
     Pearl: {
-        "-1": "#e6e6e6",
-        "0": "#e9b7ce",
-        "1": "#e5c1d4",
-        "2": "#e2cbda",
-        "3": "#ded5e0",
-        "4": "#dadfe5",
-        "5": "#d7e9eb",
-        "6": "#d3f3f1",
-        "E": "#fff5f0"
+        colors: {
+            "-1": "#e6e6e6",
+            "0": "#e9b7ce",
+            "1": "#e5c1d4",
+            "2": "#e2cbda",
+            "3": "#ded5e0",
+            "4": "#dadfe5",
+            "5": "#d7e9eb",
+            "6": "#d3f3f1",
+            "E": "#fff5f0"
+        },
+        bgLight: "#fffaf8",
+        bgDark: "#18181b"
     },
-    Forest: {
-        "-1": "#A8A8A8",
-        "0": "#A8B1A9",
-        "1": "#B1BAA9",
-        "2": "#C0BDA8",
-        "3": "#909D88",
-        "4": "#A7AFAC",
-        "5": "#E4DED3",
-        "6": "#D3D0C8",
-        "E": "#f0f5e6"
+    Book: {
+        colors: {
+            "-1": "#c4b8a8",
+            "0": "#d4c4a8",
+            "1": "#c9b896",
+            "2": "#e8dcc8",
+            "3": "#d9cdb5",
+            "4": "#c4b090",
+            "5": "#bfad8f",
+            "6": "#d0c4ac",
+            "E": "#e5dbc8"
+        },
+        bgLight: "#f5f0e6",
+        bgDark: "#2a2520"
     },
     Slate: {
-        "-1": "#A8A8A8",
-        "0": "#b9c6cb",
-        "1": "#a7b7bd",
-        "2": "#eef2f3",
-        "3": "#dce3e6",
-        "4": "#cad4d8",
-        "5": "#95a8b0",
-        "6": "#8399a2",
-        "E": "#f0f5f7"
+        colors: {
+            "-1": "#A8A8A8",
+            "0": "#b9c6cb",
+            "1": "#a7b7bd",
+            "2": "#eef2f3",
+            "3": "#dce3e6",
+            "4": "#cad4d8",
+            "5": "#95a8b0",
+            "6": "#8399a2",
+            "E": "#f0f5f7"
+        },
+        bgLight: "#f1f5f8",
+        bgDark: "#1b2126"
     },
     Aurora: {
-        "-1": "#A8A8A8",
-        "0": "#1a5c5c",
-        "1": "#6b4a0a",
-        "2": "#6b1a4a",
-        "3": "#1a5c2e",
-        "4": "#6b3a1a",
-        "5": "#1a3a6b",
-        "6": "#4a1a6b",
-        "E": "#1a2a3a"
+        colors: {
+            "-1": "#A8A8A8",
+            "0": "#1a5c5c",
+            "1": "#6b4a0a",
+            "2": "#6b1a4a",
+            "3": "#1a5c2e",
+            "4": "#6b3a1a",
+            "5": "#1a3a6b",
+            "6": "#4a1a6b",
+            "E": "#1a2a3a"
+        },
+        bgLight: "#ffffff",
+        bgDark: "#0f1419"
     },
     Crimson: {
-        "-1": "#A8A8A8",
-        "0": "#4a0d1c",
-        "1": "#5c1024",
-        "2": "#6e132c",
-        "3": "#801634",
-        "4": "#92193c",
-        "5": "#a41c44",
-        "6": "#b61f4c",
-        "E": "#2e0812"
+        colors: {
+            "-1": "#A8A8A8",
+            "0": "#4a0d1c",
+            "1": "#5c1024",
+            "2": "#6e132c",
+            "3": "#801634",
+            "4": "#92193c",
+            "5": "#a41c44",
+            "6": "#b61f4c",
+            "E": "#2e0812"
+        },
+        bgLight: "#ffffff",
+        bgDark: "#1a0a0f"
     },
     Pixel: {
-        "-1": "#A8A8A8",
-        "0": "#8a004d",
-        "1": "#005c99",
-        "2": "#007040",
-        "3": "#99005c",
-        "4": "#00668a",
-        "5": "#008050",
-        "6": "#a3005c",
-        "E": "#1a1a2e"
+        colors: {
+            "-1": "#A8A8A8",
+            "0": "#8a004d",
+            "1": "#005c99",
+            "2": "#007040",
+            "3": "#99005c",
+            "4": "#00668a",
+            "5": "#008050",
+            "6": "#a3005c",
+            "E": "#1a1a2e"
+        },
+        bgLight: "#ffffff",
+        bgDark: "#0d0d1a"
     },
     Midnight: {
-        "-1": "#A8A8A8",
-        "0": "#1a5568",
-        "1": "#1a4a5a",
-        "2": "#255060",
-        "3": "#2a4578",
-        "4": "#3a3a72",
-        "5": "#453580",
-        "6": "#503570",
-        "E": "#1a3246"
+        colors: {
+            "-1": "#A8A8A8",
+            "0": "#1a5568",
+            "1": "#1a4a5a",
+            "2": "#255060",
+            "3": "#2a4578",
+            "4": "#3a3a72",
+            "5": "#453580",
+            "6": "#503570",
+            "E": "#1a3246"
+        },
+        bgLight: "#ffffff",
+        bgDark: "#0a1520"
     },
     Cobalt: {
-        "-1": "#A8A8A8",
-        "0": "#3f004d",
-        "1": "#350455",
-        "2": "#2a085c",
-        "3": "#200c64",
-        "4": "#15106b",
-        "5": "#0b1473",
-        "6": "#00187a",
-        "E": "#2a0033"
+        colors: {
+            "-1": "#A8A8A8",
+            "0": "#3f004d",
+            "1": "#350455",
+            "2": "#2a085c",
+            "3": "#200c64",
+            "4": "#15106b",
+            "5": "#0b1473",
+            "6": "#00187a",
+            "E": "#2a0033"
+        },
+        bgLight: "#ffffff",
+        bgDark: "#0d0515"
     },
     Shadow: {
-        "-1": "#A8A8A8",
-        "0": "#2a454b",
-        "1": "#253e45",
-        "2": "#21373f",
-        "3": "#1c3139",
-        "4": "#172a32",
-        "5": "#13232c",
-        "6": "#0e1c26",
-        "E": "#1c2f34"
+        colors: {
+            "-1": "#A8A8A8",
+            "0": "#2a454b",
+            "1": "#253e45",
+            "2": "#21373f",
+            "3": "#1c3139",
+            "4": "#172a32",
+            "5": "#13232c",
+            "6": "#0e1c26",
+            "E": "#1c2f34"
+        },
+        bgLight: "#ffffff",
+        bgDark: "#0a1214"
     }
 };
diff --git a/apps/web/src/lib/scripts/convert.ts b/apps/web/src/lib/scripts/convert.ts
index 865c1a16..0b407fa4 100644
--- a/apps/web/src/lib/scripts/convert.ts
+++ b/apps/web/src/lib/scripts/convert.ts
@@ -325,6 +325,27 @@ const rgbToHSL = (hex: string) => {
     return `hsl(${hVal}, ${sVal}%, ${lVal}%)`;
 };
 
+/**
+ * Converts an HSL color to RGB components string (for CSS rgba usage)
+ * @param hsl
+ * @returns RGB components string like "255, 149, 0"
+ */
+const hslToRGBComponents = (hsl: string): string => {
+    // eslint-disable-next-line prefer-const
+    let [h, s, l] = hsl.split(",").map(x => parseInt(x.replace(/\D/g, "")));
+
+    l /= 100;
+    const a = (s * Math.min(l, 1 - l)) / 100;
+
+    const f = (n: number) => {
+        const k = (n + h / 30) % 12;
+        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color);
+    };
+
+    return `${f(0)}, ${f(8)}, ${f(4)}`;
+};
+
 //----------------------------------------------------------------------
 
 // TODO Refactor
@@ -339,5 +360,6 @@ export {
     normalizeText,
     darkenHSL,
     hslToRGB,
+    hslToRGBComponents,
     rgbToHSL
 };
diff --git a/apps/web/src/lib/stores/styles.ts b/apps/web/src/lib/stores/styles.ts
index b8929a48..f6e20246 100644
--- a/apps/web/src/lib/stores/styles.ts
+++ b/apps/web/src/lib/stores/styles.ts
@@ -2,6 +2,305 @@ import { darkenHSL, rgbToHSL } from "$lib/scripts/convert";
 import { colorPalettes } from "$lib/scripts/ReCal+/palettes";
 import { get, writable } from "svelte/store";
 
+//----------------------------------------------------------------------
+// Background Colors
+//----------------------------------------------------------------------
+
+export type BgColors = {
+    light: string; // HSL string
+    dark: string; // HSL string
+};
+
+export const DEFAULT_BG_COLORS: BgColors = {
+    light: "hsl(0, 0%, 100%)", // white
+    dark: "hsl(240, 6%, 10%)" // zinc-900
+};
+
+const initializeBgColors = (): BgColors => {
+    if (typeof window === "undefined") return DEFAULT_BG_COLORS;
+
+    const stored = localStorage.getItem("bgColors");
+    if (!stored) {
+        localStorage.setItem("bgColors", JSON.stringify(DEFAULT_BG_COLORS));
+        return DEFAULT_BG_COLORS;
+    }
+
+    try {
+        const parsed = JSON.parse(stored);
+        if (parsed.light && parsed.dark) {
+            return parsed;
+        }
+    } catch {
+        // Invalid JSON, reset to defaults
+    }
+
+    localStorage.setItem("bgColors", JSON.stringify(DEFAULT_BG_COLORS));
+    return DEFAULT_BG_COLORS;
+};
+
+const {
+    subscribe: bgSubscribe,
+    update: bgUpdate,
+    set: bgSet
+} = writable<BgColors>(initializeBgColors());
+
+export const bgColors = {
+    subscribe: bgSubscribe,
+    update: bgUpdate,
+    set: (value: BgColors) => {
+        bgSet(value);
+        localStorage.setItem("bgColors", JSON.stringify(value));
+    }
+};
+
+//----------------------------------------------------------------------
+// Background Effects (Noise + Glows)
+//----------------------------------------------------------------------
+
+export type GradientShape = "circle" | "ellipse";
+
+export type GradientConfig = {
+    id: string;
+    color: string; // HSL string
+    x: number; // Position X (0-100%)
+    y: number; // Position Y (0-100%)
+    size: number; // Radius (10-100%)
+    opacity: number; // Individual opacity (0-1)
+    shape: GradientShape;
+    blur: number; // Fade amount (10-100%)
+};
+
+export type GlowsConfig = {
+    enabled: boolean;
+    gradients: GradientConfig[];
+    globalOpacity: number; // Master opacity (0-1)
+    darkModeIntensity: number; // Dark mode multiplier
+};
+
+export type BackgroundEffects = {
+    noise: {
+        enabled: boolean;
+        opacity: number; // 0-1
+        baseFrequency: number; // default 1.5
+    };
+    glows: GlowsConfig;
+};
+
+export const MAX_GRADIENTS = 10;
+
+export const generateGradientId = (): string => {
+    return `grad_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+
+export const createGradient = (
+    overrides?: Partial<GradientConfig>
+): GradientConfig => {
+    return {
+        id: generateGradientId(),
+        color: "hsl(36, 100%, 50%)",
+        x: 50,
+        y: 50,
+        size: 30,
+        opacity: 1,
+        shape: "ellipse",
+        blur: 30,
+        ...overrides
+    };
+};
+
+export const DEFAULT_GRADIENTS: GradientConfig[] = [
+    {
+        id: "default_1",
+        color: "hsl(36, 100%, 50%)", // orange
+        x: 0,
+        y: 15,
+        size: 30,
+        opacity: 1,
+        shape: "ellipse",
+        blur: 30
+    },
+    {
+        id: "default_2",
+        color: "hsl(211, 100%, 50%)", // blue
+        x: 100,
+        y: 30,
+        size: 40,
+        opacity: 1,
+        shape: "ellipse",
+        blur: 40
+    }
+];
+
+export const DEFAULT_BG_EFFECTS: BackgroundEffects = {
+    noise: {
+        enabled: false,
+        opacity: 0.5,
+        baseFrequency: 1.5
+    },
+    glows: {
+        enabled: false,
+        gradients: [...DEFAULT_GRADIENTS],
+        globalOpacity: 0.15,
+        darkModeIntensity: 1.33
+    }
+};
+
+const initializeBgEffects = (): BackgroundEffects => {
+    if (typeof window === "undefined") return DEFAULT_BG_EFFECTS;
+
+    const stored = localStorage.getItem("bgEffects");
+    if (!stored) {
+        localStorage.setItem("bgEffects", JSON.stringify(DEFAULT_BG_EFFECTS));
+        return DEFAULT_BG_EFFECTS;
+    }
+
+    try {
+        const parsed = JSON.parse(stored);
+        // Validate structure
+        if (parsed.noise && parsed.glows) {
+            // Check if old format (has color1/color2 instead of gradients array)
+            if (!Array.isArray(parsed.glows.gradients) && parsed.glows.color1) {
+                // Migrate old format to new format
+                const migratedGradients: GradientConfig[] = [
+                    {
+                        id: "migrated_1",
+                        color: parsed.glows.color1 ?? "hsl(36, 100%, 50%)",
+                        x: 0,
+                        y: 15,
+                        size: 30,
+                        opacity: 1,
+                        shape: "ellipse",
+                        blur: 30
+                    },
+                    {
+                        id: "migrated_2",
+                        color: parsed.glows.color2 ?? "hsl(211, 100%, 50%)",
+                        x: 100,
+                        y: 30,
+                        size: 40,
+                        opacity: 1,
+                        shape: "ellipse",
+                        blur: 40
+                    }
+                ];
+
+                const migrated: BackgroundEffects = {
+                    noise: {
+                        enabled:
+                            parsed.noise.enabled ??
+                            DEFAULT_BG_EFFECTS.noise.enabled,
+                        opacity:
+                            parsed.noise.opacity ??
+                            DEFAULT_BG_EFFECTS.noise.opacity,
+                        baseFrequency:
+                            parsed.noise.baseFrequency ??
+                            DEFAULT_BG_EFFECTS.noise.baseFrequency
+                    },
+                    glows: {
+                        enabled:
+                            parsed.glows.enabled ??
+                            DEFAULT_BG_EFFECTS.glows.enabled,
+                        gradients: migratedGradients,
+                        globalOpacity:
+                            parsed.glows.opacity ??
+                            DEFAULT_BG_EFFECTS.glows.globalOpacity,
+                        darkModeIntensity:
+                            DEFAULT_BG_EFFECTS.glows.darkModeIntensity
+                    }
+                };
+                localStorage.setItem("bgEffects", JSON.stringify(migrated));
+                return migrated;
+            }
+
+            // New format - validate and return
+            return {
+                noise: {
+                    enabled:
+                        parsed.noise.enabled ??
+                        DEFAULT_BG_EFFECTS.noise.enabled,
+                    opacity:
+                        parsed.noise.opacity ??
+                        DEFAULT_BG_EFFECTS.noise.opacity,
+                    baseFrequency:
+                        parsed.noise.baseFrequency ??
+                        DEFAULT_BG_EFFECTS.noise.baseFrequency
+                },
+                glows: {
+                    enabled:
+                        parsed.glows.enabled ??
+                        DEFAULT_BG_EFFECTS.glows.enabled,
+                    gradients:
+                        parsed.glows.gradients ??
+                        DEFAULT_BG_EFFECTS.glows.gradients,
+                    globalOpacity:
+                        parsed.glows.globalOpacity ??
+                        DEFAULT_BG_EFFECTS.glows.globalOpacity,
+                    darkModeIntensity:
+                        parsed.glows.darkModeIntensity ??
+                        DEFAULT_BG_EFFECTS.glows.darkModeIntensity
+                }
+            };
+        }
+    } catch {
+        // Invalid JSON, reset to defaults
+    }
+
+    localStorage.setItem("bgEffects", JSON.stringify(DEFAULT_BG_EFFECTS));
+    return DEFAULT_BG_EFFECTS;
+};
+
+const {
+    subscribe: effectsSubscribe,
+    update: effectsUpdate,
+    set: effectsSet
+} = writable<BackgroundEffects>(initializeBgEffects());
+
+export const bgEffects = {
+    subscribe: effectsSubscribe,
+    update: effectsUpdate,
+    set: (value: BackgroundEffects) => {
+        effectsSet(value);
+        localStorage.setItem("bgEffects", JSON.stringify(value));
+    }
+};
+
+//----------------------------------------------------------------------
+// Font
+//----------------------------------------------------------------------
+
+export type FontFamily =
+    | "Lato"
+    | "Roboto"
+    | "Playfair Display"
+    | "JetBrains Mono";
+
+export const FONT_OPTIONS: { name: FontFamily; fallback: string }[] = [
+    { name: "Lato", fallback: "sans-serif" },
+    { name: "Roboto", fallback: "sans-serif" },
+    { name: "Playfair Display", fallback: "serif" },
+    { name: "JetBrains Mono", fallback: "monospace" }
+];
+
+export const DEFAULT_FONT: FontFamily = "Lato";
+
+function createFontStore() {
+    const store = writable<FontFamily>(
+        typeof window !== "undefined"
+            ? (localStorage.getItem("appFont") as FontFamily) || DEFAULT_FONT
+            : DEFAULT_FONT
+    );
+
+    return {
+        subscribe: store.subscribe,
+        set: (value: FontFamily) => {
+            store.set(value);
+            localStorage.setItem("appFont", value);
+        }
+    };
+}
+
+export const appFont = createFontStore();
+
 //----------------------------------------------------------------------
 // General
 //----------------------------------------------------------------------
@@ -130,7 +429,7 @@ const initializeCalColors = (): CalColors => {
     if (!("E" in parsedColors)) {
         for (const key in colorPalettes) {
             const palette = colorPalettes[key];
-            const hslPalette = Object.entries(palette)
+            const hslPalette = Object.entries(palette.colors)
                 .map(([key, value]) => [key, rgbToHSL(value)])
                 .reduce(
                     (acc, [key, value]) => ({ ...acc, [key]: value }),
diff --git a/apps/web/src/routes/(apps)/+layout.svelte b/apps/web/src/routes/(apps)/+layout.svelte
index b1bb5124..e8dfc362 100644
--- a/apps/web/src/routes/(apps)/+layout.svelte
+++ b/apps/web/src/routes/(apps)/+layout.svelte
@@ -10,7 +10,16 @@
 
 <ModalLib />
 <ThemePanel />
-<div class="h-screen w-screen flex flex-col bg-zinc-50 dark:bg-zinc-900">
+<div class="h-screen w-screen flex flex-col app-bg bg-effects">
     <AppHeader />
     <slot />
 </div>
+
+<style lang="postcss">
+    .app-bg {
+        background-color: var(--bg-light);
+    }
+    :global(.dark) .app-bg {
+        background-color: var(--bg-dark);
+    }
+</style>
diff --git a/apps/web/src/routes/(apps)/recalplus/+page.svelte b/apps/web/src/routes/(apps)/recalplus/+page.svelte
index 2495c818..a49ef140 100644
--- a/apps/web/src/routes/(apps)/recalplus/+page.svelte
+++ b/apps/web/src/routes/(apps)/recalplus/+page.svelte
@@ -142,8 +142,7 @@
 </svelte:head>
 
 <div
-    class="flex flex-col flex-1 w-full max-w-[1500px] mx-auto
- dark:bg-zinc-900 max-h-screen overflow-clip">
+    class="flex flex-col flex-1 w-full max-w-[1500px] mx-auto max-h-screen overflow-clip">
     <div class="mx-2">
         <Top />
     </div>
diff --git a/apps/web/src/routes/(apps)/reqtree/+page.svelte b/apps/web/src/routes/(apps)/reqtree/+page.svelte
index a8633831..661a1364 100644
--- a/apps/web/src/routes/(apps)/reqtree/+page.svelte
+++ b/apps/web/src/routes/(apps)/reqtree/+page.svelte
@@ -9,7 +9,7 @@
 </svelte:head>
 
 <div
-    class="flex-1 w-full max-w-[1500px] mx-auto dark:bg-zinc-900 dark:text-white max-h-screen overflow-clip">
+    class="flex-1 w-full max-w-[1500px] mx-auto dark:text-white max-h-screen overflow-clip">
     <!-- your markup goes here -->
     <h1>ReqTree</h1>
 </div>
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 90033539..f598a013 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -1,10 +1,44 @@
-<script>
+<script lang="ts">
     import "../app.pcss";
     import { invalidate } from "$app/navigation";
     import { onMount } from "svelte";
     import { browser } from "$app/environment";
-    import { darkTheme, isMobile } from "$lib/stores/styles";
+    import {
+        darkTheme,
+        isMobile,
+        bgColors,
+        bgEffects,
+        appFont,
+        FONT_OPTIONS,
+        type GradientConfig
+    } from "$lib/stores/styles";
+    import { hslToRGBComponents } from "$lib/scripts/convert";
+
+    // Generate CSS gradient string from gradient configs
+    function generateGradientCSS(
+        gradients: GradientConfig[],
+        globalOpacity: number,
+        isDarkMode: boolean,
+        darkModeIntensity: number
+    ): string {
+        if (gradients.length === 0) return "none";
+
+        const opacityMultiplier = isDarkMode ? darkModeIntensity : 1;
+        const effectiveOpacity = globalOpacity * opacityMultiplier;
+
+        return gradients
+            .map(g => {
+                const rgbComponents = hslToRGBComponents(g.color);
+                const finalOpacity = effectiveOpacity * g.opacity;
+                // Size scales the overall gradient, blur controls the fade softness
+                const scaledBlur = (g.size / 100) * g.blur;
+
+                return `radial-gradient(${g.shape} at ${g.x}% ${g.y}%, rgba(${rgbComponents}, ${finalOpacity}) 0%, transparent ${scaledBlur}%)`;
+            })
+            .join(", ");
+    }
     import ToastLib from "$lib/components/general/ToastLib.svelte";
+    import NoiseFilter from "$lib/components/ui/NoiseFilter.svelte";
 
     export let data;
 
@@ -20,6 +54,63 @@
         }
     }
 
+    // Apply background color CSS variables
+    $: if (browser) {
+        document.documentElement.style.setProperty(
+            "--bg-light",
+            $bgColors.light
+        );
+        document.documentElement.style.setProperty("--bg-dark", $bgColors.dark);
+    }
+
+    // Apply font CSS variable and font-specific body classes
+    $: if (browser) {
+        const fontOption = FONT_OPTIONS.find(f => f.name === $appFont);
+        document.documentElement.style.setProperty(
+            "--app-font",
+            `"${$appFont}", ${fontOption?.fallback || "sans-serif"}`
+        );
+        // Add font-specific classes to body for conditional styling
+        document.body.classList.remove("font-playfair", "font-jetbrains");
+        if ($appFont === "Playfair Display") {
+            document.body.classList.add("font-playfair");
+        } else if ($appFont === "JetBrains Mono") {
+            document.body.classList.add("font-jetbrains");
+        }
+    }
+
+    // Apply background effects CSS variables
+    $: if (browser) {
+        const noiseOpacity = $bgEffects.noise.enabled
+            ? $darkTheme
+                ? Math.min($bgEffects.noise.opacity * 0.16, 0.15) // Much subtler in dark mode
+                : $bgEffects.noise.opacity
+            : 0;
+
+        document.documentElement.style.setProperty(
+            "--noise-opacity",
+            String(noiseOpacity)
+        );
+        document.documentElement.style.setProperty(
+            "--noise-frequency",
+            String($bgEffects.noise.baseFrequency)
+        );
+
+        // Generate and apply dynamic gradient CSS
+        const gradientCSS = $bgEffects.glows.enabled
+            ? generateGradientCSS(
+                  $bgEffects.glows.gradients,
+                  $bgEffects.glows.globalOpacity,
+                  $darkTheme,
+                  $bgEffects.glows.darkModeIntensity
+              )
+            : "none";
+        document.documentElement.style.setProperty(
+            "--gradient-background",
+            gradientCSS
+        );
+    }
+
     onMount(() => {
         $isMobile = window.innerWidth < 600;
 
@@ -35,7 +126,8 @@
     });
 </script>
 
-<div class="font-lato">
+<NoiseFilter />
+<div>
     <ToastLib />
     <slot />
 </div>