diff --git a/addon/components/api/x-class/template.hbs b/addon/components/api/x-class/template.hbs
index 3ff6e124d..60de60e0a 100644
--- a/addon/components/api/x-class/template.hbs
+++ b/addon/components/api/x-class/template.hbs
@@ -3,18 +3,36 @@
 {{! wrapping in a div seems to work around https://github.com/ember-learn/ember-cli-addon-docs/issues/7 }}
 <div data-test-class-description>{{{class.description}}}</div>
 
-{{#if hasContents}}
-  {{#if hasToggles}}
-    {{api/x-toggles
-      toggles=(hash
-        inherited=(if component.hasInherited showInherited)
-        protected=(if component.hasProtected showProtected)
-        private=(if component.hasPrivate showPrivate)
-        deprecated=(if component.hasDeprecated showDeprecated)
-      )
-    }}
-  {{/if}}
+{{#if (or class.exportType hasToggles)}}
+  {{#api/x-meta-panel as |panel|}}
+    {{#if class.exportType}}
+      {{#panel.header}}
+        Import Path
+      {{/panel.header}}
+
+      {{api/x-import-path item=class}}
+    {{/if}}
+
+    {{#if hasToggles}}
+      {{#panel.header}}
+        Show
+      {{/panel.header}}
 
+      {{#if hasToggles}}
+        {{api/x-toggles
+          toggles=(hash
+            inherited=(if class.hasInherited showInherited)
+            protected=(if class.hasProtected showProtected)
+            private=(if class.hasPrivate showPrivate)
+            deprecated=(if class.hasDeprecated showDeprecated)
+          )
+        }}
+      {{/if}}
+    {{/if}}
+  {{/api/x-meta-panel}}
+{{/if}}
+
+{{#if hasContents}}
   {{api/x-sections
     sections=(hash
       constructors=class.constructors
diff --git a/addon/components/api/x-component/template.hbs b/addon/components/api/x-component/template.hbs
index a9fc968d7..fb0249eb9 100644
--- a/addon/components/api/x-component/template.hbs
+++ b/addon/components/api/x-component/template.hbs
@@ -3,21 +3,30 @@
 {{! wrapping in a div seems to work around https://github.com/ember-learn/ember-cli-addon-docs/issues/7 }}
 <div data-test-component-name>{{{component.description}}}</div>
 
-{{#if hasContents}}
-  {{#if hasToggles}}
-    {{api/x-toggles
-      toggles=(hash
-        inherited=(if component.hasInherited showInherited)
-        internal=(if component.hasInternal showInternal)
-        protected=(if component.hasProtected showProtected)
-        private=(if component.hasPrivate showPrivate)
-        deprecated=(if component.hasDeprecated showDeprecated)
-      )
+{{#if hasToggles}}
+  {{#api/x-meta-panel as |panel|}}
+    {{#panel.header}}
+      Show
+    {{/panel.header}}
+
+    {{#if hasToggles}}
+      {{api/x-toggles
+        toggles=(hash
+          inherited=(if component.hasInherited showInherited)
+          internal=(if component.hasInternal showInternal)
+          protected=(if component.hasProtected showProtected)
+          private=(if component.hasPrivate showPrivate)
+          deprecated=(if component.hasDeprecated showDeprecated)
+        )
 
-      onToggle=(action 'updateFilter')
-    }}
-  {{/if}}
+        onToggle=(action 'updateFilter')
+      }}
+    {{/if}}
+  {{/api/x-meta-panel}}
+{{/if}}
 
+
+{{#if hasContents}}
   {{api/x-sections
     sections=(hash
       constructors=constructors
diff --git a/addon/components/api/x-import-path/component.js b/addon/components/api/x-import-path/component.js
index 49ab02ebf..91612830b 100644
--- a/addon/components/api/x-import-path/component.js
+++ b/addon/components/api/x-import-path/component.js
@@ -1,7 +1,20 @@
 import Component from '@ember/component';
-import layout from './template';
+import hbs from 'htmlbars-inline-precompile';
 
 export default Component.extend({
-  layout,
-  tagName: ''
+  tagName: '',
+  layout: hbs`
+    <div class="import-path mb-6 font-mono" data-test-import-path>
+      <span class="hljs-keyword">import</span>
+
+      {{#if (eq item.exportType "default")}}
+        {{item.name}}
+      {{else}}
+      { {{item.name}} }
+      {{/if}}
+
+      <span class="hljs-keyword">from</span>
+      <span class="hljs-string">'{{item.file}}'</span>;
+    </div>
+  `,
 });
diff --git a/addon/components/api/x-import-path/style.scss b/addon/components/api/x-import-path/style.scss
deleted file mode 100644
index 9f9ac503f..000000000
--- a/addon/components/api/x-import-path/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.import-path {
-  font-family: Monaco, monospace;
-}
diff --git a/addon/components/api/x-import-path/template.hbs b/addon/components/api/x-import-path/template.hbs
deleted file mode 100644
index b0e0d7cb7..000000000
--- a/addon/components/api/x-import-path/template.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-{{#if item.exportType}}
-  <h4 class="mb-2 text-grey font-bold tracking-wide uppercase text-xs">
-    Import Path
-  </h4>
-
-  <div class="import-path mb-6" data-test-import-path>
-    <span class="hljs-keyword">import</span>
-
-    {{#if (eq item.exportType "default")}}
-      {{item.name}}
-    {{else}}
-    { {{item.name}} }
-    {{/if}}
-
-    <span class="hljs-keyword">from</span>
-    <span class="hljs-string">'{{item.file}}'</span>;
-  </div>
-{{/if}}
diff --git a/addon/components/api/x-meta-panel/component.js b/addon/components/api/x-meta-panel/component.js
new file mode 100644
index 000000000..a992edde2
--- /dev/null
+++ b/addon/components/api/x-meta-panel/component.js
@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import hbs from 'htmlbars-inline-precompile';
+
+export default Component.extend({
+  tagName: '',
+  layout: hbs`
+    <div class="px-6 pt-3 mt-4 border border-grey-light rounded text-sm">
+      {{yield (hash
+        header=(component 'api/x-meta-panel/header')
+      )}}
+    </div>
+  `,
+});
diff --git a/addon/components/api/x-meta-panel/header/component.js b/addon/components/api/x-meta-panel/header/component.js
new file mode 100644
index 000000000..f287b1860
--- /dev/null
+++ b/addon/components/api/x-meta-panel/header/component.js
@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import hbs from 'htmlbars-inline-precompile';
+
+export default Component.extend({
+  tagName: '',
+  layout: hbs`
+    <h4 class="mb-2 text-grey font-bold tracking-wide uppercase text-xs">
+      {{yield}}
+    </h4>
+  `,
+});
diff --git a/addon/components/api/x-params/style.scss b/addon/components/api/x-params/style.scss
deleted file mode 100644
index 1be19fe05..000000000
--- a/addon/components/api/x-params/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.item-params {
-  width: 100%;
-
-  td {
-    padding-right: 1em;
-  }
-
-  td:last-of-type {
-    width: 99%;
-    padding-right: 0;
-  }
-}
-
-.item-params__param-name,
-.item-params__param-type {
-  font-family: Monaco, monospace;
-}
-
-.item-params__param-name {
-  font-weight: bold;
-}
diff --git a/addon/components/api/x-params/template.hbs b/addon/components/api/x-params/template.hbs
deleted file mode 100644
index 67c15ed08..000000000
--- a/addon/components/api/x-params/template.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-{{#if shouldDisplayParams}}
-  <h4 class="mb-2 text-grey font-bold tracking-wide uppercase text-xs">
-    Params
-  </h4>
-
-  <table class="item-params mb-6" data-test-item-params>
-    <tbody>
-      {{#each params as |param|}}
-        <tr data-test-item-param>
-          <td><span class="item-params__param-name">{{param.name}}</span></td>
-          <td><span class="item-params__param-type">{{param.type}}</span></td>
-          <td>{{param.description}}</td>
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
-{{/if}}
diff --git a/addon/components/api/x-params/component.js b/addon/components/api/x-section/component.js
similarity index 78%
rename from addon/components/api/x-params/component.js
rename to addon/components/api/x-section/component.js
index dc71451d5..a1f436678 100644
--- a/addon/components/api/x-params/component.js
+++ b/addon/components/api/x-section/component.js
@@ -10,9 +10,9 @@ export default Component.extend({
    * Params shouldn't be displayed when there are no descriptions and no subparams,
    * because the information is already displayed in the type signature and redundant
    */
-  shouldDisplayParams: computed('params.[]', function() {
-    let params = this.get('params') || [];
+  shouldDisplayParams: computed('item.params.[]', function() {
+    let params = this.get('item.params') || [];
 
     return params.some(p => p.description || p.name.includes('.'));
-  })
+  }),
 });
diff --git a/addon/components/api/x-section/template.hbs b/addon/components/api/x-section/template.hbs
new file mode 100644
index 000000000..03c959d14
--- /dev/null
+++ b/addon/components/api/x-section/template.hbs
@@ -0,0 +1,62 @@
+<div data-test-item>
+  <h3
+    id={{item.name}}
+    data-text="{{item.name}}"
+    data-test-item-header
+    class="docs-h3 font-mono font-normal"
+  >
+    {{#if (eq item.exportType 'default')}}
+      <span class="border border-grey-light align-text-top leading-loose text-xs pl-2 mr-2 py-1 rounded">
+        Default
+      </span>
+    {{/if}}
+
+    {{#if (or item.isClass item.isComponent)}}
+      {{#link-to 'docs.api.item' (concat 'modules/' item.id) class='hover:underline'}}
+        <strong>{{item.name}}</strong>
+      {{/link-to}}
+    {{else}}
+      {{#if (eq item.exportType 'default')}}
+        <span class="item-section__default-label">Default</span>
+      {{/if}}
+
+      <a href="#{{item.name}}" class="heading-anchor">
+        {{type-signature item}}
+      </a>
+    {{/if}}
+  </h3>
+
+  <p data-test-item-description>
+    {{{item.description}}}
+  </p>
+
+  {{#if (or item.exportType shouldDisplayParams)}}
+    {{#api/x-meta-panel as |panel|}}
+      {{#if item.exportType}}
+        {{#panel.header}}
+          Import Path
+        {{/panel.header}}
+
+        {{api/x-import-path item=item}}
+      {{/if}}
+
+      {{#if shouldDisplayParams}}
+        {{#panel.header}}
+          Params
+        {{/panel.header}}
+
+        <table class="mb-6" data-test-item-params>
+          <tbody>
+            {{#each item.params as |param|}}
+              <tr data-test-item-param>
+                <td><span class="font-mono font-bold border-r border-grey-light pr-2">{{param.name}}</span></td>
+                <td><span class="font-mono border-r border-grey-light px-2">{{param.type}}</span></td>
+                <td class="pl-2">{{param.description}}</td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      {{/if}}
+    {{/api/x-meta-panel}}
+  {{/if}}
+</div>
diff --git a/addon/components/api/x-sections/component.js b/addon/components/api/x-sections/component.js
index 49ab02ebf..65460489f 100644
--- a/addon/components/api/x-sections/component.js
+++ b/addon/components/api/x-sections/component.js
@@ -1,7 +1,21 @@
 import Component from '@ember/component';
-import layout from './template';
+import hbs from 'htmlbars-inline-precompile';
 
 export default Component.extend({
-  layout,
-  tagName: ''
+  tagName: '',
+  layout: hbs`
+    {{#each-in sections as |section items|}}
+      {{#if items}}
+        <section data-test-api-section class="item-section">
+          <h2 data-test-section-header={{section}} class="docs-h2">
+            {{capitalize section}}
+          </h2>
+
+          {{#each items as |item|}}
+            {{api/x-section item=item}}
+          {{/each}}
+        </section>
+      {{/if}}
+    {{/each-in}}
+  `,
 });
diff --git a/addon/components/api/x-sections/style.scss b/addon/components/api/x-sections/style.scss
deleted file mode 100644
index 9c79e957f..000000000
--- a/addon/components/api/x-sections/style.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.item-section {
-  margin-bottom: 3em;
-
-  h3 {
-    margin-top: 1.3em;
-    position: relative;
-
-    font-family: Monaco, monospace;
-    font-size: 1.1em;
-    font-weight: normal;
-
-    strong {
-      font-weight: bold;
-    }
-  }
-}
-
-.item-section__item-header {
-  a {
-    color: #333;
-    text-decoration: none;
-  }
-}
-
-.item-section__class-header {
-  .item-section__default-label {
-    line-height: 1.4em;
-    vertical-align: text-top;
-  }
-
-  a {
-    color: #333;
-    font-size: 1.4em;
-
-    &:visited {
-      color: #999;
-    }
-
-    &:before {
-      content: ''
-    }
-  }
-}
-
-.item-section__default-label {
-  color: #fff;
-  background-color: #777;
-
-  padding: 2px 4px;
-  font-weight: bold;
-  font-family: Arial, Helvetica, sans-serif;
-  border-radius: 3px;
-  font-size: 0.8em;
-  text-transform: uppercase;
-}
diff --git a/addon/components/api/x-sections/template.hbs b/addon/components/api/x-sections/template.hbs
deleted file mode 100644
index fa25ea073..000000000
--- a/addon/components/api/x-sections/template.hbs
+++ /dev/null
@@ -1,47 +0,0 @@
-{{#each-in sections as |section items|}}
-  {{#if items}}
-    <section data-test-api-section class="item-section">
-      <h2 data-test-section-header={{section}} class='docs-h2'>
-        {{capitalize section}}
-      </h2>
-
-      {{#each items as |item|}}
-        <div data-test-item>
-          {{#if (or item.isClass item.isComponent)}}
-            <h3 id={{item.name}} data-test-item-header class="item-section__class-header">
-              {{#if (eq item.exportType 'default')}}
-                <span class="item-section__default-label">Default</span>
-              {{/if}}
-
-              {{#link-to 'docs.api.item' (concat 'modules/' item.id)}}
-                {{item.name}}
-              {{/link-to}}
-            </h3>
-
-            {{{item.description}}}
-          {{else}}
-            <h3 id={{item.name}} data-test-item-header data-text="{{item.name}}" class="docs-h3">
-              {{#if (eq item.exportType 'default')}}
-                <span class="item-section__default-label">Default</span>
-              {{/if}}
-
-              <a href="#{{item.name}}" class="docs-header-link">
-                {{type-signature item}}
-              </a>
-            </h3>
-
-            <p data-test-item-description>
-              {{{item.description}}}
-            </p>
-
-            <div class="px-6 pt-3 mt-4 border border-grey-light rounded text-sm">
-              {{api/x-import-path item=item}}
-
-              {{api/x-params params=item.params}}
-            </div>
-          {{/if}}
-        </div>
-      {{/each}}
-    </section>
-  {{/if}}
-{{/each-in}}
diff --git a/addon/components/api/x-toggles/template.hbs b/addon/components/api/x-toggles/template.hbs
index 2903fbb30..c4e23cf7f 100644
--- a/addon/components/api/x-toggles/template.hbs
+++ b/addon/components/api/x-toggles/template.hbs
@@ -1,6 +1,4 @@
-Show:
-
-<ul class="list-reset inline">
+<ul class="list-reset mb-6">
   {{#each-in toggles as |key toggle|}}
     {{#if (not-eq toggle undefined)}}
       <li class="inline ml-4">
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 786b8807b..7265ab95c 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -39,9 +39,9 @@ svg {
   z-index: 10;
 }
 
-h1 > a:before,
-h2 > a:before,
-h3 > a:before {
+h1 > .heading-anchor:before,
+h2 > .heading-anchor:before,
+h3 > .heading-anchor:before {
   content: '\B6';
   cursor: pointer;
   display: block;
@@ -51,9 +51,9 @@ h3 > a:before {
   color: #aaa;
 }
 
-h1 > a:hover:before,
-h2 > a:hover:before,
-h3 > a:hover:before {
+h1 > .heading-anchor:hover:before,
+h2 > .heading-anchor:hover:before,
+h3 > .heading-anchor:hover:before {
   visibility: visible;
 }
 
diff --git a/addon/tailwind/config/fonts.js b/addon/tailwind/config/fonts.js
index 4958dd2b2..36e0f2b91 100644
--- a/addon/tailwind/config/fonts.js
+++ b/addon/tailwind/config/fonts.js
@@ -44,8 +44,8 @@ export default {
     'serif',
   ],
   'mono': [
-    'Menlo',
     'Monaco',
+    'Menlo',
     'Consolas',
     'Liberation Mono',
     'Courier New',
diff --git a/lib/utils/compile-markdown.js b/lib/utils/compile-markdown.js
index b7e670256..cb1b16988 100644
--- a/lib/utils/compile-markdown.js
+++ b/lib/utils/compile-markdown.js
@@ -102,12 +102,10 @@ class HBSRenderer extends marked.Renderer {
 
   heading(text, level) {
     let id = text.toLowerCase().replace(/<\/?.*?>/g, '').replace(/[^\w]+/g, '-');
+    let inner = level === 1 ? text : `<a href='#${id}' class='heading-anchor'>${text}</a>`;
+
     return `
-      <h${level} id='${id}' class='docs-md__h${level}'>
-        <a href='#${id}'>
-          ${text}
-        </a>
-      </h${level}>
+      <h${level} id='${id}' class='docs-md__h${level}'>${inner}</h${level}>
     `;
   }