diff --git a/docs/source/styles/display.blade.md b/docs/source/styles/display.blade.md
new file mode 100644
index 000000000..f55be3f1d
--- /dev/null
+++ b/docs/source/styles/display.blade.md
@@ -0,0 +1,68 @@
+---
+extends: _layouts.markdown
+title: "Display"
+---
+
+# Display
+
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling the box type of an element.
+</div>
+
+@include('_partials.feature-badges', [
+    'responsive' => true,
+    'customizable' => false,
+    'hover' => false,
+    'focus' => false
+])
+
+<div class="border-t border-grey-lighter">
+    <table class="w-full text-left" style="border-collapse: collapse;">
+        <thead>
+          <tr>
+              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+          </tr>
+        </thead>
+        <tbody class="align-baseline">
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.block</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: block;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>block</code>.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline-block</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: inline-block;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>inline-block</code>.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: inline;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>inline</code>.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table</code>.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table-row</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table-row;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table-row</code>.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table-cell</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table-cell;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table-cell</code>.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.hidden</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: none;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>none</code>.</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+If you're looking for Flexbox utilities, please see the [Flexbox](/styles/flexbox) page.
diff --git a/docs/source/styles/display.md b/docs/source/styles/display.md
deleted file mode 100644
index 7f3bdd8f6..000000000
--- a/docs/source/styles/display.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-extends: _layouts.markdown
-title: "Display"
----
-
-# Display
-
-<div class="subnav">
-    <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
-</div>
-
-> If you're looking for Flexbox utilities, see the [Flexbox](/styles/flexbox) page.
-
-The display utilities simply `display` property helpers.
-
-```html
-<!-- Using the utilities in HTML: -->
-
-<div class="inline"></div>
-<div class="block"></div>
-<div class="inline-block"></div>
-<div class="hidden"></div>
-
-<div class="table">
-    <div class="table-row">
-        <div class="table-cell"></div>
-    </div>
-</div>
-```
-
-## Responsive
-
-The display utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
-
-```html
-<!-- Using the utilities in HTML: -->
-
-<div class="block sm:inline-block md:block lg:hidden"></div>
-```
-
-```less
-// Using the utilities in Less:
-
-div {
-  .screen(lg, {
-    .inline-block;
-  });
-}
-```