diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 3922fcf..dbda1dd 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -8,7 +8,13 @@ export default {
   component: Tabs
 };
 
-const Template: Story<ComponentProps<typeof Tabs>> = (args) => <Tabs {...args} />;
+const Template: Story<ComponentProps<typeof Tabs>> = (args) => (
+  <div style={{ height: 1500, display: 'flex', flexDirection: 'column-reverse' }}>
+    <div>
+      <Tabs {...args} />
+    </div>
+  </div>
+);
 
 export const Basic = Template.bind({});
 Basic.args = {
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 5628f8f..8e1d161 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -46,7 +46,13 @@ export const Tabs: React.FC<TabsProps> = ({
   );
 
   useEffect(() => {
-    if (typeof document !== 'undefined') document.getElementById(String(initial))?.scrollIntoView();
+    if (typeof document !== 'undefined') {
+      const container = document.getElementById('ui-tabs-container');
+      if (container && container?.offsetWidth < container?.scrollWidth) {
+        const target = document.getElementById(String(initial));
+        container?.scroll({ behavior: 'smooth', left: target?.clientWidth, top: 0 });
+      }
+    }
   }, [initial]);
 
   return (
@@ -54,6 +60,7 @@ export const Tabs: React.FC<TabsProps> = ({
       <div
         {...props}
         className={clsx('ui-flex ui-items-center ui-flex-nowrap ui-overflow-auto', className)}
+        id='ui-tabs-container'
       >
         {items.map((item) => (
           <Tab