diff --git a/packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx b/packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx
deleted file mode 100644
index c42f8d6b151..00000000000
--- a/packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import {FunctionalComponent, h} from '@stencil/core';
-
-interface TabDropdownOptionProps {
-  value: string;
-  label: string;
-  isSelected: boolean;
-}
-
-export const TabDropdownOption: FunctionalComponent<TabDropdownOptionProps> = (
-  props
-) => {
-  return (
-    <option
-      class="text-black"
-      key={props.value}
-      value={props.value}
-      selected={props.isSelected}
-    >
-      {props.label}
-    </option>
-  );
-};
diff --git a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx b/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
deleted file mode 100644
index bb92294bdab..00000000000
--- a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {FunctionalComponent, h} from '@stencil/core';
-import TabsIcon from '../../../images/arrow-bottom-rounded.svg';
-
-export interface TabDropdownProps {
-  tabs: Array<{name: string; label: string}>;
-  activeTab: string;
-  onTabChange: (tabName: string) => void;
-  class?: string;
-}
-
-export const TabDropdown: FunctionalComponent<TabDropdownProps> = (
-  props,
-  children
-) => {
-  return (
-    <div
-      class={`tab-dropdown-area relative p-1 ${props.class || ''}`}
-      aria-label="tab-dropdown-area"
-      part="dropdown-area"
-    >
-      <select
-        aria-label="tab-dropdown"
-        class="btn-outline-neutral w-full grow cursor-pointer appearance-none truncate rounded-lg py-3 pl-6 pr-10 text-xl font-bold"
-        onChange={(e) =>
-          props.onTabChange((e.target as HTMLSelectElement).value)
-        }
-      >
-        {children}
-      </select>
-      <div
-        part="select-icon-wrapper"
-        class="pointer-events-none absolute bottom-0 right-0 top-0 flex items-center justify-center pr-6"
-      >
-        <atomic-icon
-          part="select-icon"
-          icon={TabsIcon}
-          class="ml-4 w-3 shrink-0 self-center"
-        ></atomic-icon>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx b/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx
index f180e706124..871f9d30c7d 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx
@@ -185,7 +185,7 @@ export class TabManagerBar {
 
   public render = () => {
     return (
-      <Host>
+      <Host class="overflow-x-clip overflow-y-visible">
         <slot></slot>
         <tab-popover>{this.popoverTabs}</tab-popover>
       </Host>
diff --git a/packages/atomic/src/components/common/tab-manager/tab-button.tsx b/packages/atomic/src/components/common/tab-manager/tab-manager-button.tsx
similarity index 87%
rename from packages/atomic/src/components/common/tab-manager/tab-button.tsx
rename to packages/atomic/src/components/common/tab-manager/tab-manager-button.tsx
index af434b9e7c0..a2e140fed87 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-button.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-manager-button.tsx
@@ -36,13 +36,13 @@ export class TabManagerButton {
     return (
       <Host
         role="listitem"
-        class={`${this.activeTabClass}`}
+        class={`${this.activeTabClass} max-w-[50%] sm:max-w-full`}
         aria-current={this.active ? 'true' : 'false'}
         aria-label={'tab for ' + this.label}
         part="button-container"
       >
         <button
-          class={`w-full px-6 pb-1 text-xl ${this.activeTabTextClass}`}
+          class={`w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`}
           part="tab-button"
           onClick={this.select}
         >
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 a0c314b2b60..60ba750ee96 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
@@ -10,8 +10,6 @@ import {
   BindStateToController,
   InitializeBindings,
 } from '../../../../utils/initialization-utils';
-import {TabDropdown} from '../../../common/tab-manager/tab-dropdown';
-import {TabDropdownOption} from '../../../common/tab-manager/tab-dropdown-option';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
@@ -90,10 +88,10 @@ export class AtomicTabManager {
             role="list"
             aria-label="tab-area"
             part="tab-area"
-            class="mb-2 flex hidden w-full flex-row border-b sm:flex"
+            class="mb-2 flex w-full flex-row border-b"
           >
             {this.tabs.map((tab) => (
-              <Tab-Manager-Button
+              <tab-manager-button
                 active={this.tabManagerState.activeTab === tab.name}
                 label={tab.label}
                 select={() => {
@@ -101,31 +99,9 @@ export class AtomicTabManager {
                     tab.tabController.select();
                   }
                 }}
-              ></Tab-Manager-Button>
+              ></tab-manager-button>
             ))}
           </div>
-          <div class="w-full sm:hidden">
-            <TabDropdown
-              tabs={this.tabs}
-              activeTab={this.tabManagerState.activeTab}
-              onTabChange={(e) => {
-                const selectedTab = this.tabs.find(
-                  (tab) => tab.name === (e as string)
-                );
-                if (selectedTab) {
-                  selectedTab.tabController.select();
-                }
-              }}
-            >
-              {this.tabs.map((tab) => (
-                <TabDropdownOption
-                  value={tab.name}
-                  label={tab.label}
-                  isSelected={tab.name === this.tabManagerState.activeTab}
-                />
-              ))}
-            </TabDropdown>
-          </div>
         </tab-manager-bar>
       </Host>
     );