feat: move svelte interface to 'src/interface'

src/interface/components/Button.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
+</script>
+
+<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
+  {text}
+</button>

src/interface/components/CodeEditor.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { onDestroy, onMount } from 'svelte'
+
+  import { EditorState } from '@codemirror/state';
+  import { highlightSelectionMatches } from '@codemirror/search';
+  import { indentWithTab, history, defaultKeymap, historyKeymap } from '@codemirror/commands';
+  import { indentOnInput, indentUnit, bracketMatching, foldKeymap, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+  import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
+  import { highlightSpecialChars, drawSelection, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, EditorView, dropCursor } from '@codemirror/view';
+  import { color } from '@uiw/codemirror-extensions-color'
+  import { Compartment } from '@codemirror/state';
+
+  // Theme
+  import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+
+  // Language
+  import { css } from "@codemirror/lang-css";
+
+  let editor = $state<HTMLDivElement | null>(null)
+  let view: EditorView | null = null;
+  let editorTheme = new Compartment();
+  let { value, onChange } = $props<{value: string, onChange: (value: string) => void}>()
+
+  function createEditorState(initialContents: string) {
+      let extensions = [
+          highlightSpecialChars(),
+          history(),
+          drawSelection(),
+          indentUnit.of("  "),
+          EditorState.allowMultipleSelections.of(true),
+          indentOnInput(),
+          bracketMatching(),
+          closeBrackets(),
+          autocompletion(),
+          rectangularSelection(),
+          crosshairCursor(),
+          dropCursor(),
+          highlightActiveLine(),
+          highlightSelectionMatches(),
+          editorTheme.of(githubLight),
+          keymap.of([
+              indentWithTab,
+              ...closeBracketsKeymap,
+              ...defaultKeymap,
+              ...historyKeymap,
+              ...foldKeymap,
+              ...completionKeymap,
+          ]),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              onChange(update.state.doc.toString())
+            }
+          }),
+          css(),
+          color,
+          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      ];
+
+      return EditorState.create({
+          doc: initialContents,
+          extensions
+      });
+  }
+
+  function createEditorView(state: EditorState, parent: HTMLElement) {
+      return new EditorView({ state, parent });
+  }
+
+  onMount(() => {
+    if (editor) {
+      const state = createEditorState(value);
+      view = createEditorView(state, editor as HTMLElement);
+    }
+
+    settingsState.subscribe((settings) => {
+      if (view) {
+        view.dispatch({
+          effects: editorTheme.reconfigure(
+            settings.DarkMode ? githubDark : githubLight
+          )
+        })
+      }
+    });
+  });
+
+  onDestroy(() => {
+    if (view) {
+      view.destroy();
+    }
+  })
+</script>
+
+<div class="rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900" bind:this={editor}></div>

src/interface/components/ColourPicker.css

@@ -0,0 +1,86 @@
+div:has(> #rbgcp-wrapper) {
+  background: transparent !important;
+}
+
+.dark {
+  #rbgcp-wrapper {
+    div[style="padding-top: 11px; position: relative;"] div {
+      color: white !important;
+    }
+
+    div:has(> #rbgcp-solid-btn),
+    div:has(> #rbgcp-advanced-btn),
+    #rbgcp-color-model-btn > div,
+    #rbgcp-gradient-controls-wrap {
+      background-color: #37373b !important;
+      color: white !important;
+
+      svg {
+        circle {
+          fill: white !important;
+        }
+
+        polyline,
+        line,
+        g,
+        path {
+          stroke: white !important;
+        }
+      }
+
+      #rbgcp-radial-btn,
+      #rbgcp-linear-btn {
+        &[style*="background: white;"] {
+          background-color: #28282b !important;
+        }
+
+        svg {
+          path,
+          g,
+          polyline,
+          circle {
+            stroke: white !important;
+            fill: transparent !important;
+          }
+        }
+      }
+
+      div:has(> #rbgcp-stop-input) svg {
+        path {
+          stroke: unset !important;
+          fill: white !important;
+        }
+      }
+
+      #rbgcp-comparibles-btn svg path {
+        fill: white !important;
+      }
+
+      > div {
+        color: white !important;
+
+        &[style*="background: white;"] {
+          background: #28282b !important;
+        }
+      }
+    }
+
+    div:has(> #rbgcp-degree-input) {
+      width: 70px !important;
+    }
+
+    #rbgcp-degree-input {
+      width: 50px !important;
+    }
+
+    #rbgcp-degree-input,
+    #rbgcp-stop-input {
+      color: white !important;
+    }
+
+    #rbgcp-gradient-controls-wrap > div,
+    #rbgcp-gradient-controls-wrap > div > div:not([role="button"]) {
+      background-color: #37373b !important;
+    }
+  }
+}

src/interface/components/ColourPicker.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import ColourPicker from './ColourPicker.tsx';
+  import ReactAdapter from './utils/ReactAdapter.svelte';
+  import { animate, spring } from 'motion';
+  import { delay } from '@/seqta/utils/delay.ts'
+
+  const { hidePicker, standalone = false, savePresets = true, customOnChange = null, customState = null } = $props<{
+    hidePicker?: () => void,
+    standalone?: boolean,
+    savePresets?: boolean,
+    customOnChange?: (color: string) => void,
+    customState?: string
+  }>();
+
+  let background = $state<HTMLDivElement | null>(null);
+  let content = $state<HTMLDivElement | null>(null);
+
+  const closePicker = async () => {
+    if (standalone) return;
+    if (!background || !content) return;
+
+    animate(
+      content,
+      { scale: [1, 0.4], opacity: [1, 0] },
+      { easing: spring({ stiffness: 400, damping: 30 }) }
+    );
+
+    animate(
+      background,
+      { opacity: [1, 0] },
+      { easing: [0.4, 0, 0.2, 1] }
+    );
+
+    await delay(400);
+    hidePicker();
+  }
+
+  onMount(() => {
+    if (standalone) return;
+    if (!background || !content) return;
+
+    animate(
+      background,
+      { opacity: [0, 1] },
+      { duration: 0.3, easing: [0.4, 0, 0.2, 1] }
+    );
+
+    animate(
+      content,
+      { scale: [0.4, 1], opacity: [0, 1] },
+      { easing: spring({ stiffness: 400, damping: 30 }) }
+    );
+
+    const handleEscapeKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closePicker();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  });
+
+  function handleBackgroundClick(event: MouseEvent) {
+    if (event.target === background) {
+      closePicker();
+    }
+  }
+</script>
+
+{#if standalone}
+  <div class="h-auto rounded-xl overflow-clip">
+    <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
+  </div>
+{:else}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={background}
+    class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
+    onclick={handleBackgroundClick}
+    onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
+  >
+    <div
+      bind:this={content}
+      class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+    >
+      <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
+    </div>
+  </div>
+{/if}

src/interface/components/ColourPicker.tsx

@@ -0,0 +1,108 @@
+import ColorPicker from "react-best-gradient-color-picker"
+import { useEffect, useRef, useState } from "react"
+import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+
+const defaultPresets = [
+  "linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)",
+  "linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
+  "linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)",
+  "linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)",
+  "linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)",
+  "linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)",
+  "radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)",
+  "radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)",
+  "linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)",
+  "rgba(114, 1, 170, 0.89)",
+  "rgba(93, 135, 63, 0.89)",
+  "rgba(4, 4, 138, 0.77)",
+  "rgba(21, 20, 20, 0.89)",
+  "linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)",
+  "radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)",
+  "rgba(17, 94, 89, 1)",
+  "rgba(30, 64, 175, 0.89)",
+  "rgba(134, 25, 143, 1)",
+  "rgba(14, 165, 233, 0.9)",
+]
+
+interface PickerProps {
+  customOnChange?: (color: string) => void
+  customState?: string
+  savePresets?: boolean
+}
+
+export default function Picker({
+  customOnChange,
+  customState,
+  savePresets = true,
+}: PickerProps) {
+  const [customThemeColor, setCustomThemeColor] = useState<string | null>()
+  const [presets, setPresets] = useState<string[]>()
+
+  const latestValuesRef = useRef({ customThemeColor, customOnChange, savePresets, presets });
+
+  useEffect(() => {
+    if (customState !== undefined && customState !== null) {
+      setCustomThemeColor(customState)
+    } else {
+      setCustomThemeColor(settingsState.selectedColor ?? null)
+    }
+
+    if (presets === undefined) {
+      const savedPresets = localStorage.getItem("colorPickerPresets")
+      setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets)
+    }
+  }, [])
+
+  useEffect(() => {
+    latestValuesRef.current = { customThemeColor, customOnChange, savePresets, presets };
+  }, [customThemeColor, customOnChange, savePresets, presets]);
+
+  useEffect(() => {
+    return () => {
+      const { customThemeColor, customOnChange, savePresets, presets } = latestValuesRef.current;
+      if (!(customThemeColor && !customOnChange && savePresets && presets)) return;
+        
+      // Only proceed if presets are different (avoid unnecessary updates)
+      const existingIndex = presets.indexOf(customThemeColor);
+      let updatedPresets;
+      
+      if (existingIndex === 0) {
+        // No need to update if the selected color is already the first element
+        return;
+      } else if (existingIndex > -1) {
+        updatedPresets = [
+          customThemeColor,
+          ...presets.slice(0, existingIndex),
+          ...presets.slice(existingIndex + 1),
+        ];
+      } else {
+        updatedPresets = [customThemeColor, ...presets].slice(0, 18);
+      }
+    
+      localStorage.setItem("colorPickerPresets", JSON.stringify(updatedPresets));
+    }
+  }, [])
+
+  useEffect(() => {
+    if (customThemeColor && !customOnChange) {
+      settingsState.selectedColor = customThemeColor
+    }
+  }, [customThemeColor, customOnChange])
+
+  return (
+    <ColorPicker
+      disableDarkMode={true}
+      presets={presets}
+      hideInputs={true}
+      value={customThemeColor ?? ""}
+      onChange={(color: string) => {
+        if (customOnChange) {
+          customOnChange(color)
+          setCustomThemeColor(color)
+        } else {
+          setCustomThemeColor(color)
+        }
+      }}
+    />
+  )
+}

src/interface/components/MotionDiv.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { animate as motionAnimate, spring } from 'motion';
+
+  let { initial, animate, exit, transition, children, class: className } = $props<{ 
+    initial?: any, 
+    animate?: any, 
+    exit?: any, 
+    transition?: any, 
+    children?: any, 
+    class?: string 
+  }>();
+
+  let divElement: HTMLElement;
+  const dispatch = createEventDispatcher();
+
+  const playAnimation = (keyframe: any) => {
+    if (divElement && keyframe) {
+      let animationOptions = transition;
+      let finalKeyframe = { ...keyframe };
+
+      if (finalKeyframe.height === 'auto') {
+        const prevHeight = divElement.style.height;
+        const prevVisibility = divElement.style.visibility;
+        
+        divElement.style.height = 'auto';
+        divElement.style.visibility = 'hidden';
+        divElement.style.position = 'absolute';
+        
+        const autoHeight = divElement.offsetHeight;
+        
+        divElement.style.height = prevHeight;
+        divElement.style.visibility = prevVisibility;
+        divElement.style.position = '';
+        
+        finalKeyframe.height = `${autoHeight}px`;
+      }
+
+      if (!transition || transition.type === 'spring') {
+        const springConfig = transition?.config || { stiffness: 250, damping: 25 };
+        animationOptions = {
+          ...transition,
+          easing: spring(springConfig)
+        };
+      }
+
+      const animation = motionAnimate(divElement, finalKeyframe, animationOptions);
+      return animation.finished;
+    }
+    return Promise.resolve();
+  };
+
+  onMount(async () => {
+    if (initial) {
+      Object.assign(divElement.style, initial);
+      await playAnimation(animate || {});
+    } else if (animate) {
+      await playAnimation(animate);
+    }
+
+    dispatch('animationend');
+  });
+  
+  $effect(() => {
+    if (animate) {
+      playAnimation(animate);
+    }
+
+    dispatch('animationend');
+  });
+
+  onDestroy(async () => {
+    if (exit) {
+      await playAnimation(exit);
+    }
+  });
+</script>
+
+<div class={className} bind:this={divElement} style="will-change: transform, opacity;">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

src/interface/components/PickerSwatch.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+
+  let { onClick } = $props<{ onClick: () => void }>();
+</script>
+
+<button
+  onclick={onClick}
+  style="background: {$settingsState.selectedColor}"
+  class="w-16 h-8 rounded-md"
+></button>

src/interface/components/Select.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  let { state, onChange, options } = $props<{
+    state: string,
+    onChange: (newState: string) => void,
+    options: Array<{ value: string, label: string }>
+  }>();
+
+  let select: HTMLSelectElement;
+</script>
+
+<select
+  bind:this={select}
+  value={state}
+  onchange={() => onChange(select.value)}
+  class="px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md w-full"
+>
+  {#each options as option}
+    <option value={option.value}>
+      {option.label}
+    </option>
+  {/each}
+</select>

src/interface/components/SkeletonLoader.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  let { width, height} = $props<{width?: string, height?: string}>()
+</script>
+
+<div style="width: {width ? width : '100%'}; height: {height ? height : '100%'}; background: #e0e0e0;" class="animate-pulse"></div>

src/interface/components/Slider.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  let { state, onChange } = $props<{ state: number, onChange: (value: number) => void }>();
+  let percentage = $derived((state / 100) * 100);
+</script>
+
+<div class="relative w-full max-w-lg mx-auto">
+  <input
+    type="range"
+    min="0"
+    max="100"
+    bind:value={state}
+    style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
+    onchange={(e) => onChange(Number(e.currentTarget.value))}
+    class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
+  />
+</div>
+
+<style>
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    background: white;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .slider::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    background: white;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+</style>

src/interface/components/Spinner.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  let { size = 'md', color = 'currentColor' } = $props();
+
+  const sizeMap = {
+    sm: '1rem',
+    md: '2rem',
+    lg: '3rem',
+  };
+
+  let dimensions = $derived(sizeMap[size as keyof typeof sizeMap] || size);
+</script>
+
+<svg
+  class="animate-spin"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  width={dimensions}
+  height={dimensions}
+>
+  <circle
+    class="opacity-25"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke={color}
+    stroke-width="4"
+  ></circle>
+  <path
+    class="opacity-75"
+    fill={color}
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  ></path>
+</svg>

src/interface/components/Switch.css

@@ -0,0 +1,4 @@
+.dark .switch[data-ison="true"],
+.switch[data-ison="true"] {
+  background-color: #30D259;
+}

src/interface/components/Switch.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { animate, spring } from 'motion';
+  import { standalone } from '../utils/standalone.svelte'
+
+  let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
+  let handle: HTMLElement | null = null;
+
+  const springParams = {
+    stiffness: 600,
+    damping: 30,
+  };
+
+  const animateSwitch = (enabled: boolean) => {
+    if (!handle) return;
+    animate(
+      handle,
+      {
+        x: enabled ? (standalone.standalone ? 24 : 20) : 0,
+      },
+      {
+        easing: spring(springParams),
+      }
+    );
+  };
+
+  // Trigger animation whenever state changes
+  $effect(() => animateSwitch(state));
+</script>
+
+<div
+  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch select-none"
+  data-ison={state}
+  onclick={() => onChange(!state)}
+  onkeydown={(e) => e.key === "Enter" && onChange(!state)}
+  role="switch"
+  aria-checked={state}
+  tabindex="0"
+>
+  <div
+    bind:this={handle}
+    class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
+  ></div>
+</div>
+
+<style>
+  .switch[data-ison="true"] {
+    background-color: #30D259;
+  }
+</style>

src/interface/components/TabbedContainer.css

@@ -0,0 +1,3 @@
+.tab-width {
+  width: var(--tab-width);
+}

src/interface/components/TabbedContainer.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import MotionDiv from './MotionDiv.svelte';
+  import './TabbedContainer.css';
+  import { onMount } from 'svelte';
+
+  let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
+  let activeTab = $state(0);
+  let hoveredTab = $state<number | null>(null);
+  let containerRef: HTMLElement | null = null;
+  let tabWidth = $state(0);
+
+  const springTransition = { type: 'spring', stiffness: 250, damping: 25 };
+
+  const updateTabWidth = () => {
+    tabWidth = tabs.length > 0 ? 100 / tabs.length : 0;
+    if (!containerRef) return;
+    containerRef.style.setProperty('--tab-width', `${tabWidth}%`);
+  };
+
+  const calcXPos = (index: number | null) => {
+    if (containerRef) {
+      return tabWidth * (index !== null ? index : activeTab) * containerRef.getBoundingClientRect().width / 100;
+    }
+    return 0;
+  };
+
+  $effect(() => {
+    calcXPos(hoveredTab);
+  });
+
+  onMount(() => {
+    updateTabWidth();
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data === "popupClosed") {
+        activeTab = 0;
+      }
+    };
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  });
+</script>
+
+<div class="flex flex-col h-full">
+  <div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
+    <div class="relative flex">
+      <MotionDiv
+        class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
+        animate={{ x: calcXPos(hoveredTab) }}
+        transition={springTransition}
+      />
+      {#each tabs as { title }, index}
+        <button
+          class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-none"
+          onclick={() => activeTab = index}
+          onmouseenter={() => hoveredTab = index}
+          onmouseleave={() => hoveredTab = null}
+        >
+          {title}
+        </button>
+      {/each}
+    </div>
+  </div>
+  <div class="h-full px-4 overflow-hidden">
+    <MotionDiv
+      class="h-full"
+      animate={{ x: `${-activeTab * 100}%` }}
+      transition={springTransition}
+    >
+      <div class="flex">
+        {#each tabs as { Content, props }, index}
+          <div class="absolute focus:outline-none w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
+            style="left: {index * 100}%;">
+             <Content {...props} />
+          </div>
+        {/each}
+      </div>
+    </MotionDiv>
+  </div>
+</div>

src/interface/components/store/Backgrounds.svelte

@@ -0,0 +1,323 @@
+<script lang="ts">
+  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader';
+  import { setTheme } from '@/seqta/ui/themes/setTheme';
+  import Spinner from '../Spinner.svelte';
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import Fuse from 'fuse.js';
+  import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
+
+  type Background = { id: string; category: string; type: string; lowResUrl: string; highResUrl: string; name: string; description: string; featured?: boolean };
+  let { searchTerm } = $props<{ searchTerm: string }>();
+
+  // Existing states
+  let backgrounds = $state<Background[]>([]);
+  let selectedCategory = $state<string>('All');
+  let error = $state<string | null>(null);
+  let selectedBackground = $state<string | null>(null);
+  let isLoading = $state<boolean>(true);
+  let savedBackgrounds = $state<string[]>([]);
+  let installingBackgrounds = $state<Set<string>>(new Set());
+  let debugInfo = $state<string>('');
+
+  // New state variables
+  let activeTab = $state<'all' | 'installed' | 'photos' | 'videos'>('all');
+  let sortBy = $state<'newest' | 'popular' | 'name'>('newest');
+
+  // Add Fuse.js options
+  const fuseOptions = {
+    keys: ['name', 'description'],
+    threshold: 0.4,
+    ignoreLocation: true
+  };
+  let fuse: Fuse<Background>;
+
+  // Existing functions
+  const loadStore = async () => {
+    try {
+      debugInfo = 'Fetching backgrounds...';
+      const response = await fetch('https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/backgrounds.json');
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      backgrounds = data.backgrounds;
+      fuse = new Fuse(backgrounds, fuseOptions);
+      debugInfo = `Loaded ${backgrounds.length} backgrounds`;
+      await loadSavedBackgrounds();
+    } catch (e) {
+      error = 'Failed to load background store';
+      debugInfo = `Error: ${e instanceof Error ? e.message : 'Unknown error'}`;
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  async function loadSavedBackgrounds(): Promise<void> {
+    try {
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB.");
+      }
+      await openDatabase();
+      const data = await readAllData();
+      savedBackgrounds = data.map(item => item.id);
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Unknown error occurred';
+    }
+  }
+
+  // Load data on mount
+  loadStore();
+
+  // Derived states
+  let filteredBackgrounds = $derived((() => {
+    let filtered = backgrounds;
+    
+    // Use Fuse.js search if there's a search term
+    if (searchTerm.trim()) {
+      // @ts-ignore
+      if (fuse) {
+        filtered = fuse.search(searchTerm).map((result: any) => result.item) ?? [];
+      } else {
+        filtered = backgrounds.filter(bg => bg.name.toLowerCase().includes(searchTerm.toLowerCase()));
+      }
+    }
+
+    // Apply category filtering
+    filtered = filtered.filter((bg: Background) => {
+      return selectedCategory === 'All' 
+        ? true 
+        : selectedCategory === 'Featured' 
+          ? bg.featured 
+          : bg.category === selectedCategory;
+    });
+
+    // Apply sorting
+    filtered.sort((a: Background, b: Background) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'newest':
+          return -1;
+        case 'popular':
+          return -1;
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  })());
+
+  let categories = $derived([...new Set(backgrounds.map(bg => bg.category))]);
+
+  // Background management functions
+  async function saveBackgroundFromUrl(url: string, id: string, fileType: string): Promise<void> {
+    try {
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB.");
+      }
+
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const hasSpace = await hasEnoughStorageSpace(blob.size);
+
+      if (!hasSpace) {
+        throw new Error("Not enough storage space.");
+      }
+
+      await writeData(id, fileType, blob);
+      savedBackgrounds = [...savedBackgrounds, id];
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Unknown error occurred';
+    }
+  }
+
+  async function deleteBackground(fileId: string): Promise<void> {
+    installingBackgrounds = new Set(installingBackgrounds).add(fileId);
+    try {
+      await deleteData(fileId);
+      savedBackgrounds = savedBackgrounds.filter(id => id !== fileId);
+
+      if (selectedBackground === fileId) {
+        selectNoBackground();
+      }
+    } catch (e) {
+      error = e instanceof Error ? `Failed to delete background: ${e.message}` : 'Unknown error occurred';
+    } finally {
+      installingBackgrounds = new Set(installingBackgrounds);
+      installingBackgrounds.delete(fileId);
+    }
+  }
+
+  async function installBackground(background: Background) {
+    installingBackgrounds = new Set(installingBackgrounds).add(background.id);
+    try {
+      await saveBackgroundFromUrl(background.highResUrl, background.id, background.type);
+      backgroundUpdates.triggerUpdate();
+    } finally {
+      installingBackgrounds = new Set(installingBackgrounds);
+      installingBackgrounds.delete(background.id);
+    }
+  }
+
+  async function toggleBackgroundInstallation(background: Background) {
+    if (savedBackgrounds.includes(background.id)) {
+      await deleteBackground(background.id);
+    } else {
+      await installBackground(background);
+    }
+  }
+  
+  function selectNoBackground() {
+    selectedBackground = null;
+    setTheme('');
+  }
+</script>
+
+<div class="flex h-full">
+  <!-- Sidebar -->
+  <div class="w-64 h-full p-4 border-r border-zinc-200 dark:border-zinc-700">
+    <div class="mb-8">
+      <h2 class="mb-4 text-lg font-semibold">Categories</h2>
+      <nav class="space-y-2">
+        <button
+          class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === 'All' ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
+          onclick={() => selectedCategory = 'All'}
+        >
+          All
+        </button>
+        <button
+          class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === 'Featured' ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
+          onclick={() => selectedCategory = 'Featured'}
+        >
+          Featured
+        </button>
+        
+        <div class="my-2 border-b border-zinc-200 dark:border-zinc-700"></div>
+        
+        {#each categories as category}
+          <button
+            class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === category ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
+            onclick={() => selectedCategory = category}
+          >
+            {category}
+          </button>
+        {/each}
+      </nav>
+    </div>
+  </div>
+
+  <!-- Main Content -->
+  <div class="flex-1 overflow-auto">
+    <!-- Header -->
+    <div class="sticky top-0 z-10 p-4 bg-white border-b dark:bg-zinc-900 dark:border-zinc-700">
+      <div class="flex items-center justify-between mb-4">
+        <h1 class="text-2xl font-bold">Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}</h1>
+        <div class="flex items-center gap-4">
+          <select 
+            bind:value={sortBy} 
+            class="p-2 border rounded-lg border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
+          >
+            <option value="newest">Newest</option>
+            <option value="popular">Most Popular</option>
+            <option value="name">Name</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Tabs -->
+      <div class="flex gap-2">
+        {#each ['All', 'Installed', 'Photos', 'Videos'] as tab}
+          <button
+            class={`px-4 py-2 text-sm font-medium transition-colors rounded-full
+              ${activeTab === tab.toLowerCase() ? 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' : 
+                'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-1 dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
+            onclick={() => activeTab = tab.toLowerCase() as typeof activeTab}
+          >
+            {tab}
+          </button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Background Grid -->
+    <div class="p-4">
+      {#if isLoading}
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {#each Array(9) as _}
+            <div class="relative overflow-hidden rounded-lg animate-pulse">
+              <!-- Image placeholder -->
+              <div class="w-full h-48 bg-zinc-200 dark:bg-zinc-800"></div>
+              <!-- Gradient overlay -->
+              <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-zinc-300 dark:from-zinc-700 to-transparent">
+                <!-- Title placeholder -->
+                <div class="absolute bottom-2 left-2 right-2">
+                  <div class="w-2/3 h-4 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
+                  <div class="w-1/2 h-3 mt-2 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {:else if error}
+        <div class="p-4 text-red-500 bg-red-100 rounded-lg">
+          Error: {error}
+        </div>
+      {:else}
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {#each filteredBackgrounds.filter((bg: Background) => {
+            if (activeTab === 'installed') return savedBackgrounds.includes(bg.id);
+            if (activeTab === 'photos') return bg.type === 'image';
+            if (activeTab === 'videos') return bg.type !== 'image';
+            return true;
+          }) as background (background.id)}
+            <div
+              class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer group"
+              onclick={() => toggleBackgroundInstallation(background)}
+              onkeydown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  toggleBackgroundInstallation(background);
+                }
+              }}
+              role="button"
+              tabindex="0"
+            >
+              {#if background.type === 'image'}
+                <img src={background.lowResUrl} alt={background.name} class="object-cover w-full h-48 transition-all duration-300 group-hover:scale-105" />
+              {:else}
+                <video src={background.lowResUrl} class="object-cover w-full h-48" muted loop autoplay></video>
+              {/if}
+              <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
+                {#if installingBackgrounds.has(background.id)}
+                  <Spinner />
+                {:else if savedBackgrounds.includes(background.id)}
+                  <span class="flex items-center text-white">
+                    <span class="mr-2 text-2xl not-italic font-IconFamily" aria-hidden="true">&#xed2c;</span>
+                    <span class="text-sm font-semibold">Remove</span>
+                  </span>
+                {:else}
+                  <span class="flex items-center text-white">
+                    <span class="mr-2 text-2xl not-italic font-IconFamily" aria-hidden="true">&#xea9a;</span>
+                    <span class="text-sm font-semibold">Install</span>
+                  </span>
+                {/if}
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+{#if settingsState.devMode}
+  <div class="p-4 mt-8 rounded bg-zinc-100 dark:bg-zinc-800">
+    <h3 class="mb-2 font-bold">Debug Info:</h3>
+    <p>{debugInfo}</p>
+    <p>Total backgrounds: {backgrounds.length}</p>
+    <p>Categories: {categories.join(', ') || '<empty>'}</p>
+    <p>Active Tab: {activeTab}</p>
+    <p>Selected Category: {selectedCategory}</p>
+  </div>
+{/if}
+

src/interface/components/store/CoverSwiper.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import type { Theme } from '@/interface/types/Theme';
+  import { register, type SwiperContainer } from 'swiper/element/bundle';
+
+  let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void  }>();
+  let swiperEl = $state<SwiperContainer | undefined>();
+  
+
+  const slidePrev = () => swiperEl?.swiper.slidePrev();
+  const slideNext = () => swiperEl?.swiper.slideNext();
+
+  onMount(() => {
+    register();
+  });
+</script>
+
+{#if coverThemes.length > 0}
+  <div class="relative w-full transition-opacity rounded-xl overflow-clip" transition:fade>
+    <swiper-container bind:this={swiperEl} slides-per-view="1" space-between="20" loop="true" autoplay="true" disable-on-interaction="false" pause-on-mouse-enter="true" class="w-full aspect-[8/3]">
+      {#each coverThemes as theme, index (index)}
+        <swiper-slide
+          onkeydown={(e: any) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
+          onclick={() => setDisplayTheme(theme)}
+          role="button"
+          tabindex="0"
+          class="relative cursor-pointer rounded-xl overflow-clip"
+        >
+          <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
+          <div class='absolute bottom-0 left-0 p-8 z-[1]'>
+            <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
+            <p class='text-lg text-white'>{theme.description}</p>
+          </div>
+          <div class='absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/80 to-transparent'></div>
+        </swiper-slide>
+      {/each}
+    </swiper-container>
+
+    <!-- Pagination buttons -->
+    <div class='absolute z-10 flex gap-2 bottom-2 right-2'>
+      <button onclick={slidePrev} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
+        </svg>
+      </button>
+      <button onclick={slideNext} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}

src/interface/components/store/FilterPanel.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { Background } from './types';
+
+  export let filteredBackgrounds: Background[];
+
+  let dispatch = createEventDispatcher();
+
+  let filters = $state({
+    type: [] as string[],
+    color: [] as string[],
+    resolution: [] as string[],
+    orientation: [] as string[]
+  });
+
+  $: {
+    dispatch('filter', filters);
+  }
+
+  function toggleFilter(category: keyof typeof filters, value: string) {
+    if (filters[category].includes(value)) {
+      filters[category] = filters[category].filter(v => v !== value);
+    } else {
+      filters[category] = [...filters[category], value];
+    }
+  }
+
+  function clearFilters() {
+    filters = {
+      type: [],
+      color: [],
+      resolution: [],
+      orientation: []
+    };
+  }
+</script>
+
+<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
+  <h2 class="mb-4 text-xl font-semibold">Filters</h2>
+  
+  <div class="mb-4">
+    <h3 class="mb-2 font-medium">Type</h3>
+    <div class="space-y-2">
+      <label class="flex items-center">
+        <input type="checkbox" checked={filters.type.includes('image')} on:change={() => toggleFilter('type', 'image')}>
+        <span class="ml-2">Image</span>
+      </label>
+      <label class="flex items-center">
+        <input type="checkbox" checked={filters.type.includes('video')} on:change={() => toggleFilter('type', 'video')}>
+        <span class="ml-2">Video</span>
+      </label>
+    </div>
+  </div>
+  
+  <!-- Add similar sections for color, resolution, and orientation -->
+  
+  <button 
+    class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600" 
+    on:click={clearFilters}
+  >
+    Clear Filters
+  </button>
+</div>

src/interface/components/store/Header.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import logo from '@/resources/icons/betterseqta-dark-full.png';
+  import logoDark from '@/resources/icons/betterseqta-light-full.png';
+  import { closeStore } from '@/seqta/ui/renderStore'
+  import browser from 'webextension-polyfill';
+
+  // Props
+  let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
+    searchTerm: string,
+    setSearchTerm: (term: string) => void,
+    darkMode: boolean,
+    activeTab: string,
+    setActiveTab: (tab: string) => void
+  }>();
+
+  // Clear search input function
+  const clearSearch = () => {
+    setSearchTerm('');
+  };
+</script>
+
+<header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-950/90 backdrop-blur-xl dark:text-white">
+  <div class="flex items-center justify-between px-4 py-1">
+    <div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
+      <img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
+      <img src={browser.runtime.getURL(logoDark)} class="h-14 {darkMode ? '' : 'hidden'}" alt="Dark Logo" />
+
+      <div class="w-[1px] h-10 my-auto bg-zinc-400 dark:bg-zinc-600"></div>
+
+      <button
+        class="px-4 py-2 font-semibold text-lg transition-colors duration-200 {activeTab === 'themes' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400'}"
+        onclick={() => setActiveTab('themes')}
+      >
+        Themes
+      </button>
+      <button
+        class="px-4 py-2 font-semibold text-lg transition-colors duration-200 {activeTab === 'backgrounds' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400'}"
+        onclick={() => setActiveTab('backgrounds')}
+      >
+        Backgrounds
+      </button>
+    </div>
+
+    <div class="relative flex gap-2">
+      <input
+        type="text"
+        placeholder="Search themes..."
+        value={searchTerm}
+        oninput={(e: any) => setSearchTerm(e.target.value)}
+        class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
+      <svg
+        class="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      </svg>
+
+      <!-- Close Button -->
+      <button
+        onclick={closeStore}
+        class="p-1 px-3"
+      >
+        <span class="text-2xl font-IconFamily">&#xed8a;</span>
+      </button>
+    </div>
+  </div>
+</header>

src/interface/components/store/ThemeCard.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
+
+  import { fade } from 'svelte/transition';
+</script>
+
+<div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
+  <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
+    <div class="absolute z-10 mb-1 text-xl font-bold text-white bottom-1 left-3">
+      {theme.name}
+    </div>
+    <div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent'></div>
+    <div class='w-full'>
+      <img src={theme.coverImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
+    </div>
+  </div>
+</div>

src/interface/components/store/ThemeGrid.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { Theme } from '@/interface/types/Theme'
+  import ThemeCard from './ThemeCard.svelte';
+
+  let { themes, searchTerm, setDisplayTheme } = $props<{ themes: Theme[]; searchTerm: string, setDisplayTheme: (theme: Theme) => void }>();
+  
+  let filteredThemes = $derived(themes.filter((theme: Theme) =>
+    theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
+  ));
+</script>
+
+<div class="relative" >
+  <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
+    {#each filteredThemes as theme (theme.id)}
+      <ThemeCard theme={theme} onClick={() => setDisplayTheme(theme)} />
+    {/each}
+  
+    {#if filteredThemes.length !== 0}
+      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='w-full cursor-pointer'>
+        <div class="bg-zinc-50 h-48 w-full transition-all hover:scale-105 duration-500 relative justify-center items-center group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] rounded-xl overflow-clip border">
+          <div class="text-2xl font-IconFamily">{'\uecb3'}</div>
+          <div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
+            Got a Theme Idea?
+            <p class="text-lg font-light subtitle">Transform it into a stunning theme!</p>
+          </div>
+        </div>
+      </a>
+    {/if}
+  
+  </div>
+  {#if filteredThemes.length === 0}
+    <div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
+      <h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
+      <p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
+      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
+        Show me how!
+      </a>
+    </div>
+  {/if}
+</div>

src/interface/components/store/ThemeModal.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { Theme } from '@/interface/types/Theme'
+  import { fade } from 'svelte/transition';
+  import { animate, spring } from 'motion';
+
+  let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme } = $props<{
+    theme: Theme | null;
+    currentThemes: string[];
+    setDisplayTheme: (theme: Theme | null) => void;
+    onInstall: (themeId: string) => void;
+    onRemove: (themeId: string) => void;
+    allThemes: Theme[];
+    displayTheme: Theme | null;
+  }>();
+  let installing = $state(false);
+  let modalElement: HTMLElement;
+
+  // Function to get related themes
+  function getRelatedThemes() {
+    return allThemes
+      .filter((t: Theme) => t.id !== theme.id)
+      .sort((a: Theme, b: Theme) => a.name.localeCompare(theme.name) - b.name.localeCompare(theme.name))
+      .slice(0, 4);
+  }
+
+  $effect(() => {
+    if (displayTheme) {
+      animate(
+        modalElement,
+        { y: [500, 0], opacity: [0, 1] },
+        { easing: spring({ stiffness: 150, damping: 20 }) }
+      );
+    }
+  });
+
+  const hideModal = (relatedTheme?: Theme | null) => {
+    animate(
+      modalElement,
+      { y: [10, 500], opacity: [1, 0] },
+      { easing: spring({ stiffness: 150, damping: 20 }) }
+    );
+    setTimeout(() => {
+      setDisplayTheme(relatedTheme ?? null);
+    }, 100);
+  }
+</script>
+
+<div 
+  class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" 
+  onclick={(e) => {
+    if (e.target === e.currentTarget) hideModal();
+  }} 
+  onkeydown={(e) => {
+    if (e.target === e.currentTarget) hideModal();
+  }} 
+  role="button" 
+  tabindex="-1" 
+  transition:fade
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={modalElement}
+    class="w-full max-w-[600px] h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll no-scrollbar cursor-auto" 
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
+  >
+    <div class="relative h-auto">
+      <button class="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200" onclick={() => hideModal()}>
+        {'\ued8a'}
+      </button>
+      <h2 class="mb-4 text-2xl font-bold">
+        {theme.name}
+      </h2>
+      <img src={theme.marqueeImage} alt="Theme Cover" class="object-cover w-full mb-4 rounded-md" />
+      <p class="mb-4 text-gray-700 dark:text-gray-300">
+        {theme.description}
+      </p>
+      {#if currentThemes.includes(theme.id)}
+        <button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+          {#if installing}
+            <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
+            </svg>
+          {/if}
+          <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
+        </button>
+      {:else}
+        <button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
+          {#if installing}
+            <svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
+            </svg>
+          {/if}
+          <span class="{ installing ? 'opacity-0' : 'opacity-100' }">Install</span>
+        </button>
+      {/if}
+
+      <div class="my-8 border-b border-zinc-200 dark:border-zinc-700"></div>
+
+      <h3 class="mb-4 text-lg font-bold">
+        Similar Themes
+      </h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        {#each getRelatedThemes() as relatedTheme (relatedTheme.id)}
+          <button onclick={() => { hideModal(relatedTheme) }} class="w-full cursor-pointer">
+            <div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border">
+              <div class="absolute z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5 bottom-1 left-3">
+                {relatedTheme.name}
+              </div>
+              <div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent"></div>
+              <img src={relatedTheme.coverImage} alt="Theme Preview" class="object-cover w-full h-48" />
+            </div>
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>

src/interface/components/themeCreator/divider.svelte

@@ -0,0 +1,3 @@
+<script lang="ts"></script>
+
+<div class='w-full h-0.5 my-4 bg-zinc-200 dark:bg-zinc-700'></div>

src/interface/components/themes/BackgroundItem.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface Background {
+    id: string;
+    type: string;
+    blob: Blob | null;
+    url?: string | undefined;
+  }
+
+  let { bg, isSelected, isEditMode, onClick, onDelete } = $props<{ bg: Background, isSelected: boolean, isEditMode: boolean, onClick: () => void, onDelete: () => void }>();
+
+</script>
+
+<div
+  onclick={onClick}
+  onkeydown={onClick}
+  tabindex="-1"
+  role="button"
+  class="relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
+>
+  {#if isEditMode}
+    <div
+      tabindex="-1"
+      role="button"
+      class="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
+      onclick={onDelete}
+      onkeydown={onDelete}
+    >
+      <div class="w-4 h-0.5 bg-white"></div>
+    </div>
+  {/if}
+  {#if bg.url}
+    {#if bg.type === 'image'}
+      <img class="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
+    {:else if bg.type === 'video'}
+      <video muted loop autoplay src={bg.url} class="object-cover w-full h-full rounded-xl"></video>
+    {/if}
+  {/if}
+</div>

src/interface/components/themes/BackgroundSelector.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader'
+  import BackgroundUploader from './BackgroundUploader.svelte';
+  import BackgroundItem from './BackgroundItem.svelte'
+  import { onMount, onDestroy } from 'svelte'
+  import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
+  import { delay } from 'lodash'
+  import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
+
+  let { isEditMode, selectNoBackground = $bindable(), selectedBackground = $bindable() } = $props<{ isEditMode: boolean, selectNoBackground: () => void, selectedBackground: string | null }>();
+  let backgrounds = $state<{ id: string; type: string; blob: Blob | null; url?: string }[]>([]);
+  let error = $state<string | null>(null);
+
+  let imageBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'image'));
+  let videoBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'video'));
+
+  let isVisible = $state(false);
+  let element: HTMLElement;
+  let observer: MutationObserver;
+  let parentElement: HTMLElement | null = null;
+
+  async function getTheme() {
+    return localStorage.getItem('selectedBackground');
+  }
+
+  async function setTheme(theme: string) {
+    localStorage.setItem('selectedBackground', theme);
+  }
+
+  async function handleFileChange(file: File): Promise<void> {
+    if (!file) return;
+
+    try {
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to save backgrounds.");
+      }
+
+      const hasSpace = await hasEnoughStorageSpace(file.size);
+      if (!hasSpace) {
+        throw new Error("Not enough storage space to save this background.");
+      }
+
+      const fileId = `${Date.now()}-${file.name}`;
+      const fileType = file.type.split('/')[0];
+      const blob = new Blob([file], { type: file.type });
+
+      await writeData(fileId, fileType, blob);
+      backgrounds = [...backgrounds, { id: fileId, type: fileType, blob, url: URL.createObjectURL(blob) }];
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  async function loadBackgroundMetadata(): Promise<void> {
+    try {
+      error = null;
+
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
+      }
+
+      await openDatabase();
+      const data = await readAllData();
+      selectedBackground = await getTheme();
+      
+      // Only load metadata (id and type) for placeholders
+      backgrounds = data.map(({ id, type }) => ({ id, type, blob: null }));
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  async function syncBackgrounds(): Promise<void> {
+    try {
+      error = null;
+
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
+      }
+
+      const dbData = await readAllData();
+      
+      // Release existing object URLs to prevent memory leaks
+      backgrounds.forEach(bg => {
+        if (bg.url) URL.revokeObjectURL(bg.url);
+      });
+
+      // Create fresh background objects with new object URLs
+      backgrounds = dbData.map(bg => ({
+        id: bg.id,
+        type: bg.type,
+        blob: bg.blob,
+        url: URL.createObjectURL(bg.blob)
+      }));
+
+      // Check if selected background still exists
+      if (selectedBackground && !backgrounds.some(bg => bg.id === selectedBackground)) {
+        selectNoBackground();
+      }
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  function selectBackground(fileId: string): void {
+    if (selectedBackground === fileId) {
+      selectNoBackground();
+      return;
+    }
+    
+    selectedBackground = fileId;
+    setTheme(fileId);
+  }
+
+  async function deleteBackground(fileId: string): Promise<void> {
+    try {
+      await deleteData(fileId);
+      backgrounds = backgrounds.filter(bg => bg.id !== fileId);
+
+      if (selectedBackground === fileId) {
+        selectNoBackground();
+      }
+    } catch (e) {
+      if (e instanceof Error) {
+        error = `Failed to delete background: ${e.message}`;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  selectNoBackground = () => {
+    selectedBackground = null;
+    setTheme('');
+  }
+
+  $effect(() => {
+    loadBackground();
+    selectedBackground
+  });
+
+  $effect(() => {
+    if (error) {
+      console.error(error);
+    }
+  });
+
+  function checkActiveClass() {
+    if (parentElement?.classList.contains('active')) {
+      delay(() => {
+        isVisible = true;
+        syncBackgrounds();
+      }, 600);
+    }
+  }
+
+  onMount(() => {
+    loadBackgroundMetadata();
+    backgroundUpdates.addListener(syncBackgrounds);
+    
+    parentElement = element.closest('.tab');
+    if (parentElement) {
+      observer = new MutationObserver(checkActiveClass);
+      observer.observe(parentElement, { attributes: true, attributeFilter: ['class'] });
+
+      return () => {
+        observer.disconnect();
+        backgroundUpdates.removeListener(syncBackgrounds);
+      };
+    }
+  });
+
+  onDestroy(() => {
+    if (observer) {
+      observer.disconnect();
+    }
+  });
+</script>
+
+<div bind:this={element} class="relative px-1 { !( isEditMode && imageBackgrounds.length === 0 && videoBackgrounds.length === 0 ) && 'pt-2' }">
+  {#if !(imageBackgrounds.length === 0 && isEditMode)}
+    <h2 class="pb-2 text-lg font-bold">Background Images</h2>
+    <div class="flex flex-wrap gap-4 mb-4">
+      {#if !isEditMode}
+        <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
+      {/if}
+      {#each imageBackgrounds as bg (bg.id)}
+        {#if isVisible && bg.blob}
+          <BackgroundItem
+            bg={bg}
+            isSelected={selectedBackground === bg.id}
+            isEditMode={isEditMode}
+            onClick={() => selectBackground(bg.id)}
+            onDelete={() => deleteBackground(bg.id)}/>
+        {:else}
+          <div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+
+  {#if !(videoBackgrounds.length === 0 && isEditMode)}
+    <h2 class="py-2 text-lg font-bold">Background Videos</h2>
+    <div class="flex flex-wrap gap-4">
+      {#if !isEditMode}
+        <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
+      {/if}
+      {#each videoBackgrounds as bg (bg.id)}
+        {#if isVisible && bg.blob}
+          <BackgroundItem
+            bg={bg}
+            isSelected={selectedBackground === bg.id}
+            isEditMode={isEditMode}
+            onClick={() => selectBackground(bg.id)}
+            onDelete={() => deleteBackground(bg.id)}
+          />
+        {:else}
+          <div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>

src/interface/components/themes/BackgroundUploader.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  
+  const dispatch = createEventDispatcher();
+  
+  function handleFileChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) {
+      dispatch('fileChange', file);
+    }
+  }
+</script>
+
+<div class="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-100 dark:bg-zinc-900">
+  <div class="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
+    <!--  Plus icon -->
+    
+  </div>
+  <input
+    type="file"
+    accept="image/*, video/mp4"
+    on:change={handleFileChange}
+    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+  />
+</div>

src/interface/components/themes/ThemeSelector.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
+  import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
+  import { onDestroy, onMount } from 'svelte'
+  import { OpenThemeCreator } from '@/seqta/ui/ThemeCreator'
+  import shareTheme from '@/seqta/ui/themes/shareTheme'
+  import { InstallTheme } from '@/seqta/ui/themes/downloadTheme'
+  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
+  import { setTheme } from '@/seqta/ui/themes/setTheme'
+  import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
+  import { OpenStorePage } from '@/seqta/ui/renderStore'
+  import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
+  import { closeExtensionPopup } from '@/SEQTA'
+
+  let themes = $state<ThemeList | null>(null);
+  let { isEditMode } = $props<{ isEditMode: boolean }>();
+  let isDragging = $state(false);
+  let tempTheme = $state(null);
+
+  const handleThemeClick = async (theme: CustomTheme) => {
+    if (isEditMode) return;
+    if (theme.id === themes?.selectedTheme) {
+      await disableTheme();
+      themes.selectedTheme = '';
+    } else {
+      await setTheme(theme.id);
+      if (!themes) return;
+      themes.selectedTheme = theme.id;
+    }
+  }
+
+  const handleThemeDelete = async (themeId: string) => {
+    try {
+      await deleteTheme(themeId);
+      if (!themes) return;
+
+      themes.themes = themes.themes.filter(theme => theme.id !== themeId);
+      if (themeId === themes.selectedTheme) {
+        themes.selectedTheme = '';
+        await disableTheme();
+      }
+    } catch (error) {
+      console.error('Error deleting theme:', error);
+    }
+  }
+
+  const handleShareTheme = async (theme: CustomTheme) => {
+    try {
+      await shareTheme(theme.id);
+    } catch (error) {
+      console.error('Error sharing theme:', error);
+    }
+  }
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    isDragging = true;
+  }
+
+  const handleDragLeave = () => {
+    isDragging = false;
+  }
+
+  const handleDrop = async (e: DragEvent) => {
+    e.preventDefault();
+    isDragging = false;
+    const file = e.dataTransfer?.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async (event: ProgressEvent<FileReader>) => {
+      try {
+        const result = JSON.parse(event.target?.result as string);
+        tempTheme = result;
+        await InstallTheme(result);
+        await fetchThemes();
+      } catch (error) {
+        alert('Error parsing file. Please upload a valid JSON theme file.');
+      }
+      tempTheme = null;
+    };
+    reader.readAsText(file);
+  }
+
+  const fetchThemes = async () => {
+    themes = await getAvailableThemes();
+  }
+
+  onMount(async () => {
+    await fetchThemes();
+
+    themeUpdates.addListener(fetchThemes);
+  })
+
+  onDestroy(() => {
+    themeUpdates.removeListener(fetchThemes);
+  })
+</script>
+
+<div
+  class="w-full pt-5 mb-1"
+  role="list"
+  tabindex="-1"
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+>
+  <div class="{isDragging ? 'opacity-100' : 'opacity-0'} transition pointer-events-none absolute w-full p-2 z-50">
+    <div class="sticky w-full h-64 bg-white shadow-xl dark:bg-zinc-900 top-5 dark:text-white rounded-xl outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
+      <div class="flex items-center justify-center h-full">
+        <div class="flex flex-col items-center justify-center">
+          <svg height="48" width="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+            <g fill="currentColor">
+              <path d="M44,31a1,1,0,0,0-1,1v8a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V32a1,1,0,0,0-2,0v8a5.006,5.006,0,0,0,5,5H40a5.006,5.006,0,0,0,5-5V32A1,1,0,0,0,44,31Z" fill="currentColor"/>
+              <path d="M23.2,33.6a1,1,0,0,0,1.6,0l9-12A1,1,0,0,0,33,20H26V5a2,2,0,0,0-4,0V20H15a1,1,0,0,0-.8,1.6Z" fill="currentColor"/>
+            </g>
+          </svg>
+          <span class="text-lg">Import Theme</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <h2 class="pb-2 text-lg font-bold">Themes</h2>
+  <div class="flex flex-col gap-2 px-2">
+    {#if themes}
+      {#each themes.themes as theme (theme.id)}
+        <button
+          class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
+          onclick={() => handleThemeClick(theme)}
+        >
+          {#if isEditMode}
+            <div
+              class="absolute z-20 flex w-6 h-6 p-2 text-white bg-red-600 rounded-full opacity-100 right-2 place-items-center top-2"
+              onclick={(event) => { event.stopPropagation(); handleThemeDelete(theme.id) }}
+              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleThemeDelete(theme.id) }}
+              role="button"
+              tabindex="-1"
+            >
+              <div class="w-4 h-0.5 bg-white"></div>
+            </div>
+          {/if}
+
+          {#if !isEditMode}
+            <div
+              class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
+              onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
+              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') OpenThemeCreator(theme.id); closeExtensionPopup() }}
+              role="button"
+              tabindex="-1"
+            >
+              <span class="text-lg font-IconFamily">&#xeaa5;</span>
+            </div>
+
+            <div
+              class="absolute z-20 flex w-8 h-8 p-2 text-center transition-all -translate-y-1/2 rounded-full opacity-0 text-white/80 top-1/4 right-12 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2"
+              onclick={(event) => { event.stopPropagation(); handleShareTheme(theme) }}
+              onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleShareTheme(theme) }}
+              role="button"
+              tabindex="-1"
+            >
+              <span class="text-lg font-IconFamily">&#xecb3;</span>
+            </div>
+          {/if}
+
+          <div class="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900 { isEditMode ? 'animate-shake brightness-90' : ''}">
+            {#if theme.coverImage}
+              <img
+                src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}
+                alt={theme.name}
+                class="absolute inset-0 z-0 object-cover w-full h-full pointer-events-none"
+              />
+            {/if}
+            {#if !theme.hideThemeName}
+              <div class="z-10 {theme.coverImage ? 'text-white' : ''}">{theme.name}</div>
+            {/if}
+          </div>
+        </button>
+      {/each}
+    {/if}
+
+    {#if tempTheme}
+      <div class="flex justify-center w-full bg-gray-200 rounded-xl dark:bg-zinc-700/50 place-items-center aspect-theme animate-pulse">
+        <svg class="w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+    {/if}
+
+    {#if themes && themes.themes.length > 0}
+      <div id="divider" class="w-full h-[1px] my-2 bg-zinc-100 dark:bg-zinc-600"></div>
+    {/if}
+
+    <button
+      onclick={() => OpenStorePage()}
+      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+    >
+      <span class="text-xl font-IconFamily">&#xecc5;</span>
+      <span class="ml-2">Theme Store</span>
+    </button>
+
+    <button
+      onclick={() => { OpenThemeCreator(); closeExtensionPopup() }}
+      class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+    >
+      <span class="text-xl font-IconFamily">&#xec60;</span>
+      <span class="ml-2">Create your own</span>
+    </button>
+  </div>
+</div>

src/interface/components/utils/ReactAdapter.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import React from "react";
+  import ReactDOM from "react-dom";
+  import { onDestroy, onMount } from "svelte";
+
+  const e = React.createElement;
+  let container: HTMLDivElement;
+
+  onMount(() => {
+    const { el, children, class: _, ...props } = $$props;
+    try {
+      ReactDOM.render(e(el, props, children), container);
+    } catch (err) {
+      console.warn(`react-adapter failed to mount.`, { err });
+    }
+  });
+
+  onDestroy(() => {
+    try {
+      ReactDOM.unmountComponentAtNode(container);
+    } catch (err) {
+      console.warn(`react-adapter failed to unmount.`, { err });
+    }
+  });
+</script>
+
+<div bind:this={container} class={$$props.class}></div>

src/interface/hooks/BackgroundDataLoader.ts

@@ -0,0 +1,75 @@
+import { type DBSchema, type IDBPDatabase, openDB } from 'idb';
+
+interface BackgroundDB extends DBSchema {
+  backgrounds: {
+    key: string;
+    value: {
+      id: string;
+      type: string;
+      blob: Blob;
+    };
+  };
+}
+
+let db: IDBPDatabase<BackgroundDB> | null = null;
+
+export async function openDatabase(): Promise<IDBPDatabase<BackgroundDB>> {
+  if (db) return db;
+
+  db = await openDB<BackgroundDB>('BackgroundDB', 1, {
+    upgrade(db: IDBPDatabase<BackgroundDB>) {
+      db.createObjectStore('backgrounds', { keyPath: 'id' });
+    },
+  });
+
+  return db;
+}
+
+export async function readAllData(): Promise<Array<{ id: string; type: string; blob: Blob }>> {
+  const db = await openDatabase();
+  return db.getAll('backgrounds');
+}
+
+export async function writeData(id: string, type: string, blob: Blob): Promise<void> {
+  const db = await openDatabase();
+  await db.put('backgrounds', { id, type, blob });
+}
+
+export async function deleteData(id: string): Promise<void> {
+  const db = await openDatabase();
+  await db.delete('backgrounds', id);
+}
+
+export async function clearAllData(): Promise<void> {
+  const db = await openDatabase();
+  await db.clear('backgrounds');
+}
+
+export async function getDataById(id: string): Promise<{ id: string; type: string; blob: Blob } | undefined> {
+  const db = await openDatabase();
+  return db.get('backgrounds', id);
+}
+
+export function closeDatabase(): void {
+  if (db) {
+    db.close();
+    db = null;
+  }
+}
+
+// Helper function to check if IndexedDB is supported
+export function isIndexedDBSupported(): boolean {
+  return 'indexedDB' in window;
+}
+
+// Helper function to check if there's enough storage space
+export async function hasEnoughStorageSpace(requiredSpace: number): Promise<boolean> {
+  if ('storage' in navigator && 'estimate' in navigator.storage) {
+    const { quota, usage } = await navigator.storage.estimate();
+    if (quota !== undefined && usage !== undefined) {
+      return (quota - usage) > requiredSpace;
+    }
+  }
+  // If we can't determine, assume there's enough space
+  return true;
+}

src/interface/hooks/BackgroundUpdates.ts

@@ -0,0 +1,29 @@
+type BackgroundUpdateCallback = () => void;
+
+class BackgroundUpdates {
+  private static instance: BackgroundUpdates;
+  private listeners: Set<BackgroundUpdateCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): BackgroundUpdates {
+    if (!BackgroundUpdates.instance) {
+      BackgroundUpdates.instance = new BackgroundUpdates();
+    }
+    return BackgroundUpdates.instance;
+  }
+
+  public addListener(callback: BackgroundUpdateCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: BackgroundUpdateCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerUpdate(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const backgroundUpdates = BackgroundUpdates.getInstance();

src/interface/hooks/SettingsPopup.ts

@@ -0,0 +1,37 @@
+type SettingsPopupCallback = () => void;
+
+/** 
+ * This is a singleton that triggers an update when the settings popup is closed.
+ * This is used to close the colour picker.
+ * Usage:
+ *  settingsPopup.addListener(() => {
+ *    console.log('Settings popup closed');
+ *  });
+*/ 
+class SettingsPopup {
+  private static instance: SettingsPopup;
+  private listeners: Set<SettingsPopupCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): SettingsPopup {
+    if (!SettingsPopup.instance) {
+      SettingsPopup.instance = new SettingsPopup();
+    }
+    return SettingsPopup.instance;
+  }
+
+  public addListener(callback: SettingsPopupCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: SettingsPopupCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerClose(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const settingsPopup = SettingsPopup.getInstance();

src/interface/hooks/ThemeUpdates.ts

@@ -0,0 +1,29 @@
+type ThemeUpdateCallback = () => void;
+
+class ThemeUpdates {
+  private static instance: ThemeUpdates;
+  private listeners: Set<ThemeUpdateCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): ThemeUpdates {
+    if (!ThemeUpdates.instance) {
+      ThemeUpdates.instance = new ThemeUpdates();
+    }
+    return ThemeUpdates.instance;
+  }
+
+  public addListener(callback: ThemeUpdateCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: ThemeUpdateCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerUpdate(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const themeUpdates = ThemeUpdates.getInstance();

src/interface/hooks/backgroundState.svelte.ts

@@ -0,0 +1 @@
+export let selectedBackground = $state<string | null>(null);

src/interface/index.css

@@ -0,0 +1,52 @@
+@import './components/ColourPicker.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-width {
+  width: var(--tab-width);
+}
+
+input {
+  &:focus {
+    box-shadow: unset !important;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.no-scrollbar {
+  scrollbar-width: none !important;
+}
+
+.cm-editor {
+  width: 100%;
+  min-height: 100px;
+  max-height: 400px;
+}

src/interface/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BetterSEQTA+ Settings</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>

src/interface/index.ts

@@ -0,0 +1,46 @@
+import "./index.css"
+import { mount } from "svelte"
+import type { ComponentType } from "svelte"
+import Settings from "./pages/settings.svelte"
+import IconFamily from '@/resources/fonts/IconFamily.woff'
+import browser from "webextension-polyfill"
+
+export default function renderSvelte(
+  Component: ComponentType | any,
+  mountPoint: ShadowRoot | HTMLElement,
+  props: Record<string, any> = {},
+) {
+  const app = mount(Component, {
+    target: mountPoint,
+    props: {
+      standalone: true,
+      ...props,
+    },
+  })
+
+  return app
+}
+
+function InjectCustomIcons() {
+  console.info('[BetterSEQTA+] Injecting Icons')
+
+  const style = document.createElement('style')
+  style.setAttribute('type', 'text/css')
+  style.innerHTML = `
+    @font-face {
+      font-family: 'IconFamily';
+      src: url('${browser.runtime.getURL(IconFamily)}') format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }`
+  document.head.appendChild(style)
+}
+
+const mountPoint = document.getElementById('app')
+if (!mountPoint) {
+  console.error('Mount point #app not found')
+  throw new Error('Mount point #app not found')
+}
+
+InjectCustomIcons()
+renderSvelte(Settings, mountPoint)

src/interface/main.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";

src/interface/main.ts

@@ -0,0 +1,24 @@
+import styles from "./index.css?inline"
+import { mount } from "svelte"
+import type { ComponentType } from "svelte"
+
+export default function renderSvelte(
+  Component: ComponentType | any,
+  mountPoint: ShadowRoot | HTMLElement,
+  props: Record<string, any> = {},
+) {
+  const app = mount(Component, {
+    target: mountPoint,
+    props: {
+      standalone: false,
+      ...props,
+    },
+  })
+
+  const style = document.createElement("style")
+  style.setAttribute("type", "text/css")
+  style.innerHTML = styles
+  mountPoint.appendChild(style)
+
+  return app
+}

src/interface/pages/settings.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import TabbedContainer from '../components/TabbedContainer.svelte';
+  import Settings from './settings/general.svelte';
+  import Shortcuts from './settings/shortcuts.svelte';
+  import Theme from './settings/theme.svelte';
+  import browser from 'webextension-polyfill';
+
+  import { standalone as StandaloneStore } from '../utils/standalone.svelte';
+  import { onMount } from 'svelte'
+  import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
+
+  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
+  import ColourPicker from '../components/ColourPicker.svelte'
+  import { settingsPopup } from '../hooks/SettingsPopup'
+
+  let devModeSequence = '';
+
+  const handleDevModeToggle = () => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      devModeSequence += event.key.toLowerCase();
+      if (devModeSequence.includes('dev')) {
+        document.removeEventListener('keydown', handleKeyDown);
+        settingsState.devMode = true;
+        alert('Dev mode is now enabled');
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    setTimeout(() => {
+      document.removeEventListener('keydown', handleKeyDown);
+      devModeSequence = '';
+    }, 10000);
+  };
+
+  const openColourPicker = () => {
+    showColourPicker = true;
+  }
+
+  const openChangelog = () => {
+    OpenWhatsNewPopup();
+    closeExtensionPopup();
+  };
+
+  const openAbout = () => {
+    OpenAboutPage();
+    closeExtensionPopup();
+  };
+    
+  let { standalone } = $props<{ standalone?: boolean }>();
+  let showColourPicker = $state<boolean>(false);
+
+  onMount(() => {
+    settingsPopup.addListener(() => {
+      showColourPicker = false;
+    });
+    
+    if (!standalone) return;
+    initializeSettingsState();
+    StandaloneStore.setStandalone(true);
+  });
+</script>
+
+<div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
+  <div class="relative flex flex-col h-full gap-2 bg-white overflow-clip dark:bg-zinc-800 dark:text-white">
+    <div class="grid border-b border-b-zinc-200/40 place-items-center">
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" onclick={handleDevModeToggle} />
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" onclick={handleDevModeToggle} />
+      
+      {#if !standalone}
+        <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700">{'\ue929'}</button>
+        <button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">{'\ueb73'}</button>
+      {/if}
+    </div>
+
+    <TabbedContainer tabs={[
+      { title: 'Settings', Content: Settings, props: { showColourPicker: openColourPicker } },
+      { title: 'Shortcuts', Content: Shortcuts },
+      { title: 'Themes', Content: Theme },
+    ]} />
+  </div>
+
+  {#if showColourPicker}
+    <ColourPicker hidePicker={() => { showColourPicker = false }} />
+  {/if}
+</div>

src/interface/pages/settings/general.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import Switch from "../../components/Switch.svelte"
+  import Button from "../../components/Button.svelte"
+  import Slider from "../../components/Slider.svelte"
+  import Select from "@/interface/components/Select.svelte"
+
+  import browser from "webextension-polyfill"
+  
+  import type { SettingsList } from "@/interface/types/SettingsProps"
+  import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+  import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
+  import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
+
+  const { showColourPicker } = $props<{ showColourPicker: () => void }>();
+</script>
+
+{#snippet Setting({ title, description, Component, props }: SettingsList) }
+<div class="flex items-center justify-between px-4 py-3">
+  <div class="pr-4">
+    <h2 class="text-sm font-bold">{title}</h2>
+    <p class="text-xs">{description}</p>
+  </div>
+  <div>
+     <Component {...props} />
+  </div>
+</div>
+{/snippet}
+
+<div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
+  {#each [
+    {
+      title: "Transparency Effects",
+      description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
+      id: 1,
+      Component: Switch,
+      props: {
+        state: $settingsState.transparencyEffects,
+        onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn
+      }
+    },
+    {
+      title: "Animated Background",
+      description: "Adds an animated background to BetterSEQTA. (May impact battery life)",
+      id: 2,
+      Component: Switch,
+      props: {
+        state: $settingsState.animatedbk,
+        onChange: (isOn: boolean) => settingsState.animatedbk = isOn
+      }
+    },
+    {
+      title: "Animated Background Speed",
+      description: "Controls the speed of the animated background.",
+      id: 3,
+      Component: Slider,
+      props: {
+        state: $settingsState.bksliderinput,
+        onChange: (value: number) => settingsState.bksliderinput = `${value}`
+      }
+    },
+    {
+      title: "Custom Theme Colour",
+      description: "Customise the overall theme colour of SEQTA Learn.",
+      id: 4,
+      Component: PickerSwatch,
+      props: {
+        onClick: showColourPicker
+      }
+    },
+    {
+      title: "Edit Sidebar Layout",
+      description: "Customise the sidebar layout.",
+      id: 5,
+      Component: Button,
+      props: {
+        onClick: () => browser.runtime.sendMessage({ type: 'currentTab', info: 'EditSidebar' }),
+        text: "Edit"
+      }
+    },
+    {
+      title: "Animations",
+      description: "Enables animations on certain pages.",
+      id: 6,
+      Component: Switch,
+      props: {
+        state: $settingsState.animations,
+        onChange: (isOn: boolean) => settingsState.animations = isOn
+      }
+    },
+    {
+      title: "Notification Collector",
+      description: "Uncaps the 9+ limit for notifications, showing the real number.",
+      id: 7,
+      Component: Switch,
+      props: {
+        state: $settingsState.notificationcollector,
+        onChange: (isOn: boolean) => settingsState.notificationcollector = isOn
+      }
+    },
+    {
+      title: "Lesson Alerts",
+      description: "Sends a native browser notification ~5 minutes prior to lessons.",
+      id: 8,
+      Component: Switch,
+      props: {
+        state: $settingsState.lessonalert,
+        onChange: (isOn: boolean) => settingsState.lessonalert = isOn
+      }
+    },
+    {
+      title: "12 Hour Time",
+      description: "Prefer 12 hour time format for SEQTA",
+      id: 9,
+      Component: Switch,
+      props: {
+        state: $settingsState.timeFormat === "12",
+        onChange: (isOn: boolean) => settingsState.timeFormat = isOn ? "12" : "24"
+      }
+    },
+    {
+      title: "Default Page",
+      description: "The page to load when SEQTA Learn is opened.",
+      id: 10,
+      Component: Select,
+      props: {
+        state: $settingsState.defaultPage,
+        onChange: (value: string) => settingsState.defaultPage = value,
+        options: [
+          { value: 'home', label: 'Home' },
+          { value: 'dashboard', label: 'Dashboard' },
+          { value: 'timetable', label: 'Timetable' },
+          { value: 'welcome', label: 'Welcome' },
+          { value: 'messages', label: 'Messages' },
+          { value: 'documents', label: 'Documents' },
+          { value: 'reports', label: 'Reports' },
+        ]
+      }
+    },
+    {
+      title: "BetterSEQTA+",
+      description: "Enables BetterSEQTA+ features",
+      id: 11,
+      Component: Switch,
+      props: {
+        state: $settingsState.onoff,
+        onChange: (isOn: boolean) => settingsState.onoff = isOn
+      }
+    }
+  ] as option}
+    {@render Setting(option)}
+  {/each}
+
+  {#if $settingsState.devMode}
+    <div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
+      <div class="pr-4">
+        <h2 class="text-sm font-bold">Developer Mode</h2>
+        <p class="text-xs">Enables developer mode, allowing you to test new features and changes.</p>
+      </div>
+      <div>
+        <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
+      </div>
+    </div>
+    <div class="flex items-center justify-between px-4 py-3">
+      <div class="pr-4">
+        <h2 class="text-sm font-bold">Sensitive Hider</h2>
+        <p class="text-xs">Replace sensitive content with mock data</p>
+      </div>
+      <div>
+        <Button 
+          onClick={() => hideSensitiveContent()}
+          text="Hide"
+        />
+      </div>
+    </div>
+  {/if}
+</div>

src/interface/pages/settings/shortcuts.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import MotionDiv from '@/interface/components/MotionDiv.svelte';
+  import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+  import Switch from "@/interface/components/Switch.svelte"
+  import { onMount } from 'svelte';
+
+  let isLoaded = $state(false);
+
+  onMount(async () => {
+    // Wait for settingsState to be initialized
+    await new Promise<void>((resolve) => {
+      const checkState = () => {
+        if ($settingsState?.shortcuts) {
+          isLoaded = true;
+          resolve();
+        } else {
+          setTimeout(checkState, 100);
+        }
+      };
+      checkState();
+    });
+  });
+
+  const switchChange = (index: number) => {    
+    const updatedShortcuts = [...settingsState.shortcuts];
+    updatedShortcuts[index].enabled = !updatedShortcuts[index].enabled;
+    settingsState.shortcuts = updatedShortcuts;
+  }
+
+  let isFormVisible = $state(false);
+  let newTitle = $state("");
+  let newURL = $state("");
+
+  const toggleForm = () => {
+    isFormVisible = !isFormVisible;
+  };
+
+  const formatUrl = (inputUrl: string) => {
+    const protocolRegex = /^(http:\/\/|https:\/\/|ftp:\/\/)/;
+    return protocolRegex.test(inputUrl) ? inputUrl : `https://${inputUrl}`;
+  };
+
+  const isValidTitle = (title: string) => title.trim() !== "";
+  
+  const isValidURL = (url: string) => {
+    const pattern = new RegExp("^(https?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\-]+)*(?::\\d+)?(/[\\w\\-./]*)*$", "i");
+    return pattern.test(url);
+  };
+
+  const addNewCustomShortcut = () => {
+    if (isValidTitle(newTitle) && isValidURL(newURL)) {
+      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon: newTitle[0] };
+      settingsState.customshortcuts = [...settingsState.customshortcuts, newShortcut];
+
+      newTitle = "";
+      newURL = "";
+      isFormVisible = false;
+    } else {
+      alert("Please enter a valid title and URL.");
+    }
+  };
+
+  const deleteCustomShortcut = (index: number) => {
+    settingsState.customshortcuts = settingsState.customshortcuts.filter((_, i) => i !== index);
+  };
+</script>
+
+{#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
+<div class="flex items-center justify-between px-4 py-3">
+  <div class="pr-4">
+    <h2 class="text-sm">{Shortcut.name}</h2>
+  </div>
+  <Switch state={Shortcut.enabled} onChange={() => switchChange(parseInt(index))} />
+</div>
+{/snippet}
+
+<div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700">
+  {#if isLoaded}
+    <div>
+      <MotionDiv
+        initial={{ opacity: 0, height: 0 }}
+        animate={isFormVisible ? { opacity: 1, height: 'auto' } : { opacity: 0, height: 0 }}
+        exit={{ opacity: 0, height: 0 }}
+        transition={{
+          type: 'spring',
+          config: { stiffness: 400, damping: 25 }
+        }}
+      >
+        {#if isFormVisible}
+          <div class="flex flex-col items-center">
+            <MotionDiv
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0, duration: 0.2 }}
+              class="w-full"
+            >
+              <input
+                class="w-full p-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                type="text"
+                placeholder="Shortcut Name"
+                bind:value={newTitle}
+              />
+            </MotionDiv>
+            <MotionDiv
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.05, duration: 0.2 }}
+              class="w-full"
+            >
+              <input
+                class="w-full p-2 my-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                type="text"
+                placeholder="URL eg. https://google.com"
+                bind:value={newURL}
+              />
+            </MotionDiv>
+          </div>
+        {/if}
+      </MotionDiv>
+
+      <MotionDiv
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        <button
+          class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50"
+          onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
+        >
+          {#if isFormVisible}
+            Add
+          {:else}
+            Add Custom Shortcut
+          {/if}
+        </button>
+      </MotionDiv>
+    </div>
+
+    {#each Object.entries($settingsState.shortcuts) as shortcut}
+      {@render Shortcuts(shortcut)}
+    {/each}
+
+    <!-- Custom Shortcuts Section -->
+    {#each $settingsState.customshortcuts as shortcut, index}
+      <div class="flex items-center justify-between px-4 py-3">
+        {shortcut.name}
+        <button onclick={() => deleteCustomShortcut(index)}>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    {/each}
+  {:else}
+    <div class="p-4 text-center">
+      Loading shortcuts...
+    </div>
+  {/if}
+</div>

src/interface/pages/settings/theme.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import BackgroundSelector from "@/interface/components/themes/BackgroundSelector.svelte"
+  import ThemeSelector from "@/interface/components/themes/ThemeSelector.svelte"
+  import { standalone } from "@/interface/utils/standalone.svelte"
+  
+  // backgrounds
+  let selectedBackground = $state<string | null>(null);
+  let selectNoBackground = $state<() => void>(() => { });
+    
+  let clearTheme = $derived(selectedBackground !== null);
+  let editMode = $state<boolean>(false);
+</script>
+
+<div class="py-4">
+  {#if !standalone.standalone}
+    <button
+      onclick={() => selectNoBackground()}
+      class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50">
+      { clearTheme ? 'Clear Theme' : 'Select a Theme' }
+    </button>
+    <div class="relative w-full">
+      <button
+        onclick={() => editMode = !editMode}
+        class="absolute top-0 right-0 z-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{editMode ? '\ue9e4' : '\uec38'}</button>
+
+      <BackgroundSelector isEditMode={editMode} bind:selectedBackground={selectedBackground} bind:selectNoBackground={selectNoBackground} />
+      <ThemeSelector isEditMode={editMode} />
+    </div>
+  {:else}
+    <div class="flex items-center justify-center w-full h-full">
+      <div class="text-lg">
+        Open SEQTA and use the embedded settings to access theme settings. 🫠
+      </div>
+    </div>
+  {/if}
+</div>

src/interface/pages/store.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  // Import existing components
+  import CoverSwiper from '../components/store/CoverSwiper.svelte';
+  import ThemeGrid from '../components/store/ThemeGrid.svelte';
+  import SkeletonLoader from '../components/SkeletonLoader.svelte';
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import type { Theme } from '../types/Theme'
+  import browser from 'webextension-polyfill'
+  import ThemeModal from '../components/store/ThemeModal.svelte'
+  import { StoreDownloadTheme } from '@/seqta/ui/themes/downloadTheme'
+  import { setTheme } from '@/seqta/ui/themes/setTheme'
+  import Header from '../components/store/Header.svelte'
+  import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
+  import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
+  import { themeUpdates } from '../hooks/ThemeUpdates'
+
+  import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
+  import Backgrounds from '../components/store/Backgrounds.svelte'
+
+  // State variables
+  let searchTerm = $state('');
+  let themes = $state<Theme[]>([]);
+  let coverThemes = $state<Theme[]>([]);
+  let loading = $state(true);
+  let darkMode = $state(false);
+  let displayTheme = $state<Theme | null>(null);
+  let currentThemes = $state<string[]>([]);
+  let activeTab = $state('themes');
+  
+  let error = $state<string | null>(null);
+  let selectedBackground = $state<string | null>(null);
+
+  const fetchCurrentThemes = async () => {
+    const themes = await getAvailableThemes();
+    currentThemes = themes.themes.filter(theme => theme !== null).map(theme => theme.id);
+  };
+
+  const setDisplayTheme = (theme: Theme | null) => {
+    displayTheme = theme;
+  };
+  
+  const setSearchTerm = (term: string) => {
+    searchTerm = term;
+  };
+
+  const setActiveTab = (tab: string) => {
+    activeTab = tab;
+  };
+
+  // Fetch themes and initialize app
+  const fetchThemes = async () => {
+    try {
+      const response = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${(new Date()).getTime()}`, { cache: 'no-store' });
+      const data = await response.json();
+      themes = data.themes;
+
+      // Shuffle for cover themes
+      const shuffled = [...themes].sort(() => 0.5 - Math.random());
+      coverThemes = shuffled.slice(0, 3);
+
+      loading = false;
+    } catch (error) {
+      console.error('Failed to fetch themes', error);
+      setTimeout(fetchThemes, 5000); // Retry after 5 seconds if failure occurs
+    }
+  };
+
+  // On mount
+  onMount(async () => {
+    await fetchThemes();
+    await fetchCurrentThemes();
+    
+    darkMode = (await browser.storage.local.get('DarkMode')).DarkMode === 'true';
+    darkMode = $settingsState.DarkMode;
+  });
+
+  // Filter themes based on search term
+  let filteredThemes = $derived(themes.filter(theme =>
+    theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
+    theme.description.toLowerCase().includes(searchTerm.toLowerCase())
+  ));
+
+  $effect(() => {
+    loadBackground();
+    selectedBackground
+  });
+
+  $effect(() => {
+    if (error) {
+      console.error(error);
+    }
+  });
+</script>
+
+<div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
+  <div class="h-full overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900 dark:text-white pt-[4.25rem]">
+    <Header {searchTerm} {setSearchTerm} {darkMode} {activeTab} {setActiveTab} />
+    
+    <div class={`px-12 h-full ${activeTab === 'backgrounds' ? 'pt-0' : 'pt-6'}`}>
+      <!-- Loading State -->
+      {#if loading}
+        <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
+          <SkeletonLoader width="100%" height="200px" />
+        </div>
+      {:else}
+        <!-- Themes Tab Content -->
+        {#if activeTab === 'themes'}
+          {#if searchTerm === ''}
+            <CoverSwiper {coverThemes} {setDisplayTheme} />
+          {/if}
+    
+          <!-- ThemeGrid to display filtered themes -->
+          <ThemeGrid themes={filteredThemes} {searchTerm} {setDisplayTheme} />
+    
+          {#if displayTheme}
+            <ThemeModal
+              currentThemes={currentThemes}
+              allThemes={themes}
+              theme={displayTheme}
+              {displayTheme}
+              {setDisplayTheme}
+              onInstall={async () => {
+                if (displayTheme) {
+                  await StoreDownloadTheme({themeContent: displayTheme})
+                  setTheme(displayTheme.id);
+                  themeUpdates.triggerUpdate();
+                  await fetchCurrentThemes();
+                }
+              }}
+              onRemove={async () => {
+                if (displayTheme?.id) {
+                  console.debug('deleting theme', displayTheme.id);
+                  deleteTheme(displayTheme.id)
+                  themeUpdates.triggerUpdate();
+                  await fetchCurrentThemes();
+                }
+              }}
+            />
+          {/if}
+        {:else if activeTab === 'backgrounds'}
+          <Backgrounds {searchTerm} />
+        {/if}
+      {/if}
+    </div>
+  </div>
+</div>

src/interface/pages/themeCreator.svelte

@@ -0,0 +1,358 @@
+<script lang="ts">
+  import { v4 as uuidv4 } from 'uuid';
+  import { onMount } from 'svelte';
+  import { slide } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
+
+  import { type LoadedCustomTheme } from '@/types/CustomThemes'
+
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { getTheme } from '@/seqta/ui/themes/getTheme'
+
+  import Divider from '@/interface/components/themeCreator/divider.svelte'
+  import Switch from '@/interface/components/Switch.svelte'
+  import Button from '@/interface/components/Button.svelte'
+  import Slider from '@/interface/components/Slider.svelte'
+  import ColourPicker from '../components/ColourPicker.svelte'
+  import CodeEditor from '../components/CodeEditor.svelte'
+
+  import {
+    handleImageUpload,
+    handleRemoveImage,
+    handleImageVariableChange,
+    handleCoverImageUpload
+  } from '../utils/themeImageHandlers';
+  import { ClearThemePreview, UpdateThemePreview } from '@/seqta/ui/themes/UpdateThemePreview'
+  import { saveTheme } from '@/seqta/ui/themes/saveTheme'
+  import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator'
+  import { themeUpdates } from '../hooks/ThemeUpdates'
+  import { disableTheme } from '@/seqta/ui/themes/disableTheme'
+
+  const { themeID } = $props<{ themeID: string }>()
+  let theme = $state<LoadedCustomTheme>({
+    id: uuidv4(),
+    name: '',
+    description: '',
+    defaultColour: 'blue',
+    CanChangeColour: true,
+    allowBackgrounds: true,
+    CustomCSS: '',
+    CustomImages: [],
+    coverImage: null,
+    isEditable: true,
+    hideThemeName: false,
+    forceDark: undefined
+  })
+  let closedAccordions = $state<string[]>([])
+  let themeLoaded = $state(false);
+
+  function toggleAccordion(title: string) {
+    if (closedAccordions.includes(title)) {
+      closedAccordions = closedAccordions.filter(t => t !== title);
+    } else {
+      closedAccordions = [...closedAccordions, title];
+    }
+  }
+
+  onMount(async () => {
+    disableTheme();
+
+    if (themeID) {
+      const tempTheme = await getTheme(themeID)
+
+      if (!tempTheme) return
+
+      // convert temptheme to LoadedCustomTheme
+      const loadedTheme = {
+        ...tempTheme,
+        CustomImages: tempTheme.CustomImages.map(image => ({
+          ...image,
+          url: image.blob ? URL.createObjectURL(image.blob) : null
+        })),
+        coverImageUrl: tempTheme.coverImage ? URL.createObjectURL(tempTheme.coverImage) : undefined
+      }
+
+      if (tempTheme) {
+        theme = loadedTheme
+        themeLoaded = true
+      }
+    } else {
+      themeLoaded = true
+    }
+
+    themeUpdates.triggerUpdate();
+  });
+
+  async function onImageUpload(event: Event) {
+    theme = await handleImageUpload(event, theme);
+  }
+
+  function onRemoveImage(imageId: string) {
+    theme = handleRemoveImage(imageId, theme);
+  }
+
+  function onImageVariableChange(imageId: string, variableName: string) {
+    theme = handleImageVariableChange(imageId, variableName, theme);
+  }
+
+  async function onCoverImageUpload(event: Event) {
+    theme = await handleCoverImageUpload(event, theme);
+  }
+
+  function submitTheme() {
+    const themeClone = JSON.parse(JSON.stringify(theme));
+
+    // re-insert blobs into themeClone
+    themeClone.CustomImages = theme.CustomImages.map((image) => ({
+      ...image,
+      blob: image.blob
+    }))
+    themeClone.coverImage = theme.coverImage
+
+    ClearThemePreview();
+    saveTheme(themeClone);
+    themeUpdates.triggerUpdate();
+    CloseThemeCreator();
+  }
+
+  $effect(() => {
+    UpdateThemePreview(theme);
+  });
+
+  type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload' | 'conditional' | 'lightDarkToggle';
+
+  type SwitchProps = { state: boolean; onChange: (value: boolean) => void };
+  type ButtonProps = { onClick: () => void; text: string };
+  type SliderProps = { state: number; onChange: (value: number) => void; min?: number; max?: number };
+  type ColourPickerProps = { color: string; onChange: (color: string) => void };
+  type SelectProps = { options: Array<{ value: string; label: string }>; value: string; onChange: (value: string) => void };
+  type CodeEditorProps = { value: string; onChange: (value: string) => void };
+  type LightDarkToggleProps = { state: boolean; onChange: (value: boolean) => void };
+
+  type ConditionalProps = {
+    condition: boolean;
+    children: SettingItem;
+  };
+
+  type ComponentProps = SwitchProps | ButtonProps | SliderProps | ColourPickerProps | SelectProps | CodeEditorProps | LightDarkToggleProps | ConditionalProps;
+
+  type SettingItem = {
+    type: SettingType;
+    title: string;
+    description: string;
+    direction?: 'horizontal' | 'vertical';
+    props: ComponentProps;
+  };
+</script>
+
+{#snippet settingItem(item: SettingItem)}
+  {#if item.type === 'conditional'}
+    {#if (item.props as ConditionalProps).condition }
+      <div transition:slide={{ duration: 300 }}>
+        {@render settingItem((item.props as ConditionalProps).children)}
+      </div>
+    {/if}
+  {:else}
+    <div class="flex justify-between {item.direction === 'vertical' ? 'flex-col items-start' : 'items-center'} py-3">
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        onclick={() => { item.direction === 'vertical' && toggleAccordion(item.title) }}
+        onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title) }}
+        class="flex justify-between pr-4 {item.direction === 'vertical' ? 'cursor-pointer w-full select-none' : ''}">
+
+        <div>
+          <h2 class="text-sm font-bold">{item.title}</h2>
+          <p class="text-xs">{item.description}</p>
+        </div>
+
+        {#if item.direction === 'vertical'}
+          <div class="flex items-center justify-center h-full text-xl font-light text-zinc-500 dark:text-zinc-300">
+            <span class='font-IconFamily transition-transform duration-300 {closedAccordions.includes(item.title) ? 'rotate-180' : ''}'>{'\ue9e6'}</span>
+          </div>
+        {/if}
+      </div>
+
+      {#if !closedAccordions.includes(item.title)}
+        <div class="{item.direction === 'vertical' ? 'w-full mt-2' : ''}" transition:slide={{ duration: 300 }}>
+          {#if item.type === 'switch'}
+            <Switch {...(item.props as SwitchProps)} />
+          {:else if item.type === 'button'}
+            <Button {...(item.props as ButtonProps)} />
+          {:else if item.type === 'slider'}
+            <Slider {...(item.props as SliderProps)} />
+          {:else if item.type === 'colourPicker'}
+            {#key themeLoaded}
+              <ColourPicker savePresets={false} standalone={true} {...(item.props)} />
+            {/key}
+          {:else if item.type === 'codeEditor'}
+            {#key themeLoaded}
+              <CodeEditor {...(item.props as CodeEditorProps)} />
+            {/key}
+          {:else if item.type === 'imageUpload'}
+            {#each theme.CustomImages as image (image.id)}
+              <div class="flex items-center h-16 gap-2 px-2 py-2 mb-4 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
+                <div class="h-full ">
+                  <img src={image.url} alt={image.variableName} class="object-contain h-full rounded" />
+                </div>
+                <input
+                  type="text"
+                  bind:value={image.variableName}
+                  oninput={(e) => onImageVariableChange(image.id, e.currentTarget.value)}
+                  placeholder="CSS Variable Name"
+                  class="flex-grow flex-[3] w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
+                />
+                <button onclick={() => onRemoveImage(image.id)} class="p-2 transition dark:text-white">
+                  <span class='text-xl font-IconFamily'>{'\ued8c'}</span>
+                </button>
+              </div>
+            {/each}
+      
+            <div class="relative flex justify-center w-full h-8 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-200 dark:bg-zinc-700">
+              <span class='font-IconFamily'>{'\uec60'}</span>
+              <span class='dark:text-white'>Add image</span>
+              <input type="file" accept='image/*' onchange={onImageUpload} class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+            </div>
+          {:else if item.type === 'lightDarkToggle'}
+            <button
+              class="relative px-4 py-1 overflow-hidden text-xl font-medium transition rounded-lg bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
+              onclick={() => (item.props as LightDarkToggleProps).onChange(!(item.props as LightDarkToggleProps).state)}
+            >
+              {#key (item.props as LightDarkToggleProps).state}
+                <span
+                  class="absolute"
+                  in:fade={{ duration: 150 }}
+                  out:fade={{ duration: 150 }}
+                >
+                  {(item.props as LightDarkToggleProps).state ? '\uec12' : '\uecfe'}
+                </span>
+              {/key}
+              <span class='opacity-0'>{'\uec12'}</span>
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+<div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
+  <div class='flex flex-col w-full min-h-screen p-2 bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
+    <h1 class='text-xl font-semibold'>Theme Creator</h1>
+    <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>
+      <span class='no-underline font-IconFamily pr-0.5'>{'\ueb44'}</span>
+      <span class='underline'>
+        Need help? Check out the docs!
+      </span>
+    </a>
+
+    <Divider />
+
+    <div>
+      <div class='pb-2 text-sm'>Theme Name</div>
+      <input
+        id='themeName'
+        type='text'
+        placeholder='What is your theme called?'
+        bind:value={theme.name}
+        class='w-full p-2 mb-4 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600' />
+    </div>
+
+    <div>
+      <div class='pb-2 text-sm'>Description <span class='italic font-light opacity-80'>(optional)</span></div>
+      <textarea
+        id='themeDescription'
+        placeholder="Don't worry, this one's optional!"
+        bind:value={theme.description}
+        class='w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
+    </div>
+
+    <Divider />
+
+    <div class="relative flex justify-center w-full gap-1 overflow-hidden transition rounded-lg aspect-theme group place-items-center bg-zinc-200 dark:bg-zinc-700">
+      <div class={`transition pointer-events-none z-30 font-IconFamily ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>
+        {'\uec60'}
+      </div>
+      <span class={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span>
+      <input type="file" accept='image/*' onchange={onCoverImageUpload} class="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer" />
+      {#if !theme.hideThemeName && theme.coverImage}
+        <div class="absolute z-30 transition-opacity opacity-100 pointer-events-none group-hover:opacity-0">{theme.name}</div>
+      {/if}
+      {#if theme.coverImage}
+        <div class="absolute z-20 w-full h-full transition-opacity opacity-0 pointer-events-none group-hover:opacity-100 bg-black/20"></div>
+        <img src={theme.coverImageUrl} alt='Cover' class="absolute z-0 object-cover w-full h-full rounded" />
+      {/if}
+    </div>
+
+    <Divider />
+
+    {#each [
+      {
+        type: 'switch',
+        title: 'Hide Theme Name',
+        description: 'Useful when your cover image contains text',
+        props: {
+          state: theme.hideThemeName,
+          onChange: (value: boolean) => theme = { ...theme, hideThemeName: value }
+        }
+      },
+      {
+        type: 'switch',
+        title: 'Force Theme',
+        description: 'Force users to use either dark or light mode',
+        props: {
+          state: theme.forceDark !== undefined,
+          onChange: (value: boolean) => theme = { ...theme, forceDark: value ? false : undefined }
+        }
+      },
+      {
+        type: 'conditional',
+        props: {
+          condition: theme.forceDark !== undefined,
+          children: {
+            type: 'lightDarkToggle',
+            title: 'Mode',
+            description: 'Choose whether to force light or dark mode',
+            props: {
+              state: theme.forceDark === true,
+              onChange: (value: boolean) => theme = { ...theme, forceDark: value }
+            }
+          }
+        }
+      },
+      {
+        type: 'colourPicker',
+        title: 'Default Theme Colour',
+        description: 'Set the default color for your theme',
+        direction: 'vertical',
+        props: {
+          customState: theme.defaultColour,
+          customOnChange: (color: string) => theme = { ...theme, defaultColour: color }
+        }
+      },
+      {
+        type: 'imageUpload',
+        title: 'Custom Images',
+        description: 'Add custom images to your theme',
+        direction: 'vertical',
+      },
+      {
+        type: 'codeEditor',
+        title: 'Custom CSS',
+        description: 'Add custom CSS to your theme',
+        direction: 'vertical',
+        props: {
+          value: theme.CustomCSS,
+          onChange: (value: string) => { theme = { ...theme, CustomCSS: value } }
+        }
+      }
+    ] as SettingItem[] as setting}
+      {@render settingItem(setting)}
+    {/each}
+    
+    <button
+      onclick={submitTheme}
+      class="w-full px-4 py-2 mt-3 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50">
+      Save Theme
+    </button>
+  </div>
+</div>

src/interface/types/SettingsProps.ts

@@ -0,0 +1,7 @@
+export interface SettingsList {
+  title: string;
+  id: number;
+  description: string;
+  Component: any; /* TODO: Give this a type */
+  props?: any;
+}

src/interface/types/Theme.ts

@@ -0,0 +1,7 @@
+export type Theme = {
+  name: string;
+  description: string;
+  coverImage: string;
+  marqueeImage: string;
+  id: string;
+};

src/interface/utils/standalone.svelte.ts

@@ -0,0 +1,36 @@
+import type { Subscriber, Unsubscriber } from "svelte/store";
+
+export class Standalone {
+	private static instance: Standalone;
+	private _standalone = $state(false);
+	private subscribers = new Set<Subscriber<boolean>>();
+
+	private constructor() {}
+
+	public static getInstance(): Standalone {
+		if (!Standalone.instance) {
+			Standalone.instance = new Standalone();
+		}
+		return Standalone.instance;
+	}
+
+	public setStandalone(value: boolean) {
+		this._standalone = value;
+		this.subscribers.forEach(subscriber => subscriber(value));
+	}
+
+	public get standalone() {
+		return this._standalone;
+	}
+
+	public subscribe(run: Subscriber<boolean>): Unsubscriber {
+		this.subscribers.add(run);
+		run(this._standalone);
+
+		return () => {
+			this.subscribers.delete(run);
+		};
+	}
+}
+
+export const standalone = Standalone.getInstance();

src/interface/utils/themeImageHandlers.ts

@@ -0,0 +1,60 @@
+import type { LoadedCustomTheme } from '@/types/CustomThemes';
+
+export function generateImageId(): string {
+  return Math.random().toString(36).substr(2, 9);
+}
+
+export function handleImageUpload(event: Event, theme: LoadedCustomTheme): Promise<LoadedCustomTheme> | LoadedCustomTheme {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
+        const imageId = generateImageId();
+        const variableName = `custom-image-${theme.CustomImages.length}`;
+        resolve({
+          ...theme,
+          CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName, url: URL.createObjectURL(imageBlob) }],
+        });
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+  return theme;
+}
+
+export function handleRemoveImage(imageId: string, theme: LoadedCustomTheme): LoadedCustomTheme {
+  return {
+    ...theme,
+    CustomImages: theme.CustomImages.filter((image) => image.id !== imageId),
+  } as LoadedCustomTheme;
+}
+
+export function handleImageVariableChange(imageId: string, variableName: string, theme: LoadedCustomTheme): LoadedCustomTheme {
+  return {
+    ...theme,
+    CustomImages: theme.CustomImages.map((image) =>
+      image.id === imageId ? { ...image, variableName } : image
+    ),
+  } as LoadedCustomTheme;
+}
+
+export function handleCoverImageUpload(event: Event, theme: LoadedCustomTheme): Promise<LoadedCustomTheme> {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
+        resolve({ ...theme, coverImage: imageBlob, coverImageUrl: URL.createObjectURL(imageBlob) });
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+  return Promise.resolve(theme);
+}