diff --git a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js
index 2b30abbf01..9b3f0e7da0 100644
--- a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js
+++ b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js
@@ -25,6 +25,21 @@ function initTabbedPanels() {
       e.target.focus();
     }
   };
+  const scrollIntoViewHorizontally = tab => {
+    const container = tab.parentElement;
+    const tabOffsetRight = tab.offsetLeft + tab.offsetWidth;
+    const containerScrollRight = container.scrollLeft + container.offsetWidth;
+
+    // is tab behind (left)
+    if (container.scrollLeft > tab.offsetLeft) {
+      container.scrollLeft = tab.offsetLeft;
+    }
+
+    // is tab ahead (right)
+    if (containerScrollRight < tabOffsetRight) {
+      container.scrollLeft += tabOffsetRight - containerScrollRight;
+    }
+  };
 
   document
     .querySelectorAll(DOM_ELEMENT_UDS_TABBED_PANELS)
@@ -99,31 +114,25 @@ function initTabbedPanels() {
           ? CSS_DISPLAY_NONE
           : CSS_DISPLAY_BLOCK;
       });
-      // });
 
       // handle focus event for tabs titles
       navItems.forEach(tabTitle => {
         tabTitle.addEventListener(EVENT_FOCUS, function (e) {
-          tabTitle.scrollIntoView();
+          scrollIntoViewHorizontally(tabTitle);
         });
       });
 
       // click of the next button
       nextButton.addEventListener(EVENT_CLICK, function (e) {
-        if (window.innerWidth > LG_BREAKPOINT) {
-          slideNav(this, e, -1);
-        }
+        slideNav(this, e, -1);
       });
 
       // click of the prev button
       prevButton.addEventListener(EVENT_CLICK, function (e) {
-        if (window.innerWidth > LG_BREAKPOINT) {
-          slideNav(this, e, 1);
-        }
+        slideNav(this, e, 1);
       });
 
       // hide prev button on load
-
       prevButton.style.display = CSS_DISPLAY_NONE;
 
       // width of all tabs
@@ -140,6 +149,4 @@ function initTabbedPanels() {
 
 EventHandler.on(window, "load.uds.tabs", initTabbedPanels);
 
-// window.addEventListener("load.uds.tabs", initTabs, true);
-
 export { initTabbedPanels };
diff --git a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx
index fe42f732b2..68f90e2d2a 100644
--- a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx
+++ b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx
@@ -12,7 +12,7 @@ export default {
 const Template = () => {
   return (
     <MemoryRouter>
-      <div className="row no-gutters">
+      <div className="row no-gutters" style={{ padding: "10rem 0rem" }}>
         <div className="col uds-full-width">
           <TabbedPanels>
             <Tab id="home" title="Home long tab">