diff --git a/src/components/Loader.astro b/src/components/Loader.astro
index fe1864b..0bf28b8 100644
--- a/src/components/Loader.astro
+++ b/src/components/Loader.astro
@@ -2,7 +2,6 @@
     import { Settings } from "@utils/settings.ts";
     import { SW } from "@utils/proxy.ts";
     const settings = new Settings();
-    window.settings = settings;
     const sw = new SW();
 
 
diff --git a/src/components/SettingsNav.astro b/src/components/SettingsNav.astro
index cb8313c..6150295 100644
--- a/src/components/SettingsNav.astro
+++ b/src/components/SettingsNav.astro
@@ -5,7 +5,7 @@ import type { SettingsProps as Props } from "@utils/types.ts";
 const { active } = Astro.props; 
 ---
 <div class="h-full w-full flex flex-col font-inter p-4 pl-8 pt-8 gap-2">
-    <a href="/settings/proxy/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "proxy" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
+    <a href="/settings/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "proxy" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
         <Icon name="lucide:lock" class="h-5 w-5" /> Proxy
     </a>
     <a href="/settings/appearance/" class=`gap-2 px-4 py-2 rounded-lg h-10 w-full text-sm font-medium transition-colors items-center justify-start inline-flex ${active === "appearance" ? 'bg-(--secondary) hover:bg-(--secondary)/[0.8]' : 'bg-(--background) hover:bg-(--accent)'}`>
diff --git a/src/components/ui/Dropdown.astro b/src/components/ui/Dropdown.astro
index f5c0d5b..f4f01b5 100644
--- a/src/components/ui/Dropdown.astro
+++ b/src/components/ui/Dropdown.astro
@@ -1,12 +1,11 @@
 ---
 import type { DropdownOptions } from "@utils/types";
 interface Props {
-    title?: string;
     id: string;
     options: DropdownOptions[];
 }
 
-const { title, id, options } = Astro.props;
+const { id, options } = Astro.props;
 ---
 <select id=`dropdownBox-${id}` class="flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
     {options.map((el) => 
diff --git a/src/pages/[...settings]/index.astro b/src/pages/[...settings]/index.astro
new file mode 100644
index 0000000..79d6071
--- /dev/null
+++ b/src/pages/[...settings]/index.astro
@@ -0,0 +1,74 @@
+---
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+import Dropdown from "@components/ui/Dropdown.astro";
+import Input from "@components/ui/Input.astro";
+import { SearchEngines, type DropdownOptions } from "@utils/types";
+const SearchEngineOptions: DropdownOptions[] = [];
+Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
+    { name: k, value: SearchEngines[k] }
+));
+---
+<SettingsLayout active="proxy">
+    <div class="h-full mt-14 flex-grow px-12 py-8 flex flex-col">
+        <h1 class="text-4xl font-semibold"> Proxy </h1>
+        <div class="border-b border-(--border) w-full mb-4"></div>
+        <div class="w-full flex-grow">
+            <div>
+                <p> Proxy Switcher </p>
+                <Dropdown id="pSwitcher" options={
+                    [
+                        { name: 'Ultraviolet', value: 'uv', default: true },
+                        { name: 'Scramjet', value: 'sj' }
+                    ]
+                } />
+            </div>
+            <div class="mt-2">
+                <p> Transport </p>
+                <Dropdown id="tSwitcher" options={
+                    [
+                        { name: 'Libcurl', value: 'libcurl', default: true },
+                        { name: 'Epoxy', value: 'epoxy' }
+                    ]
+                } />
+            </div>
+            <div class="mt-2">
+                <p> Search Engine </p>
+                <Dropdown id="sSwitcher" options={SearchEngineOptions} />
+            </div>
+            <div class="mt-2">
+                <p> Wisp Server </p>
+                <Input />
+            </div>
+        </div>
+    </div>
+</SettingsLayout>
+<script>
+    import { Settings } from "@utils/settings.ts";
+    import { SW } from "@utils/proxy.ts";
+    import { StoreManager } from "@utils/storage";
+    type Options = {
+        settings: Settings,
+        sw: SW,
+        storageManager: StoreManager<"radius||settings">
+    }
+
+    const transport = async (opts: Options) => {
+        console.log('t');
+        const transportEl = document.getElementById("dropdownBox-tSwitcher") as HTMLSelectElement;
+        transportEl.value = opts.storageManager.getVal("transport") || "libcurl"; 
+        transportEl.addEventListener("change", async () => {
+            opts.sw.setTransport(transportEl.value as "epoxy" | "libcurl");
+        });
+    }
+
+    const proxy = async (opts: Options) => {}
+
+    document.addEventListener("astro:page-load", async () => {
+        try {
+            const settings = await Settings.getInstance();
+            const sw = SW.getInstance().next().value!; 
+            const storageManager = new StoreManager<"radius||settings">("radius||settings");
+            await transport({settings, sw, storageManager});
+        } catch (err) { console.log(err) }
+    });
+</script>
diff --git a/src/pages/[...settings]/proxy.astro b/src/pages/[...settings]/proxy.astro
deleted file mode 100644
index 0a944d3..0000000
--- a/src/pages/[...settings]/proxy.astro
+++ /dev/null
@@ -1,41 +0,0 @@
----
-import SettingsLayout from "@layouts/SettingsLayout.astro";
-import Dropdown from "@components/ui/Dropdown.astro";
-import { SearchEngines, type DropdownOptions } from "@utils/types";
-const SearchEngineOptions: DropdownOptions[] = [];
-Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
-    { name: k, value: SearchEngines[k] }
-));
----
-<SettingsLayout active="proxy">
-    <div class="h-full mt-14 flex-grow px-12 py-8 flex flex-col">
-        <h1 class="text-4xl font-semibold"> Proxy </h1>
-        <div class="border-b border-(--border) w-full mb-4"></div>
-        <div class="w-full flex-grow">
-            <div>
-                <p> Proxy Switcher </p>
-                <Dropdown id="pSwitcher" options={
-                    [
-                        { name: 'gyatt', value: 'skibidi', default: true },
-                        { name: 'ohio', value: 'shit' }
-                    ]
-                } />
-            </div>
-            <div class="mt-2">
-                <p> Proxy Switcher </p>
-                <Dropdown id="pSwitcher" options={
-                    [
-                        { name: 'gyatt', value: 'skibidi', default: true },
-                        { name: 'ohio', value: 'shit' }
-                    ]
-                } />
-            </div>
-            <div class="mt-2">
-                <p> Search Engine </p>
-                <Dropdown id="sSwitcher" options={SearchEngineOptions} />
-            </div>
-            <div class="mt-2">
-            </div>
-        </div>
-    </div>
-</SettingsLayout>
diff --git a/src/utils/proxy.ts b/src/utils/proxy.ts
index ca860d4..ca1e5b5 100644
--- a/src/utils/proxy.ts
+++ b/src/utils/proxy.ts
@@ -48,12 +48,14 @@ class SW {
         return template.replace("%s", encodeURIComponent(input));
     }
 
-    encodeURL(string: string, proxy: 'uv' | 'scram'): string {
+    encodeURL(string: string, proxy: 'uv' | 'sj'): string {
         const input = this.#search(string, "https://google.com/search?q=%s");
         return proxy === 'uv' ? `${__uv$config.prefix}${__uv$config.encodeUrl!(input)}` : this.#scramjetController!.encodeUrl(input)
     }
 
-    async setTransport(transport?: 'epoxy' | 'libcurl') {
+    async setTransport(transport?: 'epoxy' | 'libcurl', get?: boolean) {
+        console.log('Setting transport');
+        if (get) return this.#storageManager.getVal('transport');
         this.#storageManager.setVal("transport", transport || this.#storageManager.getVal("transport") || 'epoxy');
         switch(transport) {
             case 'epoxy': {
diff --git a/src/utils/settings.ts b/src/utils/settings.ts
index 2269422..8dab724 100644
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@@ -70,6 +70,8 @@ class Settings {
             ? document.documentElement.className = 'default' 
             : document.documentElement.className = theme || this.#storageManager.getVal('theme');
     }
+
+    proxy(prox: 'uv' | 'sj') {}
  
     async *#init() {
         yield this.theme(this.#storageManager.getVal('theme') || 'default');