diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss
index 1fca58d2e2..0d2b32b16a 100644
--- a/packages/stark-ui/assets/styles/_base.scss
+++ b/packages/stark-ui/assets/styles/_base.scss
@@ -12,45 +12,20 @@ body {
   &.translate-cloak {
     visibility: hidden;
   }
-}
-
-.stark-section {
-  margin-bottom: 64px;
-}
-
-.stark-main-container {
-  align-self: stretch;
-  min-height: 670px;
-  padding: 64px 15px;
-}
-
-@media screen {
-  .stark-app {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
 
-    .content-wrapper {
-      flex: 1;
-      display: flex;
-      overflow-y: hidden;
-      position: relative;
-    }
+  .stark-section {
+    margin-bottom: 64px;
+  }
 
-    main {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
+  main.stark-main-container {
+    flex: 1 0 auto;
+    align-self: center;
 
-      > ui-view {
-        flex: 1 0 auto;
-      }
-    }
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 64px 15px;
   }
 }
-
 @media #{$tablet-query} {
   .stark-main-container {
     padding-left: 70px;
diff --git a/packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss b/packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss
index e2885fcb10..ab4499f19d 100644
--- a/packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss
+++ b/packages/stark-ui/src/modules/app-footer/components/_app-footer.component.scss
@@ -3,20 +3,20 @@
 /* ============================================================================== */
 /* stark-ui: src/modules/app-footer/components/_app-footer.component.scss */
 stark-app-footer {
-  position: relative;
-  bottom: 0;
-  width: 100%;
+  align-self: stretch;
 }
 
 .stark-app-footer-container {
   display: flex;
   align-items: center;
   justify-content: center;
+
   font-size: 13px;
   line-height: 1.1;
   padding-left: 16px;
   padding-right: 16px;
-  height: $stark-footer-size;
+
+  min-height: $stark-footer-size;
 
   a {
     display: inline-block;
diff --git a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss
index cc81b13d04..ff794a0dbe 100644
--- a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss
+++ b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss
@@ -4,19 +4,22 @@
 /* stark-ui: src/modules/app-sidebar/components/_app-sidebar.component.scss */
 
 .stark-app-sidebar {
+  .mat-sidenav-container {
+    height: 100vh;
+    width: 100vw;
+    
+    display: flex;
+    flex-direction: column;
+  }
+
   .mat-sidenav-content {
     margin-top: $stark-header-size;
-    overflow: initial; // fixes double scrollbar
-    [stark-app-sidenav-content] {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-    }
-  }
 
-  .mat-sidenav-container {
-    min-height: 100%;
+    flex: 1 1 0;
+    align-self: stretch;
+    
+    display: flex;
+    flex-direction: column;
   }
 
   .mat-sidenav {
@@ -48,19 +51,15 @@
   }
 }
 
-@media #{$tablet-query} {
-  .stark-app-sidebar {
-    .mat-sidenav-content {
-      margin-top: $stark-header-size-desktop;
-    }
+@media #{$tablet-screen-query} {
+  .stark-app-sidebar .mat-sidenav-content {
+    margin-top: $stark-header-size-desktop;
   }
 }
 
 @media #{$desktop-lg-query} {
-  .stark-app-sidebar {
-    .stark-app-sidenav-menu {
-      margin-top: $stark-header-size-desktop;
-    }
+  .stark-app-sidebar .stark-app-sidenav-menu {
+    margin-top: $stark-header-size-desktop;
   }
 }
 
diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html
index 3780d8e54b..3fda68b7aa 100644
--- a/showcase/src/app/app.component.html
+++ b/showcase/src/app/app.component.html
@@ -4,17 +4,19 @@
 			<stark-app-logo></stark-app-logo>
 			<stark-app-menu [menuConfig]="mainMenu"></stark-app-menu>
 		</ng-container>
+
 		<ng-container stark-app-sidenav-left>
 			<div class="stark-app-sidenav-top m1 center">Top content</div>
 			<div class="stark-app-sidenav-middle m1 center">Middle content</div>
 			<div class="stark-app-sidenav-bottom m1 center">Bottom content</div>
 		</ng-container>
+
 		<ng-container stark-app-sidenav-right>
 			<div class="stark-app-sidenav-top m1 center">Top content</div>
 			<div class="stark-app-sidenav-middle m1 center">Middle content</div>
 			<div class="stark-app-sidenav-bottom m1 center">Bottom content</div>
 		</ng-container>
-		<div stark-app-sidenav-content>
+		<ng-container stark-app-sidenav-content>
 			<header class="stark-app-header">
 				<div class="stark-header-container">
 					<div class="stark-app-bar">
@@ -120,16 +122,15 @@
 					</div>
 				</div>
 			</header>
-			<div class="stark-main-container">
-				<main>
-					<ui-view></ui-view>
-				</main>
-			</div>
+			
+			<main class="stark-main-container">
+				<ui-view></ui-view>
+			</main>
+			
 			<stark-app-footer
 				legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information"
 				helpPageUrl="https://www.nbb.be/en/links"
-			>
-			</stark-app-footer>
-		</div>
+			></stark-app-footer>
+		</ng-container>
 	</stark-app-sidebar>
 </stark-app-container>
diff --git a/starter/src/app/app.component.html b/starter/src/app/app.component.html
index 195bd27f27..ed23177467 100644
--- a/starter/src/app/app.component.html
+++ b/starter/src/app/app.component.html
@@ -4,7 +4,7 @@
 			<stark-app-logo></stark-app-logo>
 			<stark-app-menu [menuConfig]="mainMenu"></stark-app-menu>
 		</ng-container>
-		<div stark-app-sidenav-content>
+		<ng-container stark-app-sidenav-content>
 			<header class="stark-app-header">
 				<div class="stark-header-container">
 					<div class="stark-app-bar">
@@ -55,16 +55,13 @@ <h1>{{ name }}</h1>
 					</div>
 				</div>
 			</header>
-			<div class="stark-main-container">
-				<main>
-					<ui-view></ui-view>
-				</main>
-			</div>
+			<main class="stark-main-container">
+				<ui-view></ui-view>
+			</main>
 			<stark-app-footer
 				legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information"
 				helpPageUrl="https://www.nbb.be/en/links"
-			>
-			</stark-app-footer>
-		</div>
+			></stark-app-footer>
+		</ng-container>
 	</stark-app-sidebar>
 </stark-app-container>