diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 409b473..ab55bed 100755
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -9,7 +9,8 @@
     "bradlc.vscode-tailwindcss",
     "csstools.postcss",
     "formulahendry.auto-rename-tag",
-    "heybourn.headwind"
+    "heybourn.headwind",
+    "github.vscode-github-actions"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
diff --git a/src/app.css b/src/app.css
index b5c61c9..5393da7 100755
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  [type='checkbox']:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  }
+
+  [type='radio']:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [type='checkbox']:checked {
+      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23d1d5db' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    }
+
+    [type='radio']:checked {
+      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23d1d5db' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    }
+  }
+
+  [type='checkbox'],
+  [type='radio'] {
+    @apply focus:ring-0 focus:ring-offset-0;
+  }
+}
diff --git a/src/app.html b/src/app.html
index 32013d1..3b999cc 100755
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,7 @@
     <link rel="icon" href="/%sveltekit.assets%/favicon.svg" sizes="any" type="image/svg+xml" />
     <link rel="manifest" href="/%sveltekit.assets%/manifest.json" />
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#262626" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
diff --git a/src/components/TodoList.svelte b/src/components/TodoList.svelte
index a16084f..4e7b716 100755
--- a/src/components/TodoList.svelte
+++ b/src/components/TodoList.svelte
@@ -59,13 +59,13 @@
     <div
       class="flex items-center justify-between w-full gap-1 py-1 pl-2 pr-1 border rounded hover:border-gray-400 dark:border-gray-500 dark:hover:border-gray-400"
     >
-      <div class="flex gap-2 items-center">
+      <div class="flex items-center gap-2">
         <input
           type="checkbox"
           name="checkbox-{index}"
           id="checkbox-{index}"
           checked={child.status === 'checked'}
-          class="focus:ring-transparent focus:ring-offset-0 leading-tight bg-white checked:bg-gray-400 focus:checked:bg-gray-400 border rounded shadow border-gray-200 hover:border-gray-400 focus:border-gray-400 focus:checked:border-gray-400 checked:border-gray-400 dark:bg-neutral-700 dark:border-neutral-500 dark:focus:border-neutral-500 dark:checked:text-neutral-700 dark:checked:bg-neutral-700 dark:checked:border-neutral-500 dark:focus:checked:bg-neutral-700 dark:focus:checked:border-neutral-500 size-8"
+          class="leading-tight text-white bg-white border border-gray-200 rounded shadow focus:ring-transparent focus:ring-offset-0 checked:text-white checked:bg-white focus:checked:bg-white focus:checked:text-white hover:border-gray-400 focus:border-gray-400 focus:checked:border-gray-400 checked:border-gray-400 dark:bg-neutral-700 dark:border-neutral-500 dark:focus:border-neutral-500 dark:checked:text-neutral-700 dark:checked:bg-neutral-700 dark:checked:border-neutral-500 dark:focus:checked:bg-neutral-700 dark:focus:checked:border-neutral-500 size-8"
           on:change={(event) => handleCheck(event, child)}
         />
         <label for="checkbox-{index}">{child.title}</label>
@@ -121,7 +121,7 @@
       type="text"
       name="new-todo"
       placeholder="New to-do"
-      class="w-full h-10 px-2 py-2 mb-3 focus:ring-transparent focus:ring-offset-0 leading-tight text-gray-700 border rounded shadow appearance-none border-gray-200 hover:border-gray-400 focus:border-gray-400 focus:outline-none focus:shadow-outline dark:bg-neutral-800 dark:border-neutral-500 dark:focus:border-neutral-500 dark:text-gray-200 dark:placeholder:text-gray-400"
+      class="w-full h-10 px-2 py-2 mb-3 leading-tight text-gray-700 border border-gray-200 rounded shadow appearance-none focus:ring-transparent focus:ring-offset-0 hover:border-gray-400 focus:border-gray-400 focus:outline-none focus:shadow-outline dark:bg-neutral-800 dark:border-neutral-500 dark:focus:border-neutral-500 dark:text-gray-200 dark:placeholder:text-gray-400"
     />
     <StyledButton type="submit" name="add-todo"
       ><StyledVectorGraphic>
diff --git a/static/favicon.png b/static/favicon.png
index d20ec56..21733ca 100644
Binary files a/static/favicon.png and b/static/favicon.png differ
diff --git a/static/manifest.json b/static/manifest.json
index 546b7f3..ac85a29 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -2,8 +2,8 @@
   "short_name": "Simple Todos",
   "name": "simple-collaborative-todos",
   "start_url": "/",
-  "theme_color": "#FFFFFF",
-  "background_color": "#FFFFFF",
+  "theme_color": "##262626",
+  "background_color": "##262626",
   "icons": [
     {
       "src": "favicon-dark.svg",
@@ -12,7 +12,7 @@
       "purpose": "any"
     },
     {
-      "src": "favicon-dark.png",
+      "src": "favicon.png",
       "type": "image/png",
       "sizes": "512x512",
       "purpose": "any maskable"