diff --git a/src/components/menu/MenuItem.jsx b/src/components/menu/MenuItem.jsx
index 17dd46e2d..936bca432 100644
--- a/src/components/menu/MenuItem.jsx
+++ b/src/components/menu/MenuItem.jsx
@@ -74,7 +74,7 @@ function MenuItem(props) {
     }
 
     return (
-        <li>
+        <li class={props.className}>
             {getCheckbox()}
             {getIcon()}
             <Link to={props.to} onClick={handleClick}>
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 9f951b477..31a52156d 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -269,13 +269,13 @@ ul.menu {
     max-width: 100%;
 }
 
-.visible-menu-item {
+.visible-menu-item, .visible-overflow {
     order: 0;
     visibility: visible;
     opacity: 1;
 }
 
-.invisible-menu-item {
+.invisible-menu-item, .invisible-overflow {
     order: 100;
     visibility: hidden;
     pointer-events: none;
@@ -302,3 +302,20 @@ ul.menu {
 .in-overflow-menu:hover {
     background-color: transparent;
 }
+
+/* margin unless it is the only item showing */
+nav.navigation ul.menu li.more-dropdown-wrapper:not(:nth-child(1 of li.visible-menu-all)) {
+    margin-left: -50px;
+}
+
+nav.navigation ul.menu li:nth-last-child(1 of li.visible-menu-item):not(:nth-last-child(1 of li.overflow-member)) {
+    padding-right: 50px;
+}
+
+.MuiPopover-root svg.icon-with-text {
+    color: #9a8866;
+}
+
+.MuiPopover-root .overflow-hidden {
+    display: none;
+}
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index 3f85fd496..16c521c55 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -114,7 +114,7 @@ const Menu = () => {
             <nav key="main-navigation" className="navigation">
                 <ul className={`menu`}>
                 <IntersectionObserverWrapper>
-                    <li key="menu-home" data-targetid="home">
+                    <li key="menu-home" data-targetid="home" className="overflow-member">
                         <Link className="branding" to="/">
                         {/* Tarkov.dev */}
                         <img
@@ -127,7 +127,7 @@ const Menu = () => {
                         />
                     </Link>
                     </li>
-                    <li className="submenu-wrapper"  key="menu-settings" data-targetid="settings">
+                    <li className="submenu-wrapper overflow-member"  key="menu-settings" data-targetid="settings">
                         <Link
                             aria-label="Settings"
                             to="/settings/"
@@ -140,7 +140,7 @@ const Menu = () => {
                             />
                         </Link>
                     </li>
-                    <li className="submenu-wrapper"  key="menu-remote" data-targetid="remote">
+                    <li className="submenu-wrapper overflow-member"  key="menu-remote" data-targetid="remote">
                         <Link
                             aria-label="Remote control"
                             to="/control/"
@@ -149,13 +149,13 @@ const Menu = () => {
                             <Icon path={mdiRemote} size={1} className="icon-with-text" />
                         </Link>
                     </li>
-                    <li className="submenu-wrapper" key="menu-ammo" data-targetid="ammo">
+                    <li className="submenu-wrapper overflow-member" key="menu-ammo" data-targetid="ammo">
                         <Link to="/ammo/">{t('Ammo')}</Link>
-                        <ul style={{left: -20}}>
+                        <ul style={{left: -20}} className="overflow-hidden">
                             {getAmmoMenu()}
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-maps" data-targetid="maps">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-maps" data-targetid="maps">
                         <Link to="/maps/">{t('Maps')}</Link>
                         <ul style={{left: -40}}>
                             {Object.values(uniqueMaps.reduce((unique, map) => {
@@ -179,15 +179,16 @@ const Menu = () => {
                                 />
                             ))}
                             <MenuItem
+                                className="overflow-hidden"
                                 displayText={t('More...')}
                                 key={'menu-item-maps-more'}
                                 to={'/maps'}
                             />
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-items" data-targetid="items">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-items" data-targetid="items">
                         <Link to="/items/">{t('Items')}</Link>
-                        <ul>
+                        <ul className="overflow-hidden">
                             {categoryPages.map((categoryPage) => (
                                 <MenuItem
                                     displayText={t(categoryPage.displayText)}
@@ -198,7 +199,7 @@ const Menu = () => {
                             ))}
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-traders" data-targetid="traders">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-traders" data-targetid="traders">
                         <Link to="/traders">{t('Traders')}</Link>
                         <ul>
                             <MenuItem
@@ -245,7 +246,7 @@ const Menu = () => {
                             />
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-bosses" data-targetid="bosses">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-bosses" data-targetid="bosses">
                         <Link to="/bosses/">{t('Bosses')}</Link>
                         <ul>
                             {bosses.filter(boss => boss.maps.length > 0).sort((a,b) => a.name.localeCompare(b.name)).map(boss => {
@@ -255,7 +256,7 @@ const Menu = () => {
                             })}
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-barters" data-targetid="barters">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-barters" data-targetid="barters">
                         <Link 
                             to="/barters/" 
                             //onClick={setIsOpen.bind(this, false)}
@@ -263,7 +264,7 @@ const Menu = () => {
                             {t('Barter profit')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-hideout-profit" data-targetid="crafts">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-hideout-profit" data-targetid="crafts">
                         <Link
                             to="/hideout-profit/"
                             //onClick={setIsOpen.bind(this, false)}
@@ -271,7 +272,7 @@ const Menu = () => {
                             {t('Hideout profit')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-tasks" data-targetid="tasks">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-tasks" data-targetid="tasks">
                         <Link
                             to="/tasks"
                             //onClick={setIsOpen.bind(this, false)}
@@ -279,7 +280,7 @@ const Menu = () => {
                             {t('Tasks')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-loot-tier" data-targetid="loot-tier">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-loot-tier" data-targetid="loot-tier">
                         <Link
                             to="/loot-tier/"
                             //onClick={setIsOpen.bind(this, false)}
@@ -287,7 +288,7 @@ const Menu = () => {
                             {t('Loot tiers')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-hideout-costs" data-targetid="hideout">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-hideout-costs" data-targetid="hideout">
                         <Link
                             to="/hideout"
                             //onClick={setIsOpen.bind(this, false)}
@@ -295,7 +296,7 @@ const Menu = () => {
                             {t('Hideout build costs')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-wipe-length" data-targetid="wipe-length">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-wipe-length" data-targetid="wipe-length">
                         <Link
                             to="/wipe-length"
                             //onClick={setIsOpen.bind(this, false)}
@@ -303,7 +304,7 @@ const Menu = () => {
                             {t('Wipe length')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-bitcoin-farm" data-targetid="bitcoin">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-bitcoin-farm" data-targetid="bitcoin">
                         <Link
                             to="/bitcoin-farm-calculator"
                             //onClick={setIsOpen.bind(this, false)}
@@ -311,7 +312,7 @@ const Menu = () => {
                             {t('Bitcoin Farm Profit')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-api" data-targetid="api">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-api" data-targetid="api">
                         <Link
                             to="/api/"
                             //onClick={setIsOpen.bind(this, false)}
diff --git a/src/components/menu/intersection-observer-wrapper.js b/src/components/menu/intersection-observer-wrapper.js
index d84206457..d0da80e97 100644
--- a/src/components/menu/intersection-observer-wrapper.js
+++ b/src/components/menu/intersection-observer-wrapper.js
@@ -47,7 +47,7 @@ export default function IntersectionObserverWrapper({ children }) {
           {React.Children.map(children, (child) => {
             return React.cloneElement(child, {
               className: classnames(child.props.className, {
-                'visible-menu-item': !!visibilityMap[child.props["data-targetid"]],
+                'visible-menu-item visible-menu-all': !!visibilityMap[child.props["data-targetid"]],
                 'invisible-menu-item': !visibilityMap[child.props["data-targetid"]],
                 //[classes.showOverflow]: visible && showOverflow
               })
diff --git a/src/components/menu/overflow-menu.js b/src/components/menu/overflow-menu.js
index e144a128b..abe752a16 100644
--- a/src/components/menu/overflow-menu.js
+++ b/src/components/menu/overflow-menu.js
@@ -28,9 +28,7 @@ export default function OverflowMenu({ children, className, visibilityMap }) {
         Object.values(visibilityMap).some((v) => v === false),
     [visibilityMap]);
     
-    if (!shouldShowMenu) {
-        return null;
-    }
+    className += ` ${shouldShowMenu ? 'visible-overflow visible-menu-all' : 'invisible-overflow'}`;
   return (
     <li className={className}>
       <Link