diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
new file mode 100644
index 0000000..e785cb1
--- /dev/null
+++ b/src/routes/settings/+layout.svelte
@@ -0,0 +1,21 @@
+
+<script lang="ts">
+    import MenuLink from "$lib/MenuLink.svelte";
+    import SLayout from "$lib/SLayout.svelte";
+    import { RiBrush2Line } from "svelte-remixicon";
+
+let { children } = $props();
+</script>
+
+
+<SLayout title="Settings">
+    {@render children()}
+    {#snippet left()}
+        <ul class="column">
+            <MenuLink href="/settings/appearance" icon={RiBrush2Line} label="Appearance" />
+        </ul>
+    {/snippet}
+    {#snippet right()}
+        <button class="primary card">Save</button>
+    {/snippet}
+</SLayout>
\ No newline at end of file
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
new file mode 100644
index 0000000..5254392
--- /dev/null
+++ b/src/routes/settings/+page.svelte
@@ -0,0 +1,2 @@
+
+Select a setting from the left menu to change its settings
\ No newline at end of file
diff --git a/src/routes/settings/appearance/+page.svelte b/src/routes/settings/appearance/+page.svelte
new file mode 100644
index 0000000..265b473
--- /dev/null
+++ b/src/routes/settings/appearance/+page.svelte
@@ -0,0 +1,2 @@
+
+TODO
\ No newline at end of file