Repository: Dispatch-AI-com/frontend
Pull request #64: refactor/global MUI container & footer responsiveness
Author: login: magicmarc
Created: 2025-05-12T00:47:03Z | Merged: 2025-05-14T13:23:25Z

This PR addresses global MUI container &  footer responsiveness:

**1. Unified Horizontal Padding with MUI Container**
Removed custom horizontal padding from both the Navbar and Footer, replacing them with MUI’s <Container> component for more consistent global spacing.

The following MUI configurations have been applied after testing and aligning with the latest UI design:
```
  custom: {
    containerWidth: {
      sm: 600,
      md: 888,
      lg: 1188,
      xl: 1488,
    },
  },
```

**2. Improved Footer Visibility on Smaller Screens**
The `NavLinksBox` section now remains visible on screens lg and above (instead of xl).

**3. Adjusted Footer Flex Ratios**
To accommodate the layout shift, the flex values of the three main footer sections (LogoAndSocialBox, NavLinksBox, and FreeTrialBox) were recalibrated.

**4. Updated Logo Size and svg file**
Applied the latest logo svg file and udpated log size on footer.


**Note:**
Navi Bar updates (with the latest UI design) will be raised in a separate PR by Leo. Ideally, this PR should be merged first, before future navi bar changes.



Diff:
diff --git a/public/logo-dark.svg b/public/logo-dark.svg
index f02922b..1936deb 100644
--- a/public/logo-dark.svg
+++ b/public/logo-dark.svg
@@ -1,20 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="152px" height="36px" viewBox="0 0 152 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>DispatchAI备份 2</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Web_Dispatch-AI_Blogs" transform="translate(-240.000000, -22.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <g id="DispatchAI备份-2" transform="translate(240.000000, 22.000000)">
-                <path d="M18.2035128,0 L7.09169111,0 L0,30.6704348 L11.1118217,30.6704348 C21.2750733,30.6704348 29.2701646,24.2111238 31.3479849,15.3126324 C33.4258052,6.36897099 28.7281245,0 18.2035128,0 Z M26.2437741,15.3126324 C24.3014638,22.6753435 18.926233,26.0179241 11.8345418,26.0179241 L6.00761094,26.0179241 L10.9311417,4.60734072 L16.7580726,4.60734072 C24.7531639,4.60734072 27.7795543,8.67264135 26.2437741,15.3126324 Z" id="形状"></path>
-                <path d="M36.0196909,14.2830313 C36.9662587,14.2830313 37.8587369,13.5528219 38.0750952,12.6332989 C38.2914536,11.6867311 37.7235129,10.9565217 36.7769452,10.9565217 C35.8574222,10.9565217 34.964944,11.6867311 34.7485857,12.6332989 C34.5322273,13.5528219 35.100168,14.2830313 36.0196909,14.2830313 Z M30.9893595,30.2665039 L33.9101971,30.2665039 L37.1555723,16.2573012 L34.2347346,16.2573012 L30.9893595,30.2665039 Z" id="形状"></path>
-                <path d="M40.8517935,30.6721758 C44.7732884,30.6721758 46.5852896,28.5626819 47.0720958,26.4261433 C47.5589021,24.3166495 46.7205135,23.3971265 45.097826,22.3153348 C43.0153769,20.9090055 42.3392571,20.6115128 42.5285706,19.7190347 C42.7178842,18.9888252 43.4751384,18.4749742 45.0437364,18.4749742 C46.4500656,18.4749742 47.5589021,19.0699596 48.0457084,19.6649451 L48.6947834,16.798197 C48.1268428,16.3925251 46.7205135,15.8786741 45.0166916,15.8786741 C42.474481,15.8786741 40.3108976,17.3931825 39.7700018,19.7731242 C39.2291059,22.0989764 40.6895247,22.9914546 42.3122123,24.0191567 C43.7455863,24.9386797 44.5298853,25.5607099 44.313527,26.5884121 C44.0971686,27.507935 43.0153769,28.0758757 41.1492862,28.0758757 C38.8775236,28.0758757 37.4171048,26.4802329 37.4171048,26.4802329 L36.7409849,29.3469809 C36.7409849,29.3469809 38.4718517,30.6721758 40.8517935,30.6721758 Z" id="路径"></path>
-                <path d="M47.1455514,36 L50.066389,36 L51.7431662,28.7790403 C52.419286,29.7796976 53.7174361,30.6721758 56.0162435,30.6721758 C60.2893208,30.6721758 64.0755918,27.3727111 65.0221595,23.2889473 C65.9687273,19.2051836 63.6969647,15.8786741 59.4238874,15.8786741 C57.3955279,15.8786741 55.5023924,16.662973 54.3124215,17.6365856 L54.636959,16.2843459 L51.7161214,16.2843459 L47.1455514,36 Z M56.6653185,28.0758757 C54.0419736,28.0758757 52.1488381,26.3179641 52.8520027,23.2889473 C53.5551673,20.2328857 56.2596466,18.4749742 58.8829915,18.4749742 C61.5063364,18.4749742 62.8044865,20.6385576 62.1824563,23.2889473 C61.560426,25.939337 59.2886634,28.0758757 56.6653185,28.0758757 Z" id="形状"></path>
-                <path d="M71.8861182,30.6721758 C74.1578808,30.6721758 75.834658,29.7796976 76.9975841,28.8331299 L76.618957,30.2665039 L79.5397946,30.2665039 L82.8392593,16.2843459 L79.9184217,16.2843459 L79.5938842,17.6365856 C78.83663,16.662973 77.3221216,15.8786741 75.2937621,15.8786741 C71.0206848,15.8786741 67.2344138,19.2051836 66.2878461,23.2889473 C65.3412783,27.3727111 67.6130409,30.6721758 71.8861182,30.6721758 Z M72.697462,28.0758757 C70.0741171,28.0758757 68.5866535,25.9122922 69.2086837,23.2619025 C69.8307139,20.6115128 72.2917901,18.4749742 74.915135,18.4749742 C77.5114351,18.4749742 79.1611675,20.2328857 78.4580029,23.2619025 C77.7548383,26.3179641 75.2937621,28.0758757 72.697462,28.0758757 Z" id="形状"></path>
-                <polygon id="路径" points="86.1855595 30.2665039 89.1063971 30.2665039 91.8920108 18.2856606 96.6789391 18.2856606 97.219835 15.9057188 92.4329066 15.9057188 93.4606088 11.443328 83.5892593 18.2856606 88.9711731 18.2856606"></polygon>
-                <path d="M101.850726,30.6721758 C103.2841,30.6721758 105.664041,30.3476383 107.151505,29.3469809 L107.773535,26.6425016 C107.773535,26.6425016 105.718131,28.1029205 102.445711,28.1029205 C99.3355599,28.1029205 97.7940067,26.1556954 98.4701266,23.2619025 C99.0921568,20.6115128 101.634367,18.4479294 104.392936,18.4479294 C107.746491,18.4479294 108.909417,20.5574232 108.909417,20.5574232 L109.612581,17.5554512 C108.638969,16.3925251 106.718788,15.8786741 104.987922,15.8786741 C100.444396,15.8786741 96.576991,19.1781388 95.6304233,23.2619025 C94.6838555,27.3456663 96.6310806,30.6721758 101.850726,30.6721758 Z" id="路径"></path>
-                <path d="M119.997095,15.8516293 C116.859899,15.8516293 115.39948,17.6906752 115.183122,17.9881679 L116.697631,11.4162832 L113.668614,11.9030895 L109.422581,30.2665039 L112.343419,30.2665039 L114.236554,22.1260212 C114.912674,19.6919899 117.022168,18.4479294 118.969393,18.4479294 C120.889573,18.4479294 121.809096,19.7190347 121.295245,21.9637525 L119.375065,30.2665039 L122.295903,30.2665039 L124.297217,21.6662597 C125.189696,17.8258991 123.134291,15.8516293 119.997095,15.8516293 Z" id="路径"></path>
-                <path d="M139.213074,11.9030895 L136.373371,11.9030895 L123.986856,30.2665039 L127.448589,30.2665039 L130.288292,25.9122922 L138.942626,25.9122922 L139.69988,30.2665039 L143.134569,30.2665039 L139.213074,11.9030895 Z M132.073249,23.1537234 L137.049491,15.6352709 L138.482865,23.1537234 L132.073249,23.1537234 Z" id="形状"></path>
-                <polygon id="路径" points="144.810222 30.2665039 147.758104 30.2665039 152.004136 11.9030895 149.056254 11.9030895"></polygon>
-            </g>
-        </g>
+<svg width="126" height="30" viewBox="0 0 126 30" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" fill="none">
+        <path d="M15.17 0H5.91L0 25.559h9.26c8.47 0 15.132-5.383 16.863-12.798C27.855 5.307 23.94 0 15.17 0zm6.7 12.76c-1.619 6.136-6.098 8.922-12.008 8.922H5.006L9.11 3.839h4.856c6.663 0 9.185 3.388 7.905 8.922z" fill="#A8F574"/>
+        <path d="M29.916 11.903c.79 0 1.533-.609 1.713-1.375.18-.79-.293-1.398-1.082-1.398-.766 0-1.51.609-1.69 1.398-.18.766.293 1.375 1.06 1.375zm-4.192 13.32h2.434l2.705-11.675h-2.434l-2.705 11.674zM33.943 25.56c3.268 0 4.778-1.758 5.184-3.538.405-1.758-.293-2.524-1.645-3.426-1.736-1.172-2.3-1.42-2.142-2.163.158-.609.79-1.037 2.096-1.037 1.172 0 2.096.496 2.502.991l.541-2.389c-.473-.338-1.645-.766-3.065-.766-2.119 0-3.922 1.262-4.372 3.246-.451 1.938.766 2.682 2.118 3.538 1.195.766 1.848 1.285 1.668 2.141-.18.766-1.082 1.24-2.637 1.24-1.893 0-3.11-1.33-3.11-1.33l-.564 2.389s1.443 1.104 3.426 1.104zM39.088 30h2.434l1.397-6.017c.564.833 1.646 1.577 3.561 1.577 3.561 0 6.716-2.75 7.505-6.153.789-3.403-1.104-6.175-4.665-6.175-1.69 0-3.268.654-4.26 1.465l.27-1.127h-2.433L39.088 30zm7.933-6.603c-2.186 0-3.764-1.465-3.178-3.99.586-2.546 2.84-4.011 5.026-4.011s3.268 1.803 2.75 4.011c-.519 2.21-2.412 3.99-4.598 3.99zM59.605 25.56c1.893 0 3.29-.744 4.26-1.532l-.316 1.194h2.434l2.75-11.652h-2.434l-.27 1.127c-.632-.811-1.894-1.465-3.584-1.465-3.561 0-6.716 2.772-7.505 6.175-.789 3.404 1.104 6.153 4.665 6.153zm.676-2.163c-2.186 0-3.425-1.803-2.907-4.012.518-2.209 2.57-3.99 4.755-3.99 2.164 0 3.539 1.466 2.953 3.99-.586 2.547-2.637 4.012-4.8 4.012zM71.421 25.222h2.434l2.322-9.984h3.989l.45-1.983h-3.989l.857-3.719-8.226 5.702h4.485zM84.476 25.56c1.194 0 3.177-.27 4.417-1.104l.518-2.254s-1.713 1.217-4.44 1.217c-2.591 0-3.876-1.623-3.313-4.034.519-2.209 2.637-4.012 4.936-4.012 2.795 0 3.764 1.758 3.764 1.758l.586-2.501c-.812-.97-2.412-1.398-3.854-1.398-3.786 0-7.01 2.75-7.798 6.153-.789 3.403.834 6.175 5.184 6.175zM99.498 13.21c-2.615 0-3.832 1.532-4.012 1.78l1.262-5.476-2.524.405-3.539 15.303h2.435l1.577-6.784c.564-2.028 2.321-3.065 3.944-3.065 1.6 0 2.367 1.06 1.938 2.93l-1.6 6.92h2.434l1.668-7.168c.744-3.2-.97-4.845-3.583-4.845zM115.41 9.92h-2.366l-10.322 15.302h2.885l2.367-3.628h7.212l.63 3.628h2.863L115.41 9.92zm-5.949 9.375 4.147-6.266 1.194 6.266h-5.341zM120.01 25.222h2.457l3.538-15.303h-2.457z" fill="#FFF"/>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/layout/main-layout/Footer.tsx b/src/components/layout/main-layout/Footer.tsx
index 7b8083b..f370c62 100644
--- a/src/components/layout/main-layout/Footer.tsx
+++ b/src/components/layout/main-layout/Footer.tsx
@@ -20,12 +20,12 @@ const FooterWrapper = styled(Box)(({ theme }) => ({
 }));
 
 const LogoContainer = styled(Box)(({ theme }) => ({
-  width: '152px',
-  height: '36px',
+  width: '126px',
+  height: '30px',
   position: 'relative',
-  marginBottom: '40px',
+  marginBottom: theme.spacing(4),
   [theme.breakpoints.up('sm')]: {
-    marginBottom: '80px',
+    marginBottom: theme.spacing(11.5),
   },
 }));
 
@@ -42,14 +42,14 @@ const LogoAndSocialBox = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  flex: 4.5,
+  flex: 3,
   [theme.breakpoints.up('sm')]: {
     alignItems: 'flex-start',
   },
 }));
 
 const SocialBox = styled(Box)(({ theme }) => ({
-  marginBottom: theme.spacing(3),
+  marginBottom: theme.spacing(2.75),
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -58,18 +58,15 @@ const SocialBox = styled(Box)(({ theme }) => ({
     flexDirection: 'row',
     gap: theme.spacing(1),
   },
-  [theme.breakpoints.down('sm')]: {
-    marginBottom: theme.spacing(3),
-  },
 }));
 
 const SocialText = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
   textAlign: 'center',
   whiteSpace: 'nowrap',
+  marginRight: theme.spacing(0.5),
   [theme.breakpoints.up('sm')]: {
     textAlign: 'left',
-    marginRight: theme.spacing(1),
   },
 }));
 
@@ -100,17 +97,16 @@ const CopyrightText = styled(Typography)(({ theme }) => ({
 }));
 
 const NavLinksBox = styled(Box)(({ theme }) => ({
-  flex: 7,
+  flex: 5,
   display: 'none',
-  [theme.breakpoints.up('xl')]: {
+  [theme.breakpoints.up('lg')]: {
     display: 'block',
   },
 }));
 
 const NavLinksStack = styled(Stack)(({ theme }) => ({
   flexDirection: 'row',
-  marginRight: theme.spacing(2),
-  gap: theme.spacing(5),
+  gap: theme.spacing(4),
   whiteSpace: 'nowrap',
 }));
 
@@ -123,7 +119,7 @@ const NavLink = styled(Link)(({ theme }) => ({
 
 const SupportLinksStack = styled(Stack)(({ theme }) => ({
   position: 'absolute',
-  marginTop: theme.spacing(3),
+  marginTop: theme.spacing(4),
 }));
 
 const SupportLink = styled(Link)(({ theme }) => ({
@@ -133,14 +129,12 @@ const SupportLink = styled(Link)(({ theme }) => ({
 }));
 
 const FreeTrialBox = styled(Box)(({ theme }) => ({
-  flex: 3,
+  flex: 2,
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: theme.spacing(1),
   [theme.breakpoints.up('sm')]: {
     alignItems: 'flex-start',
-    gap: theme.spacing(2),
   },
 }));
 
@@ -148,7 +142,7 @@ const FreeTrialTitle = styled(Typography)(({ theme }) => ({
   marginBottom: theme.spacing(1),
   textAlign: 'center',
   [theme.breakpoints.up('sm')]: {
-    marginBottom: theme.spacing(1.5),
+    marginBottom: theme.spacing(4),
     textAlign: 'left',
   },
 }));
@@ -164,7 +158,7 @@ export default function Footer() {
               <Image src="/logo.svg" alt="DispatchAI Logo" layout="fill" objectFit="contain" priority />
             </LogoContainer>
             <SocialBox>
-              <SocialText variant="body2">Follow Us On Social Media</SocialText>
+              <SocialText>Follow Us On Social Media</SocialText>
               <SocialIconsRow direction="row" spacing={0.8}>
                 <SocialIconButton color="inherit"><LinkedInIcon /></SocialIconButton>
                 <SocialIconButton color="inherit"><FacebookIcon /></SocialIconButton>
@@ -173,7 +167,7 @@ export default function Footer() {
                 <SocialIconButton color="inherit"><YouTubeIcon /></SocialIconButton>
               </SocialIconsRow>
             </SocialBox>
-            <CopyrightText variant="body2">©Copyright 2025 Dispatch AI</CopyrightText>
+            <CopyrightText>©Copyright 2025 Dispatch AI</CopyrightText>
           </LogoAndSocialBox>
 
           {/* Navigation Links */}
@@ -187,7 +181,7 @@ export default function Footer() {
               <NavLink href="/about" color="inherit">About Us</NavLink>
               <Box>
                 <NavLink href="/support" color="inherit">Support</NavLink>
-                <SupportLinksStack spacing={2}>
+                <SupportLinksStack spacing={2.5}>
                   <SupportLink href="/support/documents">Documents</SupportLink>
                   <SupportLink href="/support/faqs">FAQs</SupportLink>
                   <SupportLink href="/support/help">Need Help</SupportLink>
diff --git a/src/components/layout/main-layout/Navbar.tsx b/src/components/layout/main-layout/Navbar.tsx
index 3f417a4..b1eb305 100644
--- a/src/components/layout/main-layout/Navbar.tsx
+++ b/src/components/layout/main-layout/Navbar.tsx
@@ -5,6 +5,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import {
   AppBar,
   Box,
+  Container,
   Drawer,
   IconButton,
   Stack,
@@ -41,18 +42,13 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   zIndex: theme.zIndex.drawer + 1,
 }));
 
-const StyledToolbar = styled(Toolbar)(({ theme }) => ({
+const StyledToolbar = styled(Toolbar)(() => ({
   width: '100%',
   maxWidth: '1920px',
-  margin: '0 auto',
-  padding: '30px 240px',
   display: 'flex',
   justifyContent: 'space-between',
+  height: '80px',
   transition: 'padding 0.3s ease',
-
-  [theme.breakpoints.down('xl')]: {
-    padding: '30px 20px',
-  },
 }));
 
 const LogoBox = styled(Box)({
@@ -108,57 +104,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
-                backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-                color: variant === 'light' ? 'inherit' : '#ffffff',
-              },
-              transform: mobileOpen ? 'rotate(90deg)' : 'rotate(0deg)',
-            }}
-          >
-            {mobileOpen ? (
-              <CloseIcon fontSize="medium" />
-            ) : (
-              <MenuIcon fontSize="medium" />
+      <Container maxWidth="xl">
+          <StyledToolbar disableGutters>
+            {/* Logo */}
+            <LogoBox>
+              <Link href="/" aria-label="Dispatch AI Home">
+                <Image
+                  src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
+                  alt="Dispatch AI logo"
+                  width={152}
+                  height={36}
+                  priority
+                  style={{ cursor: 'pointer', display: 'block' }}
+                />
+              </Link>
+            </LogoBox>
+
+            {/* Desktop */}
+            {!isMobile && (
+              <>
+                <DesktopNavItems navItems={navItems} themeVariant={variant} />
+                <DesktopButtonGroup direction="row" spacing={1.5}>
+                  <AuthButton variant="login" themeVariant={variant} />
+                  <AuthButton variant="signup" themeVariant={variant} />
+                </DesktopButtonGroup>
+              </>
+            )}
+
+            {/* Mobile */}
+            {isMobile && (
+              <MobileMenuButton
+                color="inherit"
+                aria-label="toggle drawer"
+                edge="start"
+                onClick={handleDrawerToggle}
+                sx={{
+                  backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
+                  color: variant === 'light' ? 'inherit' : '#ffffff',
+                  '&:hover': {
+                    backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
+                    color: variant === 'light' ? 'inherit' : '#ffffff',
+                  },
+                  transform: mobileOpen ? 'rotate(90deg)' : 'rotate(0deg)',
+                }}
+              >
+                {mobileOpen ? (
+                  <CloseIcon fontSize="medium" />
+                ) : (
+                  <MenuIcon fontSize="medium" />
+                )}
+              </MobileMenuButton>
             )}
-          </MobileMenuButton>
-        )}
-      </StyledToolbar>
+          </StyledToolbar>
+      </Container>
 
       {/* Mobile Drawer */}
       <StyledDrawer
diff --git a/src/theme/index.ts b/src/theme/index.ts
index f056876..125a83e 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,34 +1,24 @@
-// theme/index.ts
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import { createTheme, responsiveFontSizes } from '@mui/material';
 
-// Extend the TypeBackground interface to include 'dark'
-declare module '@mui/material/styles/createPalette' {
-  interface TypeBackground {
-    dark: string;
-  }
-}
-
-let theme = createTheme({
+const baseTheme = createTheme({
   spacing: 8,
-
   shape: {
     borderRadius: 12,
   },
-
   palette: {
     background: {
-      default: '#ffffff', // default background color for the app
-      paper: '#fafafa', // light gray
-      dark: '#000000', // black
+      default: '#ffffff',
+      paper: '#fafafa', 
+      dark: '#000000', 
     },
     text: {
-      primary: '#060606', // black
-      secondary: '#6d6d6d', // dark gray
+      primary: '#060606', 
+      secondary: '#6d6d6d', 
     },
   },
-
+  
   typography: {
-    fontSize: 16,
+    fontSize: 14,
     fontFamily: ['Roboto', 'sans-serif'].join(','),
     h1: {
       fontSize: 48,
@@ -53,14 +43,21 @@ let theme = createTheme({
       fontWeight: 700,
     },
   },
-
   breakpoints: {
     values: {
-      xs: 0,      // mobile devices
-      sm: 600,    // tablets
-      md: 900,    // small laptop
-      lg: 1200,   // desktop
-      xl: 1536    // large screens
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+  custom: {
+    containerWidth: {
+      sm: 600,
+      md: 888,
+      lg: 1188,
+      xl: 1488,
     },
   },
 
@@ -78,6 +75,34 @@ let theme = createTheme({
   },
 });
 
-theme = responsiveFontSizes(theme);
+// Overwrite Container styles using custom values
+const theme = createTheme(baseTheme, {
+  components: {
+    MuiContainer: {
+      defaultProps: {
+        maxWidth: false,
+      },
+      styleOverrides: {
+        root: {
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          
+          [`@media (min-width:${baseTheme.breakpoints.values.sm}px)`]: {
+            maxWidth: baseTheme.custom.containerWidth.sm,
+          },
+          [`@media (min-width:${baseTheme.breakpoints.values.md}px)`]: {
+            maxWidth: baseTheme.custom.containerWidth.md,
+          },
+          [`@media (min-width:${baseTheme.breakpoints.values.lg}px)`]: {
+            maxWidth: baseTheme.custom.containerWidth.lg,
+          },
+          [`@media (min-width:${baseTheme.breakpoints.values.xl}px)`]: {
+            maxWidth: baseTheme.custom.containerWidth.xl,
+          },
+        },
+      },
+    },
+  },
+});
 
-export default theme;
\ No newline at end of file
+export default responsiveFontSizes(theme);
diff --git a/src/types/.gitkeep b/src/types/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts
new file mode 100644
index 0000000..d9538b4
--- /dev/null
+++ b/src/types/theme.d.ts
@@ -0,0 +1,32 @@
+// types/theme.d.ts
+import '@mui/material/styles';
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    custom: {
+      containerWidth: {
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+      };
+    };
+  }
+
+  interface ThemeOptions {
+    custom?: {
+      containerWidth?: {
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+      };
+    };
+  }
+}
+
+declare module '@mui/material/styles/createPalette' {
+  interface TypeBackground {
+    dark: string;
+  }
+}


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR aims to improve footer responsiveness and layout consistency by adjusting flex ratios and using MUI’s Container for unified horizontal padding in both the Navbar and Footer components.
- Wrapped the Navbar toolbar within a MUI Container to remove custom horizontal paddings.
- Recalibrated flex values and breakpoints in the Footer to enhance responsive behavior.

### Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

| File | Description |
| ---- | ----------- |
| src/components/layout/main-layout/Navbar.tsx | Replaced custom padding with MUI Container and removed unused theme destructuring in the StyledToolbar. |
| src/components/layout/main-layout/Footer.tsx | Adjusted flex ratios and breakpoint conditions to ensure the NavLinksBox displays at lg and above, with minor spacing reductions. |




state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T00:47:29Z
user: login: foliage21
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T09:36:04Z
user: login: magicmarc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T23:46:41Z
user: login: magicmarc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T00:02:07Z
user: login: magicmarc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T11:02:58Z
user: login: magicmarc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T01:41:30Z
user: login: foliage21
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T05:44:48Z
user: login: magicmarc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T06:28:17Z
user: login: magicmarc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T06:39:15Z
user: login: foliage21
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T06:47:44Z
user: login: magicmarc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T07:10:49Z
user: login: foliage21
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T07:53:33Z

Review comments:
diff_hunk: @@ -41,25 +42,12 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   zIndex: theme.zIndex.drawer + 1,
 }));
 
-const StyledToolbar = styled(Toolbar)(({ theme }) => ({
+const StyledToolbar = styled(Toolbar)(({ }) => ({
path: src/components/layout/main-layout/Navbar.tsx
user: login: Copilot
body: [nitpick] Consider removing the empty destructuring parameter or renaming it (e.g., to _theme) to clearly indicate that theme is not utilized in this styling function.
```suggestion
const StyledToolbar = styled(Toolbar)(() => ({
```
created_at: 2025-05-12T00:47:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -41,25 +42,12 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   zIndex: theme.zIndex.drawer + 1,
 }));
 
-const StyledToolbar = styled(Toolbar)(({ theme }) => ({
+const StyledToolbar = styled(Toolbar)(() => ({
path: src/components/layout/main-layout/Navbar.tsx
user: login: foliage21
body: If we use a Container, the default MUI settings don’t match the Zeplin design. I propose we:
**Remove** these props from StyledToolbar:
- maxWidth: '1920px'
- margin: '0 auto'
- paddingTop: '30px'
- paddingBottom: '30px'

**Add** a fixed height:
+ height: 80px;
created_at: 2025-05-12T07:05:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: foliage21
body: **Add a Box inside the Container**

```tsx
<Container maxWidth="xl" disableGutters>
  <Box sx={{ maxWidth: '1440px', width: '100%', mx: 'auto' }}>
    <StyledToolbar disableGutters>
      …
    </StyledToolbar>
  </Box>
</Container>
created_at: 2025-05-12T07:05:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -41,25 +42,12 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   zIndex: theme.zIndex.drawer + 1,
 }));
 
-const StyledToolbar = styled(Toolbar)(({ theme }) => ({
+const StyledToolbar = styled(Toolbar)(() => ({
path: src/components/layout/main-layout/Navbar.tsx
user: login: magicmarc
body: Setting a fixed height for StyledToolbar makes perfect sense. I have maded the changes.
created_at: 2025-05-12T23:46:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: magicmarc
body:  Instead of wrapping StyledToolbar with a box, we can globally overwrite the MUI Container.
 
 `  custom: {
    containerWidth: {
      sm: 600,
      md: 840,
      lg: 1080,
      xl: 1440,
    },
  },`
created_at: 2025-05-13T00:02:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: magicmarc
body: Pending on PR#60 to check possible content overflow.
created_at: 2025-05-13T11:02:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: magicmarc
body: @foliage21 I have merged the latest navi bar and didn't see any overflow issue.
Can you please review this PR again? Thank you.
created_at: 2025-05-14T01:41:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: foliage21
body: Hi Mark, @magicmarc  
There’s no overflow issue anymore.
Do you think we should add 'disableGutters' to the Container for the Navbar and Footer? 
It seems to match the spacing in Zeplin better.
created_at: 2025-05-14T05:44:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: magicmarc
body: Thanks @foliage21 

 'disableGutters' would result in removing horizontal padding internally (as shown below). Therefore, I think it's better to use the MUI container padding. 
![image](https://github.com/user-attachments/assets/0c248507-2ebe-42db-9ce1-f3d99b99eb5a)

On Zeplin, the max-width of the page content should be 1440px (the same as our current container width). Do you think the default MUI container padding is too big?
created_at: 2025-05-14T06:28:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: magicmarc
body: I think we can use 'disableGutters' if we make sure there are appriopriate paddings on all elements such as the Dispatch logo. I can make the changes if that's preferred.
created_at: 2025-05-14T06:39:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: foliage21
body: Hi, mark @magicmarc I may have been mistaken—this has nothing to do with disableGutters. MUI’s <Container> applies theme.spacing(3) (24 px) of horizontal padding at the sm breakpoint and up, so the rendered root width ends up being only 1392 px. 
![image](https://github.com/user-attachments/assets/df5ab3b8-17b6-4135-83dd-848ed3b87065)
![image](https://github.com/user-attachments/assets/96d17b67-3ca1-40b8-85db-90cef4b3624a)
![image](https://github.com/user-attachments/assets/74f18328-daf3-411f-9c2c-9df1ea214ce0)

Therefore, I’d like to update in index.ts:｜
```ts
custom: {
containerWidth: {
sm: 600,
md: 840,
lg: 1080,
xl: 1488, // changed from 1440 to 1488
},
},
```
![image](https://github.com/user-attachments/assets/8b3a5db1-ce47-4ab3-ab82-1d07b1325109)
![image](https://github.com/user-attachments/assets/e6322471-caa7-42c4-a8c2-dee8186eef36)
![image](https://github.com/user-attachments/assets/59efec9c-3421-4a1d-91bc-327c6860fb13)
This should solve the problem. Do you think this will work?

created_at: 2025-05-14T06:47:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: magicmarc
body: Thanks Leo @foliage21 ! You are very detail-oriented!

I have revised the customer containerWidth and it resolves the problem on my end:

```
  custom: {
    containerWidth: {
      sm: 600,
      md: 888,
      lg: 1188,
      xl: 1488,
    },
  },
```
created_at: 2025-05-14T07:10:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,57 +105,59 @@ export default function Navbar({ variant = 'light' }: NavbarProps) {
         color: variant === 'light' ? 'inherit' : '#ffffff',
       }}
     >
-      <StyledToolbar disableGutters>
-        {/* Logo */}
-        <LogoBox>
-          <Link href="/" aria-label="Dispatch AI Home">
-            <Image
-              src={variant === 'light' ? "/logo.svg" : "/logo-dark.svg"}
-              alt="Dispatch AI logo"
-              width={152}
-              height={36}
-              priority
-              style={{ cursor: 'pointer', display: 'block' }}
-            />
-          </Link>
-        </LogoBox>
-
-        {/* Desktop */}
-        {!isMobile && (
-          <>
-            <DesktopNavItems navItems={navItems} themeVariant={variant} />
-            <DesktopButtonGroup direction="row" spacing={1.5}>
-              <AuthButton variant="login" themeVariant={variant} />
-              <AuthButton variant="signup" themeVariant={variant} />
-            </DesktopButtonGroup>
-          </>
-        )}
-
-        {/* Mobile */}
-        {isMobile && (
-          <MobileMenuButton
-            color="inherit"
-            aria-label="toggle drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{
-              backgroundColor: variant === 'light' ? theme.palette.background.paper : '#060606',
-              color: variant === 'light' ? 'inherit' : '#ffffff',
-              '&:hover': {
+      <Container maxWidth="xl">
path: src/components/layout/main-layout/Navbar.tsx
user: login: foliage21
body: @magicmarc
Great to hear it’s working now! Your solution really helped me understand the project’s consistency. 
Cheers, mate!
created_at: 2025-05-14T07:53:33Z
author_association: CONTRIBUTOR

PR comments:
user: login: magicmarc
created_at: 2025-05-12T00:49:45Z
body: @foliage21 Leo please review the navibar changes. Thank you!!
author_association: CONTRIBUTOR
user: login: magicmarc
created_at: 2025-05-14T08:02:01Z
body: Hi Alan @Qiming-Liu , Leo and I have resolved the container-related issues. This PR is now ready for your review. Thanks!
author_association: CONTRIBUTOR