diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte
index 14de4cdb..481bb01d 100644
--- a/src/svelte-interface/pages/settings/shortcuts.svelte
+++ b/src/svelte-interface/pages/settings/shortcuts.svelte
@@ -1,25 +1,37 @@
 
 <script lang="ts">
     import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+    import Switch from "../../components/Switch.svelte"
+    console.log(settingsState.shortcuts)
 
 
 </script>
 
-{#snippet Shortcuts([string, Shortcut]) }
+{#snippet Shortcuts({ name, enabled, Component, props }) }
 <div class="flex items-center justify-between px-4 py-3">
   <div class="pr-4">
-    <h2 class="text-sm font-bold">{Shortcut.name}</h2>
-    <p class="text-xs">{Shortcut.enabled}</p>
+    <h2 class="text-sm font-bold">{name}</h2>
+    <p class="text-xs">{enabled}</p>
+  </div>
+  <div>
+    <Component {...props} />
   </div>
 </div>
 {/snippet}
 
-
-<div class="text-xl">shortcuts tab</div>
-
 <div class="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100 dark:divide-zinc-700">
-    {#each Object.entries(settingsState.shortcuts) as shortcut}
-    <!-- do processing stuff here -->
-        {@render Shortcuts(shortcut)}
+    {#each settingsState.shortcuts as shortcut}
+    {@const shortcutFinal = {
+      ...shortcut,
+      name: shortcut.name,
+      enabled: shortcut.enabled,
+      Component: Switch,
+      props: {
+        // placeholder
+        // state: $settingsState.onoff,
+        // onChange: (isOn: boolean) => settingsState.onoff = isOn
+      }
+    }}
+      {@render Shortcuts(shortcutFinal)}
     {/each}
 </div>
\ No newline at end of file