diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index 83687f5357..36203447a1 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -199,7 +199,7 @@ th {
   z-index: 2;
   color: #999999;
   font-size: 14px;
-  background: #4e4e50 url(../img/ripple_footer_v2.jpg) repeat-x center center;
+  background: #28282a url(../img/ripple_footer_v2.jpg) repeat-x center center;
   background-position-y: -60px;
 }
 
@@ -456,22 +456,24 @@ a.current {
   position: relative;
 }
 
-.landing .level-1 a,
-.landing .curated-links li a {
-  padding: 16px;
+.landing .card .level-1 a,
+.landing .card .curated-links li a {
+  padding: 16px 32px 16px 24px;
   display: block;
+  margin: 0 -24px 0 -24px;
 }
-.landing .level-1 a:hover,
-.landing .curated-links li a:hover {
+.landing .card .level-1 a:hover,
+.landing .card .curated-links li a:hover {
   background-color: #F5F7F9;
   text-decoration: none;
 }
-.landing .level-1 a:hover:after,
-.landing .curated-links li a:hover:after {
+.landing .card .level-1 a:hover:after,
+.landing .card .curated-links li a:hover:after {
   content: "\f105"; /* fontawesome angle-right */
   font-family: FontAwesome;
   position: absolute;
-  right: 16px;
+  right: -8px;
+  top: 16px;
   color: #C9CDD1;
 }
 
@@ -527,7 +529,7 @@ a.current {
     padding-right: 5px;
 }
 .breadcrumbs-wrap .breadcrumb {
-  margin-bottom: 0;
+  padding: 0;
 }
 
 
@@ -777,13 +779,13 @@ a.current {
   margin-bottom: 0;
 }
 
-.landing a .card {
+.landing a.card {
   color: #212529;
   box-shadow: 0px 1px 3px rgba(35, 41, 47, 0.24);
   border-radius: 8px;
 }
 
-.landing a:hover .card {
+.landing a.card:hover {
   box-shadow: 0px 4px 24px rgba(35, 41, 47, 0.16);
 }
 
@@ -808,7 +810,7 @@ a.current {
   padding: 24px;
 }
 
-.landing .card-body {
+.landing .card-header + .card-body {
   padding: 0 24px 24px 24px;
 }
 
@@ -838,10 +840,6 @@ a.current {
   text-decoration: none;
 }
 
-#xrp_ledger_intro .card {
-  width: 200px;
-}
-
 #xrp_ledger_intro .card-footer {
   border-width: 0;
   border-radius: 0;
@@ -872,6 +870,7 @@ a.current {
   font-size: 18px;
   text-align: center;
   font-weight: 300;
+  text-shadow: 0px 1px 2px #171C21;
 }
 
 .splash-head code {
@@ -943,6 +942,10 @@ a.current {
     margin-right: 0;
     margin-left: -1rem;
   }
+
+  .btn {
+    white-space: normal;
+  }
 }
 
 /* Print styles ------------------------------------------------------------- */
diff --git a/tool/template-base.html b/tool/template-base.html
index 6381fde2c3..978f66d3db 100644
--- a/tool/template-base.html
+++ b/tool/template-base.html
@@ -79,7 +79,7 @@
       {% endif %}
 
       <!-- main column -->
-      <main class="main {% if currentpage.sidebar == "disabled" %}col-md-12{% else %}col-md-7 col-lg-6{% endif %} order-md-3 p-0" role="main" id="main_content_body">
+      <main class="main {% if currentpage.sidebar == "disabled" %}col-md-12{% else %}col-md-7 col-lg-6{% endif %} order-md-3 p-0 {% block mainclasses %}{% endblock %}" role="main" id="main_content_body">
           {% block breadcrumbs %}
             {% include 'template-breadcrumbs.html' %}
           {% endblock %}
diff --git a/tool/template-breadcrumbs.html b/tool/template-breadcrumbs.html
index b5d6ad1ce8..f95e79ca77 100644
--- a/tool/template-breadcrumbs.html
+++ b/tool/template-breadcrumbs.html
@@ -1,4 +1,4 @@
-<nav class="breadcrumbs-wrap" aria-label="breacrumb">
+<nav class="breadcrumbs-wrap px-3 px-sm-5" aria-label="breacrumb">
   <ul class="breadcrumb bg-white">
     <li class="breadcrumb-item"><a href="index.html">Home</a></li>
     {% if currentpage.funnel and currentpage != pages|selectattr('funnel', 'equalto', currentpage.funnel)|first %}
diff --git a/tool/template-footer.html b/tool/template-footer.html
index a7827b4ba8..ec8955fe80 100644
--- a/tool/template-footer.html
+++ b/tool/template-footer.html
@@ -1,5 +1,5 @@
 <footer class="ripple-footer" role="contentinfo">
-  <section class="container-fluid px-5 pt-3 pb-0">
+  <section class="container-fluid px-1 px-sm-5 pt-3 pb-0">
       <div class="row">
         {% set funnels = [] %}
         {% for page in pages %}
diff --git a/tool/template-home.html b/tool/template-home.html
index bcf75d9026..49c69f3bf6 100644
--- a/tool/template-home.html
+++ b/tool/template-home.html
@@ -10,12 +10,13 @@
 
 {% endblock %}
 
-{% block bodyclasses %}landing no-sidebar{% endblock %}
+{% block bodyclasses %}no-sidebar{% endblock %}
+{% block mainclasses %}landing{% endblock %}
 
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
-  <section class="container-fluid p-5 splash-head">
+  <section class="container-fluid py-3 p-sm-5 splash-head">
     <h1>Learn. Experiment. Integrate. Contribute.</h1>
     <div class="row">
       <div class="blurb col-sm-12">
@@ -25,7 +26,7 @@
     </div>
   </section>
 
-  <section class="container-fluid p-5 bg-white" id="home_first_shortcuts">
+  <section class="container-fluid py-3 p-sm-5 bg-white" id="home_first_shortcuts">
       <div class="card-deck mb-4">
 
           <div class="card">
@@ -76,11 +77,11 @@
 
     </section>
 
-    <section class="container-fluid bg-light p-5">
+    <section class="container-fluid bg-light py-3 p-sm-5">
       <div class="row">
 
         <div class="col-sm-6">
-          <div class="card">
+          <div class="card mb-4">
             <div class="card-header">
               <h3 class="card-title">New and Updated Documentation</h3>
             </div><!--/.card-header-->
@@ -114,7 +115,7 @@
       </div><!--/.row-->
     </section>
 
-    <section class="container-fluid p-5" id="xrp_ledger_intro">
+    <section class="container-fluid py-3 p-sm-5" id="xrp_ledger_intro">
       <h2><a href="xrp-ledger-overview.html">XRP Ledger: A decentralized cryptographic ledger</a></h2>
       <div class="row">
         <div class="blurb col-sm-12">
@@ -123,87 +124,90 @@
         </div>
       </div>
 
-      <div class="card-deck mb-4">
+      <div class="container">
 
-          <a href="xrp-ledger-overview.html#the-best-digital-asset"><div class="card m-3">
-            <img class="card-img-top" src="assets/img/triskellion.svg" alt="(XRP triskellion)" />
-            <div class="card-body">
-              <!-- <p>XRP is a digital asset native to the XRP Ledger. Anyone with a cryptographic key and an internet connection can receive, hold, and send XRP to anyone else.</p> -->
-            </div><!--/.card-body-->
-            <div class="card-footer"><h3>The Digital Asset for Payments</h3></div>
-          </div><!--/.card--></a>
+        <div class="card-deck mb-4">
 
-          <a href="xrp-ledger-overview.html#censorship-resistant-transaction-processing"><div class="card m-3">
-            <img class="card-img-top" src="assets/img/dollar-arrow.svg" alt="(money moving)" />
-            <div class="card-body">
-              <!-- <p>No single party decides which XRP transactions succeed or fail, and no one can "roll back" a transaction after it completes.</p> -->
-            </div><!--/.card-body-->
-            <div class="card-footer"><h3>Censorship-Resistant Transaction Processing</h3></div>
-          </div><!--/.card--></a>
+            <a href="xrp-ledger-overview.html#the-best-digital-asset" class="card m-3">
+              <img class="card-img-top" src="assets/img/triskellion.svg" alt="(XRP triskellion)" />
+              <div class="card-body">
+                <!-- <p>XRP is a digital asset native to the XRP Ledger. Anyone with a cryptographic key and an internet connection can receive, hold, and send XRP to anyone else.</p> -->
+              </div><!--/.card-body-->
+              <div class="card-footer"><h3>The Digital Asset for Payments</h3></div>
+            </a><!--/.card-->
 
-          <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
+            <a href="xrp-ledger-overview.html#censorship-resistant-transaction-processing" class="card m-3">
+              <img class="card-img-top" src="assets/img/dollar-arrow.svg" alt="(money moving)" />
+              <div class="card-body">
+                <!-- <p>No single party decides which XRP transactions succeed or fail, and no one can "roll back" a transaction after it completes.</p> -->
+              </div><!--/.card-body-->
+              <div class="card-footer"><h3>Censorship-Resistant Transaction Processing</h3></div>
+            </a><!--/.card-->
 
-          <a href="xrp-ledger-overview.html#fast-efficient-consensus-algorithm"><div class="card m-3">
-            <img class="card-img-top" src="assets/img/network.svg" alt="(consensus network)" />
-            <div class="card-body">
-              <!-- <p>The XRP Ledger's consensus algorithm settles transactions in 4 to 5 seconds, processing at a throughput of up to 1500 transactions per second.</p> -->
-            </div><!--/.card-body-->
-            <div class="card-footer"><h3>Fast, Efficient Consensus Algorithm</h3></div>
-          </div><!--/.card--></a>
+            <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
 
-          <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md --></div>
+            <a href="xrp-ledger-overview.html#fast-efficient-consensus-algorithm" class="card m-3">
+              <img class="card-img-top" src="assets/img/network.svg" alt="(consensus network)" />
+              <div class="card-body">
+                <!-- <p>The XRP Ledger's consensus algorithm settles transactions in 4 to 5 seconds, processing at a throughput of up to 1500 transactions per second.</p> -->
+              </div><!--/.card-body-->
+              <div class="card-footer"><h3>Fast, Efficient Consensus Algorithm</h3></div>
+            </a><!--/.card-->
 
-          <a href="xrp-ledger-overview.html#finite-xrp-supply"><div class="card m-3">
-            <img class="card-img-top" src="assets/img/line-graph.svg" alt="(price graph)" />
-            <div class="card-body">
-              <!-- <p>When the XRP Ledger began, 100 billion XRP were created, and no more XRP will ever be created.</p> -->
-            </div><!--/.card-body-->
-            <div class="card-footer"><h3>Finite XRP Supply</h3></div>
-          </div><!--/.card--></a>
+            <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md --></div>
 
-          <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
-          <div class="w-100 d-none d-lg-block"><!-- wrap every 4 on lg/xl --></div>
+            <a href="xrp-ledger-overview.html#finite-xrp-supply" class="card m-3">
+              <img class="card-img-top" src="assets/img/line-graph.svg" alt="(price graph)" />
+              <div class="card-body">
+                <!-- <p>When the XRP Ledger began, 100 billion XRP were created, and no more XRP will ever be created.</p> -->
+              </div><!--/.card-body-->
+              <div class="card-footer"><h3>Finite XRP Supply</h3></div>
+            </a><!--/.card-->
 
-          <a href="xrp-ledger-overview.html#responsible-software-governance"><div class="card m-3">
-            <img class="card-img-top" src="assets/img/scales.svg" alt="(scales of justice)" />
-            <div class="card-body">
-              <!-- <p>A team of full-time, world-class developers at Ripple maintain and continually improve the XRP Ledger's underlying software.</p> -->
-            </div><!--/.card-body-->
-            <div class="card-footer"><h3>Responsible Software Governance</h3></div>
-          </div><!--/.card--></a>
+            <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
+            <div class="w-100 d-none d-lg-block"><!-- wrap every 4 on lg/xl --></div>
 
-          <a href="xrp-ledger-overview.html#secure-adaptable-cryptography"><div class="card m-3">
-            <img class="card-img-top" src="assets/img/lock.svg" alt="(lock)" />
-            <div class="card-body">
-              <!-- <p>The XRP Ledger relies on industry standard digital signature systems like ECDSA and also supports modern, efficient algorithms like Ed25519.</p> -->
-            </div><!--/.card-body-->
-            <div class="card-footer"><h3>Secure, Adaptable Cryptography</h3></div>
-          </div><!--/.card--></a>
+            <a href="xrp-ledger-overview.html#responsible-software-governance" class="card m-3">
+              <img class="card-img-top" src="assets/img/scales.svg" alt="(scales of justice)" />
+              <div class="card-body">
+                <!-- <p>A team of full-time, world-class developers at Ripple maintain and continually improve the XRP Ledger's underlying software.</p> -->
+              </div><!--/.card-body-->
+              <div class="card-footer"><h3>Responsible Software Governance</h3></div>
+            </a><!--/.card-->
 
-          <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
-          <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md --></div>
+            <a href="xrp-ledger-overview.html#secure-adaptable-cryptography" class="card m-3">
+              <img class="card-img-top" src="assets/img/lock.svg" alt="(lock)" />
+              <div class="card-body">
+                <!-- <p>The XRP Ledger relies on industry standard digital signature systems like ECDSA and also supports modern, efficient algorithms like Ed25519.</p> -->
+              </div><!--/.card-body-->
+              <div class="card-footer"><h3>Secure, Adaptable Cryptography</h3></div>
+            </a><!--/.card-->
 
-          <a href="xrp-ledger-overview.html#modern-features-for-smart-contracts"><div class="card m-3">
-            <img class="card-img-top" src="assets/img/gears.svg" alt="(gears)" />
-            <div class="card-body">
-              <!-- <p>Features like Escrow, Checks, and Payment Channels support cutting-edge financial applications while safety features like Invariant Checks and Amendments provide for stable operation.</p> -->
-            </div><!--/.card-body-->
-            <div class="card-footer"><h3>Modern Features for Smart Contracts</h3></div>
-          </div><!--/.card--></a>
+            <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm --></div>
+            <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md --></div>
 
-          <a href="xrp-ledger-overview.html#on-ledger-decentralized-exchange"><div class="card m-3">
-            <img class="card-img-top" src="assets/img/exchange.svg" alt="(currency exchange)" />
-            <div class="card-body">
-              <!-- <p>The XRP Ledger also has a fully-functional accounting system for tracking and trading obligations denominated in any way users want, and an exchange built into the protocol.</p> -->
-            </div><!--/.card-body-->
-            <div class="card-footer"><h3>On-Ledger Decentralized Exchange</h3></div>
-          </div><!--/.card--></a>
+            <a href="xrp-ledger-overview.html#modern-features-for-smart-contracts" class="card m-3">
+              <img class="card-img-top" src="assets/img/gears.svg" alt="(gears)" />
+              <div class="card-body">
+                <!-- <p>Features like Escrow, Checks, and Payment Channels support cutting-edge financial applications while safety features like Invariant Checks and Amendments provide for stable operation.</p> -->
+              </div><!--/.card-body-->
+              <div class="card-footer"><h3>Modern Features for Smart Contracts</h3></div>
+            </a><!--/.card-->
 
-      </div><!--/.card-deck-->
+            <a href="xrp-ledger-overview.html#on-ledger-decentralized-exchange" class="card m-3">
+              <img class="card-img-top" src="assets/img/exchange.svg" alt="(currency exchange)" />
+              <div class="card-body">
+                <!-- <p>The XRP Ledger also has a fully-functional accounting system for tracking and trading obligations denominated in any way users want, and an exchange built into the protocol.</p> -->
+              </div><!--/.card-body-->
+              <div class="card-footer"><h3>On-Ledger Decentralized Exchange</h3></div>
+            </a><!--/.card-->
+
+        </div><!--/.card-deck-->
+      </div><!--/.container-->
 
     </section>
 
-    <section class="container-fluid p-5 bg-light">
+    <section class="container-fluid py-3 p-sm-5 bg-light">
       <h2>Built on the XRP Ledger</h2>
       <div class="blurb">
           <p>Learn about just a few of the types of integrations developers have built on the XRP Ledger.</p>
@@ -211,7 +215,7 @@
       </div>
 
       <div class="container">
-        <div class="card-deck mb-4 p-xl-5">
+        <div class="row card-deck mb-4 p-xl-5">
 
           <div class="card">
             <div class="card-header">
@@ -263,40 +267,36 @@
 
     </section>
 
-    <section class="container-fluid related-projects p-5 bg-white">
+    <section class="container-fluid related-projects py-3 p-sm-5 bg-white">
       <h2>Related Projects</h2>
 
       <div class="row">
 
         <div class="col m-2">
-          <a class="client-portal-link" href="https://clients.ripple.com/" target="_blank">
-            <div class="card">
-              <div class="card-body">
-                <p>
-                  <img class="project-icon" src="assets/img/RippleNet-condensed.svg" />
-                  <span class="project-name">Ripple Client Portal</span>
-                  <span class="login-required">(login required)</span>
-                  <i class="fa fa-external-link" aria-hidden="true"></i>
-                </p>
-                <p class="project-summary">For financial institutions using Ripple's proprietary solutions to send money globally.</p>
-              </div><!--/.card-body-->
-            </div><!--/.card-->
-          </a>
+          <a class="client-portal-link card" href="https://clients.ripple.com/" target="_blank">
+            <div class="card-body">
+              <p>
+                <img class="project-icon" src="assets/img/RippleNet-condensed.svg" />
+                <span class="project-name">Ripple Client Portal</span>
+                <span class="login-required">(login required)</span>
+                <i class="fa fa-external-link" aria-hidden="true"></i>
+              </p>
+              <p class="project-summary">For financial institutions using Ripple's proprietary solutions to send money globally.</p>
+            </div><!--/.card-body-->
+          </a><!--/.card-->
         </div><!--/.col-->
 
         <div class="col m-2">
-          <a class="interledger-link" href="https://interledger.org/" target="_blank">
-            <div class="card">
-              <div class="card-body">
-                <p>
-                  <img class="project-icon" src="assets/img/ilp_logo.svg" />
-                  <span class="project-name">Interledger</span>
-                  <i class="fa fa-external-link" aria-hidden="true"></i>
-                </p>
-                <p class="project-summary">An open protocol suite for connecting all forms of digital money.</p>
-              </div><!--/.card-body-->
-            </div><!--/.card-->
-          </a>
+          <a class="interledger-link card" href="https://interledger.org/" target="_blank">
+            <div class="card-body">
+              <p>
+                <img class="project-icon" src="assets/img/ilp_logo.svg" />
+                <span class="project-name">Interledger</span>
+                <i class="fa fa-external-link" aria-hidden="true"></i>
+              </p>
+              <p class="project-summary">An open protocol suite for connecting all forms of digital money.</p>
+            </div><!--/.card-body-->
+          </a><!--/.card-->
         </div><!--/.col-->
 
       </div><!--/.row-->
diff --git a/tool/template-landing-docs.html b/tool/template-landing-docs.html
index 97ac1d59ca..10816a8de5 100644
--- a/tool/template-landing-docs.html
+++ b/tool/template-landing-docs.html
@@ -1,14 +1,12 @@
 {% extends "template-base.html" %}
 
-{% block bodyclasses %}landing{% endblock %}
+{% block mainclasses %}landing{% endblock %}
 
 {% block main %}
-    <section class="container-fluid px-5 pb-5 pt-0">
-      <div class="row">
-        <h1 class="main-page-header">XRP Ledger Documentation</h1>
-        <div class="blurb col-sm-12">
-          <p>Dive into our documentation and start integrating with the XRP Ledger.</p>
-        </div>
+    <section class="container-fluid px-3 px-sm-5 pb-5 pt-0">
+      <h1 class="main-page-header">XRP Ledger Documentation</h1>
+      <div class="blurb">
+        <p>Dive into our documentation and start integrating with the XRP Ledger.</p>
       </div>
 
       <div class="card-deck p-2">
diff --git a/tool/template-landing-references.html b/tool/template-landing-references.html
index 460c096e69..f14c9ef3e6 100644
--- a/tool/template-landing-references.html
+++ b/tool/template-landing-references.html
@@ -1,6 +1,6 @@
 {% extends "template-base.html" %}
 
-{% block bodyclasses %}landing{% endblock %}
+{% block mainclasses %}landing{% endblock %}
 
 {% block main %}
   <section class="container-fluid px-5 pb-3 pt-0">