diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte
index f97dfa51..d45393e8 100644
--- a/src/svelte-interface/components/Switch.svelte
+++ b/src/svelte-interface/components/Switch.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
   import { animate, spring } from 'motion';
-  import { onMount } from "svelte";
+  import { createStandalone } from '../utils/standalone.svelte'
 
   let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
   let handle: HTMLElement | null = null;
-
-  const toggleSwitch = () => {
-    onChange(!state);
-  };
+  let standalone = createStandalone();
 
   const springParams = {
     stiffness: 600,
@@ -19,8 +16,7 @@
     animate(
       handle,
       {
-        x: enabled ? 20 : 0,
-        scaleX: [1, 2, 1]
+        x: enabled ? (standalone.standalone ? 24 : 20) : 0,
       },
       {
         easing: spring(springParams),
@@ -30,18 +26,13 @@
 
   // Trigger animation whenever state changes
   $effect(() => animateSwitch(state));
-
-  onMount(() => {
-    // Initialize the position of the switch
-    animateSwitch(state);
-  });
 </script>
 
 <div
-  class="flex w-14 p-1 cursor-pointer transition rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
+  class="flex w-14 p-1 cursor-pointer transition-all duration-500 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
   data-ison={state}
-  onclick={toggleSwitch}
-  onkeydown={(e) => e.key === "Enter" && toggleSwitch()}
+  onclick={() => onChange(!state)}
+  onkeydown={(e) => e.key === "Enter" && onChange(!state)}
   role="switch"
   aria-checked={state}
   tabindex="0"
diff --git a/src/svelte-interface/index.html b/src/svelte-interface/index.html
index 0e3ab538..93137db0 100644
--- a/src/svelte-interface/index.html
+++ b/src/svelte-interface/index.html
@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BetterSEQTA+ Settings</title>
   </head>
-  <body style="background-color: red;">
+  <body>
+    <script type="module" src="./index.ts"></script>
     asdasds - I (Crazypersonalph) agree with this statement.
   </body>
-</html>
-
+</html>
\ No newline at end of file
diff --git a/src/svelte-interface/index.ts b/src/svelte-interface/index.ts
new file mode 100644
index 00000000..d261d295
--- /dev/null
+++ b/src/svelte-interface/index.ts
@@ -0,0 +1,16 @@
+import { mount } from 'svelte';
+import Settings from './pages/settings.svelte';
+import { initializeSettingsState } from '@/seqta/utils/listeners/SettingsState';
+import './index.css';
+
+
+initializeSettingsState();
+
+const app = mount(Settings, {
+  target: document.body,
+  props: {
+    standalone: true
+  }
+});
+
+console.log(app);
diff --git a/src/svelte-interface/main.ts b/src/svelte-interface/main.ts
index 009aed39..1882f5e7 100644
--- a/src/svelte-interface/main.ts
+++ b/src/svelte-interface/main.ts
@@ -5,22 +5,23 @@ import Settings from './pages/settings.svelte';
 import styles from './index.css?inline';
 import { mount } from 'svelte';
 
-export default function initSvelteInterface(shadow: ShadowRoot) {
-  console.log(shadow)
-
+export default function initSvelteInterface(mountPoint: ShadowRoot | HTMLElement) {
   /* routes.set({
     'settings': Settings,
     '*': Settings
   }) */
   
   const app = mount(Settings, {
-    target: shadow,
+    target: mountPoint,
+    props: {
+      standalone: false
+    }
   });
 
   const style2 = document.createElement("style");
   style2.setAttribute("type", "text/css");
   style2.innerHTML = styles;
-  shadow.appendChild(style2);
+  mountPoint.appendChild(style2);
   
   return app;
 }
\ No newline at end of file
diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte
index 0af5ab2a..71da4a30 100644
--- a/src/svelte-interface/pages/settings.svelte
+++ b/src/svelte-interface/pages/settings.svelte
@@ -5,14 +5,23 @@
   import Theme from './settings/theme.svelte';
   import browser from 'webextension-polyfill';
 
+  import { createStandalone } from '../utils/standalone.svelte';
+  import { onMount } from 'svelte'
+
   const openChangelog = () => {
     browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' });
   };
     
-  let standalone = $state(false);
+  let { standalone } = $props<{ standalone: boolean }>();
+
+  onMount(() => {
+    if (!standalone) return;
+    let globalStandalone = createStandalone();
+    globalStandalone = standalone;
+  });
 </script>
 
-<div class="relative flex flex-col w-[384px] shadow-2xl gap-2 bg-white {standalone ? '' : 'rounded-xl'} h-[100vh] overflow-clip dark:bg-zinc-800 dark:text-white">
+<div class="relative flex flex-col w-[384px] shadow-2xl gap-2 bg-white { standalone ? 'h-[600px]' : 'h-[100vh] rounded-xl' } overflow-clip dark:bg-zinc-800 dark:text-white">
   <div class="grid border-b border-b-zinc-200/40 place-items-center">
     <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" />
     <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
diff --git a/src/svelte-interface/utils/standalone.svelte.ts b/src/svelte-interface/utils/standalone.svelte.ts
new file mode 100644
index 00000000..3a8c9461
--- /dev/null
+++ b/src/svelte-interface/utils/standalone.svelte.ts
@@ -0,0 +1,14 @@
+export function createStandalone() {
+	let standalone = $state(false);
+
+	function setStandalone(value: boolean) {
+		standalone = value;
+	}
+
+	return {
+		get standalone() {
+			return standalone;
+		},
+		setStandalone
+	};
+}
\ No newline at end of file
