diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 3ba45ca94..a1a567b9b 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,430 +1,469 @@
 import Icon, {
-  BankFilled,
-  BarChartOutlined,
-  CarFilled,
-  CheckCircleOutlined,
-  ClockCircleFilled,
-  DashboardFilled,
-  DollarCircleFilled,
-  ExportOutlined,
-  FieldTimeOutlined,
-  FileAddFilled,
-  FileAddOutlined,
-  FileFilled,
-  //GlobalOutlined,
-  HomeFilled,
-  ImportOutlined,
-  LineChartOutlined,
-  PaperClipOutlined,
-  PhoneOutlined,
-  QuestionCircleFilled,
-  ScheduleOutlined,
-  SettingOutlined,
-  TeamOutlined,
-  ToolFilled,
-  UnorderedListOutlined,
-  UserOutlined,
+    BankFilled,
+    BarChartOutlined,
+    CarFilled,
+    CheckCircleOutlined,
+    ClockCircleFilled,
+    DashboardFilled,
+    DollarCircleFilled,
+    ExportOutlined,
+    FieldTimeOutlined,
+    FileAddFilled,
+    FileAddOutlined,
+    FileFilled,
+    HomeFilled,
+    ImportOutlined,
+    LineChartOutlined,
+    PaperClipOutlined,
+    PhoneOutlined,
+    QuestionCircleFilled,
+    ScheduleOutlined,
+    SettingOutlined,
+    TeamOutlined,
+    ToolFilled,
+    UnorderedListOutlined,
+    UserOutlined,
 } from "@ant-design/icons";
 import {useSplitTreatments} from "@splitsoftware/splitio-react";
-import { Layout, Menu } from "antd";
+import {Layout, Menu} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { BsKanban } from "react-icons/bs";
-import {
-  FaCalendarAlt,
-  FaCarCrash,
-  FaCreditCard,
-  FaFileInvoiceDollar,
-} from "react-icons/fa";
-import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
-import { IoBusinessOutline } from "react-icons/io5";
-import { RiSurveyLine } from "react-icons/ri";
-import { connect } from "react-redux";
-import { Link } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
-import {
-  selectRecentItems,
-  selectSelectedHeader,
-} from "../../redux/application/application.selectors";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { signOutStart } from "../../redux/user/user.actions";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
+import {useTranslation} from "react-i18next";
+import {BsKanban} from "react-icons/bs";
+import {FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar,} from "react-icons/fa";
+import {GiPayMoney, GiPlayerTime, GiSettingsKnobs} from "react-icons/gi";
+import {IoBusinessOutline} from "react-icons/io5";
+import {RiSurveyLine} from "react-icons/ri";
+import {connect} from "react-redux";
+import {Link} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
+import {selectRecentItems, selectSelectedHeader,} from "../../redux/application/application.selectors";
+import {setModalContext} from "../../redux/modals/modals.actions";
+import {signOutStart} from "../../redux/user/user.actions";
+import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
+import {FiLogOut} from "react-icons/fi";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  recentItems: selectRecentItems,
-  selectedHeader: selectSelectedHeader,
-  bodyshop: selectBodyshop,
+    currentUser: selectCurrentUser,
+    recentItems: selectRecentItems,
+    selectedHeader: selectSelectedHeader,
+    bodyshop: selectBodyshop,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setBillEnterContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "billEnter" })),
-  setTimeTicketContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
-  setPaymentContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "payment" })),
-  setReportCenterContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "reportCenter" })),
-  signOutStart: () => dispatch(signOutStart()),
-  setCardPaymentContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "cardPayment" })),
+    setBillEnterContext: (context) =>
+        dispatch(setModalContext({context: context, modal: "billEnter"})),
+    setTimeTicketContext: (context) =>
+        dispatch(setModalContext({context: context, modal: "timeTicket"})),
+    setPaymentContext: (context) =>
+        dispatch(setModalContext({context: context, modal: "payment"})),
+    setReportCenterContext: (context) =>
+        dispatch(setModalContext({context: context, modal: "reportCenter"})),
+    signOutStart: () => dispatch(signOutStart()),
+    setCardPaymentContext: (context) =>
+        dispatch(setModalContext({context: context, modal: "cardPayment"})),
 });
 
-function Header({
-  handleMenuClick,
-  currentUser,
-  bodyshop,
-  selectedHeader,
-  signOutStart,
-  setBillEnterContext,
-  setTimeTicketContext,
-  setPaymentContext,
-  setReportCenterContext,
-  recentItems,
-  setCardPaymentContext,
-}) {
-  // TODO: Client Update - New Split Treatments usage example
-  const { treatments: {ImEXPay, DmsAp, Simple_Inventory} } = useSplitTreatments({
-      attributes: {},
-      names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
-      splitKey:  bodyshop && bodyshop.imexshopid,
-  });
+function Header({handleMenuClick, currentUser, bodyshop, selectedHeader, signOutStart, setBillEnterContext, setTimeTicketContext, setPaymentContext, setReportCenterContext, recentItems, setCardPaymentContext}) {
 
-  const { t } = useTranslation();
+    const {treatments: {ImEXPay, DmsAp, Simple_Inventory}} = useSplitTreatments({
+        attributes: {},
+        names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
+        splitKey: bodyshop && bodyshop.imexshopid,
+    });
 
-  return (
-    <Layout.Header>
-      <Menu
-        mode="horizontal"
-        //theme="light"
-        theme={"dark"}
-        selectedKeys={[selectedHeader]}
-        onClick={handleMenuClick}
-        subMenuCloseDelay={0.3}
-      >
-        <Menu.Item key="home" icon={<HomeFilled />}>
-          <Link to="/manage/">{t("menus.header.home")}</Link>
-        </Menu.Item>
-        <Menu.Item key="schedule" icon={<Icon component={FaCalendarAlt} />}>
-          <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
-        </Menu.Item>
-        <Menu.SubMenu
-          key="jobssubmenu"
-          icon={<Icon component={FaCarCrash} />}
-          title={t("menus.header.jobs")}
-        >
-          <Menu.Item key="activejobs" icon={<FileFilled />}>
-            <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
-          </Menu.Item>
-          <Menu.Item key="readyjobs" icon={<CheckCircleOutlined />}>
-            <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
-          </Menu.Item>
-          <Menu.Item key="parts-queue" icon={<ToolFilled />}>
-            <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
-          </Menu.Item>
-          <Menu.Item key="availablejobs" icon={<ImportOutlined />}>
-            <Link to="/manage/available">
-              {t("menus.header.availablejobs")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="newjob" icon={<FileAddOutlined />}>
-            <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
-          </Menu.Item>
-          <Menu.Divider key="div1" />
-          <Menu.Item key="alljobs" icon={<UnorderedListOutlined />}>
-            <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
-          </Menu.Item>
-          <Menu.Divider key="div2" />
-          <Menu.Item key="productionlist" icon={<ScheduleOutlined />}>
-            <Link to="/manage/production/list">
-              {t("menus.header.productionlist")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="productionboard" icon={<Icon component={BsKanban} />}>
-            <Link to="/manage/production/board">
-              {t("menus.header.productionboard")}
-            </Link>
-          </Menu.Item>
-          <Menu.Divider key="div3" />
-          <Menu.Item key="scoreboard" icon={<LineChartOutlined />}>
-            <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu
-          key="customers"
-          icon={<UserOutlined />}
-          title={t("menus.header.customers")}
-        >
-          <Menu.Item key="owners" icon={<TeamOutlined />}>
-            <Link to="/manage/owners">{t("menus.header.owners")}</Link>
-          </Menu.Item>
-          <Menu.Item key="vehicles" icon={<CarFilled />}>
-            <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu
-          key="ccs"
-          icon={<CarFilled />}
-          title={t("menus.header.courtesycars")}
-        >
-          <Menu.Item key="courtesycarsall" icon={<CarFilled />}>
-            <Link to="/manage/courtesycars">
-              {t("menus.header.courtesycars-all")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="contracts" icon={<FileFilled />}>
-            <Link to="/manage/courtesycars/contracts">
-              {t("menus.header.courtesycars-contracts")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="newcontract" icon={<FileAddFilled />}>
-            <Link to="/manage/courtesycars/contracts/new">
-              {t("menus.header.courtesycars-newcontract")}
-            </Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu
-          key="accounting"
-          icon={<DollarCircleFilled />}
-          title={t("menus.header.accounting")}
-        >
-          <Menu.Item
-            key="bills"
-            icon={<Icon component={FaFileInvoiceDollar} />}
-          >
-            <Link to="/manage/bills">{t("menus.header.bills")}</Link>
-          </Menu.Item>
-          <Menu.Item
-            key="enterbills"
-            icon={<Icon component={GiPayMoney} />}
-            onClick={() => {
-              setBillEnterContext({
-                actions: {},
-                context: {},
-              });
-            }}
-          >
-            {t("menus.header.enterbills")}
-          </Menu.Item>
-          {Simple_Inventory.treatment === "on" && (
-            <>
-              <Menu.Divider key="div4" />
-              <Menu.Item
-                key="inventory"
-                icon={<Icon component={FaFileInvoiceDollar} />}
-              >
-                <Link to="/manage/inventory">
-                  {t("menus.header.inventory")}
-                </Link>
-              </Menu.Item>
-            </>
-          )}
-          <Menu.Divider key="div7" />
-          <Menu.Item key="allpayments" icon={<BankFilled />}>
-            <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
-          </Menu.Item>
-          <Menu.Item
-            key="enterpayments"
-            onClick={() => {
-              setPaymentContext({
-                actions: {},
-                context: null,
-              });
-            }}
-            icon={<Icon component={FaCreditCard} />}
-          >
-            {t("menus.header.enterpayment")}
-          </Menu.Item>
-          {ImEXPay.treatment === "on" && (
-            <Menu.Item
-              key="entercardpayments"
-              onClick={() => {
-                setCardPaymentContext({
-                  actions: {},
-                  context: {},
+    const {t} = useTranslation();
+
+    const accountingChildren = [
+        {
+            key: 'bills',
+            icon: <Icon component={FaFileInvoiceDollar}/>,
+            label: (<Link to="/manage/bills">{t("menus.header.bills")}</Link>)
+        },
+        {
+            key: 'enterbills',
+            icon: <Icon component={GiPayMoney}/>,
+            label: t("menus.header.enterbills"),
+            onClick: () => {
+                setBillEnterContext({
+                    actions: {},
+                    context: {},
                 });
-              }}
-              icon={<Icon component={FaCreditCard} />}
-            >
-              {t("menus.header.entercardpayment")}
-            </Menu.Item>
-          )}
-          <Menu.Divider key="div5" />
-          <Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
-            <Link to="/manage/timetickets">
-              {t("menus.header.timetickets")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item
-            key="entertimetickets"
-            icon={<Icon component={GiPlayerTime} />}
-            onClick={() => {
-              setTimeTicketContext({
-                actions: {},
-                context: {
-                  created_by: currentUser.displayName
-                    ? currentUser.email.concat(" | ", currentUser.displayName)
-                    : currentUser.email,
+            }
+        },
+    ];
+
+    if (Simple_Inventory.treatment === "on") {
+        accountingChildren.push(
+            {
+                type: 'divider',
+            },
+            {
+                key: 'inventory',
+                icon: <Icon component={FaFileInvoiceDollar}/>,
+                label: (<Link to="/manage/inventory">{t("menus.header.inventory")}</Link>)
+            }
+        );
+    }
+    accountingChildren.push(
+        {
+            type: 'divider'
+        },
+        {
+            key: 'allpayments',
+            icon: <BankFilled/>,
+            label: (<Link to="/manage/payments">{t("menus.header.allpayments")}</Link>)
+        },
+        {
+            key: 'enterpayments',
+            icon: <Icon component={FaCreditCard}/>,
+            label: t("menus.header.enterpayment"),
+            onClick: () => {
+                setPaymentContext({
+                    actions: {},
+                    context: null,
+                });
+            },
+        }
+    );
+
+    if (ImEXPay.treatment === "on") {
+        accountingChildren.push({
+            key: 'entercardpayments',
+            icon: <Icon component={FaCreditCard}/>,
+            label: t("menus.header.entercardpayment"),
+            onClick: () => {
+                setCardPaymentContext({
+                    actions: {},
+                    context: {},
+                });
+            },
+        });
+    }
+
+    accountingChildren.push(
+        {
+            type: 'divider',
+        },
+        {
+            key: 'timetickets',
+            icon: <FieldTimeOutlined/>,
+            label: (<Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>)
+        },
+        {
+            key: 'entertimetickets',
+            icon: <Icon component={GiPlayerTime}/>,
+            label: t("menus.header.entertimeticket"),
+            onClick: () => {
+                setTimeTicketContext({
+                    actions: {},
+                    context: {
+                        created_by: currentUser.displayName
+                            ? currentUser.email.concat(" | ", currentUser.displayName)
+                            : currentUser.email,
+                    },
+                });
+            },
+        },
+        {
+            type: 'divider',
+        }
+    );
+
+    const accountingExportChildren = [
+        {
+            key: 'receivables',
+            label: (<Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>)
+        }
+    ]
+
+    if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
+        accountingExportChildren.push({
+            key: 'payables',
+            label: (<Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>)
+        });
+    }
+
+    if (!(
+        (bodyshop && bodyshop.cdk_dealerid) ||
+        (bodyshop && bodyshop.pbs_serialnumber)
+    )) {
+        accountingExportChildren.push({
+            key: 'payments',
+            label: (<Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>)
+        });
+    }
+
+    accountingExportChildren.push(
+        {
+            key: 'exportlogs',
+            label: (<Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>)
+        },
+        {
+            key: 'accountingexport',
+            icon: <ExportOutlined/>,
+            label: t("menus.header.export"),
+            children: accountingExportChildren
+        }
+    );
+
+    const menuItems = [
+        {
+            key: 'home',
+            icon: <HomeFilled/>,
+            label: (<Link to="/manage/">{t("menus.header.home")}</Link>)
+        },
+        {
+            key: 'schedule',
+            icon: <Icon component={FaCalendarAlt}/>,
+            label: (<Link to="/manage/schedule">{t("menus.header.schedule")}</Link>)
+        },
+        {
+            key: 'jobssubmenu',
+            icon: <Icon component={FaCarCrash}/>,
+            label: t("menus.header.jobs"),
+            children: [
+                {
+                    key: 'activejobs',
+                    icon: <FileFilled/>,
+                    label: (<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>)
                 },
-              });
-            }}
-          >
-            {t("menus.header.entertimeticket")}
-          </Menu.Item>
-          <Menu.Divider key="div6" />
-          <Menu.SubMenu
-            key="accountingexport"
-            title={t("menus.header.export")}
-            icon={<ExportOutlined />}
-          >
-            <Menu.Item key="receivables">
-              <Link to="/manage/accounting/receivables">
-                {t("menus.header.accounting-receivables")}
-              </Link>
-            </Menu.Item>
-            {(!(
-              (bodyshop && bodyshop.cdk_dealerid) ||
-              (bodyshop && bodyshop.pbs_serialnumber)
-            ) ||
-              DmsAp.treatment === "on") && (
-              <Menu.Item key="payables">
-                <Link to="/manage/accounting/payables">
-                  {t("menus.header.accounting-payables")}
-                </Link>
-              </Menu.Item>
-            )}
-            {!(
-              (bodyshop && bodyshop.cdk_dealerid) ||
-              (bodyshop && bodyshop.pbs_serialnumber)
-            ) && (
-              <Menu.Item key="payments">
-                <Link to="/manage/accounting/payments">
-                  {t("menus.header.accounting-payments")}
-                </Link>
-              </Menu.Item>
-            )}
-            <Menu.Item key="export-logs">
-              <Link to="/manage/accounting/exportlogs">
-                {t("menus.header.export-logs")}
-              </Link>
-            </Menu.Item>
-          </Menu.SubMenu>
-        </Menu.SubMenu>
-        <Menu.Item key="phonebook" icon={<PhoneOutlined />}>
-          <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
-        </Menu.Item>
-        <Menu.Item key="temporarydocs" icon={<PaperClipOutlined />}>
-          <Link to="/manage/temporarydocs">
-            {t("menus.header.temporarydocs")}
-          </Link>
-        </Menu.Item>
-        <Menu.SubMenu
-          key="shopsubmenu"
-          title={t("menus.header.shop")}
-          icon={<SettingOutlined />}
-        >
-          <Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
-            <Link to="/manage/shop?tab=info">
-              {t("menus.header.shop_config")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="dashboard" icon={<DashboardFilled />}>
-            <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
-          </Menu.Item>
-          <Menu.Item
-            key="reportcenter"
-            icon={<BarChartOutlined />}
-            onClick={() => {
-              setReportCenterContext({
-                actions: {},
-                context: {},
-              });
-            }}
-          >
-            {t("menus.header.reportcenter")}
-          </Menu.Item>
-          <Menu.Item
-            key="shop-vendors"
-            icon={<Icon component={IoBusinessOutline} />}
-          >
-            <Link to="/manage/shop/vendors">
-              {t("menus.header.shop_vendors")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="shop-csi" icon={<Icon component={RiSurveyLine} />}>
-            <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-        <Menu.SubMenu
-          key="user"
-          title={
-            currentUser.displayName ||
-            currentUser.email ||
-            t("general.labels.unknown")
-          }
-        >
-          <Menu.Item key="signout" danger onClick={() => signOutStart()}>
-            {t("user.actions.signout")}
-          </Menu.Item>
-          <Menu.Item
-            key="help"
-            onClick={() => {
-              window.open("https://help.imex.online/", "_blank");
-            }}
-            icon={<Icon component={QuestionCircleFilled} />}
-          >
-            {t("menus.header.help")}
-          </Menu.Item>
-          <Menu.Item
-            key="rescue"
-            onClick={() => {
-              window.open("https://imexrescue.com/", "_blank");
-            }}
-          >
-            {t("menus.header.rescueme")}
-          </Menu.Item>
-          <Menu.Item key="shiftclock">
-            <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
-          </Menu.Item>
-          <Menu.Item key="profile">
-            <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
-          </Menu.Item>
-          {
-            //  <Menu.SubMenu
-            //           key="langselecter"
-            //           title={
-            //             <span>
-            //               <GlobalOutlined />
-            //               <span>{t("menus.currentuser.languageselector")}</span>
-            //             </span>
-            //           }
-            //         >
-            //           <Menu.Item actiontype="lang-select" key="en-US">
-            //             {t("general.languages.english")}
-            //           </Menu.Item>
-            //           <Menu.Item actiontype="lang-select" key="fr-CA">
-            //             {t("general.languages.french")}
-            //           </Menu.Item>
-            //           <Menu.Item actiontype="lang-select" key="es-MX">
-            //             {t("general.languages.spanish")}
-            //           </Menu.Item>
-            //         </Menu.SubMenu>
-          }
-        </Menu.SubMenu>
-        <Menu.SubMenu key="recent" title={<ClockCircleFilled />}>
-          {recentItems.map((i, idx) => (
-            <Menu.Item key={idx}>
-              <Link to={i.url}>{i.label}</Link>
-            </Menu.Item>
-          ))}
-        </Menu.SubMenu>
-      </Menu>
-    </Layout.Header>
-  );
+                {
+                    key: 'readyjobs',
+                    icon: <CheckCircleOutlined/>,
+                    label: (<Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>)
+                },
+                {
+                    key: 'parts-queue',
+                    icon: <ToolFilled/>,
+                    label: (<Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>)
+                },
+                {
+                    key: 'availablejobs',
+                    icon: <ImportOutlined/>,
+                    label: (<Link to="/manage/available">{t("menus.header.availablejobs")}</Link>)
+                },
+                {
+                    key: 'newjob',
+                    icon: <FileAddOutlined/>,
+                    label: (<Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>)
+                },
+                {
+                    type: 'divider',
+                },
+                {
+                    key: 'alljobs',
+                    icon: <UnorderedListOutlined/>,
+                    label: (<Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>)
+                },
+                {
+                    key: 'productionlist',
+                    icon: <ScheduleOutlined/>,
+                    label: (<Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>)
+                },
+                {
+                    key: 'productionboard',
+                    icon: <Icon component={BsKanban}/>,
+                    label: (<Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>)
+                },
+                {
+                    type: 'divider',
+                },
+                {
+                    key: 'scoreboard',
+                    icon: <LineChartOutlined/>,
+                    label: (<Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>)
+                },
+            ]
+        },
+        {
+            key: 'customers',
+            icon: <UserOutlined/>,
+            label: t("menus.header.customers"),
+            children: [
+                {
+                    key: 'owners',
+                    icon: <TeamOutlined/>,
+                    label: (<Link to="/manage/owners">{t("menus.header.owners")}</Link>)
+                },
+                {
+                    key: 'vehicles',
+                    icon: <CarFilled/>,
+                    label: (<Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>)
+                },
+            ]
+        },
+        {
+            key: 'ccs',
+            icon: <CarFilled/>,
+            label: t("menus.header.courtesycars"),
+            children: [
+                {
+                    key: 'courtesycarsall',
+                    icon: <CarFilled/>,
+                    label: (<Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>)
+                },
+                {
+                    key: 'contracts',
+                    icon: <FileFilled/>,
+                    label: (<Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>)
+                },
+                {
+                    key: 'newcontract',
+                    icon: <FileAddFilled/>,
+                    label: (<Link
+                        to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>)
+                },
+            ]
+        },
+        {
+            key: 'accounting',
+            icon: <DollarCircleFilled/>,
+            label: t("menus.header.accounting"),
+            children: accountingChildren,
+        },
+        {
+            key: 'phonebook',
+            icon: <PhoneOutlined/>,
+            label: (<Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>)
+        },
+        {
+            key: 'temporarydocs',
+            icon: <PaperClipOutlined/>,
+            label: (<Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>)
+        },
+        {
+            key: 'shopsubmenu',
+            icon: <SettingOutlined/>,
+            label: t("menus.header.shop"),
+            children: [
+                {
+                    key: 'shop',
+                    icon: <Icon component={GiSettingsKnobs}/>,
+                    label: (<Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>)
+                },
+                {
+                    key: 'dashboard',
+                    icon: <DashboardFilled/>,
+                    label: (<Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>)
+                },
+                {
+                    key: 'reportcenter',
+                    icon: <BarChartOutlined/>,
+                    label: t("menus.header.reportcenter"),
+                    onClick: () => {
+                        setReportCenterContext({
+                            actions: {},
+                            context: {},
+                        });
+                    }
+                },
+                {
+                    key: 'shop-vendors',
+                    icon: <Icon component={IoBusinessOutline}/>,
+                    label: (<Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>)
+                },
+                {
+                    key: 'shop-csi',
+                    icon: <Icon component={RiSurveyLine}/>,
+                    label: (<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>)
+                },
+            ]
+        },
+        {
+            key: 'user',
+            label: (
+                currentUser.displayName ||
+                currentUser.email ||
+                t("general.labels.unknown")
+            ),
+            children: [
+                {
+                    key: 'signout',
+                    icon: <Icon component={FiLogOut}/>,
+                    danger: true,
+                    label: t("user.actions.signout"),
+                    onClick: () => signOutStart()
+                },
+                {
+                    key: 'help',
+                    icon: <Icon component={QuestionCircleFilled}/>,
+                    label: t("menus.header.help"),
+                    onClick: () => {
+                        window.open("https://help.imex.online/", "_blank");
+                    }
+                },
+                {
+                    key: 'rescue',
+                    icon: <Icon component={CarFilled}/>,
+                    label: t("menus.header.rescueme"),
+                    onClick: () => {
+                        window.open("https://imexrescue.com/", "_blank");
+                    }
+                },
+                {
+                    key: 'shiftclock',
+                    icon: <Icon component={GiPlayerTime}/>,
+                    label: (<Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>)
+                },
+                {
+                    key: 'profile',
+                    icon: <UserOutlined/>,
+                    label: (<Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>)
+                },
+                // {
+                //   key: 'langselecter',
+                //   label: t("menus.currentuser.languageselector"),
+                //   children: [
+                //     {
+                //       key: 'en-US',
+                //       label: t("general.languages.english"),
+                //       onClick: () => {
+                //         window.location.href = "/?lang=en-US";
+                //       }
+                //     },
+                //     {
+                //       key: 'fr-CA',
+                //       label: t("general.languages.french"),
+                //       onClick: () => {
+                //         window.location.href = "/?lang=fr-CA";
+                //       }
+                //     },
+                //     {
+                //       key: 'es-MX',
+                //       label: t("general.languages.spanish"),
+                //       onClick: () => {
+                //         window.location.href = "/?lang=es-MX";
+                //       }
+                //     },
+                //   ]
+                // },
+            ]
+        },
+        {
+            key: 'recent',
+            icon: <ClockCircleFilled/>,
+            children: recentItems.map((i, idx) => ({
+                key: idx,
+                label: (<Link to={i.url}>{i.label}</Link>)
+
+            })),
+        }
+    ]
+
+    return (
+        <Layout.Header>
+            <Menu
+                mode="horizontal"
+                //theme="light"
+                theme={"dark"}
+                selectedKeys={[selectedHeader]}
+                onClick={handleMenuClick}
+                subMenuCloseDelay={0.3}
+                items={menuItems}
+            />
+
+        </Layout.Header>
+    );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/client/src/components/job-at-change/schedule-event.color.component.jsx b/client/src/components/job-at-change/schedule-event.color.component.jsx
index d997834e3..7d72ef71f 100644
--- a/client/src/components/job-at-change/schedule-event.color.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.color.component.jsx
@@ -54,7 +54,7 @@ export function ScheduleEventColor({ bodyshop, event }) {
             label: color.label,
             style: { color: color.color.hex },
         })),
-        { key: "divider", label: <hr />, disabled: true },
+        { type: "divider" },
         { key: "null", label: t("general.actions.clear") },
       ]
   };
diff --git a/client/src/components/job-detail-lines/job-lines.component.jsx b/client/src/components/job-detail-lines/job-lines.component.jsx
index 0aaf1d953..b1c67ac1b 100644
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -416,7 +416,7 @@ export function JobLinesComponent({
       { key: "PAN", label: t("joblines.fields.part_types.PAN") },
       { key: "PAL", label: t("joblines.fields.part_types.PAL") },
       { key: "PAS", label: t("joblines.fields.part_types.PAS") },
-      { key: "divider", label: <hr />, disabled: true },
+      { type: 'divider' },
       { key: "clear", label: t("general.labels.clear") },
     ]
   }
diff --git a/client/src/components/jobs-change-status/jobs-change-status.component.jsx b/client/src/components/jobs-change-status/jobs-change-status.component.jsx
index 724e57cc0..13ae86721 100644
--- a/client/src/components/jobs-change-status/jobs-change-status.component.jsx
+++ b/client/src/components/jobs-change-status/jobs-change-status.component.jsx
@@ -89,7 +89,7 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
      })),
      ...(job.converted
          ? [
-           { key: "divider", label: <hr />, disabled: true },
+           { type: "divider" },
            ...otherStages.map((item) => ({
              key: item,
              label: item,