diff --git a/assets/images/authentication.svg b/assets/images/authentication.svg
new file mode 100644
index 0000000000..5b000f4a6f
--- /dev/null
+++ b/assets/images/authentication.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"/></g></svg>
\ No newline at end of file
diff --git a/assets/images/compose-cli.svg b/assets/images/compose-cli.svg
new file mode 100644
index 0000000000..f31c2423ac
--- /dev/null
+++ b/assets/images/compose-cli.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 13h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1zm-2 4h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm3-9c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/></svg>
\ No newline at end of file
diff --git a/assets/images/data.svg b/assets/images/data.svg
new file mode 100644
index 0000000000..49c2ae2476
--- /dev/null
+++ b/assets/images/data.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><rect fill="none" height="24" width="24"/><g><path d="M14.06,9.94L13,9.45c-0.39-0.18-0.39-0.73,0-0.91l1.06-0.49L14.55,7c0.18-0.39,0.73-0.39,0.91,0l0.49,1.06L17,8.55 c0.39,0.18,0.39,0.73,0,0.91l-1.06,0.49L15.45,11c-0.18,0.39-0.73,0.39-0.91,0L14.06,9.94z M4.45,13l0.49-1.06L6,11.45 c0.39-0.18,0.39-0.73,0-0.91l-1.06-0.49L4.45,9C4.28,8.61,3.72,8.61,3.55,9l-0.49,1.06L2,10.55c-0.39,0.18-0.39,0.73,0,0.91 l1.06,0.49L3.55,13C3.72,13.39,4.28,13.39,4.45,13z M8.96,7.99l0.63-1.4l1.4-0.63c0.39-0.18,0.39-0.73,0-0.91l-1.4-0.63l-0.63-1.4 c-0.18-0.39-0.73-0.39-0.91,0l-0.63,1.4l-1.4,0.63c-0.39,0.18-0.39,0.73,0,0.91l1.4,0.63l0.63,1.4C8.22,8.38,8.78,8.38,8.96,7.99z M22.34,8.27c-0.4-0.4-1.07-0.39-1.45,0.04l-6.39,7.18l-3.29-3.29c-0.39-0.39-1.02-0.39-1.41,0l-6.04,6.05 c-0.41,0.41-0.41,1.09,0,1.5c0.41,0.41,1.09,0.41,1.5,0l5.25-5.26l3.25,3.25c0.41,0.41,1.07,0.39,1.45-0.04l7.17-8.07 C22.73,9.24,22.71,8.64,22.34,8.27z"/></g></svg>
\ No newline at end of file
diff --git a/assets/images/engine-api.svg b/assets/images/engine-api.svg
new file mode 100644
index 0000000000..67a9cedd6b
--- /dev/null
+++ b/assets/images/engine-api.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><g><path d="M10.23,15.83c0.39,0.39,1.02,0.39,1.41,0l4.24-4.24c0.39-0.39,0.39-1.02,0-1.42v0c-0.39-0.39-1.02-0.39-1.41,0l-3.54,3.53 l-1.41-1.41c-0.39-0.39-1.02-0.39-1.42,0s-0.39,1.02,0,1.41L10.23,15.83z"/><path d="M19,4H5C3.89,4,3,4.9,3,6v12c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V6C21,4.9,20.11,4,19,4z M19,17c0,0.55-0.45,1-1,1H6 c-0.55,0-1-0.45-1-1V8h14V17z"/></g></g></svg>
\ No newline at end of file
diff --git a/assets/images/image.svg b/assets/images/image.svg
new file mode 100644
index 0000000000..b6a4658b0d
--- /dev/null
+++ b/assets/images/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><g><rect fill="none" height="24" width="24" x="0"/></g><g><g><path d="M13,2H4C2.9,2,2,2.9,2,4v9c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1V4h9c0.55,0,1-0.45,1-1v0C14,2.45,13.55,2,13,2z M17,6H8 C6.9,6,6,6.9,6,8v9c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1V8h9c0.55,0,1-0.45,1-1v0C18,6.45,17.55,6,17,6z M20,10h-8 c-1.1,0-2,0.9-2,2v8c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2v-8C22,10.9,21.1,10,20,10z"/></g></g></svg>
\ No newline at end of file
diff --git a/assets/images/manage.svg b/assets/images/manage.svg
new file mode 100644
index 0000000000..4aa4b3ba31
--- /dev/null
+++ b/assets/images/manage.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M4 9h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm15 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"/></svg>
\ No newline at end of file
diff --git a/assets/images/storage.svg b/assets/images/storage.svg
new file mode 100644
index 0000000000..316a26ffab
--- /dev/null
+++ b/assets/images/storage.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 20h16c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm0-3h2v2H4v-2zM2 6c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2zm4 1H4V5h2v2zm-2 7h16c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm0-3h2v2H4v-2z"/></svg>
\ No newline at end of file
diff --git a/assets/images/terminal.svg b/assets/images/terminal.svg
new file mode 100644
index 0000000000..b0934ac363
--- /dev/null
+++ b/assets/images/terminal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#677285"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><path d="M20,4H4C2.89,4,2,4.9,2,6v12c0,1.1,0.89,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.11,4,20,4z M20,18H4V8h16V18z M12,16 c0-0.55,0.45-1,1-1h4c0.55,0,1,0.45,1,1c0,0.55-0.45,1-1,1h-4C12.45,17,12,16.55,12,16z M6.79,9.71c0.39-0.39,1.02-0.39,1.41,0 l2.59,2.59c0.39,0.39,0.39,1.02,0,1.41l-2.59,2.59c-0.39,0.39-1.02,0.39-1.41,0c-0.39-0.39-0.39-1.02,0-1.41L8.67,13l-1.88-1.88 C6.4,10.73,6.4,10.1,6.79,9.71z"/></g></svg>
\ No newline at end of file
diff --git a/reference/index.md b/reference/index.md
index 458e1b70e3..ef0560fe6a 100644
--- a/reference/index.md
+++ b/reference/index.md
@@ -5,38 +5,148 @@ notoc: true
 ---
 
 This section includes the reference documentation for the Docker platform's
-various APIs, CLIs, and file formats.
+various APIs, CLIs, drivers and specifications, and file formats.
 
 ## File formats
 
-| File format                                                         | Description                                                     |
-|:--------------------------------------------------------------------|:----------------------------------------------------------------|
-| [Dockerfile](/engine/reference/builder/)                            | Defines the contents and startup behavior of a single container |
-| [Compose file](/compose/compose-file/)                              | Defines a multi-container application                           |
-
+<div class="component-container">
+    <!--start row-->
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+             <div class="component-icon">
+                 <a href="/engine/reference/builder/"><img src="/assets/images/build-frontends.svg" alt="Download and install" width="70" height="70"></a>
+                 </div>
+                 <h2 id="dockerfile"><a href="/engine/reference/builder/">Dockerfile</a></h2>
+                <p> Defines the contents and startup behavior of a single container.</p>
+            </div>
+        </div>
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                <a href="/compose/compose-file/"><img src="/assets/images/build-multi-platform.svg" alt="Release notes" width="70" height="70"></a>
+            </div>
+                <h2 id="compose-file"><a href="/compose/compose-file/">Compose file</a></h2>
+                <p>Defines a multi-container application.</p>
+            </div>
+        </div>
+    </div>
+</div>
 
 ## Command-line interfaces (CLIs)
 
-| CLI                                                            | Description                                                                                |
-|:---------------------------------------------------------------|:-------------------------------------------------------------------------------------------|
-| [Docker CLI](/engine/reference/commandline/cli/)               | The main CLI for Docker, includes all `docker` commands                                    |
-| [Compose CLI](/compose/reference/)                             | The CLI for Docker Compose, which allows you to build and run multi-container applications |
-| [Daemon CLI (dockerd)](/engine/reference/commandline/dockerd/) | Persistent process that manages containers                                                 |
-
+<div class="component-container">
+<!--start row-->
+    <div class="row">
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                 <a href="/engine/reference/commandline/cli/"><img src="/assets/images/terminal.svg" alt="Docker CLI" width="70" height="70"></a>
+            </div>
+                <h2 id="docker-for-linux"><a href="/engine/reference/commandline/cli/">Docker CLI</a></h2>
+                <p>The main CLI for Docker, includes all <code>docker</code> commands.</p>
+        </div>
+     </div>
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+          <div class="component-icon">
+                 <a href="/compose/reference/"><img src="/assets/images/compose-cli.svg" alt="Compose CLI" width="70" height="70"></a>
+          </div>
+                <h2 id="docker-for-windows/install/"><a href="/compose/reference/">Compose CLI</a></h2>
+                <p>The CLI for Docker Compose, which allows you to build and run multi-container applications.</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                <a href="/engine/reference/commandline/dockerd/"><img src="/assets/images/manage.svg" alt="Give feedback" width="70" height="70"></a>
+            </div>
+                <h2 id="docker-for-windows/install/"><a href="/engine/reference/commandline/dockerd/">Daemon CLI (dockerd)</a></h2>
+                <p>Persistent process that manages containers.</p>
+        </div>
+     </div>
+    </div>
+</div>
 
 ## Application programming interfaces (APIs)
 
-| API                                                   | Description                                                                            |
-|:------------------------------------------------------|:---------------------------------------------------------------------------------------|
-| [Engine API](/engine/api/)                            | The main API for Docker, provides programmatic access to a daemon                      |
-| [Registry API](/registry/spec/api/)                   | Facilitates distribution of images to the engine                                       |
-| [Docker Hub API](/docker-hub/api/latest/)             | API to interact with Docker Hub                                                        |
-| [DVP Data API](/docker-hub/api/dvp/)                  | API for Docker Verified Publishers to fetch analytics data                             | 
+<div class="component-container">
+    <!--start row-->
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+             <div class="component-icon">
+                 <a href="/engine/api/"><img src="/assets/images/engine-api.svg" alt="Engine API" width="70" height="70"></a>
+             </div>
+                 <h2 id="dockerfile"><a href="/engine/api/">Engine API</a></h2>
+                <p> The main API for Docker, provides programmatic access to a daemon.</p>
+        </div>
+      </div>
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                <a href="/registry/spec/api/"><img src="/assets/images/storage.svg" alt="Registry API" width="70" height="70"></a>
+            </div>
+                <h2 id="compose-file"><a href="/registry/spec/api/">Registry API</a></h2>
+                <p>Facilitates distribution of images to the engine.</p>
+            </div>
+        </div>
+  </div>  
+    <!--start row-->
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+             <div class="component-icon">
+                 <a href="/docker-hub/api/latest/"><img src="/assets/images/sync.svg" alt="Docker Hub API" width="70" height="70"></a>
+                 </div>
+                 <h2 id="dockerfile"><a href="/docker-hub/api/latest/">Docker Hub API</a></h2>
+                <p> API to interact with Docker Hub.</p>
+            </div>
+        </div>
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                <a href="/docker-hub/api/dvp/"><img src="/assets/images/data.svg" alt="DVP Data API" width="70" height="70"></a>
+            </div>
+                <h2 id="compose-file"><a href="/docker-hub/api/dvp/">DVP Data API</a></h2>
+                <p> API for Docker Verified Publishers to fetch analytics data. </p>
+            </div>
+        </div>
+    </div>
+</div>
 
 ## Drivers and specifications
 
-| Driver                                                 | Description                                                                        |
-|:-------------------------------------------------------|:-----------------------------------------------------------------------------------|
-| [Image specification](/registry/spec/manifest-v2-2/)   | Describes the various components of a Docker image                                 |
-| [Registry token authentication](/registry/spec/auth/)  | Outlines the Docker Registry authentication scheme                                 |
-| [Registry storage drivers](/registry/storage-drivers/) | Enables support for given cloud providers when storing images with Registry        |
+<div class="component-container">
+<!--start row-->
+    <div class="row">
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                 <a href="/registry/spec/manifest-v2-2/"><img src="/assets/images/image.svg" alt="Image specification" width="70" height="70"></a>
+            </div>
+                <h2 id="docker-for-linux"><a href="/registry/spec/manifest-v2-2/">Image specification</a></h2>
+                <p>Describes the various components of a Docker image.</p>
+        </div>
+     </div>
+     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+          <div class="component-icon">
+                 <a href="/registry/spec/auth/"><img src="/assets/images/authentication.svg" alt="Registry token authentication" width="70" height="70"></a>
+          </div>
+                <h2 id="docker-for-windows/install/"><a href="/registry/spec/auth/">Registry token authentication</a></h2>
+                <p>Outlines the Docker Registry authentication schemes.</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 block">
+        <div class="component">
+            <div class="component-icon">
+                <a href="/registry/storage-drivers/"><img src="/assets/images/engine-storage.svg" alt="Registry storage drivers" width="70" height="70"></a>
+            </div>
+                <h2 id="docker-for-windows/install/"><a href="/registry/storage-drivers/">Registry storage drivers</a></h2>
+                <p>Enables support for given cloud providers when storing images with Registry.</p>
+        </div>
+     </div>
+    </div>
+</div>
+