diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index d18fd75..77a906f 100755
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,7 +1,7 @@
 <app-header></app-header>
 <div class="tao-grid-main-components">
-  <div class="tao-messages-component"><app-messages></app-messages></div>
-  <div class="tao-web-component tao-grid-top-left"><app-login></app-login></div>
-  <div class="tao-webide-component"><app-webide></app-webide></div>
-  <div class="tao-terminal-component"><app-terminal></app-terminal></div>
+  <div class="tfw-messages"><app-messages></app-messages></div>
+  <div class="tfw-web tao-grid-top-left"><app-login></app-login></div>
+  <div class="tfw-webide"><app-webide></app-webide></div>
+  <div class="tfw-terminal"><app-terminal></app-terminal></div>
 </div>
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 5dc2f36..202ae6b 100755
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -1,152 +1,58 @@
 //
-// Spaces
+// Variables
 //
-
 $space: 24px;
 
-$sxlarge: 9 * $space;
-$xxxlarge: 6 * $space;
-$xxlarge: 4 * $space;
-$xlarge: 2 * $space;
-$large: 1.5 * $space;
-$medium: $space;
-$small: 0.75 * $space;
-$tiny: 0.5 * $space;
-$hair: 0.25 * $space;
-$nano: 0.125 * $space;
-
-// Color system
-
-// Tao blue palette
-$tao-blue-50:  #F2F7FE;
-$tao-blue-100: #C9DFFA;
-$tao-blue-200: #A0C6F7;
-$tao-blue-300: #77AEF3;
-$tao-blue-400: #4E95EF;
-$tao-blue-500: #277EEC;
-$tao-blue-600: #2170B7;
-$tao-blue-700: #195684;
-$tao-blue-800: #103B5B;
-$tao-blue-900: #081A2B;
-
-// Tao sky palette
-$tao-sky-50:  #F1FAFD;
-$tao-sky-100: #C5E9F5;
-$tao-sky-200: #9AD8EE;
-$tao-sky-300: #6EC7E6;
-$tao-sky-400: #42B7DF;
-$tao-sky-500: #19A7D8;
-$tao-sky-600: #0E8BA8;
-$tao-sky-700: #04647A;
-$tao-sky-800: #004251;
-$tao-sky-900: #002028;
-
-// Tao phtalo palette
-$tao-phtalo-50:  #F2FBFC;
-$tao-phtalo-100: #C8EDF1;
-$tao-phtalo-200: #9FDFE6;
-$tao-phtalo-300: #75D1DB;
-$tao-phtalo-400: #4CC3D0;
-$tao-phtalo-500: #24B6C6;
-$tao-phtalo-600: #16989E;
-$tao-phtalo-700: #0C7575;
-$tao-phtalo-800: #034C4F;
-$tao-phtalo-900: #002426;
-
-// Tao turqoise palette
-$tao-turqoise-50:  #F1FBFB;
-$tao-turqoise-100: #C3EFEF;
-$tao-turqoise-200: #96E3E3;
-$tao-turqoise-300: #68D7D7;
-$tao-turqoise-400: #3BCBCB;
-$tao-turqoise-500: #10BFBF;
-$tao-turqoise-600: #079995;
-$tao-turqoise-700: #00726F;
-$tao-turqoise-800: #004C4A;
-$tao-turqoise-900: #002625;
-
-// Tao bright green palette
-$tao-bright-green-50:  #effbf7;
-$tao-bright-green-100: #c5f2e4;
-$tao-bright-green-200: #a0ead3;
-$tao-bright-green-300: #7ae2c2;
-$tao-bright-green-400: #55d9b0;
-$tao-bright-green-500: #2fd19f;
-$tao-bright-green-600: #2ab587;
-$tao-bright-green-700: #248e63;
-$tao-bright-green-800: #1c6844;
-$tao-bright-green-900: #114431;
-
-// Tao warm yellow palette
-$tao-warm-yellow-50:  #FFF8EB;
-$tao-warm-yellow-100: #FFEDCE;
-$tao-warm-yellow-200: #FFE0A9;
-$tao-warm-yellow-300: #FFD283;
-$tao-warm-yellow-400: #FFC55E;
-$tao-warm-yellow-500: #FFB83B;
-$tao-warm-yellow-600: #E59C3C;
-$tao-warm-yellow-700: #CC8B36;
-$tao-warm-yellow-800: #B2762F;
-$tao-warm-yellow-900: #996526;
-
-// Tao plum palette
-$tao-plum-50:  #F6F8FD;
-$tao-plum-100: #DADFF8;
-$tao-plum-200: #BEC7F3;
-$tao-plum-300: #A2AFED;
-$tao-plum-400: #8797E8;
-$tao-plum-500: #6C80E3;
-$tao-plum-600: #5E77BF;
-$tao-plum-700: #4B5E99;
-$tao-plum-800: #384672;
 $tao-plum-900: #272F4C;
-
-// Tao pink palette
-$tao-pink-50:  #FFF0F7;
-$tao-pink-100: #FFBFDF;
-$tao-pink-200: #FF8FC6;
-$tao-pink-300: #FF5EAE;
-$tao-pink-400: #FF2E95;
-$tao-pink-500: #FF007E;
-$tao-pink-600: #D8007C;
-$tao-pink-700: #B20066;
-$tao-pink-800: #8C0050;
-$tao-pink-900: #66003A;
-
-// Tao red palette
-$tao-red-50:  #FFF5F5;
-$tao-red-100: #FFD4D4;
-$tao-red-200: #FFB3B3;
-$tao-red-300: #FF9292;
-$tao-red-400: #FF7171;
-$tao-red-500: #FF5252;
-$tao-red-600: #E54848;
-$tao-red-700: #CC3636;
-$tao-red-800: #B22424;
-$tao-red-900: #991919;
-
-// Tao gray palette
 $tao-gray-50:  #FAFAFA;
-$tao-gray-100: #F2F2F2;
-$tao-gray-200: #D6D6D6;
-$tao-gray-300: #A0A0A0;
-$tao-gray-400: #777777;
-$tao-gray-500: #555555;
-$tao-gray-600: #323232;
-$tao-gray-700: #232323;
-$tao-gray-800: #0C0C0C;
-$tao-gray-900: #000000;
 
 $tao-navbar-height: 67px;
 
+
 //
 // Layouts
 //
+$layout-template: "raw";  // Change this to switch template
 
-// Default messages, webide, terminal, web component
-@mixin position($col-start, $col-end, $row-start, $row-end) {
-  grid-column: $col-start / $col-end;
-  grid-row: $row-start / $row-end;
+$default-layout: (
+  'messages': (1, 2, 1, 4),
+  'webide': (4, -1, 1, -1),
+  'terminal':  (1, 4, 4, -1),
+  'web':  (2, 4, 1, 4)
+);
+
+$raw-layout: (
+  'messages': (1, 2, 1, -1),
+  'webide': (4, -1, 1, -1),
+  'terminal': (2, 4, 1, -1),
+  'web': (),
+);
+
+$layout: (
+  "default": $default-layout,
+  "raw": $raw-layout
+);
+
+@mixin position-grid-items($map, $sel) {
+
+  $sel: if($sel == '' and &, &, $sel);
+  @debug $sel;
+
+  #{$sel} {
+    @each $k, $v in $map {
+      @at-root #{$sel}#{$k} {
+        @if (length($v) == 0) {
+          display: none
+        }
+        @else {
+          grid-column-start: nth($v, 1);
+          grid-column-end: nth($v, 2);
+          grid-row-start: nth($v, 3);
+          grid-row-end: nth($v, 4);
+        }
+      }
+    }
+  }
 }
 
 .tao-grid-main-components {
@@ -159,35 +65,24 @@ $tao-navbar-height: 67px;
   justify-content: center;
   align-content: center;
   grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: repeat(5, 1fr)
-}
+  grid-template-rows: repeat(5, 1fr);
 
-.tao-web-component {
-  padding: $space;
-  @include position(2, 4, 1, 4);
-  grid-column: 2 / 4;
-  grid-row: 1 / 4;
-}
+  @include position-grid-items(map_get($layout,$layout-template),'.tfw-');
 
-.tao-messages-component {
-  padding: $space;
-  background-color: $tao-gray-50;
-  @include position(1, 2, 1, 4);
-  grid-column: 1 / 2;
-  grid-row: 1 / 4;
+  .tfw-web {
+    padding: $space;
+  }
+
+  .tfw-messages {
+    padding: $space;
+    background-color: $tao-gray-50;
+  }
+
+  .tfw-webide {
+    background-color: $tao-plum-900;
+  }
+
+  .tfw-terminal {
+  }
 
 }
-
-.tao-webide-component {
-  background-color: $tao-plum-900;
-  @include position(4, -1, 1, -1);
-  grid-column: 4 / -1;
-  grid-row: 1 / -1;
-
-}
-
-.tao-terminal-component {
-  @include position(1, 4, 4, -1);
-  grid-row: 4 / -1;
-  grid-column: 1 / 4;
-}