diff --git a/semcore/button/src/component/ButtonLink/ButtonLink.type.ts b/semcore/button/src/component/ButtonLink/ButtonLink.type.ts
index 6a7048ef72..3d23b035be 100644
--- a/semcore/button/src/component/ButtonLink/ButtonLink.type.ts
+++ b/semcore/button/src/component/ButtonLink/ButtonLink.type.ts
@@ -6,7 +6,7 @@ import type { NSText } from '@semcore/typography';
 import type { NSButton } from '../Button/Button.type';
 
 declare namespace NSButtonLink {
-  type Props = Intergalactic.InternalTypings.EfficientOmit<NSLink.Props, 'enableVisited'> & {
+  type Props = Intergalactic.InternalTypings.EfficientOmit<NSLink.Props, 'enableVisited' | 'use' | 'theme'> & {
   /**
    *  Button link type
    * @default primary
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx b/semcore/side-panel/__tests__/side-panel.browser-test.tsx
index afdba841b6..856d224a44 100644
--- a/semcore/side-panel/__tests__/side-panel.browser-test.tsx
+++ b/semcore/side-panel/__tests__/side-panel.browser-test.tsx
@@ -12,8 +12,11 @@ export const locators = {
   header: (page: Page) => page.locator('[data-ui-name="SidePanel.Header"]'),
   body: (page: Page) => page.locator('[data-ui-name="SidePanel.Body"]'),
   footer: (page: Page) => page.locator('[data-ui-name="SidePanel.Footer"]'),
-  title: (page: Page) => page.locator('h6[data-ui-name="SidePanel.Title"]'),
-  back: (page: Page) => page.locator('[data-ui-name="SidePanel.Back"]'),
+  // Title renders as h6 by default, but examples may override the tag (e.g. tag={Flex}),
+  // so the locators must not depend on the rendered tag name.
+  title: (page: Page) => page.locator('[data-ui-name="SidePanel.Title"]'),
+  backButton: (page: Page) => page.locator('[data-ui-name="SidePanel.Title"] [data-ui-name="ButtonLink"]'),
+  titleText: (page: Page) => page.locator('[data-ui-name="SidePanel.Title"] [data-ui-name="Text"]'),
   dialog: (page: Page) => page.getByRole('dialog'),
   hint: (page: Page) => page.locator('[data-ui-name="Hint"]'),
 
@@ -88,9 +91,11 @@ test.describe(`${TAG.VISUAL} `, () => {
         await expect(locators.body(page)).toHaveCSS('padding-bottom', '16px');
       });
 
-      await test.step('Verify body styles', async () => {
-        await expect(locators.footer(page)).toHaveCSS('padding-top', '8px');
+      await test.step('Verify footer styles', async () => {
         await expect(locators.footer(page)).toHaveCSS('padding-top', '8px');
+        await expect(locators.footer(page)).toHaveCSS('padding-bottom', '8px');
+        await expect(locators.footer(page)).toHaveCSS('padding-left', '24px');
+        await expect(locators.footer(page)).toHaveCSS('padding-right', '24px');
       });
 
       const box = await locators.title(page).boundingBox();
@@ -196,13 +201,15 @@ test.describe(`${TAG.VISUAL} `, () => {
     await expect(locators.button(page, 'Close')).toBeFocused();
     await locators.hint(page).filter({ hasText: 'Close' }).waitFor({ state: 'visible' });
 
-    const title = locators.title(page);
-    await expect(title).toHaveText(titleText);
+    await expect(locators.title(page)).toHaveText(titleText);
+
+    // Ellipsis lives on the Text inside SidePanel.Title, the title itself has ellipsis={false}.
+    const titleTextNode = locators.titleText(page);
     await expect.poll(async () => {
-      return title.evaluate((el) => el.scrollWidth > el.clientWidth);
+      return titleTextNode.evaluate((el) => el.scrollWidth > el.clientWidth);
     }).toBe(true);
 
-    await title.hover();
+    await titleTextNode.hover();
     await locators.hint(page).filter({ hasText: titleText }).waitFor({ state: 'visible' });
     await page.waitForFunction((expectedText) => {
       const titleHint = Array.from(document.querySelectorAll<HTMLElement>('[data-ui-name="Hint"]'))
@@ -214,7 +221,7 @@ test.describe(`${TAG.VISUAL} `, () => {
     await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
   });
 
-  test('Verify SidePanel.Back with long text truncates via ellipsis', {
+  test('Verify back button stays intact while long title text truncates via ellipsis', {
     tag: [TAG.PRIORITY_HIGH, '@side-panel', '@ellipsis', '@button'],
   }, async ({ page }) => {
     await loadPage(
@@ -222,27 +229,36 @@ test.describe(`${TAG.VISUAL} `, () => {
       'stories/components/side-panel/tests/examples/side-panel-additional-states.tsx',
       'en',
       {
-        backText: 'This is a very long Back navigation label that must be truncated',
-        backWMax: 120,
+        ellipsisTitle: true,
         withFooter: true,
+        animationsDisabled: true,
       },
     );
 
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
-    await locators.back(page).waitFor({ state: 'visible' });
+    await locators.backButton(page).waitFor({ state: 'visible' });
 
-    await test.step('Back container width is constrained by wMax', async () => {
-      const backBox = await locators.back(page).boundingBox();
-      expect(backBox!.width).toBeLessThanOrEqual(121);
+    await test.step('Back control is a single icon-only ButtonLink inside the title', async () => {
+      await expect(locators.backButton(page)).toHaveCount(1);
+      await expect(locators.backButton(page).locator('[data-ui-name="ButtonLink.Text"]'))
+        .toHaveCount(0);
     });
 
-    await test.step('Back inner text node is actually truncated', async () => {
-      const textNode = locators.back(page).locator('[data-ui-name="ButtonLink.Text"]');
-      const isTruncated = await textNode.evaluate(
+    await test.step('Title text is truncated', async () => {
+      await expect.poll(async () => {
+        return locators.titleText(page).evaluate((el) => el.scrollWidth > el.clientWidth);
+      }).toBe(true);
+    });
+
+    await test.step('Back button keeps its full width and is not squeezed by the title', async () => {
+      const backBox = await locators.backButton(page).boundingBox();
+      expect(backBox!.width).toBeGreaterThan(0);
+
+      const isBackTruncated = await locators.backButton(page).evaluate(
         (el) => el.scrollWidth > el.clientWidth,
       );
-      expect(isTruncated).toBe(true);
+      expect(isBackTruncated).toBe(false);
     });
   });
 });
@@ -274,7 +290,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
 
     await test.step('Verify focus orted and is looped inside side panel', async () => {
       await page.keyboard.press('Tab');
-      await expect(locators.back(page)).toBeFocused();
+      await expect(locators.backButton(page)).toBeFocused();
 
       await page.keyboard.press('Tab');
       await expect(footerButtons.first()).toBeFocused();
@@ -284,7 +300,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
     });
 
     await test.step('Verify closed by ESC when Close is not focused', async () => {
-      await expect(locators.back(page)).toBeFocused();
+      await expect(locators.backButton(page)).toBeFocused();
       await page.keyboard.press('Escape');
       await locators.dialog(page).waitFor({ state: 'hidden' });
       await expect(page.getByRole('button')).toBeFocused();
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-chromium-linux.png
index 9e1d7f1268..1e51a6c3a3 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-firefox-linux.png
index db4cfaeba8..dae149c6fe 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-webkit-linux.png
index 507393774f..a05e3b1db5 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-bottom-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-chromium-linux.png
index 1ce508b97e..def5464953 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-firefox-linux.png
index 94b4a4557c..0a8fbd0b48 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-webkit-linux.png
index 49d1575830..e5ba58120f 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-left-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-chromium-linux.png
index c9ece42d7e..2c037c5e00 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-firefox-linux.png
index b35637dd74..4cf90d7dea 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-webkit-linux.png
index d33b7bc1b5..e8e17ac423 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-right-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-chromium-linux.png
index a1a5ebf9ea..9c23a38f7e 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-firefox-linux.png
index b2a653b5d0..02bf843a2b 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-webkit-linux.png
index 97a2ab2d95..e170f50328 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Base-example-looks-good-in-each-placement-top-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-chromium-linux.png
index d7a7ad1aab..9fe65b7f87 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-firefox-linux.png
index 46baf4524e..a11c8c4281 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-webkit-linux.png
index 4832e9961b..92be0d0e76 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-looks-good-when-SidePanel-Close-and-closable-true-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-chromium-linux.png
index 911b8cf2d0..9fe65b7f87 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-firefox-linux.png
index 46baf4524e..1bfe260151 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-webkit-linux.png
index 4832e9961b..5b0b1c13b9 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Close-button-shown-when-SidePanel-Close-and-closable-false-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-chromium-linux.png
index cc5370615d..d7f83c0bb7 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-firefox-linux.png
index 069cd183f6..9027ec01cf 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-webkit-linux.png
index 6af0873110..3d2c1141b5 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-bottom-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-chromium-linux.png
index ac813ff6bd..a8cffe9015 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-firefox-linux.png
index 19ab325013..32d3becd14 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-webkit-linux.png
index 30b8947ffd..90b4254660 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-left-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-chromium-linux.png
index db3d1ecdce..8de417d8e4 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-firefox-linux.png
index 919d518c26..f5d5322b3d 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-webkit-linux.png
index ba1c452bef..861f86985c 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-right-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-chromium-linux.png
index 1be59842d7..fe704c8847 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-firefox-linux.png
index 83b7baa558..65a4ff6719 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-webkit-linux.png
index f881d609c6..a19c18c0fa 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Internal-component-inside-positioned-correclty-in-each-placement-top-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-chromium-linux.png
index accd362efb..087e843bba 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-firefox-linux.png
index 67fac654a7..e5a8e91f7a 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-webkit-linux.png
index 30661c02d1..bb62c08ad3 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-No-Close-button-when-no-SidePanel-Close-and-closable-false-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-chromium-linux.png
index 43c0ebd68f..0b8106ca14 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-firefox-linux.png
index 8cfac5d1c6..a8a1fbe97d 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-webkit-linux.png
index 3abd4e6d1d..f683bab5d2 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Ellipsis-and-tooltip-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-chromium-linux.png
index ea640a1fbb..81574b0c9e 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-firefox-linux.png
index f3d89cbd6e..676ed9ebea 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-webkit-linux.png
index a9f8cbadc0..5ba99d7936 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-chromium-linux.png
index a86087743f..33d0102a28 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-firefox-linux.png
index 227616276c..0af6665377 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-webkit-linux.png
index 9d23f25eb3..e58f6285dd 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-bottom-2-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-chromium-linux.png
index 511c6e20bd..0d2a5a0d06 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-firefox-linux.png
index b8195267e8..a0e8c04b2d 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-webkit-linux.png
index dfe1ebf1c5..85cf82d68c 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-chromium-linux.png
index 08e6394cd5..2bef9da564 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-firefox-linux.png
index e0fafd80e3..0599abf5ac 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-webkit-linux.png
index dd5cf2273b..10a46c942b 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-left-2-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-chromium-linux.png
index 57414e789d..a7841e2329 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-firefox-linux.png
index 4d934c7117..943c599b3c 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-webkit-linux.png
index 6c66eb1420..d9e795db73 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-chromium-linux.png
index 4c53ebc8f0..1629fd062f 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-firefox-linux.png
index 213fcc808f..81d6fb66ec 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-webkit-linux.png
index e324e5f1ed..44cf8bb85e 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-right-2-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-chromium-linux.png
index cd16d08840..acdd234253 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-firefox-linux.png
index 5d455d83d9..417b051328 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-webkit-linux.png
index 4862a3f1b7..178dbd8df8 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-chromium-linux.png
index 10d8e0c50a..34d9cebb72 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-firefox-linux.png
index ce6ce4f472..aff38ffd0d 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-webkit-linux.png
index c277c3eef3..a97adfa44e 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-Header-and-Footer-looks-good-in-each-placement-top-2-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-chromium-linux.png
index cabd4c74e0..a191be3248 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-firefox-linux.png
index c12fc7e082..b97fcd2180 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-webkit-linux.png
index c92fa73e9f..c9508c9c6e 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-bottom-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-chromium-linux.png
index 71e0254ea3..19dc1d8ae5 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-firefox-linux.png
index f6354516cd..7a981c5945 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-webkit-linux.png
index 0b96c96b85..6d45a85927 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-left-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-chromium-linux.png
index bf560fe36c..09dd5cdbd9 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-firefox-linux.png
index f00dd90961..bd58bd4f29 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-webkit-linux.png
index 7ceb08cdee..cbdd3a36c5 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-right-1-webkit-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-chromium-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-chromium-linux.png
index 885452dc8c..21b64be46c 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-chromium-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-chromium-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-firefox-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-firefox-linux.png
index 5e26c8fff4..dcc646b5cf 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-firefox-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-firefox-linux.png differ
diff --git a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-webkit-linux.png b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-webkit-linux.png
index 78924f8a81..eb431c396a 100644
Binary files a/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-webkit-linux.png and b/semcore/side-panel/__tests__/side-panel.browser-test.tsx-snapshots/-visual-Verify-Side-panel-with-disabled-overlay-in-each-placement-top-1-webkit-linux.png differ
diff --git a/semcore/side-panel/src/SidePanel.tsx b/semcore/side-panel/src/SidePanel.tsx
index dd5355540b..66d8670781 100644
--- a/semcore/side-panel/src/SidePanel.tsx
+++ b/semcore/side-panel/src/SidePanel.tsx
@@ -273,7 +273,7 @@ function Header(
   const SHeader = Root;
   const { Children, styles, title } = props;
   return sstyled(styles)(
-    <SHeader render={Box} tag='header'>
+    <SHeader render={Flex} tag='header'>
       {title && <SidePanel.Title children={title} />}
       <Children />
     </SHeader>,
diff --git a/semcore/side-panel/src/SidePanel.type.ts b/semcore/side-panel/src/SidePanel.type.ts
index f18498d897..50577b2a36 100644
--- a/semcore/side-panel/src/SidePanel.type.ts
+++ b/semcore/side-panel/src/SidePanel.type.ts
@@ -103,6 +103,9 @@ declare namespace NSSidePanel {
 
   type Component = Intergalactic.Component<'div', Props, Ctx> & {
     Header: Header.Component;
+    /**
+     * @deprecated. Use ButtonLink instead.
+     */
     Back: Back.Component;
     Body: Body.Component;
     Footer: Footer.Component;
diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css
index 4a12d38e53..72365331d1 100644
--- a/semcore/side-panel/src/style/side-panel.shadow.css
+++ b/semcore/side-panel/src/style/side-panel.shadow.css
@@ -61,12 +61,7 @@ SClose {
   position: absolute;
   z-index: 1;
   right: var(--intergalactic-spacing-2x, 8px);
-  top: var(--intergalactic-spacing-2x, 8px);
-
-  & SAddon:only-child {
-    margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-    margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-  }
+  top: var(--intergalactic-spacing-1x, 4px);
 }
 
 SBack {
@@ -74,27 +69,32 @@ SBack {
 }
 
 SHeader {
-  padding-left: var(--intergalactic-spacing-6x, 24px);
-  margin-bottom: var(--intergalactic-spacing-1x, 4px);
-  padding-right: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-4x, 16px));
-  margin-top: var(--intergalactic-spacing-1x, 4px);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  padding-right: var(--intergalactic-spacing-14x, 56px);
+  padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px);
   min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));
-  box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   box-sizing: border-box;
   flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
 }
 
 SFooter {
   min-height: 44px;
-  box-shadow: inset 0 1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-  box-sizing: border-box;
+  padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+  border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 SBody {
   height: 100%;
   overflow: auto;
-  padding-left: var(--intergalactic-spacing-6x, 24px);
-  padding-bottom:var(--intergalactic-spacing-4x, 16px);
-  padding-right: var(--intergalactic-spacing-6x, 24px);
-  padding-top: var(--intergalactic-spacing-4x, 16px);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom:var(--intergalactic-spacing-content-padding-large, 16px);
+  padding-right: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-top: var(--intergalactic-spacing-content-padding-large, 16px);
 }
diff --git a/stories/components/side-panel/docs/examples/access_to_internal_components.tsx b/stories/components/side-panel/docs/examples/access_to_internal_components.tsx
index 2ff26047d3..feec69339e 100644
--- a/stories/components/side-panel/docs/examples/access_to_internal_components.tsx
+++ b/stories/components/side-panel/docs/examples/access_to_internal_components.tsx
@@ -21,7 +21,7 @@ const Demo = (props: NSSidePanel.Props) => {
         <SidePanel.Overlay>
           <SidePanel.Panel>
             <SidePanel.Header>
-              <SidePanel.Title mt={3}>Taking the Stage</SidePanel.Title>
+              <SidePanel.Title>Taking the Stage</SidePanel.Title>
             </SidePanel.Header>
             <SidePanel.Body>
               <Text size={300} tag='p'>
diff --git a/stories/components/side-panel/docs/examples/advanced_example.tsx b/stories/components/side-panel/docs/examples/advanced_example.tsx
index ca62f13489..d62b0967c0 100644
--- a/stories/components/side-panel/docs/examples/advanced_example.tsx
+++ b/stories/components/side-panel/docs/examples/advanced_example.tsx
@@ -1,4 +1,6 @@
-import Button from '@semcore/ui/button';
+import ArrowLeft from '@semcore/icon/ArrowLeft/m';
+import { Flex } from '@semcore/ui/base-components';
+import Button, { ButtonLink } from '@semcore/ui/button';
 import SidePanel from '@semcore/ui/side-panel';
 import type { NSSidePanel } from '@semcore/ui/side-panel';
 import React from 'react';
@@ -17,14 +19,16 @@ const Demo = (props: NSSidePanel.Props) => {
         closable={props.closable}
         disablePreventScroll={props.disablePreventScroll}
       >
-        <SidePanel.Header h='64px'>
-          <SidePanel.Back>Go to Tool Name</SidePanel.Back>
-          <SidePanel.Title mt={3}>SidePanel title</SidePanel.Title>
+        <SidePanel.Header>
+          <SidePanel.Title ellipsis={false} tag={Flex} alignItems='start'>
+            <ButtonLink use='secondary' size={300} addonLeft={ArrowLeft} mr={2} title='Back to {Step}' />
+            SidePanel title
+          </SidePanel.Title>
         </SidePanel.Header>
         <SidePanel.Body>Content</SidePanel.Body>
-        <SidePanel.Footer justifyContent='center' pt={2} h='80px'>
+        <SidePanel.Footer>
           <Button size='l' use='primary'>Got it!</Button>
-          <Button size='l' ml={2}>Cancel</Button>
+          <Button size='l'>Cancel</Button>
         </SidePanel.Footer>
       </SidePanel>
     </>
diff --git a/stories/components/side-panel/docs/examples/basic_example.tsx b/stories/components/side-panel/docs/examples/basic_example.tsx
index 9f0858422e..35b55a77d5 100644
--- a/stories/components/side-panel/docs/examples/basic_example.tsx
+++ b/stories/components/side-panel/docs/examples/basic_example.tsx
@@ -19,7 +19,7 @@ const Demo = (props: NSSidePanel.Props) => {
         disablePreventScroll={props.disablePreventScroll}
       >
         <SidePanel.Header>
-          <SidePanel.Title mt={3}>SidePanel Title</SidePanel.Title>
+          <SidePanel.Title>SidePanel Title</SidePanel.Title>
         </SidePanel.Header>
         <SidePanel.Body>
           <Text size={300} tag='p'>
diff --git a/stories/components/side-panel/docs/examples/disabling_overlay.tsx b/stories/components/side-panel/docs/examples/disabling_overlay.tsx
index 77aa8a7550..adb26998ff 100644
--- a/stories/components/side-panel/docs/examples/disabling_overlay.tsx
+++ b/stories/components/side-panel/docs/examples/disabling_overlay.tsx
@@ -19,7 +19,7 @@ const Demo = (props: NSSidePanel.Props) => {
       >
         <SidePanel.Panel aria-label='SidePanel example' mt={20}>
           <SidePanel.Header>
-            <SidePanel.Title mt={3}>SidePanel Title</SidePanel.Title>
+            <SidePanel.Title>SidePanel Title</SidePanel.Title>
           </SidePanel.Header>
           <SidePanel.Body>
             <Text size={300} tag='p'>
diff --git a/stories/components/side-panel/docs/examples/portals.tsx b/stories/components/side-panel/docs/examples/portals.tsx
index d613985076..cf875ff6bd 100644
--- a/stories/components/side-panel/docs/examples/portals.tsx
+++ b/stories/components/side-panel/docs/examples/portals.tsx
@@ -12,7 +12,7 @@ const Demo = () => {
       <SidePanel visible={visible} onClose={() => setVisible(false)} disablePortal>
         <SidePanel.Panel aria-label='Taking the stage' mt={20}>
           <SidePanel.Header>
-            <SidePanel.Title mt={3}>SidePanel Title</SidePanel.Title>
+            <SidePanel.Title>SidePanel Title</SidePanel.Title>
           </SidePanel.Header>
           <SidePanel.Body>
             <Text size={300} tag='p'>
diff --git a/stories/components/side-panel/tests/examples/additional-content-in-header.tsx b/stories/components/side-panel/tests/examples/additional-content-in-header.tsx
index 55387b1556..4d602c8013 100644
--- a/stories/components/side-panel/tests/examples/additional-content-in-header.tsx
+++ b/stories/components/side-panel/tests/examples/additional-content-in-header.tsx
@@ -1,4 +1,5 @@
-import Button from '@semcore/ui/button';
+import ArrowLeft from '@semcore/icon/ArrowLeft/m';
+import Button, { ButtonLink } from '@semcore/ui/button';
 import SidePanel from '@semcore/ui/side-panel';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -20,9 +21,8 @@ export default function Demo() {
           <SidePanel.Close />
 
           <SidePanel.Header>
-            <SidePanel.Back>Back</SidePanel.Back>
-
             <SidePanel.Title ellipsis={false}>
+              <ButtonLink color='text-hint' size={100} addonLeft={ArrowLeft} mr={2} />
               <Text>Static text: </Text>
               <Text use='secondary' ellipsis={withEllipsis} w={80}>{dynamicText}</Text>
             </SidePanel.Title>
diff --git a/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx b/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx
index 23b06ce2cc..1360b6ff07 100644
--- a/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx
+++ b/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx
@@ -1,8 +1,10 @@
+import ArrowLeft from '@semcore/icon/ArrowLeft/m';
 import FileExportM from '@semcore/icon/FileExport/m';
 import { Box, Flex } from '@semcore/ui/base-components';
-import Button from '@semcore/ui/button';
+import Button, { ButtonLink } from '@semcore/ui/button';
 import SidePanel from '@semcore/ui/side-panel';
 import Tooltip from '@semcore/ui/tooltip';
+import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
 export type SidePanelDemoProps = {
@@ -12,7 +14,6 @@ export type SidePanelDemoProps = {
   withAdditionalHeaderContent?: boolean;
   withTooltipInBody?: boolean;
   withFooter?: boolean;
-  backText?: string;
   backWMax?: number;
   animationsDisabled?: boolean;
   forcedAdvancedMode?: boolean;
@@ -25,22 +26,26 @@ export const defaultSidePanelDemoProps: SidePanelDemoProps = {
   withAdditionalHeaderContent: false,
   withTooltipInBody: false,
   withFooter: false,
-  backText: 'Go to Tool Name',
   animationsDisabled: false,
   forcedAdvancedMode: false,
 };
 
 const Demo = (props: SidePanelDemoProps) => {
   const [visible, setVisible] = React.useState(false);
-  const backText = props.backText ?? defaultSidePanelDemoProps.backText;
+  const ellipsisProps = {
+    'ellipsis': props.ellipsisTitle,
+    'ellipsis:maxLine': props.ellipsisMaxLine && props.ellipsisMaxLine > 1 ? props.ellipsisMaxLine : undefined,
+  };
 
   const content = (
     <>
       {props.withClose && <SidePanel.Close />}
       <SidePanel.Header>
-        <SidePanel.Back wMax={props.backWMax}>{backText}</SidePanel.Back>
-        <SidePanel.Title w={100} ellipsis={props.ellipsisTitle} ellipsis:maxLine={props.ellipsisMaxLine}>
-          Heading 6, 16px Heading 6, 16px
+        <SidePanel.Title ellipsis={false}>
+          <ButtonLink color='text-hint' size={100} addonLeft={ArrowLeft} mr={2} />
+          <Text w={100} {...ellipsisProps}>
+            Heading 6, 16px Heading 6, 16px
+          </Text>
         </SidePanel.Title>
         {props.withAdditionalHeaderContent && (
           <Flex direction='column'>
@@ -61,9 +66,9 @@ const Demo = (props: SidePanelDemoProps) => {
         )}
       </SidePanel.Body>
       {props.withFooter && (
-        <SidePanel.Footer justifyContent='center' pt={2}>
+        <SidePanel.Footer>
           <Button use='primary'>Primary</Button>
-          <Button ml={2}>Cancel</Button>
+          <Button>Cancel</Button>
         </SidePanel.Footer>
       )}
     </>
diff --git a/stories/components/side-panel/tests/side-panel.stories.tsx b/stories/components/side-panel/tests/side-panel.stories.tsx
index cdb81dab71..6ac7afd60c 100644
--- a/stories/components/side-panel/tests/side-panel.stories.tsx
+++ b/stories/components/side-panel/tests/side-panel.stories.tsx
@@ -22,7 +22,6 @@ export const AdditionalStates: StoryObj<typeof defaultSidePanelDemoProps> = {
     withAdditionalHeaderContent: { control: { type: 'boolean' } },
     withTooltipInBody: { control: { type: 'boolean' } },
     withFooter: { control: { type: 'boolean' } },
-    backText: { control: { type: 'text' } },
     backWMax: { control: { type: 'number' } },
   },
 };
diff --git a/website/docs/components/side-panel/side-panel.md b/website/docs/components/side-panel/side-panel.md
index 5e6db14c07..e980a26b07 100644
--- a/website/docs/components/side-panel/side-panel.md
+++ b/website/docs/components/side-panel/side-panel.md
@@ -30,12 +30,11 @@ Use [Modal dialogs](/components/modal/modal) to show important information or re
 Component consists of the following:
 
 1. `SidePanel.Header`
-2. `SidePanel.Back`
-3. `SidePanel.Title`
-4. `SidePanel.Close`
-5. `SidePanel.Body`
-6. `SidePanel.Footer`
-7. `SidePanel.Overlay`
+2. `SidePanel.Title`
+3. `SidePanel.Close`
+4. `SidePanel.Body`
+5. `SidePanel.Footer`
+6. `SidePanel.Overlay`
 
 ## Trigger
 
@@ -51,10 +50,10 @@ The trigger for opening the SidePanel can be the following:
 
 Table: SidePanel with and without overlay
 
-| Appearance example                          | Styles                                                                                                                | When to use                                                                             |
-| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| Without overlay ![](static/light-theme.png) | In this case the panel has only the shadow: `box-shadow: 0px 1px 12px var(--box-shadow-popper)`. There is no overlay. | Use this version if you need to show additional information for a report/product/block. |
-| With overlay ![](static/dark-theme.png)     | In this case panel has an overlay with styles: `background-color: var(--overlay-primary)`.                            | If you need to focus the user on information inside SidePanel, enable overlay.          |
+| Appearance example                          | When to use                                                                             |
+| ------------------------------------------- | --------------------------------------------------------------------------------------- |
+| Without overlay ![](static/light-theme.png) | Use this version if you need to show additional information for a report/product/block. |
+| With overlay ![](static/dark-theme.png)     | If you need to focus the user on information inside SidePanel, enable overlay.          |
 
 ## Appearance
 
@@ -74,10 +73,6 @@ _It can be changed, for example, when using SidePanel on a small screen where yo
 
 General recommendations for `SidePanel` content styles:
 
-- Use a `--spacing-4x` padding between the title and the content:
-
-![](static/content-paddings.png)
-
 - Choose the text size for the panel to maintain a hierarchy of headers in the content within `SidePanel`. If necessary, you can experiment and use your text size hierarchy within our [typographic scale](/style/typography/typography).
 
 ![](static/hierarchy.png)
@@ -93,13 +88,6 @@ You can place common `SidePanel` controls in the footer.
 - Typically, any controls, CTA, or other elements like [ProgressBar](/components/progress-bar/progress-bar) can be placed there.
 - The recommended size of controls in the panel on the desktop is M. Depending on the context, use M or L controls in the panel on small screens.
 
-Footer styles:
-
-```css
-padding: var(--spacing-2x) 0;
-align-items: center;
-```
-
 ![](static/footer-paddings.png)
 
 ## Placement
@@ -126,11 +114,7 @@ The panel can be closed with:
 - Clicking outside the area of the panel (at overlay), optional;
 - `Esc` key.
 
-### Animation
-
-SidePanel opens and closes with the animation: `transition: all 350ms ease-in-out`.
-
-**What happens when the browser window size changes:**
+**When the browser window size changes:**
 
 - The SidePanel has a fixed width that doesn’t change when the browser window is resized. The default width of the panel is 260px, but you can change it if needed.
 - On a 320px screen, the SidePanel shouldn't occupy more than 80% of the screen width to ensure that the user can click outside of it to close it.
diff --git a/website/docs/components/side-panel/static/content-paddings.png b/website/docs/components/side-panel/static/content-paddings.png
deleted file mode 100644
index e77eba8836..0000000000
Binary files a/website/docs/components/side-panel/static/content-paddings.png and /dev/null differ
diff --git a/website/docs/components/side-panel/static/footer-paddings.png b/website/docs/components/side-panel/static/footer-paddings.png
index 4d4a1cba06..3f50b2675f 100644
Binary files a/website/docs/components/side-panel/static/footer-paddings.png and b/website/docs/components/side-panel/static/footer-paddings.png differ
diff --git a/website/docs/components/side-panel/static/sidepanel-composition.png b/website/docs/components/side-panel/static/sidepanel-composition.png
index 6b93d1afdf..b929299fbc 100644
Binary files a/website/docs/components/side-panel/static/sidepanel-composition.png and b/website/docs/components/side-panel/static/sidepanel-composition.png differ
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index f0f0ef6f96..d6f322281a 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -3369,6 +3369,7 @@
       "dropdown-menu",
       "input-tags",
       "pills",
+      "side-panel",
       "wizard"
     ]
   },
@@ -3392,6 +3393,7 @@
       "fullscreen-modal",
       "modal",
       "pills",
+      "side-panel",
       "typography",
       "wizard"
     ]
@@ -3430,6 +3432,7 @@
       "feature-popover",
       "fullscreen-modal",
       "notice-bubble",
+      "side-panel",
       "typography",
       "wizard"
     ]
@@ -3450,6 +3453,7 @@
     "description": "Extended extra large padding for content inside controls and surfaces.",
     "components": [
       "fullscreen-modal",
+      "side-panel",
       "typography"
     ]
   },
@@ -3538,6 +3542,7 @@
       "fullscreen-modal",
       "notice-bubble",
       "pagination",
+      "side-panel",
       "typography"
     ]
   },