diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c6c122843e..6182408e57 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1511,6 +1511,10 @@ importers:
         version: link:../../tools/testing-utils
 
   semcore/pills:
+    dependencies:
+      '@semcore/typography':
+        specifier: ^17.2.1
+        version: link:../typography
     devDependencies:
       '@semcore/badge':
         specifier: workspace:*
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx b/semcore/pills/__tests__/pills.browser-test.tsx
index 7f9b9ccc04..b1bf88e3a6 100644
--- a/semcore/pills/__tests__/pills.browser-test.tsx
+++ b/semcore/pills/__tests__/pills.browser-test.tsx
@@ -42,30 +42,13 @@ test.describe(`${TAG.VISUAL}`, () => {
 
       await test.step('Verify pills sizes styles', async () => {
         if ((await locators.sizeM(page).count()) > 0) {
-          await expect(locators.pillsItem(page).nth(0).locator('[data-ui-name="Pills.Item.Addon"]').first()).toHaveCSS('margin-left', '8px');
-          await expect(locators.pillsItem(page).nth(0).locator('[data-ui-name="Pills.Item.Addon"]').nth(1)).toHaveCSS('margin-right', '8px');
-
-          await expect(locators.pillsItem(page).nth(0).locator('[data-ui-name="Pills.Item.Text"]')).toHaveCSS('margin-right', '8px');
-          await expect(locators.pillsItem(page).nth(0).locator('[data-ui-name="Pills.Item.Text"]')).toHaveCSS('margin-left', '8px');
-
-          await expect(locators.pillsItemText(page).nth(1)).toHaveCSS('margin-left', '8px');
-          await expect(locators.pillsItemText(page).nth(1)).toHaveCSS('margin-right', '8px');
-
           const count = await locators.pillsItem(page).count();
           for (let i = 0; i < count; i++)
-            await expect(locators.pillsItem(page).nth(i)).toHaveCSS('height', '32px');
+            await expect(locators.pillsItem(page).nth(i)).toHaveCSS('height', '28px');
         } else if ((await locators.sizeL(page).count()) > 0) {
-          await expect(locators.pillsItem(page).nth(0).locator('[data-ui-name="Pills.Item.Addon"]').first()).toHaveCSS('margin-left', '12px');
-          await expect(locators.pillsItem(page).nth(0).locator('[data-ui-name="Pills.Item.Addon"]').nth(1)).toHaveCSS('margin-right', '12px');
-
-          await expect(locators.pillsItem(page).nth(0).locator('[data-ui-name="Pills.Item.Text"]')).toHaveCSS('margin-right', '8px');
-          await expect(locators.pillsItem(page).nth(0).locator('[data-ui-name="Pills.Item.Text"]')).toHaveCSS('margin-left', '8px');
-
-          await expect(locators.pillsItemText(page).nth(1)).toHaveCSS('margin-left', '12px');
-          await expect(locators.pillsItemText(page).nth(1)).toHaveCSS('margin-right', '12px');
           const count = await locators.pillsItem(page).count();
           for (let i = 0; i < count; i++)
-            await expect(locators.pillsItem(page).nth(i)).toHaveCSS('height', '44px');
+            await expect(locators.pillsItem(page).nth(i)).toHaveCSS('height', '40px');
         }
       });
     });
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-chromium-linux.png
index ab139e05c9..b9e9db52cf 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-firefox-linux.png
index cad99e959d..f69f77d6ea 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-webkit-linux.png
index d0a564706e..96f0e694bf 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-1-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-chromium-linux.png
index 9720dbe4bf..989c49016b 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-firefox-linux.png
index 5492470d22..771c981e56 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-webkit-linux.png
index fd017063aa..367876a1cd 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-2-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-chromium-linux.png
index e782854b57..959c58e57c 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-firefox-linux.png
index cfec55a0d4..6cf84577ee 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-webkit-linux.png
index 648e6ca158..93aee94b21 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-l-3-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-chromium-darwin.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-chromium-darwin.png
new file mode 100644
index 0000000000..b0709aac41
Binary files /dev/null and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-chromium-darwin.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-chromium-linux.png
index c1f7874cc5..761ce8b13b 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-firefox-linux.png
index b49f1fc152..575ace9b55 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-webkit-linux.png
index 39373644fa..084e605fd0 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-1-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-chromium-darwin.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-chromium-darwin.png
new file mode 100644
index 0000000000..e42180dae9
Binary files /dev/null and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-chromium-darwin.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-chromium-linux.png
index 1a26593db8..d476bd715e 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-firefox-linux.png
index 98ad3b0e98..b56569c96d 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-webkit-linux.png
index 9ee9cddd48..5a8e317bab 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-2-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-chromium-darwin.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-chromium-darwin.png
new file mode 100644
index 0000000000..8bbb8f061d
Binary files /dev/null and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-chromium-darwin.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-chromium-linux.png
index 9b0e110f50..d83c3e636b 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-firefox-linux.png
index 83a9733acf..5b8dd62dce 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-webkit-linux.png
index 2f334eba16..90bb288fa6 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-Pills-with-different-addons-and-size-m-3-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-chromium-linux.png
index 58593a0e77..40497da42a 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-firefox-linux.png
index 592f10b1c2..59249bc996 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-webkit-linux.png
index c71f3e75ac..ce247622cc 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-1-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-chromium-linux.png
index 16bfa93ecb..6cadcedc1f 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-firefox-linux.png
index aeaecf72f2..8ef157fac6 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-webkit-linux.png
index a32c0c4eb6..2d0acd0b39 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-2-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-chromium-linux.png
index e459627645..14f834cf23 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-firefox-linux.png
index 58faf98182..148484eaf6 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-webkit-linux.png
index 86efb6ebd3..9638a19b6c 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-custom-pills-3-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-chromium-linux.png
index 86220ed079..99bd4dad80 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-firefox-linux.png
index 8acfd0a424..789b2be8e1 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-webkit-linux.png
index a74b72acd6..c1e485d9f3 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-different-amout-of-pills-1-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-chromium-linux.png
index 3cf3edae1c..44c6586045 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-firefox-linux.png
index 694b017708..259372cf5f 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-webkit-linux.png
index 3894ec7674..89b89d5ea3 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-l-1-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-chromium-linux.png
index 2ede182b9b..c859dfc259 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-firefox-linux.png
index ea5ba2bbe4..ab5086a5df 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-webkit-linux.png
index 502e410486..fe1a6e9cd1 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-disabled-Pills-with-different-addons-and-size-m-1-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-chromium-linux.png
index c33a05edf0..dad95e86c5 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-firefox-linux.png
index 68b4abffe6..6f60111ba8 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-webkit-linux.png
index 037c9dd5b0..3382ec6c6d 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-counter-1-webkit-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-chromium-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-chromium-linux.png
index 041ed1223f..b01fab07f2 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-chromium-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-chromium-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-firefox-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-firefox-linux.png
index 5f3d2a2256..876b25e626 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-firefox-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-firefox-linux.png differ
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-webkit-linux.png b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-webkit-linux.png
index 5a375048cf..727e2b640e 100644
Binary files a/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-webkit-linux.png and b/semcore/pills/__tests__/pills.browser-test.tsx-snapshots/-visual-Verify-pills-with-tab-panel-1-webkit-linux.png differ
diff --git a/semcore/pills/package.json b/semcore/pills/package.json
index 9d1c9fe4b4..a5357d7f4b 100644
--- a/semcore/pills/package.json
+++ b/semcore/pills/package.json
@@ -16,6 +16,9 @@
     "import": "./lib/esm/index.mjs",
     "require": "./lib/cjs/index.js"
   },
+  "dependencies": {
+    "@semcore/typography": "^17.2.1"
+  },
   "peerDependencies": {
     "@semcore/base-components": "^17.2.1"
   },
diff --git a/semcore/pills/src/Pills.tsx b/semcore/pills/src/Pills.tsx
index 458ca5e28b..d7b33192de 100644
--- a/semcore/pills/src/Pills.tsx
+++ b/semcore/pills/src/Pills.tsx
@@ -1,15 +1,21 @@
-import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';
+import { Box } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
+import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
 import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
+import trottle from '@semcore/core/lib/utils/rafTrottle';
+import { Text as SemcoreText } from '@semcore/typography';
 import React from 'react';
 
 import type { NSPills } from './Pills.type';
 import style from './style/pills.shadow.css';
 
+const TRANSITION_SLOW_THRESHOLD = 1;
+
+type RootProps = Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>;
 class RootPills extends Component<
-  Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>,
+  RootProps,
   typeof RootPills.enhance,
   NSPills.Handlers,
   {},
@@ -18,7 +24,7 @@ class RootPills extends Component<
 > {
   static displayName = 'Pills';
   static style = style;
-  static defaultProps = ({ behavior }: Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>) => ({
+  static defaultProps = ({ behavior }: RootProps) => ({
     size: 'm',
     defaultValue: null,
     behavior: behavior ?? 'auto',
@@ -26,6 +32,15 @@ class RootPills extends Component<
 
   itemValues: Array<NSPills.Pill.Props['value']> = [];
 
+  lastSelectedIndex: number | null = null;
+  currentSelectedIndex: number | null = null;
+
+  rootRef: React.MutableRefObject<HTMLDivElement | null> = React.createRef();
+  pills: Array<HTMLButtonElement> = [];
+  segmentIndicatorRef: React.MutableRefObject<HTMLSpanElement | null> = React.createRef();
+
+  ro: ResizeObserver | null = null;
+
   static enhance = [a11yEnhance({
     onNeighborChange: (neighborElement, props) => {
       if (neighborElement) {
@@ -42,12 +57,64 @@ class RootPills extends Component<
     },
   })] as const;
 
+  constructor(props: RootProps) {
+    super(props);
+    if (canUseDOM()) {
+      this.ro = new ResizeObserver(trottle(() => this.updateSegmentIndicator()));
+    }
+  }
+
   uncontrolledProps() {
     return {
       value: null,
     };
   }
 
+  componentDidUpdate() {
+    this.updateSegmentIndicator();
+  }
+
+  componentDidMount() {
+    this.updateSegmentIndicator();
+
+    if (!this.ro) return;
+
+    for (const pill of this.pills) {
+      this.ro.observe(pill);
+    }
+  }
+
+  componentWillUnmount() {
+    this.ro?.disconnect();
+  }
+
+  updateSegmentIndicator() {
+    if (this.currentSelectedIndex === null) return;
+
+    const root = this.rootRef?.current;
+    const pill = this.pills[this.currentSelectedIndex];
+    const indicator = this.segmentIndicatorRef?.current;
+
+    if (!pill || !root || !indicator) return;
+
+    const pillRect = pill.getBoundingClientRect();
+    const rootRect = root.getBoundingClientRect();
+
+    const speed = this.lastSelectedIndex === null
+      ? '--transition-slow'
+      : Math.abs(this.currentSelectedIndex - this.lastSelectedIndex) > TRANSITION_SLOW_THRESHOLD
+        ? '--transition-slow'
+        : '--transition-fast';
+    const left = pillRect.left - rootRect.left;
+    const width = pillRect.width;
+    const height = pillRect.height;
+
+    indicator.style.setProperty('--global-speed', `var(${speed})`);
+    indicator.style.setProperty('--global-left', `${left}px`);
+    indicator.style.setProperty('--global-width', `${width}px`);
+    indicator.style.setProperty('--global-height', `${height}px`);
+  }
+
   bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {
     this.handlers.value(value, e);
   };
@@ -65,6 +132,11 @@ class RootPills extends Component<
 
     this.itemValues[index] = props.value;
 
+    if (isSelected) {
+      this.lastSelectedIndex = this.currentSelectedIndex;
+      this.currentSelectedIndex = index;
+    }
+
     return {
       index: index,
       size,
@@ -74,12 +146,18 @@ class RootPills extends Component<
       tabIndex: isSelected ? 0 : -1,
       onClick: this.bindHandlerClick(props.value),
       onKeyDown: this.bindHandleKeyDown(props.value),
+      ref: (node: HTMLButtonElement | null) => {
+        if (node === null) return;
+
+        this.pills[index] = node;
+      },
     };
   }
 
   render() {
     const SPills = Root;
-    const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;
+    const SSegmentIndicator = Box;
+    const { Children, styles, disabled, behavior, value } = this.asProps;
 
     return sstyled(styles)(
       <SPills
@@ -87,10 +165,14 @@ class RootPills extends Component<
         role={behavior === 'auto' ? 'radiogroup' : 'tablist'}
         aria-disabled={disabled}
         use:tabIndex={value !== null ? -1 : 0}
+        ref={this.rootRef}
       >
-        <NeighborLocation controlsLength={controlsLength}>
-          <Children />
-        </NeighborLocation>
+        <SSegmentIndicator
+          tag='span'
+          ref={this.segmentIndicatorRef}
+          aria-hidden
+        />
+        <Children />
       </SPills>,
     );
   }
@@ -98,8 +180,9 @@ class RootPills extends Component<
 
 function Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {
   const SPill = Root;
-  const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;
-  const neighborLocation = useNeighborLocationDetect(index);
+  const SPillContainer = Box;
+  const SPillSeparator = Box;
+  const { Children, styles, addonLeft, addonRight, selected, disabled, behavior, size } = props;
 
   const roleAreaProps = {
     'role': behavior === 'auto' ? 'radio' : 'tab',
@@ -108,25 +191,31 @@ function Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPi
   };
 
   return sstyled(styles)(
-    <SPill
-      render={Box}
-      tag='button'
-      type='button'
-      tabIndex={0}
-      neighborLocation={neighborLocation}
-      aria-disabled={disabled}
-      {...roleAreaProps}
-    >
-      {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}
-      {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}
-      {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}
-    </SPill>,
+    <SPillContainer>
+      <SPill
+        render={Box}
+        tag='button'
+        type='button'
+        tabIndex={0}
+        aria-disabled={disabled}
+        {...roleAreaProps}
+      >
+        {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}
+        {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}
+        {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}
+      </SPill>
+      <SPillSeparator
+        // @ts-ignore
+        size={size}
+        aria-hidden
+      />
+    </SPillContainer>,
   );
 }
 
 function Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {
   const SText = Root;
-  return sstyled(props.styles)(<SText render={Box} tag='span' />);
+  return sstyled(props.styles)(<SText render={SemcoreText} size={200} />);
 }
 
 function Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {
diff --git a/semcore/pills/src/Pills.type.ts b/semcore/pills/src/Pills.type.ts
index 0f20d32e76..a723615cd5 100644
--- a/semcore/pills/src/Pills.type.ts
+++ b/semcore/pills/src/Pills.type.ts
@@ -1,11 +1,12 @@
 import type { NSBox, NSNeighborLocation } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { NSText } from '@semcore/typography';
 import type React from 'react';
 
 declare namespace NSPills {
   // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.
   type Value = string | number | boolean | null;
-  type Props<T extends NSPills.Value = NSPills.Value> = NSNeighborLocation.Props & NSBox.Props & {
+  type Props<T extends NSPills.Value = NSPills.Value> = NSBox.Props & {
     /** Pills size */
     size?: 'l' | 'm';
     /** Disabled state */
@@ -55,7 +56,7 @@ declare namespace NSPills {
       addonRight?: React.ElementType;
     };
     namespace Text {
-      type Component = NSBox.Component;
+      type Component = NSText.Component;
     }
     namespace Addon {
       type Component = NSBox.Component;
diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css
index 127459adff..81feb0ece8 100644
--- a/semcore/pills/src/style/pills.shadow.css
+++ b/semcore/pills/src/style/pills.shadow.css
@@ -1,156 +1,163 @@
 SPills {
+  position: relative;
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  isolation: isolate;
-  border-radius: var(--intergalactic-control-rounded, 6px); /* TODO: --intergalactic-pills-rounded */
+  padding: var(--intergalactic-spacing-05x, 2px);
+  min-height: var(--intergalactic-form-control-m, 32px);
+  border-radius: var(--intergalactic-pills-rounded, 6px);
+  background: var(--intergalactic-control-pills-bg-normal, oklch(0.166 0.031 175.8 / 0.097));
+  box-sizing: border-box;
 
-  SPill[selected] {
-    background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); /* TODO: --intergalactic-control-pills-bg-selected */
-    border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-box-shadow-pills-item-selected */
-    z-index: 3;
-  }
-  SPill:focus-visible, SPill[selected] {
-    z-index: 3;
+  &[size='l'] {
+    min-height: var(--intergalactic-form-control-l, 44px);
   }
 
-  SPill:hover, SPill:active {
-    z-index: 2;
+  /*
+    TODO: switch to anchor realisation when layout changes will be supported by FF and Safari.
+    As of now JS fallback is used.
+  */
+  /* &:has(SPill[aria-checked='true'], SPill[aria-selected='true']) {
+    SPill[aria-checked='true'], SPill[aria-selected='true'] {
+      anchor-name: --active-segment;
+    }
+  } */
+
+  SPillContainer {
+    &:last-of-type {
+      SPillSeparator {
+        display: none;
+      }
+    }
   }
+
+  --transition-fast:
+    left calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
+    width calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
+    top calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
+    height calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
+
+  --transition-slow:
+    left calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
+    width calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
+    top calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
+    height calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09));
 }
 
 SPill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: normal;
   position: relative;
-  touch-action: manipulation;
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  box-shadow: none;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-  overflow: visible;
-  text-align: center;
-  vertical-align: middle;
-  font-family: inherit;
+
   cursor: pointer;
-  background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-pills-bg-normal */
-  border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-pills-border */
-  border-radius: var(--intergalactic-control-rounded, 6px); /* TODO: --intergalactic-pills-rounded */
 
-  &::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
+  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--intergalactic-rounded-small, 4px);
 
-  &:active {
-    outline: 0;
-    text-decoration: none;
-  }
+  background-color: transparent;
 
   &:hover {
-    background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-pills-bg-hover */
+    &[aria-checked='false'],
+    &[aria-selected='false'] {
+      :after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--intergalactic-rounded-small, 4px);
+        background: var(--intergalactic-control-pills-bg-hover, oklch(0.151 0.028 176.1 / 0.123));
+      }
+    }
   }
-}
 
-SPill[disabled] {
-  cursor: default;
-  /* Disable link interactions */
-  pointer-events: none;
+  &[disabled] {
+    cursor: default;
+    pointer-events: none;
 
-  &>* {
-    opacity: var(--intergalactic-disabled-opacity, 0.4);
+    &>* {
+      opacity: var(--intergalactic-disabled-opacity, 0.4);
+    }
   }
-}
 
-SText {
-  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-  display: inline-flex;
-}
-
-SAddon {
-  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-SPill[size='m'] {
-  height: var(--intergalactic-form-control-m, 32px);
-  min-width: var(--intergalactic-form-control-m, 32px);
-  font-size: var(--intergalactic-fs-200, 14px);
-
-  & SText {
-    margin-left: var(--intergalactic-spacing-2x, 8px);
-    margin-right: var(--intergalactic-spacing-2x, 8px);
+  &[size='m'] {
+    min-width: calc(var(--intergalactic-form-control-m, 32px) - var(--intergalactic-spacing-1x, 4px));
+    border-width: 2px 3px;
   }
 
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:only-child {
-      margin-left: var(--intergalactic-spacing-2x, 8px);
-      margin-right: var(--intergalactic-spacing-2x, 8px);
-    }
+  &[size='l'] {
+    min-width: calc(var(--intergalactic-form-control-l, 44px) - var(--intergalactic-spacing-1x, 4px));
+    border-width: 3px 3px;
   }
 }
 
-SPill[size='l'] {
-  height: var(--intergalactic-form-control-l, 44px);
-  min-width: var(--intergalactic-form-control-l, 44px);
-  font-size: var(--intergalactic-fs-300, 16px);
-
-  & SText {
-    margin-left: var(--intergalactic-spacing-2x, 8px);
-    margin-right: var(--intergalactic-spacing-2x, 8px);
+SPillContainer {
+  display: inline-flex;
 
-    &:only-child {
-      margin-left: var(--intergalactic-spacing-3x, 12px);
-      margin-right: var(--intergalactic-spacing-3x, 12px);
+  &:has(SPill[aria-checked='true'], SPill[aria-selected='true']) {
+    SPillSeparator {
+      background-color: transparent;
     }
   }
 
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: var(--intergalactic-spacing-3x, 12px);
+  &:has(+ SPillContainer SPill[aria-checked='true'], +SPillContainer SPill[aria-selected='true']) {
+    SPillSeparator {
+      background-color: transparent;
     }
+  }
+}
 
-    &:not(:only-child):last-child {
-      margin-right: var(--intergalactic-spacing-3x, 12px);
-    }
+SPillSeparator {
+  align-self: center;
 
-    &:only-child {
-      margin-left: var(--intergalactic-spacing-3x, 12px);
-      margin-right: var(--intergalactic-spacing-3x, 12px);
-    }
+  width: 1px;
+  height: var(--intergalactic-spacing-4x, 16px);
+  background-color: var(--intergalactic-control-pills-border, oklch(0.137 0.026 175.7 / 0.161));
+
+  &[size='l'] {
+    height: var(--intergalactic-spacing-6x, 24px);
   }
 }
 
-SPill[neighborLocation='right'] {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+SSegmentIndicator {
+  position: absolute;
+
+  /*
+    TODO: switch to anchor realisation when layout changes will be supported by FF and Safari.
+    As of now JS fallback is used.
+  */
+  /* position-anchor:--active-segment; */
+  /*left:anchor(left);*/
+  /*width:anchor-size(width);*/
+  /*height:anchor-size(height);*/
+  left: var(--global-left);
+  width: var(--global-width);
+  height: var(--global-height);
+  transition: var(--global-speed);
+
+  background: var(--intergalactic-control-pills-bg-selected, oklch(1 0 0));
+  box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07));
+  border-radius: var(--intergalactic-rounded-small, 4px);
 }
 
-SPill[neighborLocation='both'] {
-  border-radius: 0;
-  /* disable-tokens-validator */
-  margin-left: -1px;
+SText {
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 }
 
-SPill[neighborLocation='left'] {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  /* disable-tokens-validator */
-  margin-left: -1px;
+SAddon {
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
+
+@media (prefers-reduced-motion) {
+  SSegmentIndicator {
+    transition: none;
+  }
+}
\ No newline at end of file
diff --git a/stories/components/pills/docs/examples/basic_example.tsx b/stories/components/pills/docs/examples/basic_example.tsx
index 4e87719ffc..4a5ee2908b 100644
--- a/stories/components/pills/docs/examples/basic_example.tsx
+++ b/stories/components/pills/docs/examples/basic_example.tsx
@@ -15,7 +15,15 @@ const Demo = (props: PillExampleProps) => {
       <Text size={200} id='pills-basic-usage'>
         Your opinion
       </Text>
-      <Pills mt={2} value={choice} onChange={setChoice} aria-labelledby='pills-basic-usage' size={props.size} disabled={props.disabled} behavior={props.behavior}>
+      <Pills
+        mt={2}
+        value={choice}
+        onChange={setChoice}
+        aria-labelledby='pills-basic-usage'
+        size={props.size}
+        disabled={props.disabled}
+        behavior={props.behavior}
+      >
         <Pills.Item value='like'>
           <Pills.Item.Addon tag={ThumbUpM} />
           <Pills.Item.Text>Like</Pills.Item.Text>
diff --git a/stories/components/pills/tests/Pills.stories.tsx b/stories/components/pills/tests/Pills.stories.tsx
index 9717867c71..9f2e1f39b6 100644
--- a/stories/components/pills/tests/Pills.stories.tsx
+++ b/stories/components/pills/tests/Pills.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import BasicUsageExample, { defaultProps as BasicUsageProps } from './examples/basic_example';
 import PillsAmountExample, { defaultProps as PillsAmountProps } from './examples/different-amount-of-pills';
+import DynamicPillsExample, { defaultProps as DynamicPillsProps } from './examples/dynamic-pills';
 
 const meta: Meta<typeof Pills> = {
   title: 'Components/Pills/Tests',
@@ -38,3 +39,26 @@ export const PillsAmount: StoryObj<typeof PillsAmountProps> = {
   },
   args: PillsAmountProps,
 };
+
+export const DynamicPills: StoryObj<typeof DynamicPillsProps> = {
+  render: DynamicPillsExample,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['m', 'l'],
+    },
+    behavior: {
+      control: { type: 'select' },
+      options: ['manual', 'auto'],
+    },
+    label: {
+      control: { type: 'text' },
+      description: 'Applied through React — triggers a re-render, indicator is recalculated',
+    },
+    domLabel: {
+      control: { type: 'text' },
+      description: 'Applied straight to the DOM — no re-render, only ResizeObserver can notice',
+    },
+  },
+  args: DynamicPillsProps,
+};
diff --git a/stories/components/pills/tests/examples/basic_example.tsx b/stories/components/pills/tests/examples/basic_example.tsx
index 9dc334cf1a..2f7f624a84 100644
--- a/stories/components/pills/tests/examples/basic_example.tsx
+++ b/stories/components/pills/tests/examples/basic_example.tsx
@@ -31,15 +31,15 @@ const Demo = (props: PillExampleProps) => {
         <Pills.Item value={1}>
           <Pills.Item.Addon tag={Globe} />
         </Pills.Item>
-        <Pills.Item value={1}>
+        <Pills.Item value={2}>
+          <Pills.Item.Text>Badge</Pills.Item.Text>
           <Pills.Item.Addon>
-            <Pills.Item.Text>Badge</Pills.Item.Text>
             <Badge type='admin' />
           </Pills.Item.Addon>
         </Pills.Item>
-        <Pills.Item value={2} addonRight={Globe}>
+        <Pills.Item value={3} addonRight={Globe}>
         </Pills.Item>
-        <Pills.Item value={1} disabled>
+        <Pills.Item value={4} disabled>
           <Pills.Item.Addon>
             <Pills.Item.Text>Spin</Pills.Item.Text>
             <Spin size='s' />
diff --git a/stories/components/pills/tests/examples/dynamic-pills.tsx b/stories/components/pills/tests/examples/dynamic-pills.tsx
new file mode 100644
index 0000000000..ccfac922b4
--- /dev/null
+++ b/stories/components/pills/tests/examples/dynamic-pills.tsx
@@ -0,0 +1,76 @@
+import { Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import Pills from '@semcore/ui/pills';
+import type { NSPills } from '@semcore/ui/pills';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+type PillExampleProps = Pick<NSPills.Props, 'size' | 'behavior'> & {
+  label: string;
+  domLabel: string;
+};
+
+const Demo = (props: PillExampleProps) => {
+  const [count, setCount] = React.useState(2);
+  const [choice, setChoice] = React.useState<number>(1);
+
+  const textRefs = React.useRef<Record<number, HTMLElement | null>>({});
+
+  const applyDomLabel = () => {
+    const node = textRefs.current[choice];
+
+    if (node) {
+      node.textContent = props.domLabel;
+    }
+  };
+
+  const resetDomLabels = () => {
+    for (const [value, node] of Object.entries(textRefs.current)) {
+      if (node) {
+        node.textContent = `${props.label} ${value}`;
+      }
+    }
+  };
+
+  return (
+    <Flex direction='column' alignItems='flex-start' gap={4}>
+      <Flex gap={2} flexWrap>
+        <Button onClick={() => setCount(count + 1)}>Add pill</Button>
+        <Button onClick={() => setCount(Math.max(1, count - 1))}>Remove pill</Button>
+        <Button use='primary' onClick={applyDomLabel}>
+          Widen selected pill (DOM only)
+        </Button>
+        <Button onClick={resetDomLabels}>Restore labels (DOM only)</Button>
+      </Flex>
+
+      <Pills value={choice} onChange={setChoice} size={props.size} behavior={props.behavior}>
+        {Array.from({ length: count }, (_, index) => (
+          <Pills.Item key={index} value={index + 1}>
+            <Pills.Item.Text
+              ref={(node: HTMLElement | null) => {
+                textRefs.current[index + 1] = node;
+              }}
+            >
+              {props.label} {index + 1}
+            </Pills.Item.Text>
+          </Pills.Item>
+        ))}
+      </Pills>
+
+      <Text size={200}>
+        Pills: {count}, selected: {choice}
+      </Text>
+    </Flex>
+  );
+};
+
+export const defaultProps: PillExampleProps = {
+  size: 'm',
+  behavior: 'auto',
+  label: 'Pill',
+  domLabel: 'Pill with a much longer label',
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/stories/patterns/core/tests/all-components/components/Tables/PrimaryTable.tsx b/stories/patterns/core/tests/all-components/components/Tables/PrimaryTable.tsx
index fa8c57e2ef..e3b320bf44 100644
--- a/stories/patterns/core/tests/all-components/components/Tables/PrimaryTable.tsx
+++ b/stories/patterns/core/tests/all-components/components/Tables/PrimaryTable.tsx
@@ -15,7 +15,7 @@ import Pills from '@semcore/ui/pills';
 import ProgressBar from '@semcore/ui/progress-bar';
 import SidePanel from '@semcore/ui/side-panel';
 import { Text } from '@semcore/ui/typography';
-import React, { useState } from 'react';
+import React, { useDeferredValue, useState } from 'react';
 import { IntlProvider } from 'react-intl';
 
 import { BeforeTablesControls } from './BeforeTablesControls';
@@ -250,8 +250,9 @@ export default function PrimaryTable({ onPageErrorChange }: PrimaryTableProps =
 
   const [currentPage, setCurrentPage] = React.useState(1);
   const [pillValue, setPillValue] = React.useState<PillValue>('default');
+  const defferedPillValue = React.useDeferredValue(pillValue);
   const tableDemoState: TableDemoState =
-    pillValue === 'pageError' || pillValue === 'progress' ? 'default' : pillValue;
+    defferedPillValue === 'pageError' || defferedPillValue === 'progress' ? 'default' : defferedPillValue;
   const [nameFilter, setNameFilter] = React.useState('');
   const [debouncedNameFilter, setDebouncedNameFilter] = React.useState('');
   const [sidePanelOpen, setSidePanelOpen] = React.useState(false);
@@ -399,7 +400,7 @@ export default function PrimaryTable({ onPageErrorChange }: PrimaryTableProps =
   }, [columns, setColumns]);
 
   const mainTableContent =
-    pillValue === 'pageError'
+    defferedPillValue === 'pageError'
       ? (
           <Box w='100%'>
             <PageError />
@@ -490,7 +491,7 @@ export default function PrimaryTable({ onPageErrorChange }: PrimaryTableProps =
         </Flex>
 
         <Flex gap={3} alignItems='center'>
-          {pillValue === 'progress' && (
+          {defferedPillValue === 'progress' && (
             <ProgressBar
               tabIndex={0}
               value={65}
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index bae9eb82fc..ddd4be581a 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -204,6 +204,7 @@
       "inline-input",
       "input",
       "modal",
+      "select",
       "pills",
       "side-panel",
       "slider",
@@ -225,6 +226,7 @@
     "value": "oklch(0.98 0.001 180)",
     "description": "Hover state of the primary background of the interface which contains the main data and information.",
     "components": [
+      "base-trigger"
       "pills"
     ]
   },
@@ -442,7 +444,6 @@
       "feedback-form",
       "input",
       "input-tags",
-      "pills",
       "tab-line",
       "textarea"
     ]
@@ -463,6 +464,7 @@
       "feedback-form",
       "fullscreen-modal",
       "input",
+      "select",
       "pills",
       "side-panel",
       "slider",
@@ -1136,8 +1138,7 @@
     "value": "oklch(0.527 0.264 262.9 / 0.039)",
     "description": "Background of the accent secondary control.",
     "components": [
-      "base-trigger",
-      "pills"
+      "base-trigger"
     ]
   },
   {
@@ -1985,25 +1986,33 @@
     "name": "--intergalactic-control-pills-bg-hover",
     "value": "oklch(0.151 0.028 176.1 / 0.123)",
     "description": "Hover state of the Pills background.",
-    "components": []
+    "components": [
+      "pills"
+    ]
   },
   {
     "name": "--intergalactic-control-pills-bg-normal",
     "value": "oklch(0.166 0.031 175.8 / 0.097)",
     "description": "Background of the Pills in its normal state.",
-    "components": []
+    "components": [
+      "pills"
+    ]
   },
   {
     "name": "--intergalactic-control-pills-bg-selected",
     "value": "oklch(1 0 0)",
     "description": "Background of the selected Pill.",
-    "components": []
+    "components": [
+      "pills"
+    ]
   },
   {
     "name": "--intergalactic-control-pills-border",
     "value": "oklch(0.137 0.026 175.7 / 0.161)",
     "description": "Border color of the Pills in its normal state.",
-    "components": []
+    "components": [
+      "pills"
+    ]
   },
   {
     "name": "--intergalactic-control-presets-bg",
@@ -3050,6 +3059,7 @@
     "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)",
     "description": "Shadow of the Switch toggle.",
     "components": [
+      "pills",
       "switch"
     ]
   },
@@ -3187,6 +3197,7 @@
       "dropdown",
       "input",
       "modal",
+      "pills",
       "time-picker"
     ]
   },
@@ -3233,6 +3244,7 @@
       "dropdown",
       "dropdown-menu",
       "input",
+      "pills",
       "radio",
       "select"
     ]
@@ -3299,7 +3311,6 @@
       "inline-edit",
       "inline-input",
       "input",
-      "pills",
       "select",
       "tab-panel",
       "textarea",
@@ -3329,7 +3340,9 @@
     "name": "--intergalactic-pills-rounded",
     "value": "6px",
     "description": "Use for rounding Pills.",
-    "components": []
+    "components": [
+      "pills"
+    ]
   },
   {
     "name": "--intergalactic-popper-rounded",