diff --git a/src/components/PageLayout/Footer/Footer.tsx b/src/components/PageLayout/Footer/Footer.tsx
index 97705a10..6d0c037c 100644
--- a/src/components/PageLayout/Footer/Footer.tsx
+++ b/src/components/PageLayout/Footer/Footer.tsx
@@ -42,7 +42,7 @@ export const Footer: FC = () => {
         color: 'white',
       }}
     >
-      <Grid xs={3} sx={{display: {xs: 'none', md: 'block'}}} />
+      <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}} />
       <Grid xs={12} md={6}>
         <Stack direction="row" m={2} gap={2} justifyContent="center" sx={{flexWrap: 'wrap'}}>
           {menuItemsIsLoading && <Loading />}
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
index e1bb16a8..9400453e 100644
--- a/src/components/PageLayout/PageLayout.tsx
+++ b/src/components/PageLayout/PageLayout.tsx
@@ -38,13 +38,13 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
       </Head>
       <PageTitleContainer.Provider initialState={title}>
         <BannerContainer.Provider>
-          <Stack sx={{minHeight: '100vh', position: 'relative'}}>
+          <Stack sx={{minHeight: '100dvh'}}>
             <TopGrid />
-            <Grid container sx={{height: '100%', flex: 1}} columns={{xs: 6, md: 12}}>
-              <Grid md={3} sx={{position: 'relative', display: {xs: 'none', md: 'block'}}}>
+            <Grid container sx={{flex: 1}}>
+              <Grid xs={0} md={3} sx={{position: 'relative', display: {xs: 'none', md: 'block'}}}>
                 <StromLogo />
               </Grid>
-              <Grid xs={6} md={contentWidth * 3} sx={{pb: 2, px: 1}}>
+              <Grid xs={12} md={contentWidth * 3} sx={{pb: 2, px: 1}}>
                 {children}
               </Grid>
             </Grid>
diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
index aaa5e0fd..f2e8896c 100644
--- a/src/components/PageLayout/TopGrid/TopGrid.tsx
+++ b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -31,15 +31,15 @@ export const TopGrid: FC = () => {
 
   return (
     <Stack sx={{position: 'sticky', top: 0, width: '100%', backgroundColor: 'white', zIndex: 3}}>
-      <Grid container disableEqualOverflow spacing={1} p={3} columns={{xs: 6, md: 12}}>
+      <Grid container disableEqualOverflow spacing={1} p={3}>
         {/* first row */}
-        <Grid xs={6} md={3}>
+        <Grid xs={12} md={3}>
           <Stack sx={{alignItems: {xs: 'end', md: 'start'}}}>
             <MenuMain />
           </Stack>
         </Grid>
-        <Grid md={6} sx={{display: {xs: 'none', md: 'block'}}} />
-        <Grid md={3} sx={{display: {xs: 'none', md: 'block'}}}>
+        <Grid xs={0} md={6} sx={{display: {xs: 'none', md: 'block'}}} />
+        <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}}>
           <Stack sx={{flexDirection: 'row', spacing: 2, justifyContent: 'flex-end'}}>
             <Link
               href="/malynar"
@@ -66,8 +66,8 @@ export const TopGrid: FC = () => {
         </Grid>
 
         {/* second row */}
-        <Grid md={3} sx={{display: {xs: 'none', md: 'block'}}} />
-        <Grid xs={6} md={6}>
+        <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}} />
+        <Grid xs={12} md={6}>
           <Typography variant="h1">{pageTitle}</Typography>
         </Grid>
         {semesterPickerPage && (
diff --git a/src/theme.ts b/src/theme.ts
index c55b6966..bd212c74 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -59,9 +59,9 @@ export const font = Poppins({
 const _theme = createTheme({
   breakpoints: {
     values: {
-      xs: 0, // defualt
-      sm: 640, // defualt = 640
-      md: 900, // defualt = 900
+      xs: 0, // default
+      sm: 640, // default = 640
+      md: 900, // default = 900
       lg: 1366, // changed to HD, default = 1200
       xl: 1921, // changed to fullHD, default = 1536
     },
@@ -188,7 +188,7 @@ const pxToRem = _theme.typography.pxToRem
 const sm = _theme.breakpoints.up('sm') // 640px
 const md = _theme.breakpoints.up('md') // 900px
 const lg = _theme.breakpoints.up('lg') // 1366px
-const xl = _theme.breakpoints.up('xl') // 1920px
+const xl = _theme.breakpoints.up('xl') // 1921px
 
 // manual font sizes
 export const theme: Theme = {