diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts/anvilCheckboxGroupWidgetCanvas.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts/anvilCheckboxGroupWidgetCanvas.snap.png
index 41d4689649c5..5dc2f3861499 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts/anvilCheckboxGroupWidgetCanvas.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts/anvilCheckboxGroupWidgetCanvas.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts/anvilCheckboxGroupWidgetCanvasDark.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts/anvilCheckboxGroupWidgetCanvasDark.snap.png
index 3d7ca9eab179..85ef8f915a88 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts/anvilCheckboxGroupWidgetCanvasDark.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts/anvilCheckboxGroupWidgetCanvasDark.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeploy.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeploy.snap.png
index 01dcfe8b1e4c..c149c2d5a27c 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeploy.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeploy.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployIpad2.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployIpad2.snap.png
index 3451b93426ab..7ba16ef5bea9 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployIpad2.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployIpad2.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployIphone6.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployIphone6.snap.png
index 5803ea4b0356..612fc773e6e6 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployIphone6.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployIphone6.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployMacbook13.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployMacbook13.snap.png
index 1cb1173205d2..dfbd6cc8b021 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployMacbook13.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployMacbook13.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetCanvas.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetCanvas.snap.png
index a015c796c7fb..be703ef99250 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetCanvas.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetCanvas.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetCanvasDark.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetCanvasDark.snap.png
index e9c9dbf33967..7d37c87759a8 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetCanvasDark.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetCanvasDark.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeploy.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeploy.snap.png
index 36580ae1afde..f2d5f5f15c7d 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeploy.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeploy.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployIpad2.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployIpad2.snap.png
index 19bf761e036b..86b317d742d9 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployIpad2.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployIpad2.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployIphone6.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployIphone6.snap.png
index 4e5273cac29e..3d3b21048728 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployIphone6.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployIphone6.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployMacbook13.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployMacbook13.snap.png
index 5270ba9514ab..afe9cee68203 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployMacbook13.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetDeployMacbook13.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetPreview.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetPreview.snap.png
index 96630edb4991..e6559802ce62 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetPreview.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts/anvilRadioGroupWidgetPreview.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetCanvas.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetCanvas.snap.png
index fe2a2fb8ce0a..00676699313e 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetCanvas.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetCanvas.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetCanvasDark.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetCanvasDark.snap.png
index b5f35e5ecf75..217db7725bed 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetCanvasDark.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetCanvasDark.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeploy.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeploy.snap.png
index fecb64643ea4..0a4be317be62 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeploy.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeploy.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployIpad2.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployIpad2.snap.png
index 0a2e11d0433e..9ddee4015398 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployIpad2.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployIpad2.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployIphone6.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployIphone6.snap.png
index 1cc436e5ccc0..13c71918e4bc 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployIphone6.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployIphone6.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployMacbook13.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployMacbook13.snap.png
index a72fabeb58a8..14ce290b579f 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployMacbook13.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetDeployMacbook13.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetPreview.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetPreview.snap.png
index e3610e3153f6..5f8695cff527 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetPreview.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts/anvilTableWidgetPreview.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetCanvas.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetCanvas.snap.png
index 615d84517603..cd7137bbf69d 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetCanvas.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetCanvas.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetCanvasDark.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetCanvasDark.snap.png
index 30c67d22efe9..db030580e11e 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetCanvasDark.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetCanvasDark.snap.png differ
diff --git a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetDeployIphone6.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetDeployIphone6.snap.png
index 96a7f9a9be5f..a9ca428802fd 100644
Binary files a/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetDeployIphone6.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts/anvilToolbarButtonWidgetDeployIphone6.snap.png differ
diff --git a/app/client/packages/design-system/theming/src/token/src/styles.module.css b/app/client/packages/design-system/theming/src/token/src/styles.module.css
index eaef43ef85a8..4bf4da6997b4 100644
--- a/app/client/packages/design-system/theming/src/token/src/styles.module.css
+++ b/app/client/packages/design-system/theming/src/token/src/styles.module.css
@@ -1,14 +1,14 @@
 /* THIS FILE IS CREATED AUTOMATICALLY. PLEASE DON'T EDIT IT. */
 :root {
   --outer-spacing-0: 0;
-  --outer-spacing-1: 5.7px;
-  --outer-spacing-2: 8.1px;
-  --outer-spacing-3: 11.5px;
-  --outer-spacing-4: 16.2px;
-  --outer-spacing-5: 22.9px;
-  --outer-spacing-6: 32.5px;
-  --outer-spacing-7: 45.9px;
-  --outer-spacing-8: 64.9px;
+  --outer-spacing-1: 4px;
+  --outer-spacing-2: 6px;
+  --outer-spacing-3: 8.9px;
+  --outer-spacing-4: 13.2px;
+  --outer-spacing-5: 19.6px;
+  --outer-spacing-6: 29.2px;
+  --outer-spacing-7: 43.3px;
+  --outer-spacing-8: 64.4px;
   --inner-spacing-0: 0;
   --inner-spacing-1: 4.2px;
   --inner-spacing-2: 6.3px;
@@ -221,36 +221,36 @@
   --sizing-200: 680px;
   --color-bg: rgb(95.735% 96.105% 96.612%);
   --color-bg-accent: rgb(0% 50.196% 100%);
-  --color-bg-accent-hover: rgb(13.479% 56.597% 100%);
+  --color-bg-accent-hover: rgb(16.706% 56.866% 100%);
   --color-bg-accent-active: rgb(0% 47.644% 97.234%);
-  --color-bg-accent-subtle: rgb(84.049% 91.286% 100%);
-  --color-bg-accent-subtle-hover: rgb(88.309% 93.691% 100%);
-  --color-bg-accent-subtle-active: rgb(81.868% 90.09% 100%);
+  --color-bg-accent-subtle: rgb(81.727% 91.842% 100%);
+  --color-bg-accent-subtle-hover: rgb(85.976% 94.312% 100%);
+  --color-bg-accent-subtle-active: rgb(79.582% 90.604% 100%);
   --color-bg-assistive: rgb(0% 4.2493% 16.493%);
-  --color-bg-neutral: rgb(40.269% 40.585% 41.017%);
-  --color-bg-neutral-opacity: rgb(40.269% 40.585% 41.017% / 0.5);
-  --color-bg-neutral-hover: rgb(44.775% 45.097% 45.538%);
-  --color-bg-neutral-active: rgb(39.155% 39.47% 39.901%);
-  --color-bg-neutral-subtle: rgb(91.338% 91.522% 91.773%);
-  --color-bg-neutral-subtle-hover: rgb(93.938% 94.123% 94.375%);
-  --color-bg-neutral-subtle-active: rgb(90.044% 90.227% 90.478%);
-  --color-bg-positive: rgb(6.7435% 63.436% 18.481%);
+  --color-bg-neutral: rgb(14.34% 14.608% 14.974%);
+  --color-bg-neutral-opacity: rgb(4.1441% 4.3763% 4.6935% / 0.6);
+  --color-bg-neutral-hover: rgb(21.156% 21.44% 21.828%);
+  --color-bg-neutral-active: rgb(11.549% 11.809% 12.164%);
+  --color-bg-neutral-subtle: rgb(95.735% 96.105% 96.612%);
+  --color-bg-neutral-subtle-hover: rgb(97.307% 97.678% 98.187%);
+  --color-bg-neutral-subtle-active: rgb(94.428% 94.798% 95.304%);
+  --color-bg-positive: rgb(6.7436% 63.436% 18.481%);
   --color-bg-positive-hover: rgb(18.172% 69.721% 25.266%);
   --color-bg-positive-active: rgb(0% 60.947% 15.563%);
   --color-bg-positive-subtle: rgb(81.329% 100% 81.391%);
-  --color-bg-positive-subtle-hover: rgb(84.848% 100% 84.841%);
+  --color-bg-positive-subtle-hover: rgb(83.899% 100% 83.95%);
   --color-bg-positive-subtle-active: rgb(80.049% 98.746% 80.116%);
   --color-bg-negative: rgb(83.108% 4.6651% 10.252%);
   --color-bg-negative-hover: rgb(90.296% 17.3% 17.376%);
   --color-bg-negative-active: rgb(80.244% 0% 6.8069%);
-  --color-bg-negative-subtle: rgb(80.244% 0% 6.8069%);
-  --color-bg-negative-subtle-hover: rgb(100% 93.667% 92.497%);
-  --color-bg-negative-subtle-active: rgb(100% 88.348% 86.422%);
-  --color-bg-warning: rgb(85.145% 64.66% 8.0286%);
+  --color-bg-negative-subtle: rgb(100% 89.123% 86.922%);
+  --color-bg-negative-subtle-hover: rgb(100% 92.714% 90.956%);
+  --color-bg-negative-subtle-active: rgb(100% 87.545% 85.228%);
+  --color-bg-warning: rgb(85.145% 64.66% 8.0285%);
   --color-bg-warning-hover: rgb(89.037% 68.413% 15.627%);
-  --color-bg-warning-active: rgb(83.854% 63.416% 4.0505%);
+  --color-bg-warning-active: rgb(83.854% 63.416% 4.0504%);
   --color-bg-warning-subtle: rgb(100% 94.114% 80.142%);
-  --color-bg-warning-subtle-hover: rgb(100% 97.012% 87.859%);
+  --color-bg-warning-subtle-hover: rgb(100% 96.733% 82.696%);
   --color-bg-warning-subtle-active: rgb(99.63% 92.81% 78.869%);
   --color-bg-elevation-1: rgb(98.357% 98.73% 99.239%);
   --color-bg-elevation-2: rgb(100% 100% 100%);
@@ -260,39 +260,39 @@
   --color-shadow-elevation-3: rgb(21.317% 24.208% 28.136% / 0.15);
   --color-fg: rgb(1.8308% 2.2815% 2.989%);
   --color-fg-accent: rgb(0% 31.772% 67.873%);
-  --color-fg-neutral: rgb(32.982% 33.44% 34.067%);
-  --color-fg-neutral-subtle: rgb(44.047% 44.529% 45.189%);
-  --color-fg-positive: rgb(6.7435% 63.436% 18.481%);
-  --color-fg-negative: rgb(100% 0% 28.453%);
-  --color-fg-warning: rgb(71.79% 51.231% 0%);
+  --color-fg-neutral: rgb(11.988% 12.775% 13.849%);
+  --color-fg-neutral-subtle: rgb(48.768% 49.751% 51.095%);
+  --color-fg-positive: rgb(6.7436% 63.436% 18.481%);
+  --color-fg-negative: rgb(100% 0% 31.57%);
+  --color-fg-warning: rgb(76.894% 49.631% 0%);
   --color-fg-on-accent: rgb(92.311% 95.082% 98.864%);
   --color-fg-on-accent-subtle: rgb(1.8308% 2.2815% 2.989%);
-  --color-fg-on-assistive: rgb(92.536% 96.25% 100%);
+  --color-fg-on-assistive: rgb(90.219% 96.774% 100%);
   --color-fg-on-neutral: rgb(94.428% 94.798% 95.304%);
-  --color-fg-on-positive: rgb(89.702% 100% 89.053%);
-  --color-fg-on-negative: rgb(100% 87.612% 85.249%);
-  --color-fg-on-warning: rgb(21.953% 9.0775% 0%);
+  --color-fg-on-positive: rgb(81.009% 100% 81.169%);
+  --color-fg-on-negative: rgb(100% 89.124% 86.925%);
+  --color-fg-on-warning: rgb(19.085% 11.601% 0%);
   --color-bd: rgb(73.392% 74.451% 75.899%);
   --color-bd-accent: rgb(0% 50.196% 100%);
-  --color-bd-focus: rgb(0% 50.196% 100%);
-  --color-bd-neutral: rgb(51.832% 51.998% 52.224%);
-  --color-bd-neutral-hover: rgb(63.734% 63.906% 64.141%);
-  --color-bd-positive: rgb(6.7435% 63.436% 18.481%);
-  --color-bd-positive-hover: rgb(26.362% 76.094% 31.718%);
-  --color-bd-negative: rgb(83.108% 4.6651% 10.252%);
-  --color-bd-negative-hover: rgb(94.628% 22.524% 21.261%);
-  --color-bd-warning: rgb(85.145% 64.66% 8.0286%);
-  --color-bd-warning-hover: rgb(98.232% 77.293% 27.893%);
-  --color-bd-on-accent: rgb(0% 1.6859% 55.697%);
-  --color-bd-on-neutral: rgb(5.3992% 5.6371% 5.9622%);
-  --color-bd-on-neutral-subtle: rgb(83.624% 83.804% 84.052%);
-  --color-bd-on-neutral-subtle-hover: rgb(87.465% 87.647% 87.897%);
-  --color-bd-on-positive: rgb(0% 22.552% 3.6201%);
-  --color-bd-on-negative: rgb(21.923% 0% 2.8118%);
-  --color-bd-on-warning: rgb(39.972% 27.552% 0%);
-  --color-bd-elevation-1: rgb(86.823% 87.005% 87.253%);
-  --color-bd-elevation-2: rgb(90.691% 90.874% 91.125%);
-  --color-bd-elevation-3: rgb(92.637% 92.821% 93.073%);
+  --color-bd-focus: rgb(0% 41.891% 91.024%);
+  --color-bd-neutral: rgb(50.521% 52.173% 54.429%);
+  --color-bd-neutral-hover: rgb(62.374% 64.09% 66.433%);
+  --color-bd-positive: rgb(37.9% 86.464% 41.821%);
+  --color-bd-positive-hover: rgb(51.497% 99.713% 54.439%);
+  --color-bd-negative: rgb(100% 55.521% 50.654%);
+  --color-bd-negative-hover: rgb(100% 72.272% 68.285%);
+  --color-bd-warning: rgb(94.272% 73.467% 23.044%);
+  --color-bd-warning-hover: rgb(100% 86.971% 47.122%);
+  --color-bd-on-accent: rgb(0% 12.715% 44.584%);
+  --color-bd-on-neutral: rgb(36.946% 37.257% 37.683%);
+  --color-bd-on-neutral-subtle: rgb(91.826% 92.194% 92.697%);
+  --color-bd-on-neutral-subtle-hover: rgb(89.884% 90.25% 90.751%);
+  --color-bd-on-positive: rgb(0% 22.253% 0%);
+  --color-bd-on-negative: rgb(25.15% 0% 0%);
+  --color-bd-on-warning: rgb(40.354% 27.735% 0%);
+  --color-bd-elevation-1: rgb(85.384% 87.202% 89.685%);
+  --color-bd-elevation-2: rgb(89.241% 91.074% 93.578%);
+  --color-bd-elevation-3: rgb(91.181% 93.021% 95.535%);
   --border-radius-elevation-1: calc(
     var(--border-radius-elevation-base) + var(--outer-spacing-1) * 2
   );
@@ -309,7 +309,7 @@
     var(--color-shadow-elevation-3);
   --border-width-1: 1px;
   --border-width-2: 2px;
-  --opacity-disabled: 0.3;
+  --opacity-disabled: 0.65;
   --z-index-1: 3;
   --z-index-2: 4;
   --z-index-3: 10;
diff --git a/app/client/packages/design-system/theming/src/token/src/themeTokens.json b/app/client/packages/design-system/theming/src/token/src/themeTokens.json
index dedbfe803318..2c2a1c8e624a 100644
--- a/app/client/packages/design-system/theming/src/token/src/themeTokens.json
+++ b/app/client/packages/design-system/theming/src/token/src/themeTokens.json
@@ -9,7 +9,7 @@
       "type": "color"
     },
     "bg-accent-hover": {
-      "value": "rgb(13.479% 56.597% 100%)",
+      "value": "rgb(16.706% 56.866% 100%)",
       "type": "color"
     },
     "bg-accent-active": {
@@ -17,15 +17,15 @@
       "type": "color"
     },
     "bg-accent-subtle": {
-      "value": "rgb(84.049% 91.286% 100%)",
+      "value": "rgb(81.727% 91.842% 100%)",
       "type": "color"
     },
     "bg-accent-subtle-hover": {
-      "value": "rgb(88.309% 93.691% 100%)",
+      "value": "rgb(85.976% 94.312% 100%)",
       "type": "color"
     },
     "bg-accent-subtle-active": {
-      "value": "rgb(81.868% 90.09% 100%)",
+      "value": "rgb(79.582% 90.604% 100%)",
       "type": "color"
     },
     "bg-assistive": {
@@ -33,35 +33,35 @@
       "type": "color"
     },
     "bg-neutral": {
-      "value": "rgb(40.269% 40.585% 41.017%)",
+      "value": "rgb(14.34% 14.608% 14.974%)",
       "type": "color"
     },
     "bg-neutral-opacity": {
-      "value": "rgb(40.269% 40.585% 41.017% / 0.5)",
+      "value": "rgb(4.1441% 4.3763% 4.6935% / 0.6)",
       "type": "color"
     },
     "bg-neutral-hover": {
-      "value": "rgb(44.775% 45.097% 45.538%)",
+      "value": "rgb(21.156% 21.44% 21.828%)",
       "type": "color"
     },
     "bg-neutral-active": {
-      "value": "rgb(39.155% 39.47% 39.901%)",
+      "value": "rgb(11.549% 11.809% 12.164%)",
       "type": "color"
     },
     "bg-neutral-subtle": {
-      "value": "rgb(91.338% 91.522% 91.773%)",
+      "value": "rgb(95.735% 96.105% 96.612%)",
       "type": "color"
     },
     "bg-neutral-subtle-hover": {
-      "value": "rgb(93.938% 94.123% 94.375%)",
+      "value": "rgb(97.307% 97.678% 98.187%)",
       "type": "color"
     },
     "bg-neutral-subtle-active": {
-      "value": "rgb(90.044% 90.227% 90.478%)",
+      "value": "rgb(94.428% 94.798% 95.304%)",
       "type": "color"
     },
     "bg-positive": {
-      "value": "rgb(6.7435% 63.436% 18.481%)",
+      "value": "rgb(6.7436% 63.436% 18.481%)",
       "type": "color"
     },
     "bg-positive-hover": {
@@ -77,7 +77,7 @@
       "type": "color"
     },
     "bg-positive-subtle-hover": {
-      "value": "rgb(84.848% 100% 84.841%)",
+      "value": "rgb(83.899% 100% 83.95%)",
       "type": "color"
     },
     "bg-positive-subtle-active": {
@@ -97,19 +97,19 @@
       "type": "color"
     },
     "bg-negative-subtle": {
-      "value": "rgb(80.244% 0% 6.8069%)",
+      "value": "rgb(100% 89.123% 86.922%)",
       "type": "color"
     },
     "bg-negative-subtle-hover": {
-      "value": "rgb(100% 93.667% 92.497%)",
+      "value": "rgb(100% 92.714% 90.956%)",
       "type": "color"
     },
     "bg-negative-subtle-active": {
-      "value": "rgb(100% 88.348% 86.422%)",
+      "value": "rgb(100% 87.545% 85.228%)",
       "type": "color"
     },
     "bg-warning": {
-      "value": "rgb(85.145% 64.66% 8.0286%)",
+      "value": "rgb(85.145% 64.66% 8.0285%)",
       "type": "color"
     },
     "bg-warning-hover": {
@@ -117,7 +117,7 @@
       "type": "color"
     },
     "bg-warning-active": {
-      "value": "rgb(83.854% 63.416% 4.0505%)",
+      "value": "rgb(83.854% 63.416% 4.0504%)",
       "type": "color"
     },
     "bg-warning-subtle": {
@@ -125,7 +125,7 @@
       "type": "color"
     },
     "bg-warning-subtle-hover": {
-      "value": "rgb(100% 97.012% 87.859%)",
+      "value": "rgb(100% 96.733% 82.696%)",
       "type": "color"
     },
     "bg-warning-subtle-active": {
@@ -165,23 +165,23 @@
       "type": "color"
     },
     "fg-neutral": {
-      "value": "rgb(32.982% 33.44% 34.067%)",
+      "value": "rgb(11.988% 12.775% 13.849%)",
       "type": "color"
     },
     "fg-neutral-subtle": {
-      "value": "rgb(44.047% 44.529% 45.189%)",
+      "value": "rgb(48.768% 49.751% 51.095%)",
       "type": "color"
     },
     "fg-positive": {
-      "value": "rgb(6.7435% 63.436% 18.481%)",
+      "value": "rgb(6.7436% 63.436% 18.481%)",
       "type": "color"
     },
     "fg-negative": {
-      "value": "rgb(100% 0% 28.453%)",
+      "value": "rgb(100% 0% 31.57%)",
       "type": "color"
     },
     "fg-warning": {
-      "value": "rgb(71.79% 51.231% 0%)",
+      "value": "rgb(76.894% 49.631% 0%)",
       "type": "color"
     },
     "fg-on-accent": {
@@ -193,7 +193,7 @@
       "type": "color"
     },
     "fg-on-assistive": {
-      "value": "rgb(92.536% 96.25% 100%)",
+      "value": "rgb(90.219% 96.774% 100%)",
       "type": "color"
     },
     "fg-on-neutral": {
@@ -201,15 +201,15 @@
       "type": "color"
     },
     "fg-on-positive": {
-      "value": "rgb(89.702% 100% 89.053%)",
+      "value": "rgb(81.009% 100% 81.169%)",
       "type": "color"
     },
     "fg-on-negative": {
-      "value": "rgb(100% 87.612% 85.249%)",
+      "value": "rgb(100% 89.124% 86.925%)",
       "type": "color"
     },
     "fg-on-warning": {
-      "value": "rgb(21.953% 9.0775% 0%)",
+      "value": "rgb(19.085% 11.601% 0%)",
       "type": "color"
     },
     "bd": {
@@ -221,79 +221,79 @@
       "type": "color"
     },
     "bd-focus": {
-      "value": "rgb(0% 50.196% 100%)",
+      "value": "rgb(0% 41.891% 91.024%)",
       "type": "color"
     },
     "bd-neutral": {
-      "value": "rgb(51.832% 51.998% 52.224%)",
+      "value": "rgb(50.521% 52.173% 54.429%)",
       "type": "color"
     },
     "bd-neutral-hover": {
-      "value": "rgb(63.734% 63.906% 64.141%)",
+      "value": "rgb(62.374% 64.09% 66.433%)",
       "type": "color"
     },
     "bd-positive": {
-      "value": "rgb(6.7435% 63.436% 18.481%)",
+      "value": "rgb(37.9% 86.464% 41.821%)",
       "type": "color"
     },
     "bd-positive-hover": {
-      "value": "rgb(26.362% 76.094% 31.718%)",
+      "value": "rgb(51.497% 99.713% 54.439%)",
       "type": "color"
     },
     "bd-negative": {
-      "value": "rgb(83.108% 4.6651% 10.252%)",
+      "value": "rgb(100% 55.521% 50.654%)",
       "type": "color"
     },
     "bd-negative-hover": {
-      "value": "rgb(94.628% 22.524% 21.261%)",
+      "value": "rgb(100% 72.272% 68.285%)",
       "type": "color"
     },
     "bd-warning": {
-      "value": "rgb(85.145% 64.66% 8.0286%)",
+      "value": "rgb(94.272% 73.467% 23.044%)",
       "type": "color"
     },
     "bd-warning-hover": {
-      "value": "rgb(98.232% 77.293% 27.893%)",
+      "value": "rgb(100% 86.971% 47.122%)",
       "type": "color"
     },
     "bd-on-accent": {
-      "value": "rgb(0% 1.6859% 55.697%)",
+      "value": "rgb(0% 12.715% 44.584%)",
       "type": "color"
     },
     "bd-on-neutral": {
-      "value": "rgb(5.3992% 5.6371% 5.9622%)",
+      "value": "rgb(36.946% 37.257% 37.683%)",
       "type": "color"
     },
     "bd-on-neutral-subtle": {
-      "value": "rgb(83.624% 83.804% 84.052%)",
+      "value": "rgb(91.826% 92.194% 92.697%)",
       "type": "color"
     },
     "bd-on-neutral-subtle-hover": {
-      "value": "rgb(87.465% 87.647% 87.897%)",
+      "value": "rgb(89.884% 90.25% 90.751%)",
       "type": "color"
     },
     "bd-on-positive": {
-      "value": "rgb(0% 22.552% 3.6201%)",
+      "value": "rgb(0% 22.253% 0%)",
       "type": "color"
     },
     "bd-on-negative": {
-      "value": "rgb(21.923% 0% 2.8118%)",
+      "value": "rgb(25.15% 0% 0%)",
       "type": "color"
     },
     "bd-on-warning": {
-      "value": "rgb(39.972% 27.552% 0%)",
+      "value": "rgb(40.354% 27.735% 0%)",
       "type": "color"
     },
     "bd-elevation-1": {
-      "value": "rgb(86.823% 87.005% 87.253%)",
+      "value": "rgb(85.384% 87.202% 89.685%)",
       "type": "color"
     },
     "bd-elevation-2": {
-      "value": "rgb(90.691% 90.874% 91.125%)",
+      "value": "rgb(89.241% 91.074% 93.578%)",
       "type": "color"
     },
     "bd-elevation-3": {
-      "value": "rgb(92.637% 92.821% 93.073%)",
+      "value": "rgb(91.181% 93.021% 95.535%)",
       "type": "color"
     }
   },
@@ -341,7 +341,7 @@
   },
   "opacity": {
     "disabled": {
-      "value": 0.3,
+      "value": 0.65,
       "type": "opacity"
     }
   },
diff --git a/app/client/packages/design-system/theming/src/token/src/tokensConfigs.json b/app/client/packages/design-system/theming/src/token/src/tokensConfigs.json
index 5d5e03281325..2c6f2ec9a379 100644
--- a/app/client/packages/design-system/theming/src/token/src/tokensConfigs.json
+++ b/app/client/packages/design-system/theming/src/token/src/tokensConfigs.json
@@ -39,35 +39,41 @@
     "density": {
       "tight": {
         "1": "0.8px",
-        "2": "1.25px",
-        "3": "1.7px"
+        "2": "0.8px",
+        "3": "1.25px",
+        "4": "1.7px"
       },
       "regular": {
         "1": "1px",
-        "2": "1.45px",
-        "3": "1.8px"
+        "2": "1px",
+        "3": "1.45px",
+        "4": "1.8px"
       },
       "loose": {
         "1": "1.3px",
-        "2": "1.6px",
-        "3": "1.9px"
+        "2": "1.3px",
+        "3": "1.6px",
+        "4": "1.9px"
       }
     },
     "sizing": {
       "small": {
-        "1": "12px",
-        "2": "16px",
-        "3": "24px"
+        "1": "10px",
+        "2": "12px",
+        "3": "16px",
+        "4": "24px"
       },
       "regular": {
-        "1": "16px",
-        "2": "24px",
-        "3": "32px"
+        "1": "14px",
+        "2": "16px",
+        "3": "24px",
+        "4": "32px"
       },
       "big": {
-        "1": "24px",
-        "2": "32px",
-        "3": "40px"
+        "1": "20px",
+        "2": "24px",
+        "3": "32px",
+        "4": "40px"
       }
     }
   }
diff --git a/app/client/packages/design-system/theming/tsconfig.json b/app/client/packages/design-system/theming/tsconfig.json
index f86a07aabe96..d8d3ce2dc52d 100644
--- a/app/client/packages/design-system/theming/tsconfig.json
+++ b/app/client/packages/design-system/theming/tsconfig.json
@@ -3,7 +3,8 @@
   "ts-node": {
     "compilerOptions": {
       "module": "commonjs",
-      "types": ["node"]
+      "types": ["node"],
+      "verbatimModuleSyntax": false
     }
   }
 }
diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx b/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
index d9ad7a6bb204..42be29b1ece0 100644
--- a/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
@@ -33,7 +33,12 @@ const _Button = (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
         <span aria-hidden={isLoading ? true : undefined} data-content="">
           {icon && <Icon name={icon} size={size as keyof typeof SIZES} />}
           {Boolean(children) && (
-            <Text data-text="" fontWeight={500} lineClamp={1}>
+            <Text
+              data-text=""
+              fontWeight={500}
+              lineClamp={1}
+              size={size === "xSmall" ? "footnote" : "body"}
+            >
               {children}
             </Text>
           )}
@@ -41,7 +46,14 @@ const _Button = (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
             To align buttons in the case when we don't have text content, we create an empty block with the appropriate size.
             See the styles for data-empty-text attribute.
            */}
-          {!Boolean(children) && <Text data-empty-text="">&#8203;</Text>}
+          {!Boolean(children) && (
+            <Text
+              data-empty-text=""
+              size={size === "xSmall" ? "footnote" : "body"}
+            >
+              &#8203;
+            </Text>
+          )}
         </span>
 
         {isLoading && (
diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
index 21c02a47c88d..6097f308f2d6 100644
--- a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
@@ -77,8 +77,19 @@
     margin-block-start: var(--body-margin-start);
     margin-block-end: var(--body-margin-end);
     inline-size: var(--body-line-height);
-    margin-inline-start: var(--body-margin-start);
-    margin-inline-end: var(--body-margin-end);
+    margin-inline: calc(
+      (var(--body-margin-start) + var(--body-margin-end)) / 2
+    );
+  }
+
+  &[data-size="xSmall"] [data-empty-text] {
+    block-size: var(--footnote-line-height);
+    margin-block-start: var(--footnote-margin-start);
+    margin-block-end: var(--footnote-margin-end);
+    inline-size: var(--footnote-line-height);
+    margin-inline: calc(
+      (var(--footnote-margin-start) + var(--footnote-margin-end)) / 2
+    );
   }
 
   /**
@@ -156,14 +167,52 @@
   * SIZES
   *-----------------------------------------------------------------------------
   */
+  &[data-size="xSmall"] {
+    padding-inline: var(--inner-spacing-1);
+    padding-block: var(--inner-spacing-1);
+  }
+
+  &[data-size="xSmall"]:has([data-icon]):has([data-text]) {
+    min-inline-size: var(--sizing-13);
+  }
+
+  &[data-size="xSmall"]:has([data-text]) {
+    min-inline-size: var(--sizing-9);
+  }
+
+  &[data-icon-position="start"][data-size="xSmall"]:has([data-icon]):has(
+      [data-text]
+    ) {
+    padding-inline: var(--inner-spacing-1) var(--inner-spacing-2);
+  }
+
+  &[data-icon-position="start"][data-size="xSmall"]
+    [data-content]:has([data-icon]):has([data-text]) {
+    padding-inline-start: calc(var(--icon-size-1) + var(--inner-spacing-1));
+  }
+
+  &[data-icon-position="end"][data-size="xSmall"]:has([data-icon]):has(
+      [data-text]
+    ) {
+    padding-inline: var(--inner-spacing-2) var(--inner-spacing-1);
+  }
+
+  &[data-icon-position="end"][data-size="xSmall"]
+    [data-content]:has([data-icon]):has([data-text]) {
+    padding-inline-end: calc(var(--icon-size-1) + var(--inner-spacing-1));
+  }
+
   &[data-size="small"] {
-    min-inline-size: var(--sizing-7);
-    padding-inline: var(--inner-spacing-2);
-    padding-block: var(--inner-spacing-2);
+    padding-inline: var(--inner-spacing-1);
+    padding-block: var(--inner-spacing-1);
   }
 
   &[data-size="small"]:has([data-icon]):has([data-text]) {
-    min-inline-size: var(--sizing-12);
+    min-inline-size: var(--sizing-15);
+  }
+
+  &[data-size="small"]:has([data-text]) {
+    min-inline-size: var(--sizing-13);
   }
 
   &[data-icon-position="start"][data-size="small"]:has([data-icon]):has(
@@ -174,7 +223,7 @@
 
   &[data-icon-position="start"][data-size="small"]
     [data-content]:has([data-icon]):has([data-text]) {
-    padding-inline-start: calc(var(--icon-size-1) + var(--inner-spacing-1));
+    padding-inline-start: calc(var(--icon-size-2) + var(--inner-spacing-1));
   }
 
   &[data-icon-position="end"][data-size="small"]:has([data-icon]):has(
@@ -185,11 +234,10 @@
 
   &[data-icon-position="end"][data-size="small"]
     [data-content]:has([data-icon]):has([data-text]) {
-    padding-inline-end: calc(var(--icon-size-1) + var(--inner-spacing-1));
+    padding-inline-end: calc(var(--icon-size-2) + var(--inner-spacing-1));
   }
 
   &[data-size="medium"] {
-    min-inline-size: var(--sizing-9);
     padding-inline: var(--inner-spacing-3);
     padding-block: var(--inner-spacing-3);
   }
@@ -198,6 +246,10 @@
     min-inline-size: var(--sizing-22);
   }
 
+  &[data-size="medium"]:has([data-text]) {
+    min-inline-size: var(--sizing-17);
+  }
+
   &[data-icon-position="start"][data-size="medium"]:has([data-icon]):has(
       [data-text]
     ) {
@@ -206,7 +258,7 @@
 
   &[data-icon-position="start"][data-size="medium"]
     [data-content]:has([data-icon]):has([data-text]) {
-    padding-inline-start: calc(var(--icon-size-2) + var(--inner-spacing-1));
+    padding-inline-start: calc(var(--icon-size-3) + var(--inner-spacing-1));
   }
 
   &[data-icon-position="end"][data-size="medium"]:has([data-icon]):has(
@@ -217,6 +269,6 @@
 
   &[data-icon-position="end"][data-size="medium"]
     [data-content]:has([data-icon]):has([data-text]) {
-    padding-inline-end: calc(var(--icon-size-2) + var(--inner-spacing-1));
+    padding-inline-end: calc(var(--icon-size-3) + var(--inner-spacing-1));
   }
 }
diff --git a/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx b/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx
index 2df46313c0e5..8525882f1990 100644
--- a/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.tsx
@@ -57,14 +57,41 @@ export const Semantic: Story = {
  */
 export const Sizes: Story = {
   render: () => (
-    <Flex alignItems="start" gap="spacing-4">
-      {Object.keys(SIZES)
-        .filter((size) => !["large"].includes(size))
-        .map((size) => (
-          <Button icon="star" key={size} size={size}>
-            {size}
-          </Button>
-        ))}
+    <Flex direction="column" gap="spacing-6">
+      <Flex alignItems="start" gap="spacing-4">
+        {Object.keys(SIZES)
+          .filter((size) => !["large"].includes(size))
+          .map((size) => (
+            <Button icon="star" key={size} size={size} />
+          ))}
+      </Flex>
+      <Flex alignItems="start" gap="spacing-4">
+        {Object.keys(SIZES)
+          .filter((size) => !["large"].includes(size))
+          .map((size) => (
+            <Button icon="star" key={size} size={size}>
+              {size}
+            </Button>
+          ))}
+      </Flex>
+      <Flex alignItems="start" gap="spacing-4">
+        {Object.keys(SIZES)
+          .filter((size) => !["large"].includes(size))
+          .map((size) => (
+            <Button icon="star" iconPosition="end" key={size} size={size}>
+              {size}
+            </Button>
+          ))}
+      </Flex>
+      <Flex alignItems="start" gap="spacing-4">
+        {Object.keys(SIZES)
+          .filter((size) => !["large"].includes(size))
+          .map((size) => (
+            <Button key={size} size={size}>
+              {size}
+            </Button>
+          ))}
+      </Flex>
     </Flex>
   ),
 };
diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css
index d7e2fa8503d2..e1dcf5c3ed00 100644
--- a/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css
@@ -96,11 +96,21 @@
     --checkbox-bg-color: var(--color-bd-negative);
   }
 
+  &[data-invalid][data-selected="true"] [data-icon] {
+    --checkbox-border-color: var(--color-bg-negative);
+    --checkbox-bg-color: var(--color-bg-negative);
+  }
+
   &[data-hovered][data-invalid] [data-icon] {
     --checkbox-border-color: var(--color-bd-negative-hover);
     --checkbox-bg-color: var(--color-bd-negative-hover);
   }
 
+  &[data-hovered][data-selected="true"] [data-icon] {
+    --checkbox-border-color: var(--color-bg-negative-hover);
+    --checkbox-bg-color: var(--color-bg-negative-hover);
+  }
+
   /**
   * ----------------------------------------------------------------------------
   * DISABLED
diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx
index 3e97b4720730..88bbcf7c2299 100644
--- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx
@@ -1,14 +1,14 @@
-import { Button, Icon, Label, Popover, Text } from "@appsmith/wds";
+import {
+  FieldError,
+  FieldDescription,
+  FieldLabel,
+  FieldListPopover,
+  Button,
+} from "@appsmith/wds";
 import { getTypographyClassName } from "@appsmith/wds-theming";
 import clsx from "clsx";
 import React from "react";
-import {
-  FieldError,
-  ComboBox as HeadlessCombobox,
-  Input,
-  ListBox,
-} from "react-aria-components";
-import { ListBoxItem } from "./ListBoxItem";
+import { ComboBox as HeadlessCombobox, Input } from "react-aria-components";
 import styles from "./styles.module.css";
 import type { ComboBoxProps } from "./types";
 
@@ -26,11 +26,6 @@ export const ComboBox = (props: ComboBoxProps) => {
     ...rest
   } = props;
 
-  // place Popover in the root theme provider to get access to the CSS tokens
-  const root = document.body.querySelector(
-    "[data-theme-provider]",
-  ) as HTMLButtonElement;
-
   return (
     <HeadlessCombobox
       aria-label={Boolean(label) ? undefined : "ComboBox"}
@@ -41,41 +36,28 @@ export const ComboBox = (props: ComboBoxProps) => {
     >
       {({ isInvalid }) => (
         <>
-          <Label
+          <FieldLabel
             contextualHelp={contextualHelp}
             isRequired={isRequired}
             text={label}
           />
-
-          {/* TODO: Use proper headless Input once Valera is back */}
           <div className={styles.inputWrapper}>
-            <Input className={styles.input} placeholder={placeholder} />
-            <Button icon="chevron-down" isLoading={isLoading} size={size} />
+            <Input
+              className={clsx(styles.input, getTypographyClassName("body"))}
+              placeholder={placeholder}
+            />
+            <Button
+              color={Boolean(isLoading) ? "neutral" : "accent"}
+              icon="chevron-down"
+              isLoading={isLoading}
+              size={size === "medium" ? "small" : "xSmall"}
+              slot={Boolean(isLoading) ? null : ""}
+              variant={Boolean(isLoading) ? "ghost" : "filled"}
+            />
           </div>
-
-          <FieldError
-            className={clsx(
-              styles.errorText,
-              getTypographyClassName("footnote"),
-            )}
-          >
-            {errorMessage}
-          </FieldError>
-          {Boolean(description) && !Boolean(isInvalid) && (
-            <Text className={styles.description} lineClamp={2} size="footnote">
-              {description}
-            </Text>
-          )}
-          <Popover UNSTABLE_portalContainer={root}>
-            <ListBox className={styles.listBox} items={items} shouldFocusWrap>
-              {(item) => (
-                <ListBoxItem key={item.id} textValue={item.label}>
-                  {item.icon && <Icon name={item.icon} />}
-                  {item.label}
-                </ListBoxItem>
-              )}
-            </ListBox>
-          </Popover>
+          <FieldError errorMessage={errorMessage} />
+          <FieldDescription description={description} isInvalid={isInvalid} />
+          <FieldListPopover items={items} />
         </>
       )}
     </HeadlessCombobox>
diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ListBoxItem.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ListBoxItem.tsx
deleted file mode 100644
index 663456933b35..000000000000
--- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ListBoxItem.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { ListBoxItem as HeadlessListBoxItem } from "react-aria-components";
-import clsx from "clsx";
-import { getTypographyClassName } from "@appsmith/wds-theming";
-import { listItemStyles } from "@appsmith/wds";
-import type { ListBoxItemProps } from "react-aria-components";
-
-export const ListBoxItem = (props: ListBoxItemProps) => {
-  return (
-    <HeadlessListBoxItem
-      {...props}
-      className={clsx(listItemStyles.item, getTypographyClassName("body"))}
-    />
-  );
-};
diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css
index 097d68b00369..7a9ecadc7e33 100644
--- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css
@@ -5,85 +5,80 @@
 }
 
 .inputWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.input {
-  display: flex;
-  flex: 1;
   position: relative;
-  padding: 0;
-  border: none;
+  display: flex;
   align-items: center;
   border-radius: var(--border-radius-elevation-3);
   background-color: var(--color-bg-neutral-subtle);
+  flex: 1;
   max-inline-size: 100%;
-  padding-inline-start: var(--inner-spacing-2);
-  padding-inline-end: calc(var(--inner-spacing-3) + var(--icon-size-2));
-  padding-block: var(--inner-spacing-3);
-  box-shadow: inset 0 0 0 var(--border-width-1)
-    var(--color-bd-on-neutral-subtle);
-  cursor: pointer;
-}
-
-.formField[data-invalid] .textField {
-  box-shadow: 0 0 0 var(--border-width-1) var(--color-bd-negative);
+  isolation: isolate;
+  box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-subtle);
+  padding-inline-end: var(--inner-spacing-2);
 }
 
-.formField[data-size="small"] .textField {
-  padding-block: var(--inner-spacing-2);
-}
-
-.textField[data-focus-visible] {
-  box-shadow:
-    0 0 0 2px var(--color-bg),
-    0 0 0 4px var(--color-bd-focus);
+.input {
+  border: 0;
+  background-color: transparent;
+  font-family: inherit;
+  flex-grow: 1;
+  color: var(--color-fg);
+  text-overflow: ellipsis;
+  max-inline-size: 100%;
+  width: 100%;
+  box-sizing: content-box;
+  padding-block: var(--inner-spacing-1);
+  padding-inline: var(--inner-spacing-2);
 }
 
-.textField[data-hovered] {
+.inputWrapper:has([data-hovered]) {
   background-color: var(--color-bg-neutral-subtle-hover);
-  box-shadow: inset 0 0 0 var(--border-width-1)
-    var(--color-bd-on-neutral-subtle-hover);
+  box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-subtle-hover);
 }
 
-.textField [data-icon] {
-  position: absolute;
-  right: var(--inner-spacing-2);
+.inputWrapper:has([data-focused]) {
+  background-color: transparent;
+  box-shadow: none;
 }
 
-.necessityIndicator {
-  color: var(--color-fg-negative);
-  margin-inline-start: var(--inner-spacing-1);
+.inputWrapper:has([data-focused]):before {
+  content: "";
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  box-shadow: 0 0 0 2px var(--color-bd-focus);
+  border-radius: var(--border-radius-elevation-3);
+  z-index: -1;
 }
 
-.errorText {
-  margin-block-start: var(--inner-spacing-3);
-  color: var(--color-fg-negative);
+.inputWrapper:has([data-invalid]) {
+  box-shadow: 0 0 0 1px var(--color-bd-negative);
 }
 
-.description {
-  margin-block-start: var(--inner-spacing-3);
-  color: var(--color-fg-neutral);
+.inputWrapper:has([data-invalid][data-hovered]) {
+  box-shadow: 0 0 0 1px var(--color-bd-negative-hover);
 }
 
-.fieldValue {
-  text-align: left;
-  flex: 1;
+.formField[data-size="small"] .input {
+  block-size: calc(
+    var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end)
+  );
+  padding-block: var(--inner-spacing-2);
 }
 
-.fieldValue [data-icon] {
-  display: none;
+.formField[data-size="small"] .inputWrapper {
+  padding-inline-end: var(--inner-spacing-1);
 }
 
-.listBox {
-  min-inline-size: var(--trigger-width);
+.formField .inputWrapper [data-button] {
+  border-radius: calc(
+    var(--border-radius-elevation-3) - var(--inner-spacing-1)
+  );
 }
 
-/** If at least one select item has an icon, we need to add extra padding for items that doesn't have an icon. */
-.listBox:has([data-icon]) [role="option"]:not(:has([data-icon])) {
-  padding-inline-start: calc(
-    var(--icon-size-2) + var(--inner-spacing-3) + var(--inner-spacing-2)
+.formField[data-size="small"] .inputWrapper {
+  border-radius: calc(
+    var(--border-radius-elevation-3) - var(--inner-spacing-2)
   );
 }
diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/types.ts b/app/client/packages/design-system/widgets/src/components/ComboBox/src/types.ts
index ff643008a9ed..d2ae2a6341b2 100644
--- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/types.ts
@@ -19,7 +19,7 @@ export interface ComboBoxProps
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
   /** loading state for the input */
   isLoading?: boolean;
   /** A ContextualHelp element to place next to the label. */
diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx
index b08d1836ba16..513dcd42824b 100644
--- a/app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx
@@ -32,7 +32,7 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="sizing-60">
       {Object.keys(SIZES)
-        .filter((size) => !["large"].includes(size))
+        .filter((size) => !["xSmall", "large"].includes(size))
         .map((size) => (
           <ComboBox items={items} key={size} placeholder={size} size={size} />
         ))}
@@ -56,7 +56,7 @@ export const Validation: Story = {
         alert("Form submitted");
       }}
     >
-      <Flex direction="column" gap="spacing-2" width="sizing-60">
+      <Flex direction="column" gap="spacing-5" width="sizing-60">
         <ComboBox
           description="description"
           isRequired
diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/ErrorMessage.tsx b/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/ErrorMessage.tsx
deleted file mode 100644
index b09e0a437509..000000000000
--- a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/ErrorMessage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import { Text } from "@appsmith/wds";
-import styles from "./styles.module.css";
-import type { ErrorMessageProps } from "./types";
-
-export const ErrorMessage = (props: ErrorMessageProps) => {
-  const { text } = props;
-
-  if (!Boolean(text)) return null;
-
-  return (
-    <Text
-      className={styles.errorMessage}
-      color="negative"
-      lineClamp={2}
-      size="footnote"
-    >
-      {text}
-    </Text>
-  );
-};
diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/index.ts b/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/index.ts
deleted file mode 100644
index 435effc80d21..000000000000
--- a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./ErrorMessage";
diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/styles.module.css
deleted file mode 100644
index 4725547b2440..000000000000
--- a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/styles.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.errorMessage {
-  margin-block-start: var(--inner-spacing-2);
-}
diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/types.ts b/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/types.ts
deleted file mode 100644
index e150723ebcaa..000000000000
--- a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface ErrorMessageProps {
-  text?: string;
-}
diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/index.ts b/app/client/packages/design-system/widgets/src/components/FieldDescription/index.ts
similarity index 100%
rename from app/client/packages/design-system/widgets/src/components/ErrorMessage/index.ts
rename to app/client/packages/design-system/widgets/src/components/FieldDescription/index.ts
diff --git a/app/client/packages/design-system/widgets/src/components/FieldDescription/src/FieldDescription.tsx b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/FieldDescription.tsx
new file mode 100644
index 000000000000..68a040adaf1d
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/FieldDescription.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Text } from "../../Text";
+import styles from "./styles.module.css";
+import type { FieldDescriptionProps } from "./types";
+
+export const FieldDescription = (props: FieldDescriptionProps) => {
+  const { description, isInvalid } = props;
+
+  if (!Boolean(description) || Boolean(isInvalid)) return null;
+
+  return (
+    <Text className={styles.description} lineClamp={2} size="footnote">
+      {description}
+    </Text>
+  );
+};
diff --git a/app/client/packages/design-system/widgets/src/components/FieldDescription/src/index.ts b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/index.ts
new file mode 100644
index 000000000000..2c6b2d3578df
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./FieldDescription";
+export type { FieldDescriptionProps } from "./types";
diff --git a/app/client/packages/design-system/widgets/src/components/FieldDescription/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/styles.module.css
new file mode 100644
index 000000000000..66f4818bdacb
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/styles.module.css
@@ -0,0 +1,4 @@
+.description {
+  margin-block-start: var(--inner-spacing-3);
+  color: var(--color-fg-neutral);
+}
diff --git a/app/client/packages/design-system/widgets/src/components/FieldDescription/src/types.ts b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/types.ts
new file mode 100644
index 000000000000..733ea6b20b87
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/types.ts
@@ -0,0 +1,6 @@
+export interface FieldDescriptionProps {
+  /** The content to display as the description. */
+  description?: string;
+  /** Whether the input value is invalid. */
+  isInvalid?: boolean;
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Label/index.ts b/app/client/packages/design-system/widgets/src/components/FieldError/index.ts
similarity index 100%
rename from app/client/packages/design-system/widgets/src/components/Label/index.ts
rename to app/client/packages/design-system/widgets/src/components/FieldError/index.ts
diff --git a/app/client/packages/design-system/widgets/src/components/FieldError/src/FieldError.tsx b/app/client/packages/design-system/widgets/src/components/FieldError/src/FieldError.tsx
new file mode 100644
index 000000000000..6b62b21869e0
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldError/src/FieldError.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { getTypographyClassName } from "@appsmith/wds-theming";
+import clsx from "clsx";
+import { FieldError as HeadlessFieldError } from "react-aria-components";
+import styles from "./styles.module.css";
+import type { FieldErrorProps } from "./types";
+
+export const FieldError = (props: FieldErrorProps) => {
+  const { errorMessage } = props;
+
+  return (
+    <HeadlessFieldError
+      className={clsx(styles.errorText, getTypographyClassName("footnote"))}
+    >
+      {errorMessage}
+    </HeadlessFieldError>
+  );
+};
diff --git a/app/client/packages/design-system/widgets/src/components/FieldError/src/index.ts b/app/client/packages/design-system/widgets/src/components/FieldError/src/index.ts
new file mode 100644
index 000000000000..f8de15b13fb0
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldError/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./FieldError";
+export type { FieldErrorProps } from "./types";
diff --git a/app/client/packages/design-system/widgets/src/components/FieldError/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/FieldError/src/styles.module.css
new file mode 100644
index 000000000000..bb2636b64de8
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldError/src/styles.module.css
@@ -0,0 +1,4 @@
+.errorText {
+  margin-block-start: var(--inner-spacing-3);
+  color: var(--color-fg-negative);
+}
diff --git a/app/client/packages/design-system/widgets/src/components/FieldError/src/types.ts b/app/client/packages/design-system/widgets/src/components/FieldError/src/types.ts
new file mode 100644
index 000000000000..67de97f9072a
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldError/src/types.ts
@@ -0,0 +1,6 @@
+import type { ValidationResult } from "react-aria-components";
+
+export interface FieldErrorProps {
+  /** The content to display as the error message. */
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
diff --git a/app/client/packages/design-system/widgets/src/components/FieldLabel/index.ts b/app/client/packages/design-system/widgets/src/components/FieldLabel/index.ts
new file mode 100644
index 000000000000..3bd16e178a03
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldLabel/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/app/client/packages/design-system/widgets/src/components/Label/src/Label.tsx b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx
similarity index 95%
rename from app/client/packages/design-system/widgets/src/components/Label/src/Label.tsx
rename to app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx
index 0724a86324d3..18ce87eee192 100644
--- a/app/client/packages/design-system/widgets/src/components/Label/src/Label.tsx
+++ b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx
@@ -5,7 +5,7 @@ import { Label as HeadlessLabel } from "react-aria-components";
 import styles from "./styles.module.css";
 import type { LabelProps } from "./types";
 
-export const Label = (props: LabelProps) => {
+export const FieldLabel = (props: LabelProps) => {
   const { className, contextualHelp, isDisabled, isRequired, text, ...rest } =
     props;
 
diff --git a/app/client/packages/design-system/widgets/src/components/FieldLabel/src/index.ts b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/index.ts
new file mode 100644
index 000000000000..8f55bdf616e5
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/index.ts
@@ -0,0 +1 @@
+export * from "./FieldLabel";
diff --git a/app/client/packages/design-system/widgets/src/components/Label/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/styles.module.css
similarity index 100%
rename from app/client/packages/design-system/widgets/src/components/Label/src/styles.module.css
rename to app/client/packages/design-system/widgets/src/components/FieldLabel/src/styles.module.css
diff --git a/app/client/packages/design-system/widgets/src/components/Label/src/types.ts b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/types.ts
similarity index 100%
rename from app/client/packages/design-system/widgets/src/components/Label/src/types.ts
rename to app/client/packages/design-system/widgets/src/components/FieldLabel/src/types.ts
diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/index.ts b/app/client/packages/design-system/widgets/src/components/FieldListPopover/index.ts
new file mode 100644
index 000000000000..3bd16e178a03
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/FieldListPopover.tsx b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/FieldListPopover.tsx
new file mode 100644
index 000000000000..d9d7921a8278
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/FieldListPopover.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import clsx from "clsx";
+import { getTypographyClassName } from "@appsmith/wds-theming";
+import { listItemStyles, Popover, Icon } from "@appsmith/wds";
+import { ListBox, ListBoxItem } from "react-aria-components";
+import styles from "./styles.module.css";
+import type { FieldListPopoverProps } from "./types";
+
+export const FieldListPopover = (props: FieldListPopoverProps) => {
+  const { items } = props;
+
+  // place Popover in the root theme provider to get access to the CSS tokens
+  const root = document.body.querySelector(
+    "[data-theme-provider]",
+  ) as HTMLButtonElement;
+
+  return (
+    <Popover UNSTABLE_portalContainer={root}>
+      <ListBox className={styles.listBox} items={items} shouldFocusWrap>
+        {(item) => (
+          <ListBoxItem
+            className={clsx(
+              listItemStyles.item,
+              getTypographyClassName("body"),
+            )}
+            key={item.id}
+            textValue={item.label}
+          >
+            {item.icon && <Icon name={item.icon} />}
+            {item.label}
+          </ListBoxItem>
+        )}
+      </ListBox>
+    </Popover>
+  );
+};
diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/index.ts b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/index.ts
new file mode 100644
index 000000000000..be087d853eb9
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./FieldListPopover";
+export type { FieldListPopoverProps, FieldListPopoverItem } from "./types";
diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/styles.module.css
new file mode 100644
index 000000000000..5d7dc5e49ab0
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/styles.module.css
@@ -0,0 +1,12 @@
+.listBox {
+  min-inline-size: var(--trigger-width);
+  max-height: inherit;
+  overflow-y: auto;
+}
+
+/** If at least one select item has an icon, we need to add extra padding for items that doesn't have an icon. */
+.listBox:has([data-icon]) [role="option"]:not(:has([data-icon])) {
+  padding-inline-start: calc(
+    var(--icon-size-4) + var(--inner-spacing-3) + var(--inner-spacing-2)
+  );
+}
diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/types.ts b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/types.ts
new file mode 100644
index 000000000000..3c98ccf204a5
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/types.ts
@@ -0,0 +1,13 @@
+import type { Key } from "@react-types/shared";
+import type { IconProps } from "@appsmith/wds";
+
+export interface FieldListPopoverProps {
+  /** Item objects in the collection. */
+  items: FieldListPopoverItem[];
+}
+
+export interface FieldListPopoverItem {
+  id: Key;
+  label: string;
+  icon?: IconProps["name"];
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css
index 0cf6235250a0..2f51bab366a4 100644
--- a/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css
@@ -1,24 +1,30 @@
 @import "../../../shared/colors/colors.module.css";
 
 .icon {
-  &[data-size="small"] {
+  &[data-size="xSmall"] {
     inline-size: var(--icon-size-1);
     block-size: var(--icon-size-1);
     stroke-width: var(--stroke-width-1);
   }
 
-  &[data-size="medium"] {
+  &[data-size="small"] {
     inline-size: var(--icon-size-2);
     block-size: var(--icon-size-2);
     stroke-width: var(--stroke-width-2);
   }
 
-  &[data-size="large"] {
+  &[data-size="medium"] {
     inline-size: var(--icon-size-3);
     block-size: var(--icon-size-3);
     stroke-width: var(--stroke-width-3);
   }
 
+  &[data-size="large"] {
+    inline-size: var(--icon-size-4);
+    block-size: var(--icon-size-4);
+    stroke-width: var(--stroke-width-4);
+  }
+
   @each $color in colors {
     &[data-color="$(color)"] {
       color: var(--color-fg-$(color));
diff --git a/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx b/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx
index 6b7a621be0de..8f76dba9673e 100644
--- a/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx
@@ -22,9 +22,10 @@ export const Main: Story = {
 /**
  * The Icon component comes with three sizes
  *
- * - small — 1rem = 16px
- * - medium — 1.5rem = 24px
- * - large — 2rem = 32px
+ * - xSmall = 14px
+ * - small = 16px
+ * - medium = 24px
+ * - large = 32px
  */
 export const Sizes: Story = {
   render: () => (
diff --git a/app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx b/app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx
index 0214990599bb..96fdcf0343dc 100644
--- a/app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/IconButton/stories/IconButton.stories.tsx
@@ -65,8 +65,8 @@ export const Semantic: Story = {
 export const Sizes: Story = {
   render: () => (
     <Flex alignItems="start" gap="spacing-2">
-      {Object.keys(SIZES)
-        .filter((size) => !["large"].includes(size))
+      {objectKeys(SIZES)
+        .filter((size) => !["xSmall", "large"].includes(size))
         .map((size) => (
           <IconButton icon="star" key={size} size={size} />
         ))}
diff --git a/app/client/packages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx b/app/client/packages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx
index 7574bd3ee199..44a274739d78 100644
--- a/app/client/packages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/InlineButtons/stories/InlineButtons.stories.tsx
@@ -67,7 +67,7 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="100%">
       {Object.keys(SIZES)
-        .filter((size) => !["large"].includes(size))
+        .filter((size) => !["xSmall", "large"].includes(size))
         .map((size) => (
           <InlineButtons items={itemList} key={size} size={size} />
         ))}
diff --git a/app/client/packages/design-system/widgets/src/components/Label/src/index.ts b/app/client/packages/design-system/widgets/src/components/Label/src/index.ts
deleted file mode 100644
index e0a468a2d250..000000000000
--- a/app/client/packages/design-system/widgets/src/components/Label/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Label";
diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css
index 66190b14cf61..85f54d568986 100644
--- a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css
@@ -6,7 +6,7 @@
   &:has([data-icon]:not([data-chevron]))
     [role="menuitem"]:not(:has([data-icon])) {
     padding-inline-start: calc(
-      var(--icon-size-2) + var(--inner-spacing-3) + var(--inner-spacing-2)
+      var(--icon-size-4) + var(--inner-spacing-3) + var(--inner-spacing-2)
     );
   }
 }
diff --git a/app/client/packages/design-system/widgets/src/components/RadioGroup/src/RadioGroup.tsx b/app/client/packages/design-system/widgets/src/components/RadioGroup/src/RadioGroup.tsx
index c1b301db2471..a06bceee6c3d 100644
--- a/app/client/packages/design-system/widgets/src/components/RadioGroup/src/RadioGroup.tsx
+++ b/app/client/packages/design-system/widgets/src/components/RadioGroup/src/RadioGroup.tsx
@@ -1,11 +1,11 @@
 import React, { forwardRef, useRef } from "react";
 import { RadioGroup as HeadlessRadioGroup, Radio } from "react-aria-components";
 import {
-  Label,
+  FieldLabel,
   Flex,
   Text,
-  ErrorMessage,
   useGroupOrientation,
+  FieldError,
 } from "@appsmith/wds";
 import styles from "./styles.module.css";
 import type { ForwardedRef } from "react";
@@ -37,7 +37,7 @@ const _RadioGroup = (
       ref={ref}
       {...rest}
     >
-      <Label
+      <FieldLabel
         contextualHelp={contextualHelp}
         isDisabled={isDisabled}
         isRequired={isRequired}
@@ -56,7 +56,7 @@ const _RadioGroup = (
           </Radio>
         ))}
       </Flex>
-      <ErrorMessage text={errorMessage} />
+      <FieldError errorMessage={errorMessage} />
     </HeadlessRadioGroup>
   );
 };
diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/ListBoxItem.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/ListBoxItem.tsx
deleted file mode 100644
index 663456933b35..000000000000
--- a/app/client/packages/design-system/widgets/src/components/Select/src/ListBoxItem.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { ListBoxItem as HeadlessListBoxItem } from "react-aria-components";
-import clsx from "clsx";
-import { getTypographyClassName } from "@appsmith/wds-theming";
-import { listItemStyles } from "@appsmith/wds";
-import type { ListBoxItemProps } from "react-aria-components";
-
-export const ListBoxItem = (props: ListBoxItemProps) => {
-  return (
-    <HeadlessListBoxItem
-      {...props}
-      className={clsx(listItemStyles.item, getTypographyClassName("body"))}
-    />
-  );
-};
diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx
index 4a7b3c7342c0..092c31243454 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx
@@ -1,15 +1,19 @@
-import { Icon, Label, Popover, Spinner, Text } from "@appsmith/wds";
+import React, { useRef } from "react";
+import {
+  FieldDescription,
+  FieldError,
+  Icon,
+  FieldLabel,
+  Spinner,
+  FieldListPopover,
+} from "@appsmith/wds";
 import { getTypographyClassName } from "@appsmith/wds-theming";
 import clsx from "clsx";
-import React, { useRef } from "react";
 import {
   Button,
-  FieldError,
   Select as HeadlessSelect,
-  ListBox,
   SelectValue,
 } from "react-aria-components";
-import { ListBoxItem } from "./ListBoxItem";
 import styles from "./styles.module.css";
 import type { SelectProps } from "./types";
 
@@ -27,11 +31,6 @@ export const Select = (props: SelectProps) => {
   } = props;
   const triggerRef = useRef<HTMLButtonElement>(null);
 
-  // place Popover in the root theme provider to get access to the CSS tokens
-  const root = document.body.querySelector(
-    "[data-theme-provider]",
-  ) as HTMLButtonElement;
-
   return (
     <HeadlessSelect
       aria-label={Boolean(label) ? undefined : "Select"}
@@ -42,7 +41,7 @@ export const Select = (props: SelectProps) => {
     >
       {({ isInvalid }) => (
         <>
-          <Label
+          <FieldLabel
             contextualHelp={contextualHelp}
             isRequired={isRequired}
             text={label}
@@ -65,29 +64,9 @@ export const Select = (props: SelectProps) => {
             {!Boolean(isLoading) && <Icon name="chevron-down" />}
             {Boolean(isLoading) && <Spinner />}
           </Button>
-          <FieldError
-            className={clsx(
-              styles.errorText,
-              getTypographyClassName("footnote"),
-            )}
-          >
-            {errorMessage}
-          </FieldError>
-          {Boolean(description) && !Boolean(isInvalid) && (
-            <Text className={styles.description} lineClamp={2} size="footnote">
-              {description}
-            </Text>
-          )}
-          <Popover UNSTABLE_portalContainer={root}>
-            <ListBox className={styles.listBox} items={items} shouldFocusWrap>
-              {(item) => (
-                <ListBoxItem key={item.id} textValue={item.label}>
-                  {item.icon && <Icon name={item.icon} />}
-                  {item.label}
-                </ListBoxItem>
-              )}
-            </ListBox>
-          </Popover>
+          <FieldError errorMessage={errorMessage} />
+          <FieldDescription description={description} isInvalid={isInvalid} />
+          <FieldListPopover items={items} />
         </>
       )}
     </HeadlessSelect>
diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css
index 10412f1d14a5..f3d0aee824ba 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css
@@ -15,7 +15,7 @@
   background-color: var(--color-bg-neutral-subtle);
   max-inline-size: 100%;
   padding-inline-start: var(--inner-spacing-2);
-  padding-inline-end: calc(var(--inner-spacing-3) + var(--icon-size-2));
+  padding-inline-end: calc(var(--inner-spacing-3) + var(--icon-size-4));
   padding-block: var(--inner-spacing-3);
   box-shadow: inset 0 0 0 var(--border-width-1)
     var(--color-bd-on-neutral-subtle);
@@ -47,21 +47,6 @@
   right: var(--inner-spacing-1);
 }
 
-.necessityIndicator {
-  color: var(--color-fg-negative);
-  margin-inline-start: var(--inner-spacing-1);
-}
-
-.errorText {
-  margin-block-start: var(--inner-spacing-3);
-  color: var(--color-fg-negative);
-}
-
-.description {
-  margin-block-start: var(--inner-spacing-3);
-  color: var(--color-fg-neutral);
-}
-
 .fieldValue {
   text-align: left;
   flex: 1;
@@ -74,14 +59,3 @@
 .fieldValue [data-icon] {
   display: none;
 }
-
-.listBox {
-  min-inline-size: var(--trigger-width);
-}
-
-/** If at least one select item has an icon, we need to add extra padding for items that doesn't have an icon. */
-.listBox:has([data-icon]) [role="option"]:not(:has([data-icon])) {
-  padding-inline-start: calc(
-    var(--icon-size-2) + var(--inner-spacing-3) + var(--inner-spacing-2)
-  );
-}
diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/types.ts b/app/client/packages/design-system/widgets/src/components/Select/src/types.ts
index 4e88e56cac31..1d500e536657 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Select/src/types.ts
@@ -1,14 +1,13 @@
-import type { Key } from "@react-types/shared";
 import type {
   SelectProps as SpectrumSelectProps,
   ValidationResult,
 } from "react-aria-components";
-import type { IconProps, SIZES } from "@appsmith/wds";
+import type { SIZES, FieldListPopoverItem } from "@appsmith/wds";
 
 export interface SelectProps
-  extends Omit<SpectrumSelectProps<SelectItem>, "slot"> {
+  extends Omit<SpectrumSelectProps<FieldListPopoverItem>, "slot"> {
   /** Item objects in the collection. */
-  items: SelectItem[];
+  items: FieldListPopoverItem[];
   /** The content to display as the label. */
   label?: string;
   /** The content to display as the description. */
@@ -19,15 +18,9 @@ export interface SelectProps
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
   /** loading state for the input */
   isLoading?: boolean;
   /** A ContextualHelp element to place next to the label. */
   contextualHelp?: string;
 }
-
-export interface SelectItem {
-  id: Key;
-  label: string;
-  icon?: IconProps["name"];
-}
diff --git a/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx b/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx
index 3f65975cf764..a7b963f96042 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx
@@ -32,7 +32,7 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="sizing-60">
       {Object.keys(SIZES)
-        .filter((size) => !["large"].includes(size))
+        .filter((size) => !["xSmall", "large"].includes(size))
         .map((size) => (
           <Select
             items={selectItems}
@@ -61,7 +61,7 @@ export const Validation: Story = {
         alert("Form submitted");
       }}
     >
-      <Flex direction="column" gap="spacing-2" width="sizing-60">
+      <Flex direction="column" gap="spacing-5" width="sizing-60">
         <Select
           description="description"
           isRequired
diff --git a/app/client/packages/design-system/widgets/src/components/Select/stories/selectData.ts b/app/client/packages/design-system/widgets/src/components/Select/stories/selectData.ts
index 88e7f87bd5cd..09743d9fe1bf 100644
--- a/app/client/packages/design-system/widgets/src/components/Select/stories/selectData.ts
+++ b/app/client/packages/design-system/widgets/src/components/Select/stories/selectData.ts
@@ -1,6 +1,6 @@
-import type { SelectItem } from "../src/types";
+import type { FieldListPopoverItem } from "@appsmith/wds";
 
-export const selectItems: SelectItem[] = [
+export const selectItems: FieldListPopoverItem[] = [
   { id: 1, label: "Aerospace" },
   {
     id: 2,
@@ -15,7 +15,7 @@ export const selectItems: SelectItem[] = [
   { id: 9, label: "Electrical" },
 ];
 
-export const selectItemsWithIcons: SelectItem[] = [
+export const selectItemsWithIcons: FieldListPopoverItem[] = [
   { id: 1, label: "Aerospace", icon: "galaxy" },
   {
     id: 2,
diff --git a/app/client/packages/design-system/widgets/src/components/Spinner/src/index.tsx b/app/client/packages/design-system/widgets/src/components/Spinner/src/index.tsx
index 4dfc88ea5f50..d881c58b15cc 100644
--- a/app/client/packages/design-system/widgets/src/components/Spinner/src/index.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Spinner/src/index.tsx
@@ -4,7 +4,7 @@ import { Icon } from "../../Icon";
 import styles from "./styles.module.css";
 
 const Spinner = () => {
-  return <Icon className={styles.spinner} name="loader" />;
+  return <Icon className={styles.spinner} name="loader" size="xSmall" />;
 };
 
 Spinner.displayName = "Spinner";
diff --git a/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx b/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx
index c554278ed690..2098ce19432e 100644
--- a/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx
+++ b/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx
@@ -21,7 +21,7 @@ export interface TextInputProps extends HeadlessTextInputProps {
    *
    * @default medium
    */
-  size?: Omit<keyof typeof SIZES, "large">;
+  size?: Omit<keyof typeof SIZES, "xSmall" | "large">;
 }
 
 const _TextInput = (props: TextInputProps, ref: HeadlessTextInputRef) => {
@@ -60,7 +60,7 @@ const _TextInput = (props: TextInputProps, ref: HeadlessTextInputRef) => {
           excludeFromTabOrder
           icon={icon}
           onPress={onPressEyeIcon}
-          size="small"
+          size={size === "medium" ? "small" : "xSmall"}
           variant="ghost"
         />
       );
diff --git a/app/client/packages/design-system/widgets/src/components/TextInput/stories/TextInput.stories.tsx b/app/client/packages/design-system/widgets/src/components/TextInput/stories/TextInput.stories.tsx
index cababc2ae478..6cffec499f34 100644
--- a/app/client/packages/design-system/widgets/src/components/TextInput/stories/TextInput.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/TextInput/stories/TextInput.stories.tsx
@@ -38,7 +38,7 @@ export const Sizes: Story = {
   render: () => (
     <Flex alignItems="start" gap="spacing-4">
       {Object.keys(SIZES)
-        .filter((size) => !["large"].includes(size))
+        .filter((size) => !["xSmall", "large"].includes(size))
         .map((size) => (
           <TextInput
             key={size}
@@ -131,7 +131,7 @@ export const Validation: Story = {
         alert("Form submitted");
       }}
     >
-      <Flex direction="column" gap="spacing-2" width="sizing-60">
+      <Flex direction="column" gap="spacing-5" width="sizing-60">
         <TextInput description="description" isRequired label="Validation" />
         <Button type="submit">Submit</Button>
       </Flex>
diff --git a/app/client/packages/design-system/widgets/src/components/ToggleGroup/src/ToggleGroup.tsx b/app/client/packages/design-system/widgets/src/components/ToggleGroup/src/ToggleGroup.tsx
index c1147ecc6e47..4da77ef1f65d 100644
--- a/app/client/packages/design-system/widgets/src/components/ToggleGroup/src/ToggleGroup.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ToggleGroup/src/ToggleGroup.tsx
@@ -1,6 +1,11 @@
 import React, { forwardRef, useRef } from "react";
 import { CheckboxGroup as HeadlessToggleGroup } from "react-aria-components";
-import { ErrorMessage, Label, Flex, useGroupOrientation } from "@appsmith/wds";
+import {
+  FieldError,
+  FieldLabel,
+  Flex,
+  useGroupOrientation,
+} from "@appsmith/wds";
 import styles from "./styles.module.css";
 import type { ForwardedRef } from "react";
 import type { ToggleGroupProps } from "./types";
@@ -33,7 +38,7 @@ const _ToggleGroup = (
       ref={ref}
       {...rest}
     >
-      <Label
+      <FieldLabel
         contextualHelp={contextualHelp}
         isDisabled={isDisabled}
         isRequired={isRequired}
@@ -48,7 +53,7 @@ const _ToggleGroup = (
       >
         {items.map((item, index) => children({ ...item, index }))}
       </Flex>
-      <ErrorMessage text={errorMessage} />
+      <FieldError errorMessage={errorMessage} />
     </HeadlessToggleGroup>
   );
 };
diff --git a/app/client/packages/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx b/app/client/packages/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx
index 584c73fef8b4..917338e6b3cb 100644
--- a/app/client/packages/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ToolbarButtons/stories/ToolbarButtons.stories.tsx
@@ -71,7 +71,7 @@ export const Sizes: Story = {
   render: () => (
     <Flex direction="column" gap="spacing-4" width="100%">
       {Object.keys(SIZES)
-        .filter((size) => !["large"].includes(size))
+        .filter((size) => !["xSmall", "large"].includes(size))
         .map((size) => (
           <ToolbarButtons items={itemList} key={size} size={size} />
         ))}
diff --git a/app/client/packages/design-system/widgets/src/index.ts b/app/client/packages/design-system/widgets/src/index.ts
index 44d2c44100cd..5f3084079042 100644
--- a/app/client/packages/design-system/widgets/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/index.ts
@@ -1,4 +1,3 @@
-// components
 export * from "./components/Icon";
 export * from "./components/Button";
 export * from "./components/IconButton";
@@ -22,8 +21,10 @@ export * from "./components/Select";
 export * from "./components/ContextualHelp";
 export * from "./components/Link";
 export * from "./components/Popover";
-export * from "./components/Label";
-export * from "./components/ErrorMessage";
+export * from "./components/FieldLabel";
+export * from "./components/FieldError";
+export * from "./components/FieldDescription";
+export * from "./components/FieldListPopover";
 
 export * from "./utils";
 export * from "./styles";
diff --git a/app/client/packages/design-system/widgets/src/shared/sizes/index.ts b/app/client/packages/design-system/widgets/src/shared/sizes/index.ts
index 020e0122ad4b..113bdc4dfb2a 100644
--- a/app/client/packages/design-system/widgets/src/shared/sizes/index.ts
+++ b/app/client/packages/design-system/widgets/src/shared/sizes/index.ts
@@ -1,4 +1,5 @@
 export const SIZES = {
+  xSmall: "xSmall",
   small: "small",
   medium: "medium",
   large: "large",
diff --git a/app/client/packages/design-system/widgets/src/styles/src/list-item.module.css b/app/client/packages/design-system/widgets/src/styles/src/list-item.module.css
index 387e150c7130..73864428ff6c 100644
--- a/app/client/packages/design-system/widgets/src/styles/src/list-item.module.css
+++ b/app/client/packages/design-system/widgets/src/styles/src/list-item.module.css
@@ -44,9 +44,7 @@
 }
 
 .item[data-focus-visible] {
-  box-shadow:
-    inset 0 0 0 2px var(--color-bg),
-    inset 0 0 0 4px var(--color-bd-focus);
+  box-shadow: inset 0 0 0 2px var(--color-bd-focus);
 }
 
 .separator {
diff --git a/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx b/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx
index e82318b5f36b..9ddfa6d27b00 100644
--- a/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx
+++ b/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx
@@ -19,6 +19,8 @@ import {
   ModalBody,
   ModalFooter,
   ModalContent,
+  TextInput,
+  ComboBox,
 } from "@appsmith/wds";
 // This component is used only for testing purpose and is not used in the prod
 
@@ -136,6 +138,55 @@ export const ComplexForm = () => {
           </Flex>
           <TextArea label="Your comment" />
         </Flex>
+        <Flex gap="spacing-2">
+          <TextInput />
+          <ComboBox
+            items={[
+              {
+                id: "s",
+                label: "S",
+              },
+              {
+                id: "m",
+                label: "M",
+              },
+              {
+                id: "l",
+                label: "L",
+              },
+              {
+                id: "xl",
+                label: "XL",
+              },
+            ]}
+          />
+          <Button>Ok</Button>
+        </Flex>
+        <Flex gap="spacing-2">
+          <TextInput size="small" />
+          <ComboBox
+            items={[
+              {
+                id: "s",
+                label: "S",
+              },
+              {
+                id: "m",
+                label: "M",
+              },
+              {
+                id: "l",
+                label: "L",
+              },
+              {
+                id: "xl",
+                label: "XL",
+              },
+            ]}
+            size="small"
+          />
+          <Button size="small">Ok</Button>
+        </Flex>
       </Flex>
 
       <Flex gap="spacing-2">
diff --git a/app/client/packages/storybook/.storybook/addons/theming/manager.ts b/app/client/packages/storybook/.storybook/addons/theming/manager.ts
index e703d5bea777..96efbe17db25 100644
--- a/app/client/packages/storybook/.storybook/addons/theming/manager.ts
+++ b/app/client/packages/storybook/.storybook/addons/theming/manager.ts
@@ -10,7 +10,10 @@ addons.register("widgets/theming", () => {
       const { viewMode, storyId } = args;
 
       // show the addon only on wds
-      return Boolean(storyId && storyId?.includes("widgets"));
+      return Boolean(
+        (storyId && storyId?.includes("widgets")) ||
+          storyId?.includes("testing"),
+      );
     },
   });
 });
diff --git a/app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx
index a5e3d7e0d2cd..00a8a6c9b4bf 100644
--- a/app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx
+++ b/app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx
@@ -20,7 +20,7 @@ import {
 } from "../config";
 import { validateInput } from "./helpers";
 import type { WDSSelectWidgetProps } from "./types";
-import type { SelectItem } from "@appsmith/wds/src/components/Select/src/types";
+import type { FieldListPopoverItem } from "@appsmith/wds";
 
 const isTrueObject = (item: unknown): item is Record<string, unknown> => {
   return Object.prototype.toString.call(item) === "[object Object]";
@@ -135,7 +135,7 @@ class WDSSelectWidget extends BaseWidget<WDSSelectWidgetProps, WidgetState> {
 
   optionsToSelectItems = (
     options: WDSSelectWidgetProps["options"],
-  ): SelectItem[] => {
+  ): FieldListPopoverItem[] => {
     if (Array.isArray(options)) {
       const items = options.map((option) => ({
         label: option[this.props.optionLabel || "label"] as string,