diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
index 642538c8ccb..64a2bbc46c5 100644
--- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
+++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
@@ -103,6 +103,7 @@ AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
 AtomicSortDropdown,
 AtomicSortExpression,
+AtomicTabManager,
 AtomicTableElement,
 AtomicText,
 AtomicTimeframe,
@@ -213,6 +214,7 @@ AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
 AtomicSortDropdown,
 AtomicSortExpression,
+AtomicTabManager,
 AtomicTableElement,
 AtomicText,
 AtomicTimeframe,
diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
index 7b01808e15b..b9f59d11f27 100644
--- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
+++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
@@ -2223,6 +2223,28 @@ export class AtomicSortExpression {
 export declare interface AtomicSortExpression extends Components.AtomicSortExpression {}
 
 
+@ProxyCmp({
+  inputs: ['clearFiltersOnTabChange']
+})
+@Component({
+  selector: 'atomic-tab-manager',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['clearFiltersOnTabChange'],
+})
+export class AtomicTabManager {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicTabManager extends Components.AtomicTabManager {}
+
+
 @ProxyCmp({
   inputs: ['label']
 })
diff --git a/packages/atomic-react/src/components/stencil-generated/search/index.ts b/packages/atomic-react/src/components/stencil-generated/search/index.ts
index 50765440f10..1e9311bb84f 100644
--- a/packages/atomic-react/src/components/stencil-generated/search/index.ts
+++ b/packages/atomic-react/src/components/stencil-generated/search/index.ts
@@ -90,6 +90,7 @@ export const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/createReactComponent
 export const AtomicSmartSnippetSuggestions = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippetSuggestions, HTMLAtomicSmartSnippetSuggestionsElement>('atomic-smart-snippet-suggestions');
 export const AtomicSortDropdown = /*@__PURE__*/createReactComponent<JSX.AtomicSortDropdown, HTMLAtomicSortDropdownElement>('atomic-sort-dropdown');
 export const AtomicSortExpression = /*@__PURE__*/createReactComponent<JSX.AtomicSortExpression, HTMLAtomicSortExpressionElement>('atomic-sort-expression');
+export const AtomicTabManager = /*@__PURE__*/createReactComponent<JSX.AtomicTabManager, HTMLAtomicTabManagerElement>('atomic-tab-manager');
 export const AtomicTableElement = /*@__PURE__*/createReactComponent<JSX.AtomicTableElement, HTMLAtomicTableElementElement>('atomic-table-element');
 export const AtomicText = /*@__PURE__*/createReactComponent<JSX.AtomicText, HTMLAtomicTextElement>('atomic-text');
 export const AtomicTimeframe = /*@__PURE__*/createReactComponent<JSX.AtomicTimeframe, HTMLAtomicTimeframeElement>('atomic-timeframe');
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
index ff0c7ef5c5d..a151a53f748 100644
--- a/packages/atomic/src/components.d.ts
+++ b/packages/atomic/src/components.d.ts
@@ -3352,6 +3352,9 @@ export namespace Components {
          */
         "name": string;
     }
+    /**
+     * @alpha 
+     */
     interface AtomicTabManager {
         /**
           * Whether to clear the filters when the active tab changes.
@@ -5482,6 +5485,9 @@ declare global {
         prototype: HTMLAtomicTabElement;
         new (): HTMLAtomicTabElement;
     };
+    /**
+     * @alpha 
+     */
     interface HTMLAtomicTabManagerElement extends Components.AtomicTabManager, HTMLStencilElement {
     }
     var HTMLAtomicTabManagerElement: {
@@ -8867,6 +8873,9 @@ declare namespace LocalJSX {
          */
         "name": string;
     }
+    /**
+     * @alpha 
+     */
     interface AtomicTabManager {
         /**
           * Whether to clear the filters when the active tab changes.
@@ -9901,6 +9910,9 @@ declare module "@stencil/core" {
              */
             "atomic-sort-expression": LocalJSX.AtomicSortExpression & JSXBase.HTMLAttributes<HTMLAtomicSortExpressionElement>;
             "atomic-tab": LocalJSX.AtomicTab & JSXBase.HTMLAttributes<HTMLAtomicTabElement>;
+            /**
+             * @alpha 
+             */
             "atomic-tab-manager": LocalJSX.AtomicTabManager & JSXBase.HTMLAttributes<HTMLAtomicTabManagerElement>;
             /**
              * The `atomic-table-element` element defines a table column in a result list.
diff --git a/packages/atomic/src/components/common/tab-manager/tab-button.tsx b/packages/atomic/src/components/common/tab-manager/tab-button.tsx
index eb3c53b48f3..04e8c64adaf 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-button.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-button.tsx
@@ -13,14 +13,19 @@ export const TabButton: FunctionalComponent<TabButtonProps> = (props) => {
     : '';
   const activeTabTextClass = props.isActive ? '' : 'text-neutral-dark';
   return (
-    <div part="button-container" class={activeTabClass}>
+    <li
+      aria-current={props.isActive ? 'true' : 'false'}
+      aria-label={'tab for ' + props.label}
+      part="button-container"
+      class={activeTabClass}
+    >
       <Button
         style="text-transparent"
         class={`w-full px-6 pb-1 text-xl ${activeTabTextClass}`}
         text={props.label}
-        part="button"
+        part="tab-button"
         onClick={props.handleClick}
       ></Button>
-    </div>
+    </li>
   );
 };
diff --git a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx b/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
index 68ac2145dd9..1ff2e970e38 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
@@ -11,8 +11,12 @@ export const TabDropdown: FunctionalComponent<TabDropdownProps> = (
   children
 ) => {
   return (
-    <div class="dropdown-area hidden border-b pb-1">
+    <div
+      class="tab-dropdown-area hidden border-b pb-1"
+      aria-label="tab-dropdown-area"
+    >
       <select
+        aria-label="tab-dropdown"
         class="btn-text-primary cursor-pointer py-2 text-xl font-bold"
         onChange={(e) =>
           props.onTabChange((e.target as HTMLSelectElement).value)
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
new file mode 100644
index 00000000000..56b103be2b6
--- /dev/null
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
@@ -0,0 +1,170 @@
+import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import {wrapInSearchInterface} from '@coveo/atomic/storybookUtils/search-interface-wrapper';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit/static-html.js';
+
+const {decorator, play} = wrapInSearchInterface();
+
+const meta: Meta = {
+  component: 'atomic-tab-manager',
+  title: 'Atomic/Tabs',
+  id: 'atomic-tab-manager',
+
+  render: renderComponent,
+  decorators: [decorator],
+  parameters,
+  play,
+  args: {
+    'slots-default': `
+      <atomic-tab name="all" label="All" tab></atomic-tab>
+      <atomic-tab name="article" label="Articles"></atomic-tab>
+      <atomic-tab name="documentation" label="Documentation"></atomic-tab>
+    `,
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-tab-manager',
+  decorators: [
+    (story) => html`
+      ${story()}
+      <div style="display: flex; justify-content: flex-start;">
+        <atomic-facet field="objecttype" label="Object type"></atomic-facet>
+        <atomic-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          field="filetype"
+          label="File type"
+        ></atomic-facet>
+        <atomic-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          field="source"
+          label="Source"
+        ></atomic-facet>
+      </div>
+      <div style="display: flex; justify-content: flex-start;">
+        <atomic-category-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          field="geographicalhierarchy"
+          label="World Atlas"
+          with-search
+        ></atomic-category-facet>
+        <atomic-category-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          field="geographicalhierarchy"
+          label="World Atlas"
+        ></atomic-category-facet>
+        <atomic-color-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          field="filetype"
+          label="Files"
+          number-of-values="6"
+          sort-criteria="occurrences"
+        ></atomic-color-facet>
+        <atomic-color-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          field="filetype"
+          label="Files"
+          number-of-values="6"
+          sort-criteria="occurrences"
+        ></atomic-color-facet>
+      </div>
+      <div style="display: flex; justify-content: flex-start;">
+        <atomic-rating-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          field="snrating"
+          label="Rating"
+          number-of-intervals="5"
+        ></atomic-rating-facet>
+        <atomic-rating-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          field="snrating"
+          label="Rating"
+          number-of-intervals="5"
+        ></atomic-rating-facet>
+        <atomic-rating-range-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          facet-id="snrating_range"
+          field="snrating"
+          label="Rating Range (auto)"
+          number-of-intervals="5"
+        ></atomic-rating-range-facet>
+        <atomic-rating-range-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          facet-id="snrating_range_2"
+          field="snrating"
+          label="Rating Range (auto)"
+          number-of-intervals="5"
+        ></atomic-rating-range-facet>
+      </div>
+      <div style="display: flex; justify-content: flex-start; padding:50px;">
+        <atomic-segmented-facet-scrollable>
+          <atomic-segmented-facet
+            aria-label="included-facet"
+            tabs-included='["article"]'
+            field="inat_kingdom"
+            label="Kingdom"
+          ></atomic-segmented-facet>
+        </atomic-segmented-facet-scrollable>
+        <atomic-segmented-facet-scrollable>
+          <atomic-segmented-facet
+            aria-label="excluded-facet"
+            tabs-excluded='["article"]'
+            field="inat_kingdom"
+            label="Kingdom"
+          ></atomic-segmented-facet>
+        </atomic-segmented-facet-scrollable>
+      </div>
+      <div style="display: flex; justify-content: flex-start;">
+        <atomic-timeframe-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          label="Timeframe"
+          with-date-picker
+        >
+          <atomic-timeframe unit="hour"></atomic-timeframe>
+          <atomic-timeframe unit="day"></atomic-timeframe>
+          <atomic-timeframe unit="week"></atomic-timeframe>
+          <atomic-timeframe unit="month"></atomic-timeframe>
+          <atomic-timeframe unit="quarter"></atomic-timeframe>
+          <atomic-timeframe unit="year"></atomic-timeframe>
+          <atomic-timeframe
+            unit="year"
+            amount="10"
+            period="next"
+          ></atomic-timeframe
+        ></atomic-timeframe-facet>
+        <atomic-timeframe-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          label="Timeframe"
+          with-date-picker
+        >
+          <atomic-timeframe unit="hour"></atomic-timeframe>
+          <atomic-timeframe unit="day"></atomic-timeframe>
+          <atomic-timeframe unit="week"></atomic-timeframe>
+          <atomic-timeframe unit="month"></atomic-timeframe>
+          <atomic-timeframe unit="quarter"></atomic-timeframe>
+          <atomic-timeframe unit="year"></atomic-timeframe>
+          <atomic-timeframe
+            unit="year"
+            amount="10"
+            period="next"
+          ></atomic-timeframe
+        ></atomic-timeframe-facet>
+      </div>
+    `,
+  ],
+};
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss
index 1a2301a809a..c0d397fe0e2 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss
@@ -1,11 +1,11 @@
 @import '../../../../global/global.pcss';
 
 @media (max-width: 768px) {
-  .dropdown-area {
+  .tab-dropdown-area {
     display: block;
   }
 
-  .tabs-area {
+  .tab-area {
     display: none;
   }
 }
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
index aa80388777c..07e5e878843 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
@@ -16,10 +16,11 @@ import {TabDropdownOption} from '../../../common/tab-manager/tab-dropdown-option
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
- * @internal
+ * @alpha
  *
  * @part button-container - The container for the tab button.
  * @part button - The tab button.
+ * @slot default
  */
 @Component({
   tag: 'atomic-tab-manager',
@@ -77,7 +78,11 @@ export class AtomicTabManager {
   public render() {
     return (
       <div class="mb-2 overflow-x-auto">
-        <div class="tabs-area mb-2 flex w-full flex-row border-b">
+        <ul
+          role="list"
+          aria-label="tab-area"
+          class="tab-area mb-2 flex w-full flex-row border-b"
+        >
           {this.tabs.map((tab) => (
             <TabButton
               isActive={tab.tabController.state.isActive}
@@ -89,7 +94,7 @@ export class AtomicTabManager {
               }}
             ></TabButton>
           ))}
-        </div>
+        </ul>
         <TabDropdown
           tabs={this.tabs}
           activeTab={this.tabManagerState.activeTab}
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
new file mode 100644
index 00000000000..d603fdefee4
--- /dev/null
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
@@ -0,0 +1,197 @@
+import {test, expect} from './fixture';
+
+test.beforeEach(async ({tabManager}) => {
+  await tabManager.load();
+  await tabManager.hydrated.waitFor();
+});
+
+test.describe('when viewport is large enough to display all tabs', () => {
+  test('should be A11y compliant', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations).toEqual([]);
+  });
+
+  test('should display tabs area', async ({tabManager}) => {
+    await expect(tabManager.tabArea).toBeVisible();
+  });
+
+  test('should not display tabs dropdown', async ({tabManager}) => {
+    await expect(tabManager.tabDropdown).not.toBeVisible();
+  });
+
+  test('should display tab buttons for each atomic-tab elements', async ({
+    tabManager,
+  }) => {
+    await expect(tabManager.tabDropdown).not.toBeVisible();
+
+    expect(await tabManager.tabButtons()).toHaveText([
+      'All',
+      'Articles',
+      'Documentation',
+    ]);
+  });
+
+  test.describe('when clicking on tab button', () => {
+    test.beforeEach(async ({tabManager}) => {
+      await tabManager.tabButtons('Articles').click();
+    });
+
+    test('should change active tab', async ({tabManager}) => {
+      await expect(tabManager.activeTab).toHaveText('Articles');
+    });
+
+    test.describe('should change other component visibility', async () => {
+      test('facets', async ({tabManager}) => {
+        await tabManager.excludedFacet.last().waitFor({state: 'hidden'});
+        const includedFacets = await tabManager.includedFacet.all();
+        for (let i = 0; i < includedFacets.length; i++) {
+          await expect(includedFacets[i]).toBeVisible();
+        }
+
+        const excludedFacets = await tabManager.excludedFacet.all();
+        for (let i = 0; i < excludedFacets.length; i++) {
+          await expect(excludedFacets[i]).not.toBeVisible();
+        }
+      });
+    });
+
+    test.describe('when selecting previous tab', () => {
+      test.beforeEach(async ({tabManager}) => {
+        await tabManager.tabButtons('All').click();
+      });
+
+      test.describe('should change other component visibility', async () => {
+        test('facets', async ({tabManager}) => {
+          await tabManager.includedFacet.last().waitFor({state: 'hidden'});
+
+          const excludedFacets = await tabManager.excludedFacet.all();
+          for (let i = 0; i < excludedFacets.length; i++) {
+            await expect(excludedFacets[i]).toBeVisible();
+          }
+
+          const includedFacets = await tabManager.includedFacet.all();
+          for (let i = 0; i < includedFacets.length; i++) {
+            await expect(includedFacets[i]).not.toBeVisible();
+          }
+        });
+      });
+    });
+
+    test.describe('when resizing viewport', () => {
+      test.beforeEach(async ({page}) => {
+        await page.setViewportSize({width: 300, height: 500});
+      });
+
+      test('should display tabs dropdown', async ({tabManager}) => {
+        await expect(tabManager.tabDropdown).toBeVisible();
+      });
+
+      test('should hide tabs area', async ({tabManager}) => {
+        await expect(tabManager.tabArea).not.toBeVisible();
+      });
+
+      test('should have the active tab selected in the dropdown', async ({
+        tabManager,
+      }) => {
+        await expect(tabManager.tabDropdown).toHaveValue('article');
+      });
+    });
+  });
+});
+
+test.describe('when viewport is too small to display all buttons', () => {
+  test.beforeEach(async ({page}) => {
+    await page.setViewportSize({width: 300, height: 1000});
+  });
+
+  test('should be A11y compliant', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations).toEqual([]);
+  });
+
+  test('should not display tabs area', async ({tabManager}) => {
+    await expect(tabManager.tabArea).not.toBeVisible();
+  });
+
+  test('should display tabs dropdown', async ({tabManager}) => {
+    await expect(tabManager.tabDropdown).toBeVisible();
+  });
+
+  test('should display tab dropdown options for each atomic-tab elements', async ({
+    tabManager,
+  }) => {
+    await expect(tabManager.tabDropdownOptions()).toHaveText([
+      'All',
+      'Articles',
+      'Documentation',
+    ]);
+  });
+
+  test.describe('when selecting a dropdown option', () => {
+    test.beforeEach(async ({tabManager}) => {
+      await tabManager.tabDropdown.selectOption('article');
+    });
+
+    test('should change active tab', async ({tabManager}) => {
+      await expect(tabManager.tabDropdown).toHaveValue('article');
+    });
+
+    test.describe('should change other component visibility', async () => {
+      test('facets', async ({tabManager}) => {
+        await tabManager.excludedFacet.last().waitFor({state: 'hidden'});
+
+        const includedFacets = await tabManager.includedFacet.all();
+        for (let i = 0; i < includedFacets.length; i++) {
+          await expect(includedFacets[i]).toBeVisible();
+        }
+
+        const excludedFacets = await tabManager.excludedFacet.all();
+        for (let i = 0; i < excludedFacets.length; i++) {
+          await expect(excludedFacets[i]).not.toBeVisible();
+        }
+      });
+    });
+
+    test.describe('when selecting previous dropdown option', () => {
+      test.beforeEach(async ({tabManager}) => {
+        await tabManager.tabDropdown.selectOption('all');
+      });
+
+      test.describe('should change other component visibility', async () => {
+        test('facets', async ({tabManager}) => {
+          await tabManager.includedFacet.last().waitFor({state: 'hidden'});
+
+          const excludedFacets = await tabManager.excludedFacet.all();
+          for (let i = 0; i < excludedFacets.length; i++) {
+            await expect(excludedFacets[i]).toBeVisible();
+          }
+
+          const includedFacets = await tabManager.includedFacet.all();
+          for (let i = 0; i < includedFacets.length; i++) {
+            await expect(includedFacets[i]).not.toBeVisible();
+          }
+        });
+      });
+    });
+
+    test.describe('when resizing viewport', () => {
+      test.beforeEach(async ({page}) => {
+        await page.setViewportSize({width: 1000, height: 500});
+      });
+
+      test('should hide tabs dropdown', async ({tabManager}) => {
+        await expect(tabManager.tabDropdown).not.toBeVisible();
+      });
+
+      test('should display tabs area', async ({tabManager}) => {
+        await expect(tabManager.tabArea).toBeVisible();
+      });
+
+      test('should have the active tab button selected', async ({
+        tabManager,
+      }) => {
+        await expect(tabManager.activeTab).toHaveText('Articles');
+      });
+    });
+  });
+});
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts
new file mode 100644
index 00000000000..5c1eac529e2
--- /dev/null
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts
@@ -0,0 +1,23 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../../playwright-utils/base-fixture';
+import {FacetsPageObject} from '../../../../commerce/facets/atomic-commerce-facets/e2e/page-object';
+import {TabManagerPageObject} from './page-object';
+
+interface TestFixture {
+  facets: FacetsPageObject;
+  tabManager: TabManagerPageObject;
+}
+
+export const test = base.extend<TestFixture & AxeFixture>({
+  makeAxeBuilder,
+  tabManager: async ({page}, use) => {
+    await use(new TabManagerPageObject(page));
+  },
+  facets: async ({page}, use) => {
+    await use(new FacetsPageObject(page));
+  },
+});
+export {expect} from '@playwright/test';
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
new file mode 100644
index 00000000000..7ebff75f43b
--- /dev/null
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
@@ -0,0 +1,48 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class TabManagerPageObject extends BasePageObject<'atomic-tab-manager'> {
+  constructor(page: Page) {
+    super(page, 'atomic-tab-manager');
+  }
+
+  get tabDropdown() {
+    return this.page.getByLabel('tab-dropdown-area').getByRole('combobox');
+  }
+
+  get tabArea() {
+    return this.page.getByLabel('tab-area');
+  }
+
+  get activeTab() {
+    return this.page.locator('atomic-tab-manager [aria-current="true"]');
+  }
+
+  get excludedFacet() {
+    return this.page.getByLabel(/^excluded-facet$/);
+  }
+
+  get includedFacet() {
+    return this.page.getByLabel(/^included-facet$/);
+  }
+
+  get smartSnippet() {
+    return this.page.locator('atomic-smart-snippet [part="smart-snippet"]');
+  }
+
+  tabButtons(value?: string) {
+    const baseLocator = this.page.getByLabel(/tab for .*/);
+    return value ? baseLocator.filter({hasText: value}) : baseLocator;
+  }
+
+  tabDropdownOptions(value?: string) {
+    const baseLocator = this.page
+      .getByLabel('tab-dropdown-area')
+      .getByRole('option');
+    return value ? baseLocator.filter({hasText: value}) : baseLocator;
+  }
+
+  atomicTabElements() {
+    return this.page.locator('atomic-tab');
+  }
+}
diff --git a/packages/atomic/src/utils/tab-utils.ts b/packages/atomic/src/utils/tab-utils.ts
index 21c900ac2d5..5ae59a6bd97 100644
--- a/packages/atomic/src/utils/tab-utils.ts
+++ b/packages/atomic/src/utils/tab-utils.ts
@@ -11,14 +11,13 @@ export function shouldDisplayOnCurrentTab(
   excludeTabs: string[],
   activeTab: string
 ) {
-  if (!activeTab) {
-    return true;
+  if (excludeTabs.includes(activeTab)) {
+    return false;
   }
 
-  const isIncluded =
-    includeTabs.length === 0 || includeTabs.includes(activeTab);
-  const isNotExcluded =
-    excludeTabs.length === 0 || !excludeTabs.includes(activeTab);
+  if (includeTabs.length === 0 || includeTabs.includes(activeTab)) {
+    return true;
+  }
 
-  return isIncluded && isNotExcluded;
+  return !activeTab;
 }