diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 879354dbb3..f3d642930f 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -38,23 +38,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
     position: 'relative',
 }));
 
-const MainLayoutContent = styled(Grid)(({ theme }) => ({
-    width: '1250px',
-    margin: '0 auto',
-    [theme.breakpoints.down('lg')]: {
-        width: '1024px',
-    },
-    [theme.breakpoints.down(1024)]: {
-        width: '100%',
-        marginLeft: 0,
-        marginRight: 0,
-    },
-    [theme.breakpoints.down('sm')]: {
-        minWidth: '100%',
-    },
-}));
-
-const SpaciousMainLayoutContent = styled(Grid)(({ theme }) => ({
+const OldMainLayoutContent = styled(Grid)(({ theme }) => ({
     width: '100%',
     maxWidth: '1512px',
     margin: '0 auto',
@@ -74,6 +58,19 @@ const SpaciousMainLayoutContent = styled(Grid)(({ theme }) => ({
     },
 }));
 
+const NewMainLayoutContent = styled(Grid)(({ theme }) => ({
+    width: '100%',
+    minWidth: 0, // this is a fix for overflowing flex
+    margin: theme.spacing(0, 7),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.down('lg')]: {
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
+        margin: 0,
+    },
+}));
+
 const StyledImg = styled('img')(() => ({
     display: 'block',
     position: 'fixed',
@@ -103,10 +100,12 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
             projectId || '',
         );
 
-        const StyledMainLayoutContent = SpaciousMainLayoutContent;
         const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
+        const StyledMainLayoutContent = sidebarNavigationEnabled
+            ? NewMainLayoutContent
+            : OldMainLayoutContent;
         const theme = useTheme();
-        const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+        const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
 
         return (
             <>
@@ -122,6 +121,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                             )}
                             show={<DraftBanner project={projectId || ''} />}
                         />
+
                         <Box
                             sx={(theme) => ({
                                 display: 'flex',
@@ -134,6 +134,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                                 }
                                 show={<NavigationSidebar />}
                             />
+
                             <StyledMainLayoutContent
                                 item
                                 xs={12}
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
index 563c58e75b..36f29c4318 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -170,9 +170,6 @@ export const StyledBox = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(6),
-    height: '100%',
-    position: 'absolute',
-    zIndex: theme.zIndex.sticky,
 }));
 
 const icons: Record<string, typeof SvgIcon> = {
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 95740e9d9f..84a70af633 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -158,7 +158,12 @@ const Header: VFC = () => {
 
     const disableNotifications = useUiFlag('disableNotifications');
     const { uiConfig, isOss } = useUiConfig();
-    const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
+    const smallScreen = useMediaQuery(
+        sidebarNavigationEnabled
+            ? theme.breakpoints.down('lg')
+            : theme.breakpoints.down('md'),
+    );
     const [openDrawer, setOpenDrawer] = useState(false);
     const toggleDrawer = () => setOpenDrawer((prev) => !prev);
     const onAdminClose = () => setAdminRef(null);