diff --git a/src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/Do0x20EncodeDisplay.razor b/src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/Do0x20EncodeDisplay.razor
index 1b80983..559fc71 100644
--- a/src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/Do0x20EncodeDisplay.razor
+++ b/src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/Do0x20EncodeDisplay.razor
@@ -3,11 +3,19 @@
 @using DnsmasqWebUI.Models.Dnsmasq.EffectiveConfig
 @inherits EffectiveConfigValueDisplayBase
 
-@* do-0x20-encode / no-0x20-encode: tri-state. Checkbox shows Enabled vs not-Enabled; uncheck maps back to Default when that was the value at activation, else Disabled. *@
+@* do-0x20-encode / no-0x20-encode: tri-state. Switch shows Enabled vs not-Enabled; uncheck maps back to Default when that was the value at activation, else Disabled. *@
 @if (IsActiveEditor && Descriptor.GetSource()?.IsReadOnly != true)
 {
     var isOn = GetState() == ExplicitToggleState.Enabled;
-    <input type="checkbox" class="form-check-input" checked="@isOn" @onchange="OnCheckedChange" @onfocusout="OnCommitRequested" />
+    <div class="form-check form-switch ec-effective-switch">
+        <input type="checkbox"
+               class="form-check-input"
+               checked="@isOn"
+               aria-label="Enable @Descriptor.OptionName"
+               title="Set @Descriptor.OptionName"
+               @onchange="OnCheckedChange"
+               @onfocusout="OnCommitRequested" />
+    </div>
 }
 else
 {
diff --git a/src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/FlagValueDisplay.razor b/src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/FlagValueDisplay.razor
index 51265fd..50e1f25 100644
--- a/src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/FlagValueDisplay.razor
+++ b/src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/FlagValueDisplay.razor
@@ -2,11 +2,19 @@
 @using DnsmasqWebUI.Models.Dnsmasq
 @inherits EffectiveConfigValueDisplayBase
 
-@* Reusable value-only display for boolean/flag options. When active editor: checkbox (unless readonly); View: "Enabled" / "Disabled". Pending value shown until save. *@
+@* Reusable value-only display for boolean/flag options. When active editor: switch (unless readonly); View: "Enabled" / "Disabled". Pending value shown until save. *@
 @if (IsActiveEditor && Descriptor.GetSource()?.IsReadOnly != true)
 {
     var isSet = GetEffectiveDisplayValue() is bool b && b;
-    <input type="checkbox" class="form-check-input" checked="@isSet" @onchange="OnCheckedChange" @onfocusout="OnCommitRequested" />
+    <div class="form-check form-switch ec-effective-switch">
+        <input type="checkbox"
+               class="form-check-input"
+               checked="@isSet"
+               aria-label="Enable @Descriptor.OptionName"
+               title="Set @Descriptor.OptionName"
+               @onchange="OnCheckedChange"
+               @onfocusout="OnCommitRequested" />
+    </div>
 }
 else
 {
diff --git a/src/DnsmasqWebUI/wwwroot/app.css b/src/DnsmasqWebUI/wwwroot/app.css
index 2462889..3ac73c3 100644
--- a/src/DnsmasqWebUI/wwwroot/app.css
+++ b/src/DnsmasqWebUI/wwwroot/app.css
@@ -79,6 +79,24 @@ a:hover, .btn-link:hover {
     outline: 0;
 }
 
+/* Effective-config switch: shared styling for flag, do-0x20-encode, and key-only-or-value displays */
+.ec-effective-switch {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    min-height: 1.25rem;
+    padding-left: 0;
+    margin-bottom: 0;
+}
+
+.ec-effective-switch .form-check-input {
+    float: none;
+    margin: 0;
+    cursor: pointer;
+    position: relative;
+    top: 2px;
+}
+
 .content {
     padding-top: var(--app-spacing-lg);
     padding-bottom: var(--app-spacing-2xl);