diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 89f99c4071..12dd23069a 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -6,6 +6,7 @@
       font-family: $main-font;
       margin: 0;
       color: $darkgray;
+      font-size: 14px;
     }
 
     h1 {
@@ -54,12 +55,16 @@
       margin-top: 0px;
     }
 
-    p, ol, ul, ol, input, a  {
+    p, ol, ul, ol, li, input, a  {
       font-size: 14px;
       line-height: 24px;
       letter-spacing: 0.30px;
     }
 
+    ol li {
+      margin: 14px 0px;
+    }
+
     a {
       text-decoration: none;
     }
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index f7440af9a3..27101c3a63 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -44,7 +44,13 @@ aio-search-box input {
   margin-left: 8px;
   width:150px;
   height: 40%;
-   @include bp(big){
+   @include bp(big) {
+    transition: width 0.4s ease-in-out;
+    &:focus {
+      width: 50%;
+    }  
+  }
+  @include bp(medium) {
     transition: width 0.4s ease-in-out;
     &:focus {
       width: 50%;
diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss
new file mode 100644
index 0000000000..b0f01095b1
--- /dev/null
+++ b/aio/src/styles/2-modules/_alert.scss
@@ -0,0 +1,21 @@
+.alert {
+    display: flex;
+    padding: 0px 10px;
+    margin: 20px 0px;
+    font-size: 14px;
+    color: $darkgray;
+    &.is-critical {
+        border-left: 10px solid $brightred;
+        background-color: rgba($brightred, 0.05);
+    }
+
+    &.is-important {
+        border-left: 10px solid $orange;
+        background-color: rgba($orange, 0.05);
+    }
+
+    &.is-helpful {
+        border-left: 10px solid $blue;
+        background-color: rgba($blue, 0.05);
+    }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss
new file mode 100644
index 0000000000..99c39370f0
--- /dev/null
+++ b/aio/src/styles/2-modules/_filetree.scss
@@ -0,0 +1,37 @@
+.filetree {
+  background: $offwhite;
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
+  border: 4px solid $lightgray;
+  margin: 0px 0px 5px 0px;
+  padding: 10px;
+
+  .file {
+    display: block;
+    font-family: $main-font;
+    line-height: 32px;
+    color: $darkgray;
+  }
+
+  .children {
+    padding-left: 5px;
+    position: relative;
+    overflow: hidden;
+
+    .file {
+      position: relative;
+
+      &:before {
+        content: '';
+        left: -18px;
+        bottom: 16px;
+        width: 5px;
+        height: 9999px;
+        position: absolute;
+        border-width: 0 0 1px 1px;
+        border-style: solid;
+        border-color: $lightgray;
+        border-radius: 0 0 0 3px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/_images.scss
new file mode 100644
index 0000000000..5ec712fced
--- /dev/null
+++ b/aio/src/styles/2-modules/_images.scss
@@ -0,0 +1,15 @@
+
+.image-display {
+  border-radius: 4px;
+  background: $white;
+  padding: 20px;
+  display: inline-block;
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
+  margin: 0px 0px 10px 0px;
+
+  img {
+    border-radius: 4px;
+    display: inline-block;
+    max-width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index f81d264801..6d67a30979 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -3,4 +3,8 @@
    ============================== */
 
    @import 'hamburger';
-   @import 'code';
\ No newline at end of file
+   @import 'code';
+   @import 'alert';
+   @import 'filetree';
+   @import 'images';
+   @import 'table';
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_subsection.scss b/aio/src/styles/2-modules/_subsection.scss
new file mode 100644
index 0000000000..ade6298fcf
--- /dev/null
+++ b/aio/src/styles/2-modules/_subsection.scss
@@ -0,0 +1,8 @@
+.l-sub-section {
+    color: $darkgray;
+    border-width: 1px;
+    border-style: solid;
+    padding: 20px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss
new file mode 100644
index 0000000000..13fd524ff5
--- /dev/null
+++ b/aio/src/styles/2-modules/_table.scss
@@ -0,0 +1,43 @@
+table {
+  margin: 24px 0px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  border-radius: 2px;
+  background: $offwhite;
+
+  &.is-full-width {
+    width: 100%;
+  }
+
+  thead {
+    th {
+      background: $offwhite;
+      border-bottom: 1px solid $lightgray;
+      color: $darkgray;
+      font-size: 12px;
+      font-weight: 500;
+      padding: 0px 24px;
+      text-align: left;
+      text-transform: uppercase;
+    }
+  }
+
+  tbody {
+    th,
+    td {
+      border-bottom: 1px solid $lightgray;
+      padding: 16px 24px;
+      text-align: left;
+    }
+
+    th {
+      background: $offwhite;
+      border-right: 1px solid $lightgray;
+      font-weight: 600;
+      max-width: 100px;
+    }
+
+    tr:last-child td {
+      border: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index bb3a65b5fc..5718b7ea82 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -8,6 +8,7 @@ $code-font: "Droid Sans Mono", monospace;
 $blue: #1976D2;
 $brightred: #DD0031;
 $darkred: #C3002F;
+$white: #FFFFFF;
 $offwhite: #FAFAFA;
 $backgroundgray: #F1F1F1;
 $lightgray: #DBDBDB;
@@ -15,6 +16,7 @@ $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;
 $codegreen: #17ff0b;
+$orange: #FF9800;
 
 // GRADIENTS
 $bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
diff --git a/aio/src/styles/mixins.scss b/aio/src/styles/_mixins.scss
similarity index 92%
rename from aio/src/styles/mixins.scss
rename to aio/src/styles/_mixins.scss
index 91f213f135..b35ee3e22a 100644
--- a/aio/src/styles/mixins.scss
+++ b/aio/src/styles/_mixins.scss
@@ -12,6 +12,6 @@
     background-color: $bgcolor;
     border-radius: 5px;
     padding: 20px;
-    margin: 24px auto;
+    margin: 0px auto; // was 24
     border: 0.5px solid $lightgray;
 }
\ No newline at end of file
diff --git a/aio/src/styles/_typography-theme.scss b/aio/src/styles/_typography-theme.scss
index ea39016849..c1a468740b 100755
--- a/aio/src/styles/_typography-theme.scss
+++ b/aio/src/styles/_typography-theme.scss
@@ -9,7 +9,7 @@
 
   .docs-component-viewer-tabbed-content,
   .docs-guide-content {
-       h1 {
+      h1 {
         color: mat-color($primary, 800);
         background: rgba(mat-color($foreground, secondary-text), .03);
       }