diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e2d89810..f13b9f7a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 The following is a curated list of changes in the Enact agate module, newest changes on the top.
 
+## [unreleased]
+
+### Fixed
+
+- `agate/ToggleButton` underline position for `huge`,`small` and `smallest` sizes
+
 ## [2.0.11] - 2024-07-22
 
 ### Changed
diff --git a/ToggleButton/ToggleButton.module.less b/ToggleButton/ToggleButton.module.less
index ad0884374..3b9be66aa 100644
--- a/ToggleButton/ToggleButton.module.less
+++ b/ToggleButton/ToggleButton.module.less
@@ -18,6 +18,27 @@
 			transform: @agate-togglebutton-indicator-transform;
 		}
 
+		&.huge {
+			&::after {
+				height: @agate-togglebutton-huge-indicator-height;
+				.position(@agate-togglebutton-huge-indicator-position);
+			}
+		}
+
+		&.small {
+			&::after {
+				height: @agate-togglebutton-small-indicator-height;
+				.position(@agate-togglebutton-small-indicator-position);
+			}
+		}
+
+		&.smallest {
+			&::after {
+				height: @agate-togglebutton-smallest-indicator-height;
+				.position(@agate-togglebutton-smallest-indicator-position);
+			}
+		}
+
 		&.underline {
 			.client {
 				padding-left: @agate-togglebutton-client-padding-left;
diff --git a/styles/variables-base.less b/styles/variables-base.less
index b4ef80624..0a7e80518 100644
--- a/styles/variables-base.less
+++ b/styles/variables-base.less
@@ -881,9 +881,15 @@
 @agate-togglebutton-small-min-width: @agate-button-small-height;
 @agate-togglebutton-smallest-min-width: @agate-button-smallest-height;
 @agate-togglebutton-indicator-position: 0;
+@agate-togglebutton-huge-indicator-position: auto 75px 33px 75px;
+@agate-togglebutton-small-indicator-position: auto 24px 6px 24px;
+@agate-togglebutton-smallest-indicator-position: auto 18px 3px 18px;
 @agate-togglebutton-indicator-border-width: 0;
 @agate-togglebutton-indicator-border-radius: @agate-button-border-radius;
 @agate-togglebutton-indicator-height: 6px;
+@agate-togglebutton-huge-indicator-height: 6px;
+@agate-togglebutton-small-indicator-height: 3px;
+@agate-togglebutton-smallest-indicator-height: 2px;
 @agate-togglebutton-indicator-transform: none;
 @agate-togglebutton-indicator-width: auto;
 
diff --git a/styles/variables-carbon.less b/styles/variables-carbon.less
index a827814b0..b2e751d67 100644
--- a/styles/variables-carbon.less
+++ b/styles/variables-carbon.less
@@ -150,5 +150,6 @@
 // ToggleButton
 // ---------------------------------------
 @agate-togglebutton-indicator-position: auto 33px 9px 33px;
+@agate-togglebutton-smallest-indicator-position: auto 18px 6px 18px;
 @agate-togglebutton-indicator-height: 4px;
 @agate-togglebutton-indicator-border-width: 1px;
diff --git a/styles/variables-electro.less b/styles/variables-electro.less
index 750a4245b..abeb0090d 100644
--- a/styles/variables-electro.less
+++ b/styles/variables-electro.less
@@ -199,6 +199,8 @@
 // ToggleButton
 // ---------------------------------------
 @agate-togglebutton-indicator-position: auto 33px 9px 33px;
+@agate-togglebutton-huge-indicator-position: auto 99px 33px 63px;
+@agate-togglebutton-smallest-indicator-position: auto 15px 6px 21px;
 @agate-togglebutton-indicator-border-radius: 0;
 @agate-togglebutton-indicator-transform: translateX(-6px) skewX(@electro-skew);
 @agate-togglebutton-indicator-border-width: 1px;
diff --git a/styles/variables-silicon.less b/styles/variables-silicon.less
index 44185c9fa..e0827de26 100644
--- a/styles/variables-silicon.less
+++ b/styles/variables-silicon.less
@@ -555,7 +555,13 @@
 @agate-togglebutton-smallest-min-width: 108px;
 @agate-togglebutton-indicator-border-radius: 50%;
 @agate-togglebutton-indicator-position: 50% auto auto;
+@agate-togglebutton-huge-indicator-position: @agate-togglebutton-indicator-position;
+@agate-togglebutton-small-indicator-position: @agate-togglebutton-indicator-position;
+@agate-togglebutton-smallest-indicator-position: @agate-togglebutton-indicator-position;
 @agate-togglebutton-indicator-height: 15px;
+@agate-togglebutton-huge-indicator-height: @agate-togglebutton-indicator-height;
+@agate-togglebutton-small-indicator-height: @agate-togglebutton-indicator-height;
+@agate-togglebutton-smallest-indicator-height: @agate-togglebutton-indicator-height;
 @agate-togglebutton-indicator-transform: translate(-50%, -50%);
 @agate-togglebutton-indicator-width: @agate-togglebutton-indicator-height;
 
diff --git a/styles/variables-titanium.less b/styles/variables-titanium.less
index 5fe50fdb6..f22c81f0e 100644
--- a/styles/variables-titanium.less
+++ b/styles/variables-titanium.less
@@ -96,4 +96,7 @@
 // ToggleButton
 // ---------------------------------------
 @agate-togglebutton-indicator-position: auto 21px 9px 21px;
+@agate-togglebutton-huge-indicator-position: auto 63px 33px 63px;
+@agate-togglebutton-small-indicator-position: auto 18px 6px 18px;
+@agate-togglebutton-smallest-indicator-position: auto 15px 6px 15px;
 @agate-togglebutton-indicator-border-width: 1px;
diff --git a/tests/screenshot/apps/components/ToggleButton.js b/tests/screenshot/apps/components/ToggleButton.js
index 7c7bf521b..17731cb30 100644
--- a/tests/screenshot/apps/components/ToggleButton.js
+++ b/tests/screenshot/apps/components/ToggleButton.js
@@ -3,6 +3,13 @@ import ToggleButton from '../../../../ToggleButton';
 const ToggleButtonTests = [
 	<ToggleButton>Click me!</ToggleButton>,
 	<ToggleButton underline>Click me!</ToggleButton>,
+	<ToggleButton underline defaultSelected>Click me!</ToggleButton>,
+	<ToggleButton underline size="huge">Click me!</ToggleButton>,
+	<ToggleButton underline size="huge" defaultSelected>Click me!</ToggleButton>,
+	<ToggleButton underline size="small">Click me!</ToggleButton>,
+	<ToggleButton underline size="small" defaultSelected>Click me!</ToggleButton>,
+	<ToggleButton underline size="smallest">Click me!</ToggleButton>,
+	<ToggleButton underline size="smallest" defaultSelected>Click me!</ToggleButton>,
 	<ToggleButton size="small">Click me!</ToggleButton>
 ];