diff --git a/frontend/src/components/Settings.svelte b/frontend/src/components/Settings.svelte
index c91c674..e860609 100644
--- a/frontend/src/components/Settings.svelte
+++ b/frontend/src/components/Settings.svelte
@@ -3,32 +3,34 @@
   import { Button } from "$lib/components/ui/button/index.js";
   import TrackerSetting from "./TrackerSetting.svelte";
 
-  const addTracker = async () => {
+  const addTracker = async (arg: number) => {
     const response = await fetch("/tracker", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        id: 4,
+        id: arg,
       }),
     });
 
     console.log(response);
   };
 
-  const deleteTracker = async () => {
+  const deleteTracker = async (arg: number) => {
     const response = await fetch("/tracker", {
       method: "DELETE",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        id: 4,
+        id: arg,
       }),
     });
     console.log(response);
   };
+
+  let id = $state(0);
 </script>
 
 <Drawer.Root>
@@ -41,8 +43,12 @@
       <Drawer.Description>This action cannot be undone.</Drawer.Description>
     </Drawer.Header>
     <div class="flex items-center justify-evenly">
-      <TrackerSetting action={addTracker} text="Add Tracker" />
-      <TrackerSetting action={deleteTracker} text="Delete Tracker" />
+      <TrackerSetting bind:value={id} action={addTracker} text="Add Tracker" />
+      <TrackerSetting
+        bind:value={id}
+        action={deleteTracker}
+        text="Delete Tracker"
+      />
     </div>
   </Drawer.Content>
 </Drawer.Root>
diff --git a/frontend/src/components/TrackerSetting.svelte b/frontend/src/components/TrackerSetting.svelte
index 015737b..e9817e3 100644
--- a/frontend/src/components/TrackerSetting.svelte
+++ b/frontend/src/components/TrackerSetting.svelte
@@ -4,14 +4,15 @@
 
   type Props = {
     text: string;
-    action: () => void;
+    action: (arg: number) => void;
+    value: number;
   };
 
-  let { action, text }: Props = $props();
+  let { action, text, value = $bindable() }: Props = $props();
 </script>
 
 <div>
   <h2>{text}</h2>
-  <Input placeholder={"1"} type="tel" />
-  <Button onclick={action}>Submit</Button>
+  <Input placeholder={"1"} type="tel" bind:value />
+  <Button onclick={() => action(value)}>Submit</Button>
 </div>