diff --git a/src/frontend/src/components/nav/Footer.tsx b/src/frontend/src/components/nav/Footer.tsx
index 06af2b2962..d089fd3a41 100644
--- a/src/frontend/src/components/nav/Footer.tsx
+++ b/src/frontend/src/components/nav/Footer.tsx
@@ -20,7 +20,7 @@ export function Footer() {
 
   return (
     <div className={classes.layoutFooter}>
-      <Container className={classes.layoutFooterInner} size={'xl'}>
+      <Container className={classes.layoutFooterInner} size={'100%'}>
         <InvenTreeLogo />
         <Group className={classes.layoutFooterLinks}>{items}</Group>
       </Container>
diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx
index 10171ec128..c282956a59 100644
--- a/src/frontend/src/components/nav/Header.tsx
+++ b/src/frontend/src/components/nav/Header.tsx
@@ -68,7 +68,7 @@ export function Header() {
           closeNotificationDrawer();
         }}
       />
-      <Container className={classes.layoutHeaderSection} size={'xl'}>
+      <Container className={classes.layoutHeaderSection} size="100%">
         <Group position="apart">
           <Group>
             <NavHoverMenu openDrawer={openNavDrawer} />
diff --git a/src/frontend/src/components/nav/Layout.tsx b/src/frontend/src/components/nav/Layout.tsx
index 98c78d8fce..fdcbe6c578 100644
--- a/src/frontend/src/components/nav/Layout.tsx
+++ b/src/frontend/src/components/nav/Layout.tsx
@@ -23,7 +23,7 @@ export default function LayoutComponent() {
     <ProtectedRoute>
       <Flex direction="column" mih="100vh">
         <Header />
-        <Container className={classes.layoutContent} size={'xl'}>
+        <Container className={classes.layoutContent} size="100%">
           <Outlet />
         </Container>
         <Space h="xl" />