diff --git a/assets/css/litespeed-dark-mode.css b/assets/css/litespeed-dark-mode.css
index a37dce31e..9c03b85d1 100644
--- a/assets/css/litespeed-dark-mode.css
+++ b/assets/css/litespeed-dark-mode.css
@@ -161,16 +161,22 @@ body.litespeed-darkmode g.litespeed-pie_info .litespeed-pie-done {
 }
 
 @media (prefers-color-scheme: dark) {
-	body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-switch input:not(:checked) + label {
+	body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-switch {
 		background-color: #3e3e42;
+		border-color: #5a5a5d;
+		box-shadow: 0 2px 0 #5a5a5d;
+	}
+	body[class*="litespeed-cache_page_litespeed"]:not(.litespeed-lightmode) .litespeed-switch input:not(:checked) + label {
 		color: #e0e0e0;
-		border: 1px solid #5a5a5d;
 	}
 }
-body.litespeed-darkmode .litespeed-switch input:not(:checked) + label {
+body.litespeed-darkmode .litespeed-switch {
 	background-color: #3e3e42;
+	border-color: #5a5a5d;
+	box-shadow: 0 2px 0 #5a5a5d;
+}
+body.litespeed-darkmode .litespeed-switch input:not(:checked) + label {
 	color: #e0e0e0;
-	border: 1px solid #5a5a5d;
 }
 
 /* Column with boxes layout */
diff --git a/assets/css/litespeed.css b/assets/css/litespeed.css
index 7ddb5e910..978a39794 100644
--- a/assets/css/litespeed.css
+++ b/assets/css/litespeed.css
@@ -1234,89 +1234,101 @@ h3 .litespeed-learn-more {
 	margin: 0 0 0;
 	display: inline-flex;
 	position: relative;
+	background-color: #f9fafc;
+	border: 1px solid #ccc;
+	border-bottom: none;
+	box-shadow: 0 2px 0 #ccc;
+	border-radius: 3px;
+	isolation: isolate;
+	transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.rtl .litespeed-switch {
-	flex-direction: row-reverse;
+.litespeed-switch label::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 100%;
+	height: 3px;
+	background-color: #ff8c00;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+	pointer-events: none;
+	z-index: 3;
 }
 
-.litespeed-switch input:checked:active + label {
-	box-shadow:
-		0 2px 0 rgba(27, 146, 146, 0.7),
-		inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
+.litespeed-switch input:not(:checked) + label:hover::after {
+	opacity: 1;
 }
 
-.litespeed-switch input:checked + label {
+.litespeed-switch::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: calc(100% / var(--litespeed-switch-count, 2));
 	background-color: #36b0b0;
-	color: #fff;
-	border: 1px solid #36b0b0;
-	box-shadow: 0 2px 0 #1b9292;
-	z-index: 2;
-	text-shadow:
-		0 -1px 1px #1b9292,
-		1px 0 1px #1b9292,
-		0 1px 1px #1b9292,
-		-1px 0 1px #1b9292;
+	border-radius: 2px;
+	transform: translateX(0);
+	transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
+	z-index: 1;
+	pointer-events: none;
+}
+
+.litespeed-switch:has(input:nth-of-type(2):checked)::before { transform: translateX(100%); }
+.litespeed-switch:has(input:nth-of-type(3):checked)::before { transform: translateX(200%); }
+.litespeed-switch:has(input:nth-of-type(4):checked)::before { transform: translateX(300%); }
+.litespeed-switch:has(input:nth-of-type(5):checked)::before { transform: translateX(400%); }
+
+.litespeed-switch:has(input:checked:active)::before {
+	box-shadow:
+		0 2px 0 rgba(27, 146, 146, 0.7),
+		inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
 }
 
 .litespeed-switch label {
 	font-size: 14px;
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1 1 0;
 	min-width: 72px;
-	background-color: #f9fafc;
 	font-weight: 400;
 	text-align: center;
+	white-space: nowrap;
 	padding: 6px 12px 5px 12px;
 	cursor: pointer;
-	border: 1px solid #ccc;
-	border-bottom: none;
-	box-shadow: 0 2px 0 #ccc;
+	background-color: transparent;
+	border: none;
+	color: #2c3338;
 	position: relative;
-}
-
-.litespeed-switch label:not(:last-child) {
-	margin-right: -1px;
-}
-
-.litespeed-switch label:last-child {
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
-}
-
-.litespeed-switch label:first-of-type {
-	border-top-left-radius: 3px;
-	border-bottom-left-radius: 3px;
-}
-
-.litespeed-switch input:hover + label {
-	border-color: #1a9292;
-	box-shadow: 0 2px 0 #1a9292;
 	z-index: 2;
-	color: #117171;
+	transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.litespeed-switch input:focus + label {
-	color: #117171;
-	box-shadow: 0 0px 0px 2px rgba(28, 138, 128, 0.85);
-	border-color: transparent;
-	z-index: 2;
+.litespeed-switch input:checked + label {
+	color: #fff;
+	text-shadow:
+		0 -1px 1px #1b9292,
+		1px 0 1px #1b9292,
+		0 1px 1px #1b9292,
+		-1px 0 1px #1b9292;
 }
 
-.litespeed-switch input:focus + label + input + input:hover + label,
-.litespeed-switch input:focus + label + input:hover + label {
-	z-index: 1;
+.litespeed-switch label:hover {
+	color: #117171;
 }
 
-.litespeed-switch input:active + label {
-	box-shadow:
-		0 2px 0 #1b9292,
-		inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
+.litespeed-switch input:checked + label:hover,
+.litespeed-switch input:checked + label:focus {
+	color: #fff;
 }
 
-.litespeed-switch input:checked:hover + label,
-.litespeed-switch input:checked:focus + label {
-	background-color: #36b0b0;
-	color: #fff;
+.litespeed-switch input:focus-visible + label {
+	outline: 2px solid rgba(28, 138, 128, 0.85);
+	outline-offset: -2px;
+	border-radius: 3px;
 }
 
 .litespeed-switch input {
@@ -1324,8 +1336,24 @@ h3 .litespeed-learn-more {
 	position: absolute;
 	z-index: -1;
 	margin: 0;
+	opacity: 0;
+	pointer-events: none;
 }
 
+.rtl .litespeed-switch {
+	flex-direction: row-reverse;
+}
+
+.rtl .litespeed-switch::before {
+	left: auto;
+	right: 0;
+}
+
+.rtl .litespeed-switch:has(input:nth-of-type(2):checked)::before { transform: translateX(-100%); }
+.rtl .litespeed-switch:has(input:nth-of-type(3):checked)::before { transform: translateX(-200%); }
+.rtl .litespeed-switch:has(input:nth-of-type(4):checked)::before { transform: translateX(-300%); }
+.rtl .litespeed-switch:has(input:nth-of-type(5):checked)::before { transform: translateX(-400%); }
+
 .litespeed-cache-purgeby-text {
 	margin: 0;
 	display: inline-block;
@@ -1367,8 +1395,8 @@ h3 .litespeed-learn-more {
 	top: 0;
 	bottom: 0;
 	left: 0;
-	transition: left 0.35s;
-	-webkit-transition: left 0.35s;
+	transition: left 0.22s;
+	-webkit-transition: left 0.22s;
 	-moz-user-select: none;
 	-webkit-user-select: none;
 }
@@ -1400,6 +1428,13 @@ h3 .litespeed-learn-more {
 	height: 100%;
 	width: 0px;
 	border-width: 0 1px;
+	transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.litespeed-toggle:hover .litespeed-toggle-handle.litespeed-toggle-btn-default,
+.litespeed-toggle:focus-within .litespeed-toggle-handle.litespeed-toggle-btn-default {
+	background-color: #ff8c00;
+	border-color: #ff8c00;
 }
 
 .litespeed-toggle-off {
@@ -2011,7 +2046,6 @@ input.litespeed-input-warning {
 
 	.litespeed-switch {
 		max-width: 100%;
-		flex-wrap: wrap;
 	}
 
 	.litespeed-switch + .litespeed-warning {
diff --git a/src/admin-display.cls.php b/src/admin-display.cls.php
index 5fcf883bf..6f17a9471 100644
--- a/src/admin-display.cls.php
+++ b/src/admin-display.cls.php
@@ -1194,12 +1194,14 @@ public function build_toggle( $id, $checked = null, $title_on = null, $title_off
 	public function build_switch( $id, $title_list = false ) {
 		$this->enroll( $id );
 
-		echo '<div class="litespeed-switch">';
-
 		if ( ! $title_list ) {
 			$title_list = [ __( 'OFF', 'litespeed-cache' ), __( 'ON', 'litespeed-cache' ) ];
 		}
 
+		// Drive the sliding-pill width by the option count so 3+ option switches don't render a half-width pill.
+		$count = count( $title_list );
+		echo '<div class="litespeed-switch" style="--litespeed-switch-count:' . (int) $count . ';">';
+
 		foreach ( $title_list as $k => $v ) {
 			$this->_build_radio( $id, $k, $v );
 		}
diff --git a/tpl/esi_widget_edit.php b/tpl/esi_widget_edit.php
index 54a6ac8fc..a95f0696c 100644
--- a/tpl/esi_widget_edit.php
+++ b/tpl/esi_widget_edit.php
@@ -43,7 +43,7 @@
 	<b><?php esc_html_e( 'Enable ESI', 'litespeed-cache' ); ?>:</b>
 	&nbsp;
 	<div class="litespeed-inline">
-		<div class="litespeed-switch litespeed-mini">
+		<div class="litespeed-switch litespeed-mini" style="--litespeed-switch-count:3;">
 		<?php
 			$esi_option = ESI::WIDGET_O_ESIENABLE;
 			$name       = $widget->get_field_name( $esi_option );
diff --git a/tpl/toolbox/purge.tpl.php b/tpl/toolbox/purge.tpl.php
index 6fb79ab9d..5ea6cd2b9 100644
--- a/tpl/toolbox/purge.tpl.php
+++ b/tpl/toolbox/purge.tpl.php
@@ -191,7 +191,7 @@
 
 <?php $this->form_action( Core::ACTION_PURGE_BY ); ?>
 	<div class="litespeed-row">
-		<div class="litespeed-switch litespeed-mini litespeed-right20 litespeed-margin-bottom10">
+		<div class="litespeed-switch litespeed-mini litespeed-right20 litespeed-margin-bottom10" style="--litespeed-switch-count:4;">
 			<?php $val = Admin_Display::PURGEBY_CAT; ?>
 			<input type="radio" autocomplete="off" name="<?php echo esc_attr( Admin_Display::PURGEBYOPT_SELECT ); ?>" id="purgeby_option_category" value="<?php echo esc_attr( $val ); ?>" checked />
 			<label for="purgeby_option_category"><?php esc_html_e( 'Category', 'litespeed-cache' ); ?></label>