diff --git a/_pages/evaluation-toolkit.md b/_pages/evaluation-toolkit.md
index 990bc075..d902651e 100644
--- a/_pages/evaluation-toolkit.md
+++ b/_pages/evaluation-toolkit.md
@@ -14,50 +14,72 @@ type : evaluation-toolkit
   </div>
 </section>
 
-<section class="usa-graphic-list">
-  <div class="grid-container margin-0 padding-0">
-    <div class="usa-graphic-list__row grid-row grid-gap display-flex">
-        <div class="usa-media-block">
-             <h2 class="margin-bottom-0 text-primary">GET STARTED WITH THE TOOLKIT</h2>
+<section class="usa-graphic-list margin-y-205">
+    <div class="grid-row grid-gap toolkit-hero shadow-5 margin-x-0">
+      <div class="tablet:grid-col-2">
+        <img class="circle-evaluation-card" alt="Evaluation 101 icon" src="{{site.baseurl}}/assets/images/evaluation/evaluation-101.png">
+      </div>
+      <div class="tablet:grid-col-10">
+        <h2 class="margin-0 text-white">Evaluation 101</h2>
+        <p class="margin-0 text-white">Learn the basics of evaluation – what it is, why it’s important, and different types</p>
+        <div class="mobile-lg:grid-col padding-top-1">
+          <a class="text-no-underline usa-button bg-white border-0 padding-x-4 text-primary toolkit-button"
+            href="{{site.baseurl}}/evaluation-toolkit/evaluation-101" aria-label="Get started with Evaluation 101">Get Started</a>
         </div>
+      </div>
     </div>
+</section>    
+
+<section class="usa-graphic-list">
+  <div class="grid-container margin-0 padding-0 toolkit-padding">
     <div class="usa-graphic-list__row grid-row grid-gap">
-        <div class="usa-media-block tablet:grid-col-4 text-center padding-bottom-205">
-            <a href="{{site.baseurl}}/evaluation-toolkit/evaluation-101" class="eoc-link text-no-underline display-inline-block">
-            <img class="circle-evaluation-card" alt="" src="{{site.baseurl}}/assets/images/evaluation/evaluation-101.png">
-              <p class="usa-media-block__body evaluation-width"><b>Evaluation 101</b></p>
-            </a>
+          <div class="usa-media-block tablet:grid-col-6 text-center padding-bottom-205">
+            <div class="grid-row grid-gap">
+              <div class="tablet:grid-col-4">
+                <img class="circle-evaluation-card" alt="Getting Started icon" src="{{site.baseurl}}/assets/images/evaluation/getting-started.png">
+              </div>
+              <div class="tablet:grid-col-8 text-primary toolkit-text">
+                 <h3 class="usa-media-block__body evaluation-width margin-0"><a href="{{site.baseurl}}/evaluation-toolkit/non-evaluator" class="text-no-underline display-inline-block text-primary"><b>Getting Started</b></a></h3>
+                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+              </div>
+            </div>
         </div>
-        <div class="usa-media-block tablet:grid-col-4 text-center padding-bottom-205">
-            <a href="{{site.baseurl}}/evaluation-toolkit/why-evaluate" class="eoc-link text-no-underline display-inline-block">
-            <img class="circle-evaluation-card" alt="" src="{{site.baseurl}}/assets/images/evaluation/why-evaluate.png">
-              <p class="usa-media-block__body evaluation-width"><b>Why Evaluate?</b></p>
-            </a> 
+          <div class="usa-media-block tablet:grid-col-6 text-center padding-bottom-205">
+            <div class="grid-row grid-gap">
+              <div class="tablet:grid-col-4">
+                <img class="circle-evaluation-card" alt="Using evaluation icon" src="{{site.baseurl}}/assets/images/evaluation/using-evaluation.png">
+              </div>
+              <div class="tablet:grid-col-8 text-primary toolkit-text">
+                 <h3 class="usa-media-block__body evaluation-width margin-0"><a href="{{site.baseurl}}/evaluation-toolkit/evaluation" class="text-no-underline display-inline-block text-primary"><b>Using Evaluation</b></a></h3>
+                <p>Tools to help you be a savvy user of evaluation findings</p>
+              </div>
+            </div>
         </div>
-        <div class="usa-media-block tablet:grid-col-4 text-center padding-bottom-205">
-            <a href="{{site.baseurl}}/evaluation-toolkit/non-evaluator" class="eoc-link text-no-underline display-inline-block">
-            <img class="circle-evaluation-card" alt="" src="{{site.baseurl}}/assets/images/evaluation/non-evaluator.png">
-              <p class="usa-media-block__body evaluation-width"><b>Getting Started as a Non-Evaluator</b></p>
-            </a>
+          <div class="usa-media-block tablet:grid-col-6 text-center padding-bottom-205">
+            <div class="grid-row grid-gap">
+              <div class="tablet:grid-col-4">
+                <img class="circle-evaluation-card" alt="Promoting evaluation use icon" src="{{site.baseurl}}/assets/images/evaluation/promoting-evaluation.png">
+              </div>
+              <div class="tablet:grid-col-8 text-primary toolkit-text">
+                 <h3 class="usa-media-block__body evaluation-width margin-0"><a href="{{site.baseurl}}/evaluation-toolkit/promoting-evaluation" class="text-no-underline display-inline-block text-primary"><b>Promoting Evaluation Use</b></a></h3>
+                <p>Learn ways to ensure that evaluation findings reach the right audience and are put into action</p>
+              </div>
+            </div>
         </div>
-        <div class="usa-media-block tablet:grid-col-4 text-center padding-bottom-205">
-            <a href="{{site.baseurl}}/evaluation-toolkit/evaluation" class="eoc-link text-no-underline display-inline-block">
-            <img class="circle-evaluation-card" alt="" src="{{site.baseurl}}/assets/images/evaluation/using-evaluation.png">
-              <p class="usa-media-block__body evaluation-width"><b>Using Evaluation</b></p>
-            </a>
-        </div>
-        <div class="usa-media-block tablet:grid-col-4 text-center padding-bottom-205">
-            <a href="{{site.baseurl}}/evaluation-toolkit/promoting-evaluation" class="eoc-link text-no-underline display-inline-block">
-            <img class="circle-evaluation-card" alt="" src="{{site.baseurl}}/assets/images/evaluation/promoting-evaluation.png">
-              <p class="usa-media-block__body evaluation-width"><b>Promoting Evaluation Use</b></p>
-            </a>
-        </div>
-        <div class="usa-media-block tablet:grid-col-4 text-center padding-bottom-205">
-            <a href="{{site.baseurl}}/evaluation-toolkit/about-toolkit" class="eoc-link text-no-underline display-inline-block">        
-            <img class="circle-evaluation-card" alt="" src="{{site.baseurl}}/assets/images/evaluation/about-toolkit.png">
-              <p class="usa-media-block__body evaluation-width"><b>About the Toolkit</b></p>
-            </a>
+          <div class="usa-media-block tablet:grid-col-6 text-center padding-bottom-205">
+            <div class="grid-row grid-gap">
+              <div class="tablet:grid-col-4">
+                <img class="circle-evaluation-card" alt="Why evaluate icon" src="{{site.baseurl}}/assets/images/evaluation/why-evaluate.png">
+              </div>
+              <div class="tablet:grid-col-8 text-primary toolkit-text">
+                 <h3 class="usa-media-block__body evaluation-width margin-0"><a href="{{site.baseurl}}/evaluation-toolkit/why-evaluate" class="text-no-underline display-inline-block text-primary"><b>Why Evaluate?</b></a></h3>
+                <p>Understand the value-add of evaluation and why it is so important</p>
+              </div>
+            </div>
         </div>
     </div>
   </div>
+  <div class="text-center"><a class="usa-button usa-button--outline border-0 padding-x-6"
+    href="{{site.baseurl}}/evaluation-toolkit/about-toolkit">About the Toolkit</a>
+  </div>
 </section>
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 755f04c0..91aa1db7 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -226,9 +226,6 @@ html {
   }
 }
 @media screen and (max-width: 768px) {
-  img {
-    max-width: 33%;
-  }
 
   img.adward-bio-img {
     max-width: 100%;
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 6accf834..7e4b411f 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -165,7 +165,12 @@ html {
 .circle-card {
   height: auto;
   border-radius: 50%;
+
+  @media only screen and (max-width: 768px) {
+    max-width: 33%;
+  }
 }
+
 .agency-border-top {
   border-top:0.5rem solid #0d7ea2;
 }
@@ -774,23 +779,52 @@ blockquote p {
   border-radius: 0.7rem;
 }
 .circle-evaluation-card {
-    width: 10rem;
-    border-radius: 50%;
-    background: linear-gradient(52deg, #162e51 25%, #28a0cb 100%);
-
-    @media only screen and (max-width: 640px) {
-        width: 40rem;
-    }
+  width: 10rem;
+  border-radius: 50%;
+  background: linear-gradient(52deg, #162e51 25%, #28a0cb 100%);
 }
 @media only screen and (max-width: 639px) {
-    .title {
-        margin-top: 1.1rem;
-    }
+  .title {
+      margin-top: 1.1rem;
+  }
+}
+
+@media only screen and (min-width: 640px) {
+  .toolkit-text {
+    text-align: left;
+  }
+
+  .toolkit-padding {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
 }
-.evaluation-width{
-    width:180px;
-    margin:auto;
+
+.toolkit-hero {
+  padding: 40px;
+  border-radius: 30px;
+  color: #fff;
+  padding-bottom: 20px;
+  background-color: #082643;
+
+  @media only screen and (max-width: 639px) {
+    text-align: center;
+  }
+
+  .circle-evaluation-card {
+    background: unset;
+  }
+}
+
+.toolkit-button:visited {
+  color:#005ea2;
 }
+
+.toolkit-button::after {
+  content: '>>';
+  margin-left: 0.5em;
+}
+
 .resource-category {
   color: #5b616b;
   border-top: 0.15rem solid #5b616b;
diff --git a/assets/images/evaluation/about-toolkit.png b/assets/images/evaluation/about-toolkit.png
deleted file mode 100644
index 469a34d8..00000000
Binary files a/assets/images/evaluation/about-toolkit.png and /dev/null differ
diff --git a/assets/images/evaluation/archive-evaluation-101.png b/assets/images/evaluation/archive-evaluation-101.png
new file mode 100644
index 00000000..9e148583
Binary files /dev/null and b/assets/images/evaluation/archive-evaluation-101.png differ
diff --git a/assets/images/evaluation/non-evaluator.png b/assets/images/evaluation/archive-non-evaluator.png
similarity index 100%
rename from assets/images/evaluation/non-evaluator.png
rename to assets/images/evaluation/archive-non-evaluator.png
diff --git a/assets/images/evaluation/evaluation-101.png b/assets/images/evaluation/evaluation-101.png
index 9e148583..469a34d8 100644
Binary files a/assets/images/evaluation/evaluation-101.png and b/assets/images/evaluation/evaluation-101.png differ
diff --git a/assets/images/evaluation/getting-started.png b/assets/images/evaluation/getting-started.png
new file mode 100644
index 00000000..6e68eaf6
Binary files /dev/null and b/assets/images/evaluation/getting-started.png differ
diff --git a/assets/images/evaluation/promoting-evaluation.png b/assets/images/evaluation/promoting-evaluation.png
index 6e68eaf6..8eb70b1e 100644
Binary files a/assets/images/evaluation/promoting-evaluation.png and b/assets/images/evaluation/promoting-evaluation.png differ