diff --git a/src/detail-panels/layout.jsx b/src/detail-panels/layout.jsx
index 7ffba88..aba10f5 100644
--- a/src/detail-panels/layout.jsx
+++ b/src/detail-panels/layout.jsx
@@ -80,7 +80,7 @@ export function AccountLayoutCore({
         <AccountExtraInfo
           className={revealInfo ? 'account-extra-info-reveal' : ''}
         />
-
+        <div>
         <TabSelector
           className="account-tabs-handles"
           tab={selectedTab}
@@ -103,6 +103,7 @@ export function AccountLayoutCore({
               );
           })}
         </div>
+        </div> 
       </div>
     </>
   );
diff --git a/src/detail-panels/tab-selector.jsx b/src/detail-panels/tab-selector.jsx
index 8f7fa60..72a6d75 100644
--- a/src/detail-panels/tab-selector.jsx
+++ b/src/detail-panels/tab-selector.jsx
@@ -57,7 +57,9 @@ export function TabSelector({ className, tab, onTabSelected }) {
     <div className={'tab-outer-container ' + (className || '')}>
       <Tabs
         className={'tab-selector-root selected-tab-' + tab}
-        orientation="vertical"
+        orientation="horizontal"
+        variant='scrollable'
+        scrollButtons='auto'
         value={accountTabs.indexOf(tab)}
         onChange={
           typeof onTabSelected !== 'function'
@@ -78,7 +80,7 @@ export function TabSelector({ className, tab, onTabSelected }) {
 function VerticalTab({ children, ...rest }) {
   return (
     <Tab
-      label={<div style={{ writingMode: 'vertical-rl' }}>{children}</div>}
+      label={<div style={{ writingMode: 'horizontal-rl' }}>{children}</div>}
       {...rest}
     />
   );