diff --git a/web-svelte/src/components/SciFi-Checkbox.svelte b/web-svelte/src/components/SciFi-Checkbox.svelte
index c774a08..730df0e 100644
--- a/web-svelte/src/components/SciFi-Checkbox.svelte
+++ b/web-svelte/src/components/SciFi-Checkbox.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
 
+const emit = createEventDispatcher();
+
+export let disabled: boolean = false;
+export let state: boolean;
 export let name: string;
 export let id: string;
 
-const emit = createEventDispatcher();
-
-let enabled = false;
-
-function toggleState() {
-	enabled = !enabled;
-	emit(`toggle`, enabled);
+function onToggle() {
+	emit(`toggle`, id);
 };
 </script>
 
-<label class="container">
+<label class="container" {disabled}>
 	<slot></slot>
-	<input type="checkbox" {name} {id}>
+	<input
+		type="checkbox"
+		{disabled}
+		{name}
+		{id}
+		bind:checked="{state}"
+		on:click="{onToggle}"
+	>
 	<span class="checkmark"></span>
 </label>