diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss
new file mode 100644
index 000000000..7c7876bd8
--- /dev/null
+++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss
@@ -0,0 +1,44 @@
+app-root {
+  overflow: hidden;
+}
+
+.outer-wrapper {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: stretch;
+  overflow: auto;
+
+  > *:not(router-outlet) {
+    padding: 0 24px;
+  }
+
+  p {
+    margin: 15px;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .content {
+    justify-content: flex-start;
+
+    > *:not(router-outlet) {
+      padding: 0 15px;
+    }
+  }
+}
diff --git a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html
index 3e6ad582c..1ec8dc1de 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html
+++ b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html
@@ -7,7 +7,7 @@
       }
     </ng-template>
   </igx-nav-drawer>
-  <div igxFlex igxLayout igxLayoutDir="columns">
+  <div class="main" igxFlex igxLayout igxLayoutDir="columns">
     <igx-navbar title="<%=name%>" actionButtonIcon="menu" (action)="nav.toggle()"></igx-navbar>
     <div class="content" igxFlex>
       <router-outlet></router-outlet>
diff --git a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
index 6f341092a..7c7876bd8 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
+++ b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
@@ -1,5 +1,19 @@
+app-root {
+  overflow: hidden;
+}
+
 .outer-wrapper {
   height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .content {