diff --git a/web/src/js/__tests__/components/Modes/__snapshots__/RegularSpec.tsx.snap b/web/src/js/__tests__/components/Modes/__snapshots__/RegularSpec.tsx.snap
index 943d5622a..4c429b979 100644
--- a/web/src/js/__tests__/components/Modes/__snapshots__/RegularSpec.tsx.snap
+++ b/web/src/js/__tests__/components/Modes/__snapshots__/RegularSpec.tsx.snap
@@ -19,14 +19,21 @@ exports[`RegularSpec 1`] = `
       >
         <input
           checked=""
+          id="mode-checkbox-:r0:"
+          name="mode-checkbox-:r0:"
           type="checkbox"
         />
-        Run HTTP/S Proxy
+        <label
+          for="mode-checkbox-:r0:"
+          style="margin-bottom: 0px; font-weight: normal;"
+        >
+          Run HTTP/S Proxy
+        </label>
         <div
           class="mode-popover"
         >
           <button
-            popovertarget=":r0:"
+            popovertarget=":r1:"
           >
             <i
               aria-hidden="true"
@@ -34,7 +41,7 @@ exports[`RegularSpec 1`] = `
             />
           </button>
           <div
-            id=":r0:"
+            id=":r1:"
             popover="auto"
           >
             <h4>
@@ -93,14 +100,21 @@ exports[`RegularSpec 2`] = `
       >
         <input
           checked=""
+          id="mode-checkbox-:r2:"
+          name="mode-checkbox-:r2:"
           type="checkbox"
         />
-        Run HTTP/S Proxy
+        <label
+          for="mode-checkbox-:r2:"
+          style="margin-bottom: 0px; font-weight: normal;"
+        >
+          Run HTTP/S Proxy
+        </label>
         <div
           class="mode-popover"
         >
           <button
-            popovertarget=":r1:"
+            popovertarget=":r3:"
           >
             <i
               aria-hidden="true"
@@ -108,7 +122,7 @@ exports[`RegularSpec 2`] = `
             />
           </button>
           <div
-            id=":r1:"
+            id=":r3:"
             popover="auto"
           >
             <h4>
diff --git a/web/src/js/components/Modes/Dns.tsx b/web/src/js/components/Modes/Dns.tsx
index 89356ec53..64a85010d 100644
--- a/web/src/js/components/Modes/Dns.tsx
+++ b/web/src/js/components/Modes/Dns.tsx
@@ -49,11 +49,11 @@ function DnsRow({
         <div>
             <ModeToggle
                 value={server.active}
+                label="Run DNS Server"
                 onChange={() =>
                     dispatch(setActive({ server, value: !server.active }))
                 }
             >
-                Run DNS Server
                 <Popover>
                     <p>Listen Host</p>
                     <ValueEditor
diff --git a/web/src/js/components/Modes/Local.tsx b/web/src/js/components/Modes/Local.tsx
index 71a4028c1..8c3d0a757 100644
--- a/web/src/js/components/Modes/Local.tsx
+++ b/web/src/js/components/Modes/Local.tsx
@@ -47,11 +47,11 @@ function LocalRow({
         <div>
             <ModeToggle
                 value={server.active}
+                label="Intercept traffic for"
                 onChange={() =>
                     dispatch(setActive({ server, value: !server.active }))
                 }
             >
-                Intercept traffic for
                 <ValueEditor
                     className="mode-local-input"
                     content={server.applications || ""}
diff --git a/web/src/js/components/Modes/ModeToggle.tsx b/web/src/js/components/Modes/ModeToggle.tsx
index c5c16234e..7ce8cb359 100644
--- a/web/src/js/components/Modes/ModeToggle.tsx
+++ b/web/src/js/components/Modes/ModeToggle.tsx
@@ -2,14 +2,34 @@ import * as React from "react";
 
 type ModeToggleProps = {
     value: boolean;
+    label: string;
     onChange: (e: React.ChangeEvent) => void;
     children: React.ReactNode;
 };
 
-export function ModeToggle({ value, onChange, children }: ModeToggleProps) {
+export function ModeToggle({
+    value,
+    onChange,
+    children,
+    label,
+}: ModeToggleProps) {
+    const id = React.useId();
+
     return (
         <div className="mode-entry">
-            <input type="checkbox" checked={value} onChange={onChange} />
+            <input
+                type="checkbox"
+                name={`mode-checkbox-${id}`}
+                id={`mode-checkbox-${id}`}
+                checked={value}
+                onChange={onChange}
+            />
+            <label
+                htmlFor={`mode-checkbox-${id}`}
+                style={{ marginBottom: 0, fontWeight: "normal" }}
+            >
+                {label}
+            </label>
             {children}
         </div>
     );
diff --git a/web/src/js/components/Modes/Regular.tsx b/web/src/js/components/Modes/Regular.tsx
index a203893f8..f379ecc3e 100644
--- a/web/src/js/components/Modes/Regular.tsx
+++ b/web/src/js/components/Modes/Regular.tsx
@@ -54,11 +54,11 @@ function RegularRow({
         <div>
             <ModeToggle
                 value={server.active}
+                label="Run HTTP/S Proxy"
                 onChange={() =>
                     dispatch(setActive({ server, value: !server.active }))
                 }
             >
-                Run HTTP/S Proxy
                 <Popover>
                     <p>Listen Host</p>
                     <ValueEditor
diff --git a/web/src/js/components/Modes/Reverse.tsx b/web/src/js/components/Modes/Reverse.tsx
index e4d893251..86391cb2a 100644
--- a/web/src/js/components/Modes/Reverse.tsx
+++ b/web/src/js/components/Modes/Reverse.tsx
@@ -85,11 +85,11 @@ function ReverseToggleRow({
         <div>
             <ModeToggle
                 value={server.active}
+                label="Forward"
                 onChange={() => {
                     dispatch(setActive({ server, value: !server.active }));
                 }}
             >
-                Forward
                 <Dropdown
                     text={inner}
                     className="btn btn-default btn-xs mode-reverse-dropdown"
@@ -106,7 +106,13 @@ function ReverseToggleRow({
                         </MenuItem>
                     ))}
                 </Dropdown>{" "}
-                traffic from{" "}
+                <span
+                    onClick={() => {
+                        dispatch(setActive({ server, value: !server.active }));
+                    }}
+                >
+                    traffic from
+                </span>
                 <ValueEditor
                     className="mode-reverse-input"
                     content={server.listen_host || ""}
diff --git a/web/src/js/components/Modes/Socks.tsx b/web/src/js/components/Modes/Socks.tsx
index 62734e703..d578f838b 100644
--- a/web/src/js/components/Modes/Socks.tsx
+++ b/web/src/js/components/Modes/Socks.tsx
@@ -55,11 +55,11 @@ function SocksRow({
         <div>
             <ModeToggle
                 value={server.active}
+                label="Run SOCKS Proxy"
                 onChange={() =>
                     dispatch(setActive({ server, value: !server.active }))
                 }
             >
-                Run SOCKS Proxy
                 <Popover>
                     <p>Listen Host</p>
                     <ValueEditor
diff --git a/web/src/js/components/Modes/Transparent.tsx b/web/src/js/components/Modes/Transparent.tsx
index 41159bfec..4dc67e89f 100644
--- a/web/src/js/components/Modes/Transparent.tsx
+++ b/web/src/js/components/Modes/Transparent.tsx
@@ -61,11 +61,11 @@ function TransparentRow({
         <div>
             <ModeToggle
                 value={server.active}
+                label="Run Transparent Proxy"
                 onChange={() =>
                     dispatch(setActive({ server, value: !server.active }))
                 }
             >
-                Run Transparent Proxy
                 <Popover>
                     <p>Listen Host</p>
                     <ValueEditor
diff --git a/web/src/js/components/Modes/Upstream.tsx b/web/src/js/components/Modes/Upstream.tsx
index f0ccc3c1b..559921844 100644
--- a/web/src/js/components/Modes/Upstream.tsx
+++ b/web/src/js/components/Modes/Upstream.tsx
@@ -55,11 +55,11 @@ function UpstreamRow({
         <div>
             <ModeToggle
                 value={server.active}
+                label="Run HTTP/S Proxy and forward requests to"
                 onChange={() => {
                     dispatch(setActive({ server, value: !server.active }));
                 }}
             >
-                Run HTTP/S Proxy and forward requests to
                 <ValueEditor
                     className="mode-upstream-input"
                     content={server.destination?.toString() || ""}
diff --git a/web/src/js/components/Modes/Wireguard.tsx b/web/src/js/components/Modes/Wireguard.tsx
index fc45bc3eb..ce890bead 100644
--- a/web/src/js/components/Modes/Wireguard.tsx
+++ b/web/src/js/components/Modes/Wireguard.tsx
@@ -54,11 +54,11 @@ function WireGuardRow({
         <div>
             <ModeToggle
                 value={server.active}
+                label="Run WireGuard Server"
                 onChange={() =>
                     dispatch(setActive({ server, value: !server.active }))
                 }
             >
-                Run WireGuard Server
                 <Popover>
                     <p>Listen Host</p>
                     <ValueEditor