diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 24e2575bd..1b0c18b0f 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -1,320 +1,427 @@
-.menu,
-.navigation,
-.overflow-menu .MuiPaper-root ul {
-    background-color: var(--color-gunmetal-dark);
-}
-
-.navigation {
-    align-items: center;
-    box-shadow: 0px 5px 10px 0px rgb( from var(--color-black) r g b / 0.2);
-    color: var(--color-gold-two);
-    display: flex;
-    font-size: 40px;
-    gap: 10px;
-}
-
-.navigation a,
-.navigation button,
-.overflow-menu a {
-    border-radius: 0;
-    border: 0;
-    color: var(--color-gold-two);
-    text-align: left;
-    /* text-decoration: none; */
-    white-space: nowrap;
-    padding: 2px 5px;
-}
-
-.logo-padding {
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
-.menu {
-    align-items: center;
-    display: flex;
-    font-size: 34px;
-    gap: 10px;
-    justify-content: center;
-    line-height: 1;
-    margin: 10px 0;
-    padding: 0;
-    text-decoration: none;
-    text-transform: uppercase;
-    width: 100%;
-}
-
-.menu.open {
-    box-shadow: 0px 5px 10px 0px rgb( from var(--color-black) r g b / 0.2);
-    display: block;
-    padding: 20px 20px 20px 20px;
-    position: absolute;
-    top: 72px;
-    z-index: 10;
-}
-
-.menu ul {
-    list-style-type: none;
-}
-
-.menu a,
-.menu li,
-.menu span {
-    display: block;
-    text-align: left;
-    margin: auto 0;
-}
-
-.mobile-icon {
-    font-size: 0;
-    margin-right: 0;
-    margin-left: 20;
-}
-
-.mobile-icon svg {
-    fill: var(--color-gold-two);
-    height: 54px;
-}
-
-.App.connected .menu {
-    display: none;
-}
-
-.branding {
-    border-radius: 0;
-    font-size: 0;
-    margin-bottom: 10px;
-    margin-left: 10px;
-    margin-right: auto;
-    margin-top: 10px;
-
-    /* font-size: 40px; */
-}
-
-.menu button {
-    font-size: 20px;
-}
-
-.menu .submenu-wrapper {
-    border-radius: 0;
-    font-size: 20px;
-    position: relative;
-}
-
-.menu .submenu-wrapper ul {
-    background-color: var(--color-gunmetal-dark);
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-    display: none;
-    left: 0;
-    list-style: none;
-    padding: 10px;
-    position: absolute;
-    z-index: 2000;
-    box-shadow: 0px 5px 10px 0px rgb( from var(--color-black) r g b / 0.2);
-    top: 24px;
-}
-
-.submenu-wrapper li {
-    align-items: center;
-    display: flex;
-}
-
-.submenu-wrapper input {
-    cursor: pointer;
-}
-
-.menu .submenu-wrapper ul a {
-    border-radius: 0;
-}
-
-.menu a:hover,
-.menu button:hover,
-.menu .submenu-wrapper:hover {
-    cursor: pointer;
-}
-
-.menu .submenu-wrapper:hover > a {
-    color: var(--color-black);
-    color: var(--color-gold-one);
-    text-decoration: underline;
-    text-underline-offset: 5px;
-    text-decoration-thickness: 1px;
-}
-
-.menu .submenu-wrapper:hover ul {
-    display: block;
-}
-
-.menu li:hover button {
-    cursor: pointer;
-}
-
-.external-link {
-    border-radius: 0;
-}
-
-.menu .last-link {
-    position: relative;
-}
-
-.menu svg {
-    width: 20px;
-    height: 20px;
-}
-
-.menu .last-link:hover .supporters-wrapper {
-    display: block;
-}
-
-.supporters-wrapper {
-    background-color: var(--color-black);
-    border-radius: 0;
-    color: var(--color-white);
-    cursor: default;
-    display: none;
-    position: absolute;
-    right: 0;
-    top: 28px;
-    z-index: 1;
-}
-
-li.desktop-only-link {
-    display: none;
-    position: relative;
-    bottom: 2px;
-}
-
-.menu li.only-large {
-    display: none;
-}
-
-li.mobile-only-link {
-    display: block;
-}
-
-@media screen and (min-width: 1280px) {
-    .branding {
-        /*margin-right: 0;*/
-    }
-
-    .mobile-icon,
-    .mobile-only-link {
-        display: none;
-    }
-
-    li.desktop-only-link {
-        display: block;
-    }
-
-    li.mobile-only-link {
-        display: none;
-    }
-
-    .menu {
-        display: flex;
-        font-size: 20px;
-        /*margin: 0;*/
-        /* width: auto; */
-    }
-
-    .more-dropdown-wrapper > ul {
-        left: -5.25rem !important;
-    }
-
-    .menu > li {
-        border-width: 0 1px 0 0;
-    }
-}
-
-@media screen and (min-width: 1920px) {
-    .menu li.only-large {
-        display: flex;
-    }
-}
-
-/* new styles */
-.submenu-wrapper a {
-    margin: auto 0;
-}
-
-.submenu-items {
-    border-left: 1px solid var(--color-gold-two);
-    border-right: 1px solid rgb( from var(--color-black) r g b / 0);
-}
-
-.overflow-menu .MuiPaper-root {
-    background-color: var(--color-gunmetal-dark);
-}
-
-.overflow-menu ul.MuiList-root {
-    padding-left: 10px;
-}
-
-.overflow-menu li {
-    font-size: 20px;
-    text-decoration: none;
-    text-transform: uppercase;
-}
-
-.overflow-menu li ul {
-    display: block;
-    list-style-type: none;
-    padding-left: 10px;
-}
-
-.navigation,
-ul.menu {
-    max-width: 100%;
-}
-
-.visible-menu-item, .visible-overflow {
-    order: 0;
-    visibility: visible;
-    opacity: 1;
-}
-
-.invisible-menu-item, .invisible-overflow {
-    order: 100;
-    visibility: hidden;
-    pointer-events: none;
-}
-
-.toolbar-wrapper {
-    display: flex;
-    overflow-x: clip;
-    overflow-y: visible;
-    padding: 0 10px;
-    max-width: 100%;
-}
-
-.overflow-item {
-    order: 99;
-    position: sticky;
-    right: 0;
-}
-
-.overflow-show {
-    overflow: visible;
-}
-
-.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: var(--color-gold-two);
-}
-
-.MuiPopover-root .overflow-hidden {
-    display: none;
-}
+.menu,
+.navigation,
+.overflow-menu .MuiPaper-root ul {
+  background-color: var(--color-gunmetal-dark);
+}
+
+.navigation {
+  align-items: center;
+  border-bottom: 1px solid rgb( from var(--color-white) r g b / .2);
+  margin-bottom: 20px;
+  padding: 0 20px;
+  background-color: rgb( from var(--color-black) r g b / .2);
+  color: var(--color-gold-two);
+  display: flex;
+  font-size: 40px;
+}
+
+.navigation a,
+.navigation button,
+.overflow-menu a {
+    border-radius: 0;
+    border: 0;
+    color: var(--color-gold-two);
+    text-align: left;
+    /* text-decoration: none; */
+    white-space: nowrap;
+    padding: 2px 5px;
+}
+
+.logo-padding {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.menu {
+    align-items: center;
+    display: flex;
+    font-size: 34px;
+    line-height: 1;
+    margin: auto 20px auto auto;
+    padding: 0;
+    text-decoration: none;
+    text-transform: uppercase;
+    background: transparent;
+    width: 100%;
+}
+
+.menu.open {
+    box-shadow: 0px 5px 10px 0px rgb( from var(--color-black) r g b / 0.2);
+    display: block;
+    padding: 20px 20px 20px 20px;
+    position: absolute;
+    top: 72px;
+    z-index: 10;
+}
+
+.menu ul {
+    list-style-type: none;
+}
+
+.menu a,
+.menu li,
+.menu span {
+    display: block;
+    text-align: left;
+    margin: auto 0;
+}
+
+.menu li {
+  display: flex;
+  height: 60px;
+  align-items: center;
+  transition: all .3s;
+}
+.menu li.submenu-wrapper ul li {
+  height: inherit;
+  padding: 6px 0;
+}
+.menu li a,
+.menu span {
+  padding: 0 10px;
+}
+.menu li.submenu-wrapper:hover {
+  background: var(--color-gunmetal-dark);
+}
+
+.menu .overflow-hidden a,
+.menu .overflow-hidden li,
+.menu .overflow-hidden span {
+  height: inherit;
+}
+
+.mobile-icon {
+  font-size: 0;
+  margin-right: 0;
+  margin-left: 20;
+}
+
+.mobile-icon svg {
+  fill: var(--color-gold-two);
+  height: 54px;
+}
+
+.App.connected .menu {
+  display: none;
+}
+
+a.branding {
+  border-radius: 0;
+  font-size: 0;
+  padding: 10px 18px 10px 5px;
+  margin: 0;
+  border-right: 1px solid rgb( from var(--color-gold-one) r g b / .1);
+}
+
+.menu button {
+    font-size: 20px;
+}
+
+.menu .submenu-wrapper {
+    border-radius: 0;
+    font-size: 20px;
+    position: relative;
+}
+
+.menu .submenu-wrapper ul {
+  background-color: var(--color-gunmetal-dark);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  display: none;
+  left: 0;
+  list-style: none;
+  position: absolute;
+  padding: 0;
+  z-index: 2000;
+  box-shadow: 0px 5px 10px 0px rgb( from var(--color-black) r g b / 0.2);
+  border-left: 1px solid rgb( from var(--color-gold-one) r g b / .2);
+  border-right: 1px solid rgb( from var(--color-gold-one) r g b / .2);
+  border-bottom: 1px solid rgb( from var(--color-gold-one) r g b / .2);
+  min-width: 160px;
+  top: 60px;
+}
+  .submenu-wrapper ul li {
+      align-items: center;
+      display: flex;
+      border-bottom: 1px solid rgb( from var(--color-gold-one) r g b / .1);
+  }
+  .submenu-wrapper ul li a {
+    padding: 0 10px;
+    margin: 0;
+  }
+
+  .submenu-wrapper ul li input {
+    cursor: pointer;
+    margin-left: 10px;
+  }
+
+  .menu .submenu-wrapper ul a {
+    border-radius: 0;
+  }
+
+
+.menu a:hover,
+.menu button:hover,
+.menu .submenu-wrapper:hover {
+    cursor: pointer;
+}
+
+.menu .submenu-wrapper:hover > a {
+    color: var(--color-black);
+    color: var(--color-gold-one);
+    text-decoration: underline;
+    text-underline-offset: 5px;
+    text-decoration-thickness: 1px;
+}
+
+.menu .submenu-wrapper:hover ul {
+    display: block;
+}
+
+.menu li:hover button {
+    cursor: pointer;
+}
+
+.external-link {
+    border-radius: 0;
+}
+
+.menu .last-link {
+    position: relative;
+}
+
+.menu svg {
+    width: 20px;
+    height: 20px;
+}
+
+.menu .last-link:hover .supporters-wrapper {
+    display: block;
+}
+
+.right-items {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 0 0 20px;
+}
+.right-items a {
+  display: inline-flex;
+  align-items: center;
+}
+
+.supporters-wrapper {
+    background-color: var(--color-black);
+    border-radius: 0;
+    color: var(--color-white);
+    cursor: default;
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 28px;
+    z-index: 1;
+}
+
+li.desktop-only-link {
+    display: none;
+    position: relative;
+    bottom: 2px;
+}
+
+.menu li.only-large {
+    display: none;
+}
+
+li.mobile-only-link {
+    display: block;
+}
+
+
+
+
+
+
+
+
+
+
+/* new styles */
+.submenu-wrapper a {
+    margin: auto 0;
+}
+
+.overflow-menu .MuiPaper-root {
+    background-color: var(--color-gunmetal-dark);
+}
+
+.overflow-menu ul.MuiList-root {
+    padding-left: 10px;
+}
+
+.overflow-menu li {
+    font-size: 20px;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.overflow-menu li ul {
+    display: block;
+    list-style-type: none;
+    padding-left: 10px;
+}
+
+.navigation,
+ul.menu {
+    max-width: 100%;
+}
+
+.visible-menu-item, .visible-overflow {
+    order: 0;
+    visibility: visible;
+    opacity: 1;
+}
+
+.invisible-menu-item, .invisible-overflow {
+    order: 100;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.toolbar-wrapper {
+    display: flex;
+    overflow-x: clip;
+    overflow-y: visible;
+    padding: 0 10px;
+    max-width: 100%;
+}
+
+.overflow-item {
+    order: 99;
+    position: sticky;
+    right: 0;
+}
+
+.overflow-show {
+    overflow: visible;
+}
+
+.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: var(--color-gold-two);
+}
+
+.MuiPopover-root .overflow-hidden {
+    display: none;
+}
+
+
+.mobileMenu-toggle {
+  display: none;
+  font-size: 18px;
+  margin: 0 10px 0 auto;
+  padding: 6px 12px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  border: 1px solid var(--color-gold-one);
+  color: var(--color-gold-one);
+}
+.mobileMenu-toggle.active {
+  color: var(--color-white);
+  background: var(--color-gold-two);
+}
+
+@media screen and (max-width: 1280px){
+  .navigation {
+    padding: 0 10px;
+  }
+  .menu li a {
+    font-size: 18px;
+  }
+  .navigation .right-items {
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 1200px){
+  .mobileMenu-toggle {
+    display: inline-flex;
+  }
+
+  .navigation {
+    position: relative;
+  }
+
+  .navigation .menu {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    width: 100%;
+    top: 60px;
+    padding: 30px 20px;
+    left: 0;
+    height: calc(100vh - 60px);
+    flex-direction: column;
+    background: var(--color-gunmetal-dark);
+  }
+
+  .navigation ul.menu li { 
+    height: auto;
+    width: 100%;
+    margin: 0 0 20px 0;
+    align-items: center;
+    justify-content: center;
+  }
+  .navigation ul.menu li ul {
+    display: none !important;
+    pointer-events: none !important;
+  }
+  .navigation ul.menu li a {
+    display: block;
+    width: 100%;
+    font-size: 20px;
+    text-align: center;
+  }
+
+  .navigation .menu.mobile-menu-open {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .navigation .menu .additional .icon,
+  .navigation .menu .tools .title {
+    display: none;
+  }
+
+  .navigation .menu .additional ul,
+  .navigation .menu .tools ul {
+    display: block !important;
+    pointer-events: all !important;
+    width: 100%;
+    position: static;
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
+  .navigation .menu .additional ul li,
+  .navigation .menu .tools ul li {
+    border-bottom: none;
+    padding: 0;
+  }
+
+  .navigation .menu .tools ul li:last-of-type {
+    margin-bottom: 0;
+  }
+
+}
\ No newline at end of file
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index 87bd8d5ab..e4652a361 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -1,326 +1,323 @@
-import { useMemo, useState } from 'react';
-import useStateWithLocalStorage from '../../hooks/useStateWithLocalStorage.jsx';
-import { Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Icon } from '@mdi/react';
-import {
-    mdiCogOutline,
-    mdiRemote,
-    mdiClose,
-} from '@mdi/js';
-
-import { Box, Alert, IconButton, Collapse } from '@mui/material';
-
-import MenuItem from './MenuItem.jsx';
-// import SubMenu from './SubMenu';
-
-import { caliberArrayWithSplit } from '../../modules/format-ammo.mjs';
-import categoryPages from '../../data/category-pages.json';
-import useBossesData from '../../features/bosses/index.js';
-
-import { mapIcons, useMapImagesSortedArray } from '../../features/maps/index.js';
-
-import alertConfig from './alert-config.js';
-
-import IntersectionObserverWrapper from './intersection-observer-wrapper.js';
-
-import './index.css';
-import useTradersData from '../../features/traders/index.js';
-
-// automatically selects the alert color
-const alertColor = alertConfig.alertColors[alertConfig.alertLevel];
-
-const ammoTypes = caliberArrayWithSplit();
-
-const getAmmoMenu = (setIsOpen) => {
-    const ammoMenu = ammoTypes.map((ammoType) => (
-        <MenuItem
-            checkbox
-            displayText={ammoType}
-            key={`menu-item-${ammoType}`}
-            prefix="/ammo"
-            to={`/ammo/${ammoType}`}
-            //onClick={setIsOpen.bind(this, false)}
-        />
-    ));
-    return ammoMenu;
-};
-
-const Menu = () => {
-    /*const [isOpen, setIsOpen] = useState(false);
-    const handleMenuClick = () => {
-        setIsOpen(!isOpen);
-    };*/
-    const { t } = useTranslation();
-    const [alertOpen, setAlertOpen] = useStateWithLocalStorage(alertConfig.bannerKey, true);
-    const [alertStateOpen, setAlertStateOpen] = useState(alertOpen || alertConfig.alwaysShow);
-
-    const uniqueMaps = useMapImagesSortedArray();
-    for (const map of uniqueMaps) {
-        if (mapIcons[map.normalizedName]) {
-            map.icon = mapIcons[map.normalizedName];
-        }
-        else {
-            map.menuPadding = true;
-        }
-    }
-
-    const { data: bosses } = useBossesData();
-    const { data: allTraders } = useTradersData();
-
-    const traders = useMemo(() => {
-        return allTraders.filter(t => t.barters?.length > 0)
-    }, [allTraders]);
-
-    return (
-        <>
-            {/* ALERT BANNER SECTION */}
-            {alertConfig?.alertEnabled === true && (
-                <Box>
-                <Collapse in={alertStateOpen}>
-                    <Alert
-                        severity={alertConfig.alertLevel}
-                        variant='filled'
-                        sx={{ backgroundColor: `${alertColor} !important`, borderRadius: '0px !important' }}
-                        action={
-                            <IconButton
-                                aria-label="close"
-                                color="inherit"
-                                size="small"
-                                onClick={() => {
-                                    setAlertOpen(false);
-                                    setAlertStateOpen(false);
-                                }}
-                            >
-                                <Icon path={mdiClose} size={0.8} className="icon-with-text" />
-                            </IconButton>
-                        }
-                    >
-                        {t(alertConfig.text, alertConfig.textVariables)}
-
-                        {alertConfig.linkEnabled === true && (
-                            <>
-                            <span>{' - '}</span>
-                            <Link
-                                to={alertConfig.link}
-                                style={{ color: 'inherit', textDecoration: 'underline' }}
-                                target="_blank"
-                            >
-                                {t(alertConfig.linkText)}
-                            </Link>
-                            </>
-                        )}
-                    </Alert>
-                </Collapse>
-            </Box>
-            )}
-            {/* END ALERT BANNER SECTION */}
-            <nav key="main-navigation" className="navigation">
-                <ul className={`menu`}>
-                <IntersectionObserverWrapper>
-                    <li key="menu-home" data-targetid="home" className="overflow-member">
-                        <Link className="branding" to="/">
-                        {/* Tarkov.dev */}
-                        <img
-                            alt="Tarkov.dev"
-                            height={30}
-                            width={186}
-                            src={`${process.env.PUBLIC_URL}/tarkov-dev-logo.svg`}
-                            className={'logo-padding'}
-                            loading="lazy"
-                        />
-                    </Link>
-                    </li>
-                    <li className="submenu-wrapper overflow-member"  key="menu-settings" data-targetid="settings">
-                        <Link
-                            aria-label="Settings"
-                            to="/settings/"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            <Icon
-                                path={mdiCogOutline}
-                                size={1}
-                                className="icon-with-text"
-                            />
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper overflow-member"  key="menu-remote" data-targetid="remote">
-                        <Link
-                            aria-label="Remote control"
-                            to="/control/"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            <Icon path={mdiRemote} size={1} className="icon-with-text" />
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper overflow-member" key="menu-ammo" data-targetid="ammo">
-                        <Link to="/ammo/">{t('Ammo')}</Link>
-                        <ul style={{left: -20}} className="overflow-hidden">
-                            {getAmmoMenu()}
-                        </ul>
-                    </li>
-                    <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) => {
-                                const sameMap = Object.values(unique).find(m => m.id === map.id);
-                                if (!sameMap) {
-                                    unique[map.id] = map;
-                                    return unique;
-                                }
-                                if (map.projection === 'interactive') {
-                                    unique[map.id] = map;
-                                }
-                                return unique;
-                            }, {})).map((map) => (
-                                <MenuItem
-                                    displayText={map.name}
-                                    key={`menu-item-${map.key}`}
-                                    to={`/map/${map.key}`}
-                                    icon={map.icon}
-                                    padding={map.menuPadding}
-                                    //onClick={setIsOpen.bind(this, false)}
-                                />
-                            ))}
-                            <MenuItem
-                                className="overflow-hidden"
-                                displayText={`${t('More')}...`}
-                                key={'menu-item-maps-more'}
-                                to={'/maps'}
-                            />
-                        </ul>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-items" data-targetid="items">
-                        <Link to="/items/">{t('Items')}</Link>
-                        <ul className="overflow-hidden">
-                            {categoryPages.map((categoryPage) => (
-                                <MenuItem
-                                    displayText={t(categoryPage.displayText)}
-                                    key={categoryPage.key}
-                                    to={`/items/${categoryPage.key}`}
-                                    //onClick={setIsOpen.bind(this, false)}
-                                />
-                            ))}
-                        </ul>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-traders" data-targetid="traders">
-                        <Link to="/traders">{t('Traders')}</Link>
-                        <ul>
-                            {traders.map(trader => {
-                                return (
-                                    <MenuItem
-                                        displayText={trader.name}
-                                        key={`menu-item-${trader.normalizedName}`}
-                                        to={`/trader/${trader.normalizedName}`}
-                                        //onClick={setIsOpen.bind(this, false)}
-                                    />
-                                );
-                            })}
-                        </ul>
-                    </li>
-                    <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 => {
-                                return (
-                                    <li key={`boss-${boss.normalizedName}`}><Link to={`/boss/${boss.normalizedName}`}>{boss.name}</Link></li>
-                                );
-                            })}
-                        </ul>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-barters" data-targetid="barters">
-                        <Link 
-                            to="/barters/" 
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            {t('Barter profit')}
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-hideout-profit" data-targetid="crafts">
-                        <Link
-                            to="/hideout-profit/"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            {t('Hideout profit')}
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-tasks" data-targetid="tasks">
-                        <Link
-                            to="/tasks"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            {t('Tasks')}
-                        </Link>
-                    </li>
-                    <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)}
-                        >
-                            {t('Loot tiers')}
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-hideout-costs" data-targetid="hideout">
-                        <Link
-                            to="/hideout"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            {t('Hideout build costs')}
-                        </Link>
-                    </li>
-                    <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)}
-                        >
-                            {t('Wipe length')}
-                        </Link>
-                    </li>
-                    <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)}
-                        >
-                            {t('Bitcoin Farm Profit')}
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-achievements" data-targetid="achievements">
-                        <Link
-                            to="/achievements"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            {t('Achievements')}
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-players" data-targetid="players">
-                        <Link
-                            to="/players"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            {t('Players')}
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-converter" data-targetid="converter">
-                        <Link
-                            to="/converter"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            {t('Currency Converter')}
-                        </Link>
-                    </li>
-                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-api" data-targetid="api">
-                        <Link
-                            to="/api/"
-                            //onClick={setIsOpen.bind(this, false)}
-                        >
-                            {t('API')}
-                        </Link>
-                    </li>
-                </IntersectionObserverWrapper>
-                </ul>
-            </nav>
-        </>
-    );
-};
-
-export default Menu;
+import { useMemo, useState } from 'react';
+import useStateWithLocalStorage from '../../hooks/useStateWithLocalStorage.jsx';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '@mdi/react';
+import {
+    mdiDotsVertical,
+    mdiCogOutline,
+    mdiRemote,
+    mdiClose,
+} from '@mdi/js';
+
+import { Box, Alert, IconButton, Collapse } from '@mui/material';
+
+import MenuItem from './MenuItem.jsx';
+// import SubMenu from './SubMenu';
+
+import { caliberArrayWithSplit } from '../../modules/format-ammo.mjs';
+import categoryPages from '../../data/category-pages.json';
+import useBossesData from '../../features/bosses/index.js';
+
+import { mapIcons, useMapImagesSortedArray } from '../../features/maps/index.js';
+
+import alertConfig from './alert-config.js';
+
+
+import './index.css';
+import useTradersData from '../../features/traders/index.js';
+
+// automatically selects the alert color
+const alertColor = alertConfig.alertColors[alertConfig.alertLevel];
+
+const ammoTypes = caliberArrayWithSplit();
+
+const getAmmoMenu = (setIsOpen) => {
+    const ammoMenu = ammoTypes.map((ammoType) => (
+        <MenuItem
+            checkbox
+            displayText={ammoType}
+            key={`menu-item-${ammoType}`}
+            prefix="/ammo"
+            to={`/ammo/${ammoType}`}
+            //onClick={setIsOpen.bind(this, false)}
+        />
+    ));
+    return ammoMenu;
+};
+
+const Menu = () => {
+    /*const [isOpen, setIsOpen] = useState(false);
+    const handleMenuClick = () => {
+        setIsOpen(!isOpen);
+    };*/
+    const { t } = useTranslation();
+    const [alertOpen, setAlertOpen] = useStateWithLocalStorage(alertConfig.bannerKey, true);
+    const [alertStateOpen, setAlertStateOpen] = useState(alertOpen || alertConfig.alwaysShow);
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false); // State for mobile menu
+
+
+    const uniqueMaps = useMapImagesSortedArray();
+    for (const map of uniqueMaps) {
+        if (mapIcons[map.normalizedName]) {
+            map.icon = mapIcons[map.normalizedName];
+        }
+        else {
+            map.menuPadding = true;
+        }
+    }
+
+    const { data: bosses } = useBossesData();
+    const { data: allTraders } = useTradersData();
+
+    const traders = useMemo(() => {
+        return allTraders.filter(t => t.barters?.length > 0)
+    }, [allTraders]);
+
+    // Toggle handler for mobile menu
+    const mobileMenuToggle = () => {
+        setMobileMenuOpen(!mobileMenuOpen);
+    };
+
+    return (
+        <>
+            {/* ALERT BANNER SECTION */}
+            {alertConfig?.alertEnabled === true && (
+                <Box>
+                <Collapse in={alertStateOpen}>
+                    <Alert
+                        severity={alertConfig.alertLevel}
+                        variant='filled'
+                        sx={{ backgroundColor: `${alertColor} !important`, borderRadius: '0px !important' }}
+                        action={
+                            <IconButton
+                                aria-label="close"
+                                color="inherit"
+                                size="small"
+                                onClick={() => {
+                                    setAlertOpen(false);
+                                    setAlertStateOpen(false);
+                                }}
+                            >
+                                <Icon path={mdiClose} size={0.8} className="icon-with-text" />
+                            </IconButton>
+                        }
+                    >
+                        {t(alertConfig.text, alertConfig.textVariables)}
+
+                        {alertConfig.linkEnabled === true && (
+                            <>
+                            <span>{' - '}</span>
+                            <Link
+                                to={alertConfig.link}
+                                style={{ color: 'inherit', textDecoration: 'underline' }}
+                                target="_blank"
+                            >
+                                {t(alertConfig.linkText)}
+                            </Link>
+                            </>
+                        )}
+                    </Alert>
+                </Collapse>
+            </Box>
+            )}
+            {/* END ALERT BANNER SECTION */}
+            <nav key="main-navigation" className="navigation">
+              <Link className="branding" to="/" data-targetid="home">
+                <img
+                    alt="Tarkov.dev"
+                    height={30}
+                    width={186}
+                    src={`${process.env.PUBLIC_URL}/tarkov-dev-logo.svg`}
+                    className={'logo-padding'}
+                    loading="lazy"
+                />
+              </Link>              
+
+              <ul className={`menu ${mobileMenuOpen ? 'mobile-menu-open' : ''}`}>
+                <li className="submenu-wrapper overflow-member" key="menu-ammo" data-targetid="ammo">
+                    <Link to="/ammo/">{t('Ammo')}</Link>
+                    <ul className="overflow-hidden">
+                        {getAmmoMenu()}
+                    </ul>
+                </li>
+                <li className="submenu-wrapper submenu-items overflow-member" key="menu-maps" data-targetid="maps">
+                    <Link to="/maps/">{t('Maps')}</Link>
+                    <ul>
+                        {Object.values(uniqueMaps.reduce((unique, map) => {
+                            const sameMap = Object.values(unique).find(m => m.id === map.id);
+                            if (!sameMap) {
+                                unique[map.id] = map;
+                                return unique;
+                            }
+                            if (map.projection === 'interactive') {
+                                unique[map.id] = map;
+                            }
+                            return unique;
+                        }, {})).map((map) => (
+                            <MenuItem
+                                displayText={map.name}
+                                key={`menu-item-${map.key}`}
+                                to={`/map/${map.key}`}
+                                icon={map.icon}
+                                padding={map.menuPadding}
+                                //onClick={setIsOpen.bind(this, false)}
+                            />
+                        ))}
+                        <MenuItem
+                            className="overflow-hidden"
+                            displayText={`${t('More')}...`}
+                            key={'menu-item-maps-more'}
+                            to={'/maps'}
+                        />
+                    </ul>
+                </li>
+                <li className="submenu-wrapper submenu-items overflow-member" key="menu-items" data-targetid="items">
+                    <Link to="/items/">{t('Items')}</Link>
+                    <ul className="overflow-hidden">
+                        {categoryPages.map((categoryPage) => (
+                            <MenuItem
+                                displayText={t(categoryPage.displayText)}
+                                key={categoryPage.key}
+                                to={`/items/${categoryPage.key}`}
+                                //onClick={setIsOpen.bind(this, false)}
+                            />
+                        ))}
+                    </ul>
+                </li>
+
+                <li className="submenu-wrapper submenu-items overflow-member tools" key="menu-items" data-targetid="items">
+                    <span className="title">{t('Tools')}</span>
+                    <ul className="overflow-hidden">
+                      <li>
+                        <Link to="/barters/" >
+                          {t('Barter profit')}
+                        </Link>
+                      </li>
+                      <li>
+                        <Link to="/hideout-profit/">
+                          {t('Hideout profit')}
+                        </Link>
+                      </li>
+                      <li>
+                        <Link to="/hideout">
+                          {t('Hideout build costs')}
+                        </Link>
+                      </li>
+                      <li>
+                        <Link to="/bitcoin-farm-calculator">
+                          {t('Bitcoin Farm Profit')}
+                        </Link>
+                      </li>
+                      <li>
+                        <Link to="/converter">
+                          {t('Currency Converter')}
+                        </Link>
+                      </li>
+                    </ul>
+                </li>
+
+                <li className="submenu-wrapper submenu-items overflow-member" key="menu-traders" data-targetid="traders">
+                    <Link to="/traders">{t('Traders')}</Link>
+                    <ul>
+                        {traders.map(trader => {
+                            return (
+                                <MenuItem
+                                    displayText={trader.name}
+                                    key={`menu-item-${trader.normalizedName}`}
+                                    to={`/trader/${trader.normalizedName}`}
+                                    //onClick={setIsOpen.bind(this, false)}
+                                />
+                            );
+                        })}
+                    </ul>
+                </li>
+
+                <li className="submenu-wrapper 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 => {
+                            return (
+                                <li key={`boss-${boss.normalizedName}`}><Link to={`/boss/${boss.normalizedName}`}>{boss.name}</Link></li>
+                            );
+                        })}
+                    </ul>
+                </li>
+
+                <li className="submenu-wrapper submenu-items overflow-member" key="menu-tasks" data-targetid="tasks">
+                    <Link
+                        to="/tasks"
+                        //onClick={setIsOpen.bind(this, false)}
+                    >
+                        {t('Tasks')}
+                    </Link>
+                </li>
+
+                <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)}
+                    >
+                        {t('Loot tiers')}
+                    </Link>
+                </li>
+
+
+                <li className="submenu-wrapper submenu-items overflow-member" key="menu-achievements" data-targetid="achievements">
+                    <Link
+                        to="/achievements"
+                        //onClick={setIsOpen.bind(this, false)}
+                    >
+                        {t('Achievements')}
+                    </Link>
+                </li>
+
+                <li className="submenu-wrapper submenu-items additional" key="menu-items" data-targetid="extra">
+                  <li className="icon">
+                    <Icon path={mdiDotsVertical} size={1} className="icon-with-text" />
+                  </li>
+                  <ul className="overflow-hidden">
+                    <li key="menu-players" data-targetid="players">
+                      <Link to="/players">{t('Players')}</Link>
+                    </li>
+                    <li key="menu-wipe-length" data-targetid="wipe-length">
+                      <Link to="/wipe-length">{t('Wipe length')}</Link>
+                    </li>                
+                    <li key="menu-api" data-targetid="api">
+                      <Link to="/api/" >{t('API')}</Link>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+
+              {/* Mobile menu toggle */}
+              <div className={`mobileMenu-toggle ${mobileMenuOpen ? 'active' : ''}`} onClick={mobileMenuToggle}>
+                {mobileMenuOpen ? 'Close Menu' : 'Open Menu'}
+              </div>
+
+              <div className="right-items">
+                <Link
+                  aria-label="Settings"
+                  to="/settings/"
+                  data-targetid="settings"
+                >
+                  <Icon
+                    path={mdiCogOutline}
+                    size={1}
+                    className="icon-with-text"
+                  />
+                </Link>
+                <Link
+                  aria-label="Remote control"
+                  to="/control/"
+                  data-targetid="remote"
+                >
+                  <Icon path={mdiRemote} size={1} className="icon-with-text" />
+                </Link>
+            </div>
+          </nav>
+        </>
+    );
+};
+
+export default Menu;
diff --git a/src/components/menu/intersection-observer-wrapper.js b/src/components/menu/intersection-observer-wrapper.js
deleted file mode 100644
index 2de0278b8..000000000
--- a/src/components/menu/intersection-observer-wrapper.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import classnames from 'classnames';
-
-import OverflowMenu from './overflow-menu.js';
-
-export default function IntersectionObserverWrapper({ children }) {
-    const navRef = useRef(null);
-    const [visibilityMap, setVisibilityMap] = useState({});
-    const handleIntersection = (entries) => {
-        const updatedEntries = {};
-        entries.forEach((entry) => {
-            const targetid = entry.target.dataset.targetid;
-            if (entry.isIntersecting) {
-                updatedEntries[targetid] = true;
-            } else {
-                updatedEntries[targetid] = false;
-            }
-        });
-
-        setVisibilityMap((prev) => ({
-            ...prev,
-            ...updatedEntries,
-        }));
-    };
-    useEffect(() => {
-        const observer = new IntersectionObserver(handleIntersection, {
-            root: navRef.current,
-            threshold: 1,
-        });
-        // We are addting observers to child elements of the container div
-        // with ref as navRef. Notice that we are adding observers
-        // only if we have the data attribute targetid on the child element
-        Array.from(navRef.current.children).forEach((item) => {
-            if (item.dataset.targetid) {
-                observer.observe(item);
-            }
-        });
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    return (
-        <div className="toolbar-wrapper" ref={navRef}>
-            {React.Children.map(children, (child) => {
-                return React.cloneElement(child, {
-                    className: classnames(child.props.className, {
-                        'visible-menu-item visible-menu-all':
-                            !!visibilityMap[child.props['data-targetid']],
-                        'invisible-menu-item': !visibilityMap[child.props['data-targetid']],
-                        //[classes.showOverflow]: visible && showOverflow
-                    }),
-                });
-            })}
-            <OverflowMenu
-                visibilityMap={visibilityMap}
-                className="submenu-wrapper overflow-menu more-dropdown-wrapper"
-            >
-                {children}
-            </OverflowMenu>
-        </div>
-    );
-}