diff --git a/view/static/main.css b/view/static/main.css
index 71bc6cb..8ae586d 100644
--- a/view/static/main.css
+++ b/view/static/main.css
@@ -228,13 +228,7 @@
     color: var(--color-gray-11);
   }
 
-  .text-input:focus {
-    border-color: var(--color-accent-9);
-    box-shadow: 0 0 0 2px var(--color-accent-9);
-    outline: none;
-  }
-
-  .checkbox {
+  .checkbox-label {
     font-size: 0.875rem;
     line-height: 1.25rem;
     display: flex;
@@ -244,10 +238,79 @@
     cursor: pointer;
   }
 
-  .checkbox input {
+  .checkbox-label input {
     margin-right: 0.5rem;
   }
 
+  .checkbox {
+    appearance: none;
+    background-color: var(--color-gray-1);
+    font: inherit;
+    color: currentColor;
+    width: 1.25em;
+    height: 1.25em;
+    border: 0.15em solid var(--color-gray-8);
+    border-radius: 0.15em;
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+    transition: background-color 120ms, border-color 120ms;
+  }
+
+  .checkbox:checked {
+    background-color: var(--color-accent-9);
+    border-color: var(--color-accent-9);
+  }
+
+  .checkbox::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em white;
+  }
+
+  .checkbox:checked::before {
+    transform: scale(1);
+  }
+
+  .switch {
+    appearance: none;
+    background-color: var(--color-gray-3);
+    font: inherit;
+    color: currentColor;
+    width: 3em;
+    height: 1.5em;
+    border-radius: 100px;
+    border: 1px solid var(--color-gray-7);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+    transition: background-color 120ms, border-color 120ms;
+  }
+
+  .switch:checked {
+    background-color: var(--color-accent-9);
+    border-color: var(--color-accent-9);
+  }
+
+  .switch::before {
+    content: "";
+    width: 1.3em;
+    height: 1.3em;
+    clip-path: circle(30%);
+    transform: translateX(-50%);
+    transition: 120ms transform ease-in-out;
+    background-color: var(--color-gray-11);
+  }
+
+  .switch:checked::before {
+    transform: translateX(50%);
+    background-color: white;
+  }
+
   .button,
   .button-outline {
     display: inline-flex;
@@ -291,6 +354,12 @@
     cursor: pointer;
   }
 
+  :is(button, input):focus-visible {
+    border-color: var(--color-accent-7);
+    box-shadow: 0 0 0 2px var(--color-accent-7);
+    outline: none;
+  }
+
   /* Pagination */
 
   .pagination {
@@ -407,7 +476,6 @@
 .py-4{padding-top:1rem;padding-bottom:1rem;}
 .py-8{padding-top:2rem;padding-bottom:2rem;}
 .pr-2{padding-right:0.5rem;}
-.mx-2{margin-left:0.5rem;margin-right:0.5rem;}
 .my-6{margin-top:1.5rem;margin-bottom:1.5rem;}
 .mb-2{margin-bottom:0.5rem;}
 .mb-3{margin-bottom:0.75rem;}
@@ -445,9 +513,9 @@
 .flex-col{flex-direction:column;}
 .flex-wrap{flex-wrap:wrap;}
 .gap-2{gap:0.5rem;}
-.gap-3{gap:0.75rem;}
 .gap-x-2{column-gap:0.5rem;}
 .gap-x-4{column-gap:1rem;}
+.gap-x-6{column-gap:1.5rem;}
 .gap-x-8{column-gap:2rem;}
 .gap-y-2{row-gap:0.5rem;}
 .sticky{position:sticky;}
diff --git a/view/templates/parts/feeds_filter_dialog.html b/view/templates/parts/feeds_filter_dialog.html
index f88614d..1a443ec 100644
--- a/view/templates/parts/feeds_filter_dialog.html
+++ b/view/templates/parts/feeds_filter_dialog.html
@@ -9,9 +9,9 @@
 	<div class="columns-2 mb-6">
 		{% for feed in feeds %}
 		<label
-			class="flex items-center gap-3 px-2 py-1.5 hover:bg-gray-3 rounded"
+			class="checkbox-label px-2 py-1.5 hover:bg-gray-3 rounded"
 		>
-			<input type="checkbox" name="feeds[]" value="{{ feed['feed_name'] }}"
+			<input class="checkbox" type="checkbox" name="feeds[]" value="{{ feed['feed_name'] }}"
 			{{ 'checked' if feed['feed_name'] in selected_feeds }} > {{
 			feed['feed_name'] }}
 		</label>
diff --git a/view/templates/parts/filters.html b/view/templates/parts/filters.html
index 8b7542c..f7f1fb4 100644
--- a/view/templates/parts/filters.html
+++ b/view/templates/parts/filters.html
@@ -1,5 +1,5 @@
 <div class="container">
-	<div class="flex items-center flex-wrap shrink-0 gap-x-2 gap-y-2">
+	<div class="flex items-center flex-wrap shrink-0 gap-x-6 gap-y-2">
 		<form method="get" action="/" class="flex gap-x-2">
 			<input
 				class="text-input w-full max-w-20rem"
@@ -26,8 +26,9 @@
 			{% include "parts/feeds_filter_dialog.html" %}
 		</form>
 
-		<label class="checkbox mx-2">
+		<label class="checkbox-label">
 			<input
+				class="switch"
 				type="checkbox"
 				x-model="expandDiffs"
 				x-bind:checked="expandDiffs"
@@ -38,7 +39,7 @@
 
 	{% if selected_feeds|length > 0 %}
 	<div class="text-xs font-medium text-muted flex items-center mt-3">
-		<svg class="w-3 fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 14L4 5V3H20V5L14 14V20L10 22V14Z"></path></svg>
+		<svg class="w-3 shrink-0 fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 14L4 5V3H20V5L14 14V20L10 22V14Z"></path></svg>
 		<div>
 			Feeds: <span>{{ ", ".join(selected_feeds) }}</span>
 			<a href="/" class="ml-2">✕ Clear</a>
diff --git a/view/uno.config.ts b/view/uno.config.ts
index 02a64f3..b0f0006 100644
--- a/view/uno.config.ts
+++ b/view/uno.config.ts
@@ -240,13 +240,7 @@ const globalCss = (theme: Required<Theme>) => css`
     color: var(--color-gray-11);
   }
 
-  .text-input:focus {
-    border-color: var(--color-accent-9);
-    box-shadow: 0 0 0 2px var(--color-accent-9);
-    outline: none;
-  }
-
-  .checkbox {
+  .checkbox-label {
     font-size: ${theme.fontSize.sm[0]};
     line-height: ${theme.fontSize.sm[1]};
     display: flex;
@@ -256,10 +250,79 @@ const globalCss = (theme: Required<Theme>) => css`
     cursor: pointer;
   }
 
-  .checkbox input {
+  .checkbox-label input {
     margin-right: 0.5rem;
   }
 
+  .checkbox {
+    appearance: none;
+    background-color: var(--color-gray-1);
+    font: inherit;
+    color: currentColor;
+    width: 1.25em;
+    height: 1.25em;
+    border: 0.15em solid var(--color-gray-8);
+    border-radius: 0.15em;
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+    transition: background-color 120ms, border-color 120ms;
+  }
+
+  .checkbox:checked {
+    background-color: var(--color-accent-9);
+    border-color: var(--color-accent-9);
+  }
+
+  .checkbox::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em white;
+  }
+
+  .checkbox:checked::before {
+    transform: scale(1);
+  }
+
+  .switch {
+    appearance: none;
+    background-color: var(--color-gray-3);
+    font: inherit;
+    color: currentColor;
+    width: 3em;
+    height: 1.5em;
+    border-radius: 100px;
+    border: 1px solid var(--color-gray-7);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+    transition: background-color 120ms, border-color 120ms;
+  }
+
+  .switch:checked {
+    background-color: var(--color-accent-9);
+    border-color: var(--color-accent-9);
+  }
+
+  .switch::before {
+    content: "";
+    width: 1.3em;
+    height: 1.3em;
+    clip-path: circle(30%);
+    transform: translateX(-50%);
+    transition: 120ms transform ease-in-out;
+    background-color: var(--color-gray-11);
+  }
+
+  .switch:checked::before {
+    transform: translateX(50%);
+    background-color: white;
+  }
+
   .button,
   .button-outline {
     display: inline-flex;
@@ -303,6 +366,12 @@ const globalCss = (theme: Required<Theme>) => css`
     cursor: pointer;
   }
 
+  :is(button, input):focus-visible {
+    border-color: var(--color-accent-7);
+    box-shadow: 0 0 0 2px var(--color-accent-7);
+    outline: none;
+  }
+
   /* Pagination */
 
   .pagination {