diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e992bdf..c2ddd2c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
     <html lang="en">
       <head>
         <link rel="icon" href="/icon.png" />
-        <script src="/chemical.js"></script>
+        <script data-wisp-store src="/chemical.js"></script>
       </head>
       <body className={inter.className}>
         <Themes>
diff --git a/src/app/settings/appearance/page.tsx b/src/app/settings/appearance/page.tsx
index e6886bf..c0f990e 100644
--- a/src/app/settings/appearance/page.tsx
+++ b/src/app/settings/appearance/page.tsx
@@ -46,8 +46,6 @@ export default function Settings() {
       setSubmitting(false);
       toast.success("Settings saved");
     }, 1000);
-
-    console.log(values);
   }
 
   function onReset() {
diff --git a/src/app/settings/layout.tsx b/src/app/settings/layout.tsx
index 79ba687..80639ad 100644
--- a/src/app/settings/layout.tsx
+++ b/src/app/settings/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Users, Link, Palette } from "lucide-react";
+import { Users, Link, Palette, ArrowRightLeft } from "lucide-react";
 import NextLink from "next/link";
 
 import { usePathname } from "next/navigation";
@@ -23,6 +23,16 @@ export default function SettingsLayout({
             <Palette className="h-5 w-5" /> Appearance
           </Button>
         </NextLink>
+        <NextLink href="/settings/wisp/">
+          <Button
+            variant={
+              pathname?.includes("/settings/wisp/") ? "secondary" : "ghost"
+            }
+            className="w-full items-center justify-start gap-2"
+          >
+            <ArrowRightLeft className="h-5 w-5" /> Wisp
+          </Button>
+        </NextLink>
         <NextLink href="/settings/credits/">
           <Button
             variant={
diff --git a/src/app/settings/wisp/page.tsx b/src/app/settings/wisp/page.tsx
new file mode 100644
index 0000000..f4c7cbb
--- /dev/null
+++ b/src/app/settings/wisp/page.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Save, RotateCcw } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+const formSchema = z.object({
+  wispServer: z.string().url("Please provide a valid URL"),
+  description: z.string().optional(),
+});
+
+export default function WispSwitcher() {
+  const [submitting, setSubmitting] = useState(false);
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      wispServer: "",
+    },
+  });
+
+  useEffect(() => {
+    const wispServer: string = window.chemical.getStore("wisp");
+    const defaultWisp: string =
+      (location.protocol === "https:" ? "wss" : "ws") +
+      "://" +
+      location.host +
+      "/wisp/";
+    form.setValue("wispServer", wispServer !== defaultWisp ? wispServer : "");
+  }, []);
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    setSubmitting(true);
+
+    window.chemical.setStore("wisp", values.wispServer);
+
+    setTimeout(() => {
+      setSubmitting(false);
+      toast.success("Settings saved");
+    }, 1000);
+  }
+
+  function onReset() {
+    form.reset();
+    window.chemical.setStore("wisp", "");
+    toast("Settings reset");
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Wisp</h1>
+      <Separator />
+      <div className="mt-4">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-1/2 space-y-4"
+          >
+            <FormField
+              control={form.control}
+              name="wispServer"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wisp Server Switcher</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Wisp Server URL" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {}
+            <div className="flex space-x-4">
+              <Button type="submit" disabled={submitting}>
+                <Save className="mr-2 h-5 w-5" /> Save Changes
+              </Button>
+              <Button type="button" onClick={onReset}>
+                <RotateCcw className="mr-2 h-5 w-5" /> Reset
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index aef3b31..81396b5 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -15,7 +15,7 @@ export default function Navbar() {
   if (pathname && pathname.includes('/go/')) return null
 
   return (
-    <div className="w-screen fixed h-14 border-b flex items-center px-4">
+    <div className="w-screen fixed h-14 border-b flex items-center px-4 bg-background z-10">
       <div className="flex items-center gap-3">
         <Button onClick={() => setOpen(true)} size="icon" variant="ghost">
                 <Lucide.Menu className="h-7 w-7" />
