diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
new file mode 100644
index 0000000..2b960e1
--- /dev/null
+++ b/src/lib/components/Toggle.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let changeField;
+  export let onChangeFunc;
+  export let title: string;
+</script>
+
+<!-- <label class="inline-flex items-center cursor-pointer"> -->
+<div class="block">
+  <label class="inline-flex items-center cursor-pointer">
+    <input
+      type="checkbox"
+      class="sr-only peer"
+      checked={changeField}
+      onchange={onChangeFunc}
+    />
+    <div
+      class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+    ></div>
+    <span class="ms-3 text-sm font-bold text-gray-700 dark:text-gray-300">
+      {title}
+    </span>
+  </label>
+</div>