diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index 36203447a1..f32a99452d 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -309,7 +309,8 @@ th {
   transition: 0.5s;
 }
 
-.readmore .btn i {
+.readmore .btn i,
+.card-header a i {
   margin: 0 0.2em 0 0.8em;
 }
 
@@ -364,7 +365,7 @@ pre code {
 .code_sample pre code {
   overflow: auto;
   max-height: 14em;
-  background-color: #f5f5f5;
+  background-color: #E1E4E8;
   border: 1px solid #cccccc;
   border-radius: 4px;
 }
@@ -461,10 +462,11 @@ a.current {
   padding: 16px 32px 16px 24px;
   display: block;
   margin: 0 -24px 0 -24px;
+  font-weight: 400;
 }
 .landing .card .level-1 a:hover,
 .landing .card .curated-links li a:hover {
-  background-color: #F5F7F9;
+  background-color: #D8EEFC;
   text-decoration: none;
 }
 .landing .card .level-1 a:hover:after,
@@ -474,7 +476,7 @@ a.current {
   position: absolute;
   right: -8px;
   top: 16px;
-  color: #C9CDD1;
+  color: #0D294E;
 }
 
 .level-1:first-child {
@@ -779,7 +781,8 @@ a.current {
   margin-bottom: 0;
 }
 
-.landing a.card {
+.landing a.card,
+.landing .card {
   color: #212529;
   box-shadow: 0px 1px 3px rgba(35, 41, 47, 0.24);
   border-radius: 8px;
@@ -818,13 +821,29 @@ a.current {
   padding: 0 24px 24px 24px;
 }
 
-.landing .card > .card-img-top {
-  padding: 0 24px;
+.landing .card-header a {
+  display: block;
+  margin: -24px;
+  padding: 24px;
+  border-radius: inherit;
+  transition: 0.5s;
 }
 
-#home_first_shortcuts .card {
-  border-width: 0;
-  background: none;
+.landing .card-header.bg-dark {
+  color: white;
+}
+
+.landing .card-header.bg-dark a:hover {
+  text-decoration: none;
+  color: #FF9900;
+}
+
+.landing .ref-blurb {
+  margin-top: 1rem;
+}
+
+.landing .card > .card-img-top {
+  padding: 0 24px;
 }
 
 #home_first_shortcuts .card-img-top {
@@ -832,10 +851,6 @@ a.current {
   width: 130px;
 }
 
-#home_first_shortcuts .card-header {
-  padding-bottom: 0;
-}
-
 #xrp_ledger_intro a:hover {
   text-decoration: none;
 }
diff --git a/tool/template-home.html b/tool/template-home.html
index 49c69f3bf6..45442b4a8b 100644
--- a/tool/template-home.html
+++ b/tool/template-home.html
@@ -30,8 +30,8 @@
       <div class="card-deck mb-4">
 
           <div class="card">
-            <div class="card-header">
-              <h3 class="card-title"><a href="references.html">Take Me to the References</a></h3>
+            <div class="card-header bg-dark">
+              <h3 class="card-title"><a href="references.html">Go to the References <i class="fa fa-arrow-right" aria-hidden="true"></i></a></h3>
             </div><!--/.card-header-->
             <img class="card-img-top" src="assets/img/reference-book.svg" alt="(reference book icon)" />
             <div class="card-body">
@@ -46,7 +46,7 @@
           </div><!--/.card-->
 
           <div class="card">
-            <div class="card-header">
+            <div class="card-header bg-dark">
               <h3 class="card-title">Get Started</h3>
             </div><!--/.card-header-->
             <img class="card-img-top" src="assets/img/airplane.svg" alt="(airplane icon)" />
@@ -62,8 +62,8 @@
           </div><!--/.card-->
 
           <div class="card">
-            <div class="card-header">
-              <h3 class="card-title"><a href="use-cases.html">View Use Cases</a></h3>
+            <div class="card-header bg-dark">
+              <h3 class="card-title"><a href="use-cases.html">View Use Cases <i class="fa fa-arrow-right" aria-hidden="true"></i></a></h3>
             </div><!--/.card-header-->
             <img class="card-img-top" src="assets/img/map.svg" alt="(map icon)" />
             <div class="card-body">
diff --git a/tool/template-landing-references.html b/tool/template-landing-references.html
index f14c9ef3e6..3983a71136 100644
--- a/tool/template-landing-references.html
+++ b/tool/template-landing-references.html
@@ -4,15 +4,13 @@
 
 {% block main %}
   <section class="container-fluid px-5 pb-3 pt-0">
-    <div class="row">
       <h1 class="main-page-header">References</h1>
-    </div>
   </section>
 
   <section class="container-fluid bg-light p-5">
 
     <h2><a href="reference-rippled-api.html">rippled API Reference</a></h2>
-    <div class="blurb col-sm-12">
+    <div class="blurb">
       <p>Use the <code>rippled</code> API to communicate with a <code>rippled</code> server, the core peer-to-peer server that manages the XRP Ledger.</p>
     </div>
 
@@ -21,9 +19,8 @@
         {% for page in pages|selectattr("supercategory", "equalto", "rippled API")|list %}
         {% if loop.index != 1 and page == pages|selectattr("category", "equalto", page.category)|first %}
           <div class="card">
-            {#{% set parent_page = pages|selectattr("html", "equalto", "reference-rippled-public.html")|first %}#}
-            <div class="card-header">
-              <h3 class="card-title"><a href="{{page.html}}">{{page.name}}</a></h3>
+            <div class="card-header bg-dark">
+              <h3 class="card-title"><a href="{{page.html}}">{{page.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a></h3>
             </div><!--/.card-header-->
             <div class="card-body">
               <p class="ref-blurb">{{page.blurb}}</p>
@@ -34,7 +31,7 @@
           </div><!--/.card-->
 
           {# go to new row after admin methods #}
-          {% if page.html == "reference-rippled-admin.html" %}
+          {% if page.html == "admin-rippled-methods.html" %}
       </div><!--/.card-deck-->
       <div class="card-deck p-2">
           {% endif %}