diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 57e0a196b5..336dd029f0 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -123,7 +123,7 @@ td {
   padding: 8px 30px;
   letter-spacing: 0.30px;
 
-  p {
+  p:first-child, p:last-child {
     margin: 0;
   }
 }
diff --git a/aio/src/styles/1-layouts/_api-pages.scss b/aio/src/styles/1-layouts/_api-pages.scss
deleted file mode 100644
index 8088a71aeb..0000000000
--- a/aio/src/styles/1-layouts/_api-pages.scss
+++ /dev/null
@@ -1,280 +0,0 @@
-.api-body {
-    max-width: 1200px;
-
-    table {
-        margin: 12px 0 24px;
-
-        th {
-            text-transform: none;
-            font-size: 16px;
-            font-weight: bold;
-        }
-
-        tr {
-            border-bottom: 1px solid $lightgray;
-        }
-
-        td {
-            vertical-align: middle;
-        }
-
-        tbody > tr > td tr td:first-child {
-          @media screen and (max-width: 480px) {
-            background-color: inherit;
-          }
-        }
-
-        hr {
-            margin: 16px 0;
-        }
-
-        tr:last-child {
-            border-bottom: none;
-        }
-
-        &.item-table {
-            td {
-                padding: 32px;
-            }
-        }
-
-        &.list-table {
-            td {
-                padding: 16px 24px;
-            }
-        }
-
-        .short-description {
-            margin-left: 0;
-        }
-
-        &.parameters-table {
-          margin-top: 0;
-          font-size: 14px;
-          box-shadow: none;
-
-          tr {
-            @media screen and (max-width: 480px) {
-              display: flex;
-              flex-direction: column;
-            }
-
-            td:first-child {
-              font-weight: 600;
-              padding-left: 16px;
-            }
-          }
-
-          td {
-            padding: 8px 8px 8px 0;
-            border: 0;
-            vertical-align: top;
-          }
-
-          td:nth-child(1) {
-            width: 20%;
-          }
-        }
-    }
-
-    .class-overview {
-      position: relative;
-
-      code-example {
-          clear: left;
-      }
-    }
-
-    .icon-action-header {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .method-table th {
-      display: flex;
-    }
-
-    .method-table, .option-table {
-      th {
-
-        .action-icons {
-          a {
-            color: $mediumgray;
-
-            .material-icons:hover {
-              background: none;
-              color: $blue;
-            }
-          }
-        }
-      }
-
-      h3 {
-        margin: 6px 0;
-        font-weight: bold;
-        clear: left;
-      }
-    }
-
-    .api-heading {
-      padding: 5px 0;
-      font-size: 14px;
-      font-weight: bold;
-    }
-
-    .short-description {
-      margin: 6px 0 0 10px;
-    }
-
-    .properties-table {
-      font-size: 14px;
-
-      thead th {
-        &:nth-child(1) {
-          width: 20%;
-        }
-        &:nth-child(2) {
-          width: 20%;
-        }
-      }
-    }
-
-    details.overloads {
-      box-shadow: none;
-
-      .icon-action-header a {
-        display: flex;
-      }
-
-      .detail-contents {
-        padding: 0;
-        border: 1px solid $lightgray;
-        border-radius: 2px;
-        box-shadow: none;
-
-        > *:not(hr) {
-          margin: 16px 24px;
-        }
-      }
-
-      summary {
-        height: inherit;
-        padding: 0 0 8px;
-
-        h4 {
-          margin: 0;
-        }
-
-        .show-all {
-          display: initial;
-        }
-        .collapse-all {
-          display: none;
-        }
-      }
-
-      &[open] > summary {
-        .show-all {
-          display: none;
-        }
-        .collapse-all {
-          display: initial;
-        }
-      }
-    }
-
-    details.overload {
-      box-shadow: none;
-      margin: 0;
-    }
-
-
-    .from-constructor, .read-only-property {
-      font-size: 12px;
-      font-weight: 600;
-      letter-spacing: 0.5px;
-      font-style: italic;
-      background-color: $lightgray;
-      border-radius: 4px;
-      padding: 4px 6px;
-    }
-}
-
-.breadcrumb-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.github-links {
-  .material-icons {
-    border-radius: 4px;
-    padding: 4px;
-    font-size: 20px;
-    &:hover {
-      background-color: $mist;
-    }
-  }
-}
-
-.api-header {
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  h1 {
-    margin-top: -4px;
-  }
-}
-
-// ____________________________________________
-
-/*
- * General styling to make detail/summary tags look a bit more material
- * To get the best out of it you should structure your usage like this:
- *
- * ```
- * <details>
- *   <summary>Some title</summary>
- *   <div class="details-content">
- *     Some content
- *   </div>
- *  </details>
- *
- */
-
- summary {
-  cursor: pointer;
-  font-size: 16px;
-  position: relative;
-  padding: 16px 24px;
-  color: $black;
-  height: 16px;
-  display: block; // Remove the built in details marker in FF
-
-  &::-webkit-details-marker {
-    display: none; // Remove the built in details marker in webkit
-  }
-}
-
-details {
-  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
-
-  .detail-contents {
-    padding: 16px 24px;
-  }
-
-  // Rotate the icon
-  summary i.material-icons.expand {
-    @include rotate(0deg);
-  }
-  &[open] > summary i.material-icons.expand {
-    @include rotate(180deg);
-  }
-}
diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss
index e9d687bef6..9fd613c4e3 100644
--- a/aio/src/styles/1-layouts/_layouts-dir.scss
+++ b/aio/src/styles/1-layouts/_layouts-dir.scss
@@ -2,7 +2,6 @@
    LAYOUT STYLES
    ============================== */
 
-@import 'api-pages';
 @import 'content-layout';
 @import 'doc-viewer';
 @import 'footer';
diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
index 97b5056f81..861eee2052 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -1,13 +1,111 @@
-.github-links {
-  float: right;
-  .material-icons {
-    border-radius: 4px;
-    padding: 4px;
-    font-size: 20px;
-    &:hover {
-      background-color: $mist;
+.api-body {
+  max-width: 1200px;
+
+  table {
+      margin: 12px 0 24px;
+
+      th {
+          text-transform: none;
+          font-size: 16px;
+          font-weight: bold;
+      }
+
+      tr {
+          border-bottom: 1px solid $lightgray;
+      }
+
+      td {
+          vertical-align: middle;
+      }
+
+      // This is overriding a style here:
+      // https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62
+      tbody > tr > td tr td:first-child {
+        @media screen and (max-width: 480px) {
+          background-color: inherit;
+        }
+      }
+
+      hr {
+          margin: 16px 0;
+      }
+
+      tr:last-child {
+          border-bottom: none;
+      }
+
+      &.item-table {
+          td {
+              padding: 32px;
+          }
+      }
+
+      &.list-table {
+          td {
+              padding: 16px 24px;
+          }
+      }
+
+      .short-description {
+          margin-left: 0;
+      }
+
+      &.parameters-table {
+        margin-top: 0;
+        font-size: 14px;
+        box-shadow: none;
+
+        tr {
+          @media screen and (max-width: 480px) {
+            display: flex;
+            flex-direction: column;
+          }
+
+          td:first-child {
+            font-weight: 600;
+            padding-left: 16px;
+            width: 20%;
+          }
+        }
+
+        td {
+          padding: 8px 8px 8px 0;
+          border: 0;
+          vertical-align: top;
+        }
+      }
+  }
+
+  .class-overview {
+    position: relative;
+
+    code-example {
+        clear: left;
     }
   }
+
+  .short-description {
+    margin: 6px 0 0 10px;
+  }
+
+  .properties-table {
+    font-size: 14px;
+
+    thead th {
+      &:nth-child(1) {
+        width: 20%;
+      }
+      &:nth-child(2) {
+        width: 20%;
+      }
+    }
+  }
+}
+
+.breadcrumb-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .api-header {
@@ -18,6 +116,22 @@
     flex-direction: column;
     align-items: flex-start;
   }
+
+  h1 {
+    margin-top: -4px;
+  }
+}
+
+.github-links {
+  float: right;
+  .material-icons {
+    border-radius: 4px;
+    padding: 4px;
+    font-size: 20px;
+    &:hover {
+      background-color: $mist;
+    }
+  }
 }
 
 .api-body {
@@ -65,10 +179,10 @@
     }
   }
 
+
   .api-heading {
     padding: 5px 0;
-    font-size: 16px;
-    font-weight: bold;
+    font-size: 14px;
   }
 
   .parameters-table {
@@ -80,21 +194,71 @@
   }
 
   details.overloads {
-    margin-left: -8px;
+    box-shadow: none;
+
+    .icon-action-header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      a {
+        display: flex;
+      }
+    }
+
+    .detail-contents {
+      padding: 0;
+      border: 1px solid $lightgray;
+      border-radius: 2px;
+      box-shadow: none;
+
+      > *:not(hr) {
+        margin: 16px 24px;
+      }
+    }
 
     summary {
       height: inherit;
-      padding: 8px 12px;
+      padding: 0;
+
       h4 {
         margin: 0;
         clear: left;
       }
+
+      .show-all {
+        display: initial;
+      }
+      .collapse-all {
+        display: none;
+      }
+    }
+
+    &[open] > summary {
+      .show-all {
+        display: none;
+      }
+      .collapse-all {
+        display: initial;
+      }
     }
   }
 
+  details.overload {
+    box-shadow: none;
+    margin: 0;
+  }
+
+
   .from-constructor, .read-only-property, .write-only-property {
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
     font-style: italic;
-    color: $blue;
+    background-color: $lightgray;
+    border-radius: 4px;
+    padding: 4px 6px;
   }
 
   .ngmodule-list {
@@ -120,10 +284,6 @@
       }
     }
   }
-
-  .member-name {
-    font-weight: bold;
-  }
 }
 
 .deprecated-api-item {
diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/_details.scss
new file mode 100644
index 0000000000..7b9e46cae8
--- /dev/null
+++ b/aio/src/styles/2-modules/_details.scss
@@ -0,0 +1,45 @@
+/*
+ * General styling to make detail/summary tags look a bit more material
+ * To get the best out of it you should structure your usage like this:
+ *
+ * ```
+ * <details>
+ *   <summary>Some title</summary>
+ *   <div class="details-content">
+ *     Some content
+ *   </div>
+ *  </details>
+ *
+ */
+
+summary {
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+  padding: 16px 24px;
+  color: $black;
+  height: 16px;
+  display: block; // Remove the built in details marker in FF
+
+  &::-webkit-details-marker {
+    display: none; // Remove the built in details marker in webkit
+  }
+
+  overflow: hidden;
+}
+
+details {
+  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+
+  .detail-contents {
+    padding: 16px 24px;
+  }
+
+  // Rotate the icon
+  summary i.material-icons.expand {
+    @include rotate(0deg);
+  }
+  &[open] > summary i.material-icons.expand {
+    @include rotate(180deg);
+  }
+}
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index d975d648e4..d2eb89b8ea 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -4,6 +4,7 @@
 
    @import 'alert';
    @import 'api-list';
+   @import 'api-pages';
    @import 'buttons';
    @import 'callout';
    @import 'card';
@@ -11,6 +12,7 @@
    @import 'code';
    @import 'contribute';
    @import 'contributor';
+   @import 'details';
    @import 'edit-page-cta';
    @import 'features';
    @import 'filetree';
diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html
index 4de717af19..ff7bf68b40 100644
--- a/aio/tools/transforms/templates/api/lib/memberHelpers.html
+++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html
@@ -40,46 +40,47 @@
 {%- endmacro -%}
 
 {%- macro renderOverloadInfo(overload, cssClass, method) -%}
+<div class="overload-info">
+  {% if overload.shortDescription and (overload.shortDescription != method.shortDescription) %}
+  <div class="short-description">
+    {$ overload.shortDescription | marked $}
+  </div>{% endif %}
 
-{% if overload.shortDescription and (overload.shortDescription != method.shortDescription) %}
-<div class="short-description">
-  {$ overload.shortDescription | marked $}
-</div>{% endif %}
+  <code-example language="ts" hideCopy="true" linenums="false" class="no-box api-heading">{$ renderMemberSyntax(overload) $}</code-example>
 
-<code-example language="ts" hideCopy="true" linenums="false" class="no-box api-heading">{$ renderMemberSyntax(overload) $}</code-example>
+  {% if overload.deprecated !== undefined %}
+  <div class="deprecated">
+    {$ ('**Deprecated** ' + overload.deprecated) | marked $}
+  </div>{% endif %}
 
-{% if overload.deprecated !== undefined %}
-<div class="deprecated">
-  {$ ('**Deprecated** ' + overload.deprecated) | marked $}
-</div>{% endif %}
+  <h6 class="no-anchor">Parameters</h6>
+  {$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter', true) $}
 
-<h6 class="no-anchor">Parameters</h6>
-{$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter', true) $}
-
-{% if overload.type or overload.returns.type %}
-<h6 class="no-anchor">Returns</h6>
-{% marked %}`{$ (overload.type or overload.returns.type) $}`{% if overload.returns %}: {$ overload.returns.description $}{% endif %}{% endmarked %}
-{% endif %}
+  {% if overload.type or overload.returns.type %}
+  <h6 class="no-anchor">Returns</h6>
+  {% marked %}`{$ (overload.type or overload.returns.type) $}`{% if overload.returns %}: {$ overload.returns.description $}{% endif %}{% endmarked %}
+  {% endif %}
 
 
-{% if overload.throws.length %}
-<h6 class="no-anchor">Throws</h6>
-{% for error in overload.throws %}
-{% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
-{% endfor %}
-{% endif %}
+  {% if overload.throws.length %}
+  <h6 class="no-anchor">Throws</h6>
+  {% for error in overload.throws %}
+  {% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
+  {% endfor %}
+  {% endif %}
 
-{% if overload.description and (overload.description != method.description) -%}
-<div class="description">
-  {$ overload.description | marked $}
+  {% if overload.description and (overload.description != method.description) -%}
+  <div class="description">
+    {$ overload.description | marked $}
+  </div>
+  {%- endif %}
 </div>
-{%- endif %}
 {%- endmacro -%}
 
 {%- macro renderMethodDetail(versionInfo, method, cssClass) -%}
 <a id="{$ method.anchor $}"></a>
 <table class="is-full-width method-table {$ cssClass $}">
-  {% if method.name !== 'constructor' %}<thead><tr><th class="icon-action-header">
+  {% if method.name !== 'constructor' %}<thead><tr><th>
     <div class="with-github-links">
     <h3>
       {% if method.isCallMember %}<i>call signature</i>
@@ -123,10 +124,10 @@
         <details class="overloads">
           <summary>
             <div class="icon-action-header">
-                <h4 class="no-anchor">Overloads</h4>
+                <h4 class="no-anchor">{$ method.overloads.length $} overloads...</h4>
                 <a>
                   <span class="show-all">Show All</span>
-                  <span class="collapse-all">Collapse All</span>
+                  <span class="collapse-all">Hide All</span>
                   <i class="material-icons expand">expand_more</i>
                 </a>
               </div>
@@ -137,17 +138,10 @@
               <hr class="hr-margin fullwidth">
             {% endif %}
             {% for overload in method.overloads %}
-              <details class="overload"{% if loop.first %} open{% endif %}>
-                <summary>
-                  <div class="icon-action-header">
-                    <h5 class="no-anchor">Overload #{$ loop.index $} of {$ method.overloads.length $}</h5>
-                    <a><i class="material-icons expand">expand_more</i></a>
-                  </div>
-                </summary>
-                {$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
-                {% if not loop.last %}<hr class="hr-margin">{% endif %}
-              </details>
-              {% endfor %}
+              <h5 class="no-anchor">Overload #{$ loop.index $}</h5>
+              {$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
+              {% if not loop.last %}<hr class="hr-margin">{% endif %}
+            {% endfor %}
           </div>
         </details>
       </td>