diff --git a/web/src/components/buttons/SettingsContextButton.svelte b/web/src/components/buttons/SettingsButton.svelte
similarity index 100%
rename from web/src/components/buttons/SettingsContextButton.svelte
rename to web/src/components/buttons/SettingsButton.svelte
diff --git a/web/src/components/buttons/SettingsCheckbox.svelte b/web/src/components/buttons/SettingsCheckbox.svelte
new file mode 100644
index 00000000..81c8c00a
--- /dev/null
+++ b/web/src/components/buttons/SettingsCheckbox.svelte
@@ -0,0 +1,31 @@
+<script
+    lang="ts"
+    generics="
+        Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
+        Id extends keyof CobaltSettings[Context]
+    "
+>
+    import settings, { updateSetting } from "$lib/settings";
+    import type { CobaltSettings } from "$lib/types/settings";
+
+    export let settingContext: Context;
+    export let settingId: Id;
+
+    $: setting = $settings[settingContext][settingId];
+    $: isChecked = !!setting;
+</script>
+
+<div>
+    <input
+        type="checkbox"
+        id="setting-button-{settingContext}-{String(settingId)}"
+        bind:checked={isChecked}
+        on:change={() =>
+            updateSetting({
+                [settingContext]: {
+                    [settingId]: isChecked,
+                },
+            })}
+    />
+    <slot></slot>
+</div>
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 5686764d..3a4e6d58 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -12,7 +12,7 @@
     import IconMute from "$lib/icons/Mute.svelte";
 
     import IconClipboard from "$lib/icons/Clipboard.svelte";
-    import SettingsContextButton from "../buttons/SettingsContextButton.svelte";
+    import SettingsButton from "../buttons/SettingsButton.svelte";
 
     let link: string = "";
     let isFocused = false;
@@ -68,15 +68,15 @@
 
     <div id="action-container">
         <Switcher>
-            <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="auto">
+            <SettingsButton settingContext="save" settingId="downloadMode" settingKey="auto">
                 <IconSparkles /> auto
-            </SettingsContextButton>
-            <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="audio">
+            </SettingsButton>
+            <SettingsButton settingContext="save" settingId="downloadMode" settingKey="audio">
                 <IconMusic /> audio
-            </SettingsContextButton>
-            <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="mute">
+            </SettingsButton>
+            <SettingsButton settingContext="save" settingId="downloadMode" settingKey="mute">
                 <IconMute /> mute
-            </SettingsContextButton>
+            </SettingsButton>
         </Switcher>
         <ActionButton id="paste" click={pasteClipboard}>
             <IconClipboard />
diff --git a/web/src/lib/settings/defaults.ts b/web/src/lib/settings/defaults.ts
index ddaa83be..124e8751 100644
--- a/web/src/lib/settings/defaults.ts
+++ b/web/src/lib/settings/defaults.ts
@@ -31,5 +31,16 @@ const defaultSettings: CobaltSettings = {
         trafficAnalytics: true
     }
 }
-
 export default defaultSettings;
+
+export const settingArrays = {
+    appearance: {
+        theme: ["auto", "light", "dark"]
+    },
+    save: {
+        audioFormat: ["best", "mp3", "ogg", "wav", "opus"],
+        filenameStyle: ["classic", "basic", "pretty", "nerdy"],
+        videoQuality: ["max", "2160", "1440", "1080", "720", "480", "360", "240", "144"],
+        youtubeVideoCodec: ["h264", "av1", "vp9"],
+    },
+}
diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
index d6a792fb..5f94bc32 100644
--- a/web/src/routes/settings/+page.svelte
+++ b/web/src/routes/settings/+page.svelte
@@ -1,5 +1,41 @@
-<script>
-    import Placeholder from "../../components/misc/Placeholder.svelte";
+<script lang="ts"> 
+    import SettingsButton from "../../components/buttons/SettingsButton.svelte";
+    import SettingsCheckbox from "../../components/buttons/SettingsCheckbox.svelte";
+    import Switcher from "../../components/buttons/Switcher.svelte";
+
+    import { merge } from 'ts-deepmerge';
+    import defaultSettings, { settingArrays } from "$lib/settings/defaults";
+
+    const switchers = merge(defaultSettings, settingArrays);
 </script>
 
-<Placeholder pageName="settings" />
+<div>
+    <div>settings (placeholder)</div>
+    <br>
+    {#each Object.entries(switchers) as [context, settingIdParent]}
+        <div>
+            <div>{context} context:</div>
+            <br>
+        </div>
+        {#each Object.entries(settingIdParent) as [settingId, settingValue]}
+            {#if settingValue instanceof Array}
+                <div>{settingId}</div>
+                <Switcher>
+                    {#each settingValue as value}
+                        <SettingsButton settingContext="{context}" settingId="{settingId}" settingKey="{value}">
+                            {value}
+                        </SettingsButton>
+                    {/each}
+                </Switcher>
+                <br>
+            {/if}
+
+            {#if typeof settingValue === "boolean"}
+                <SettingsCheckbox settingContext={context} settingId="{settingId}">
+                    {settingId}
+                </SettingsCheckbox>
+                <br>
+            {/if}
+        {/each}
+    {/each}
+</div>