diff --git a/aio/src/styles/1-layouts/_api-pages.scss b/aio/src/styles/1-layouts/_api-pages.scss
index a819b1192f..a2d7809585 100644
--- a/aio/src/styles/1-layouts/_api-pages.scss
+++ b/aio/src/styles/1-layouts/_api-pages.scss
@@ -1,5 +1,4 @@
 .api-body {
-
     max-width: 1200px;
 
     table {
@@ -19,6 +18,12 @@
             vertical-align: middle;
         }
 
+        tbody > tr > td tr td:first-child {
+          @media screen and (max-width: 480px) {
+            background-color: inherit;
+          }
+        }
+
         hr {
             margin: 16px 0;
         }
@@ -42,5 +47,208 @@
         .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%;
+          }
+        }
     }
-}
\ No newline at end of file
+
+    .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 8px 8px;
+
+        h4 {
+          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;
+  }
+
+  &[open] > i.material-icons {
+    @include rotate(180deg); // Rotate the icon
+  }
+}
diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/_details.scss
deleted file mode 100644
index 32728d8026..0000000000
--- a/aio/src/styles/2-modules/_details.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * 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
-  }
-
-  &::before {
-    content: '\E5CE'; // See https://material.io/icons/#ic_expand_less
-    font-family: 'Material Icons';
-    font-size: 24px;
-    -webkit-font-smoothing: antialiased;
-    @include rotate(0deg); // We will rotate 180 degrees when details is open
-    float: right;
-  }
-}
-
-details {
-  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
-
-  .detail-contents {
-    padding: 16px 24px;
-  }
-
-  &[open] > summary::before {
-    @include rotate(180deg); // Rotate the icon
-  }
-}
diff --git a/aio/src/styles/2-modules/_hr.scss b/aio/src/styles/2-modules/_hr.scss
index eacfad9b2d..6f02629450 100644
--- a/aio/src/styles/2-modules/_hr.scss
+++ b/aio/src/styles/2-modules/_hr.scss
@@ -3,12 +3,3 @@ hr {
     background: $lightgray;
     height: 1px;
 }
-
-.hr-margin {
-    display: block;
-    height: 1px;
-    border: 0;
-    margin-top: 16px;
-    margin-bottom: 16px;
-    padding: 0;
-}
\ 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 2d8089f5e0..d975d648e4 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -3,7 +3,6 @@
    ============================== */
 
    @import 'alert';
-   @import 'api-pages';
    @import 'api-list';
    @import 'buttons';
    @import 'callout';
@@ -12,7 +11,6 @@
    @import 'code';
    @import 'contribute';
    @import 'contributor';
-   @import 'details';
    @import 'edit-page-cta';
    @import 'features';
    @import 'filetree';
diff --git a/aio/tools/transforms/templates/api/base.template.html b/aio/tools/transforms/templates/api/base.template.html
index 5c37d1e765..b910986525 100644
--- a/aio/tools/transforms/templates/api/base.template.html
+++ b/aio/tools/transforms/templates/api/base.template.html
@@ -2,19 +2,21 @@
 {% set comma = joiner(',') %}
 {% set breadcrumbDelimiter = joiner('&gt;') %}
 <article>
-  {$ github.githubLinks(doc, versionInfo) $}
-  <div class="breadcrumb">
-    <script type="application/ld+json">
-      {
-        "@context": "http://schema.org",
-        "@type": "BreadcrumbList",
-        "itemListElement": [
-          {%- for crumb in doc.breadCrumbs %}{$ comma() $}
-          { "@type": "ListItem", "position": {$ loop.index $}, "item": { "@id": "https://angular.io/{$ crumb.path $}", "name": "{$ crumb.text $}" } }{% endfor %}
-        ]
-      }
-    </script>
-    {% for crumb in doc.breadCrumbs %}{% if not loop.last %} {$ breadcrumbDelimiter() $} {% if crumb.path %}<a href="{$ crumb.path $}">{$ crumb.text $}</a>{% else %}{$ crumb.text $}{% endif %}{% endif %}{% endfor %}
+  <div class="breadcrumb-container">
+    <div class="breadcrumb">
+      <script type="application/ld+json">
+        {
+          "@context": "http://schema.org",
+          "@type": "BreadcrumbList",
+          "itemListElement": [
+            {%- for crumb in doc.breadCrumbs %}{$ comma() $}
+            { "@type": "ListItem", "position": {$ loop.index $}, "item": { "@id": "https://angular.io/{$ crumb.path $}", "name": "{$ crumb.text $}" } }{% endfor %}
+          ]
+        }
+      </script>
+      {% for crumb in doc.breadCrumbs %}{% if not loop.last %} {$ breadcrumbDelimiter() $} {% if crumb.path %}<a href="{$ crumb.path $}">{$ crumb.text $}</a>{% else %}{$ crumb.text $}{% endif %}{% endif %}{% endfor %}
+    </div>
+    {$ github.githubLinks(doc, versionInfo) $}
   </div>
   {% block header %}
   <header class="api-header">
diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html
index 619ff8b7de..fdb2a34065 100644
--- a/aio/tools/transforms/templates/api/lib/memberHelpers.html
+++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html
@@ -53,17 +53,17 @@
   {$ ('**Deprecated** ' + overload.deprecated) | marked $}
 </div>{% endif %}
 
-<h4 class="no-anchor">Parameters</h4>
+<h6 class="no-anchor">Parameters</h6>
 {$ params.renderParameters(overload.parameterDocs, cssClass + '-parameters', cssClass + '-parameter') $}
 
 {% if overload.type or overload.returns.type %}
-<h4 class="no-anchor">Returns</h4>
+<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 %}
-<h4 class="no-anchor">Throws</h4>
+<h6 class="no-anchor">Throws</h6>
 {% for error in overload.throws %}
 {% marked %}`{$ (error.typeList or 'Error') $}` {$ error.description $}{% endmarked %}
 {% endfor %}
@@ -79,15 +79,15 @@
 {%- 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>
+  {% if method.name !== 'constructor' %}<thead><tr><th class="icon-action-header">
     <div class="with-github-links">
-      <h3>
-        {% if method.isCallMember %}<i>call signature</i>
-        {% elseif method.isNewMember %}<i>construct signature</i>
-        {% else %}{$ method.name $}()
-        {% endif %}
-      </h3>
-      {$ github.githubLinks(method, versionInfo) $}
+    <h3>
+      {% if method.isCallMember %}<i>call signature</i>
+      {% elseif method.isNewMember %}<i>construct signature</i>
+      {% else %}{$ method.name $}()
+      {% endif %}
+    </h3>
+    {$ github.githubLinks(method, versionInfo) $}
     </div>
   </th></tr></thead>{% endif %}
   <tbody>
@@ -121,16 +121,26 @@
     <tr>
       <td>
         <details class="overloads">
-          <summary><h4 class="no-anchor">{$ method.overloads.length $} overloads...</h4></summary>
+          <summary>
+            <div class="icon-action-header">
+                <h4 class="no-anchor">Overloads</h4>
+                <a>Show All <i class="material-icons">expand_more</i></a>
+              </div>
+          </summary>
           <div class="detail-contents">
-                {% if method.isAbstract %}
-                  {$ renderOverloadInfo(method, cssClass + '-overload', method) $}
-                  <hr class="hr-margin fullwidth">
-                {% endif %}
-                {% for overload in method.overloads %}
+            {% if method.isAbstract %}
+              {$ renderOverloadInfo(method, cssClass + '-overload', method) $}
+              <hr class="hr-margin fullwidth">
+            {% endif %}
+            {% for overload in method.overloads %}
+              <div>
+                <h5 class="icon-action-header no-anchor">
+                  <span>Overload #_ of {$ method.overloads.length $}</span>
+                  <i class="material-icons">expand_more</i></h5>
                 {$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
-                {% if not loop.last %}<hr class="hr-margin fullwidth">{% endif %}
+                {% if not loop.last %}<hr class="hr-margin">{% endif %}
               {% endfor %}
+              </div>
           </div>
         </details>
       </td>
diff --git a/aio/tools/transforms/templates/api/lib/paramList.html b/aio/tools/transforms/templates/api/lib/paramList.html
index 8c8e3c9849..8264f560bd 100644
--- a/aio/tools/transforms/templates/api/lib/paramList.html
+++ b/aio/tools/transforms/templates/api/lib/paramList.html
@@ -17,12 +17,17 @@
   <tbody>
   {% for parameter in parameters %}
     <tr class="{$ parameterClass $}">
-      <td class="param-name"><a id="{$ parameter.anchor $}"></a>{$ parameter.name $}</td>
+      <td class="param-name">
+        <a id="{$ parameter.anchor $}"></a>
+        <code>{$ parameter.name $}</code>
+      </td>
+      <td class="param-type">
+          <a><span><code>{$ parameter.type $}</code></span></a>
+      </td>
       {% if showType %}<td class="param-type"><code>{$ parameter.type $}</code></td>{% endif %}
       <td class="param-description">
       {% marked %}
       {% if (parameter.shortDescription | trim) or (parameter.description | trim) %}{$ parameter.shortDescription + '\n\n' + parameter.description $}
-      {% elseif not showType and parameter.type %}<p>Type: <code>{$ parameter.type $}</code>.</p>
       {% endif %}
 
       {% if parameter.isOptional or parameter.defaultValue !== undefined %}Optional. Default is `{$ parameter.defaultValue === undefined and 'undefined' or parameter.defaultValue $}`.{% endif %}
@@ -34,4 +39,4 @@
 {%- else -%}
 <p>There are no parameters.</p>
 {%- endif -%}
-{%- endmacro -%}
\ No newline at end of file
+{%- endmacro -%}