diff --git a/website/source/assets/images/consul-connect/distributed-locks-and-semaphores.png b/website/source/assets/images/consul-connect/distributed-locks-and-semaphores.png
new file mode 100644
index 0000000000..61ce749b0b
Binary files /dev/null and b/website/source/assets/images/consul-connect/distributed-locks-and-semaphores.png differ
diff --git a/website/source/assets/images/consul-connect/logos/spiffe.png b/website/source/assets/images/consul-connect/logos/spiffe.png
new file mode 100644
index 0000000000..68df72ac9c
Binary files /dev/null and b/website/source/assets/images/consul-connect/logos/spiffe.png differ
diff --git a/website/source/assets/images/consul-connect/logos/vault.png b/website/source/assets/images/consul-connect/logos/vault.png
new file mode 100644
index 0000000000..5e4f4e8c67
Binary files /dev/null and b/website/source/assets/images/consul-connect/logos/vault.png differ
diff --git a/website/source/assets/stylesheets/consul-connect/_index.scss b/website/source/assets/stylesheets/consul-connect/_index.scss
index 4d6b38e480..cf0e7f5970 100644
--- a/website/source/assets/stylesheets/consul-connect/_index.scss
+++ b/website/source/assets/stylesheets/consul-connect/_index.scss
@@ -7,7 +7,7 @@
 @import 'components/_hero';
 @import 'components/_logo-grid';
 @import 'components/_section';
-@import 'components/_text-image';
+@import 'components/_text-asset';
 @import 'components/_timeline';
 @import 'components/_use-cases';
 
diff --git a/website/source/assets/stylesheets/consul-connect/components/_section.scss b/website/source/assets/stylesheets/consul-connect/components/_section.scss
index c5154906b4..5696f762a5 100644
--- a/website/source/assets/stylesheets/consul-connect/components/_section.scss
+++ b/website/source/assets/stylesheets/consul-connect/components/_section.scss
@@ -17,6 +17,11 @@
     background: #f7f8fa !important; //TODO - !important is to override the `#page-home section` #fff background;
   }
 
+  &.bg-dark {
+    background: #252937 !important; //TODO - !important is to override the `#page-home section` #fff background;
+    color: #fff;
+  }
+
   &.border-top {
     border-top: 1px solid #e5e6eb;
   }
diff --git a/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss b/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss
new file mode 100644
index 0000000000..143c9e0bcd
--- /dev/null
+++ b/website/source/assets/stylesheets/consul-connect/components/_text-asset.scss
@@ -0,0 +1,103 @@
+.g-text-asset {
+  align-content: space-between;
+  display: flex;
+  justify-content: center;
+  margin: 0 (-$site-gutter-padding);
+
+  &.reverse {
+    flex-direction: row-reverse;
+
+    & > div:first-child > div {
+      margin-left: auto;
+      padding: 0 32px 0 0;
+    }
+  }
+
+  &.large {
+    margin-bottom: -96px;
+
+    img {
+      width: auto;
+    }
+  }
+
+  & > div {
+    align-items: center;
+    display: flex;
+    padding: 0 $site-gutter-padding;
+    width: 50%;
+
+    &:first-child > div {
+      margin-left: 0;
+      padding: 0 0 0 32px;
+      max-width: 454px;
+
+      & a {
+        color: #1563ff;
+      }
+
+      & svg {
+        margin-left: 10px;
+      }
+    }
+
+    &.code-sample > div {
+      box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
+      color: $white;
+      margin: 0;
+      width: 100%;
+
+      span {
+        background: #252937;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+        display: block;
+        font-size: 1.6rem;
+        padding: 13px 0 11px 24px;
+      }
+
+      .code {
+        background: #1e212a;
+        font-size: 1.4rem;
+        padding: 16px 24px 32px;
+        width: 100%;
+
+        code {
+          background: #1e212a;
+          border-radius: 0;
+          color: $white;
+          white-space: pre;
+
+          &.keyword {
+            color: #be5580;
+          }
+        }
+      }
+    }
+
+    &.logos {
+      justify-content: center;
+      
+      & > div {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+
+        & img {
+          margin: 29px 0;
+        }
+      }
+    }
+  }
+
+  h3 {
+    margin: 16px 0;
+  }
+
+  & > img {
+    width: 100%;
+
+    &.shadow {
+      box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
+    }
+  }
+}
diff --git a/website/source/assets/stylesheets/consul-connect/components/_text-image.scss b/website/source/assets/stylesheets/consul-connect/components/_text-image.scss
deleted file mode 100644
index f5292a4a13..0000000000
--- a/website/source/assets/stylesheets/consul-connect/components/_text-image.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.g-text-image {
-  align-content: space-between;
-  display: flex;
-  justify-content: center;
-  margin: 0 (-$site-gutter-padding);
-
-  &.reverse {
-    flex-direction: row-reverse;
-
-    & > div > div:last-child {
-      margin-left: 0;
-      padding: 0 0 0 32px;
-    }
-  }
-
-  &.large {
-    margin-bottom: -96px;
-
-    img {
-      width: auto;
-    }
-  }
-
-  img {
-    width: 100%;
-
-    &.shadow {
-      box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
-    }
-  }
-
-  h3 {
-    margin: 16px 0;
-  }
-
-  & > div {
-    align-items: center;
-    display: flex;
-    padding: 0 $site-gutter-padding;
-    width: 50%;
-
-    & > div:last-child {
-      margin-left: auto;
-      padding: 0 32px 0 0;
-      max-width: 454px;
-
-      & a {
-        color: #1563ff;
-      }
-
-      & svg {
-        margin-left: 10px;
-      }
-    }
-  }
-}
diff --git a/website/source/configuration.html.erb b/website/source/configuration.html.erb
index 7d0377eab0..6fd856c40d 100644
--- a/website/source/configuration.html.erb
+++ b/website/source/configuration.html.erb
@@ -46,10 +46,7 @@ description: |-
       <div class='intro'>
         <h2>Features</h2>
       </div>
-      <div class='g-text-image reverse'>
-        <div>
-          <img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='Automation through Codification'>
-        </div>
+      <div class='g-text-asset large'>
         <div>
           <div>
             <h3>Key/Value Store</h3>
@@ -59,16 +56,16 @@ description: |-
             </p>
           </div>
         </div>
+        <div>
+          <img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image'>
-        <div>
-          <img src='/assets/images/consul-connect/code-sample-2.png' alt='Workflows, not Technologies'>
-        </div>
+      <div class='g-text-asset reverse'>
         <div>
           <div>
             <h3>Transaction Support</h3>
@@ -78,16 +75,30 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='code-sample'>
+          <div>
+            <span>Code Sample</span>
+            <div class="code">
+              <code>$ curl \
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    </code><code class='keyword'>"Tags"</code><code>: ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image reverse'>
-        <div>
-          <img src='/assets/images/consul-connect/code-sample-2.png' alt='Open and Extensible'>
-        </div>
+      <div class='g-text-asset'>
         <div>
           <div>
             <h3>Blocking Queries / Edge-Triggered Requests</h3>
@@ -97,16 +108,30 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='code-sample'>
+          <div>
+            <span>Code Sample</span>
+            <div class='code'>
+              <code class='keyword'>$ curl \</code><code>
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    "Tags": ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image'>
-        <div>
-          <img src='/assets/images/consul-connect/code-sample-2.png' alt='Workflows, not Technologies'>
-        </div>
+      <div class='g-text-asset reverse'>
         <div>
           <div>
             <h3>Watches</h3>
@@ -116,16 +141,30 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='code-sample'>
+          <div>
+            <span>Code Sample</span>
+            <div class='code'>
+              <code class='keyword'>$ curl \</code><code>
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    "Tags": ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image large reverse'>
-        <div>
-          <img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
-        </div>
+      <div class='g-text-asset'>
         <div>
           <div>
             <h3>Distributed Locks and Semaphores</h3>
@@ -135,6 +174,9 @@ description: |-
             </p>
           </div>
         </div>
+        <div>
+          <img src='/assets/images/consul-connect/distributed-locks-and-semaphores.png' alt='Service Registry'>
+        </div>
       </div>
     </div>
   </section>
diff --git a/website/source/discovery.html.erb b/website/source/discovery.html.erb
index b781225bc7..7da3e28a0e 100644
--- a/website/source/discovery.html.erb
+++ b/website/source/discovery.html.erb
@@ -41,15 +41,18 @@ description: |-
     </div>
   </section>
 
+  <section class='g-section g-carousel-section bg-dark'>
+    <div class="intro">
+      <h3>Case Studies</h3>
+    </div>
+  </section>
+
   <section class='g-section border-top'>
     <div class='g-container'>
       <div class='intro'>
         <h2>Features</h2>
       </div>
-      <div class='g-text-image large reverse'>
-        <div>
-          <img src='/assets/images/consul-connect/service-registry.png' alt='Service Registry'>
-        </div>
+      <div class='g-text-asset large'>
         <div>
           <div>
             <h3>Service Registry</h3>
@@ -59,16 +62,16 @@ description: |-
             </p>
           </div>
         </div>
+        <div>
+          <img src='/assets/images/consul-connect/service-registry.png' alt='Service Registry'>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image'>
-        <div>
-          <img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='DNS Query Interface'>
-        </div>
+      <div class='g-text-asset reverse'>
         <div>
           <div>
             <h3>DNS Query Interface</h3>
@@ -78,16 +81,30 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='code-sample'>
+          <div>
+            <span>Code Sample</span>
+            <div class='code'>
+              <code class='keyword'>$ curl \</code><code>
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    "Tags": ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image reverse'>
-        <div>
-          <img class="shadow"  src='/assets/images/consul-connect/code-sample-2.png' alt='HTTP API with Edge Triggers'>
-        </div>
+      <div class='g-text-asset'>
         <div>
           <div>
             <h3>HTTP API with Edge Triggers</h3>
@@ -97,16 +114,30 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='code-sample'>
+          <div>
+            <span>Code Sample</span>
+            <div class='code'>
+              <code class='keyword'>$ curl \</code><code>
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    "Tags": ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image'>
-        <div>
-          <img class='shadow' src='/assets/images/consul-connect/code-sample-3.png' alt='Multi Datacenter'>
-        </div>
+      <div class='g-text-asset reverse'>
         <div>
           <div>
             <h3>Multi Datacenter</h3>
@@ -116,16 +147,30 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='code-sample'>
+          <div>
+            <span>Code Sample</span>
+            <div class='code'>
+              <code class='keyword'>$ curl \</code><code>
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    "Tags": ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image large reverse'>
-        <div>
-          <img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
-        </div>
+      <div class='g-text-asset large'>
         <div>
           <div>
             <h3>Health Checks</h3>
@@ -135,6 +180,9 @@ description: |-
             </p>
           </div>
         </div>
+        <div>
+          <img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
+        </div>
       </div>
     </div>
   </section>
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 141ee8f006..881952c092 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -74,30 +74,28 @@ description: |-
       <div class='intro'>
         <h2>Principles of Consul</h2>
       </div>
-      <div class='g-text-image reverse'>
-        <div>
-          <img class='shadow' src='/assets/images/consul-connect/code-sample-1.png' alt='Automation through Codification'>
-        </div>
+      <div class='g-text-asset'>
         <div>
           <div>
             <h3>Automation through Codification</h3>
             <p>Codify and automate service authorization policy.</p>
           </div>
         </div>
-      </div>
-    </div>
-  </section>
-
-  <section class='g-section bg-light border-top'>
-    <div class='g-container'>
-      <div class='g-text-image'>
-        <div>
-          <img src='/assets/images/consul-connect/workflows-not-technologies.png' alt='Workflows, not Technologies'>
-        </div>
-        <div>
+        <div class='code-sample'>
           <div>
-            <h3>Workflows, not Technologies</h3>
-            <p>Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.</p>
+            <span>Code Sample</span>
+            <div class="code">
+              <code>$ curl \
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    </code><code class='keyword'>"Tags"</code><code>: ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
           </div>
         </div>
       </div>
@@ -106,10 +104,23 @@ description: |-
 
   <section class='g-section bg-light border-top'>
     <div class='g-container'>
-      <div class='g-text-image reverse'>
+      <div class='g-text-asset reverse'>
         <div>
-          <img src='/assets/images/consul-connect/open-and-extensible.png' alt='Open and Extensible'>
+          <div>
+            <h3>Workflows, not Technologies</h3>
+            <p>Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.</p>
+          </div>
         </div>
+        <div>
+          <img src='/assets/images/consul-connect/workflows-not-technologies.png' alt='Workflows, not Technologies'>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class='g-section bg-light border-top'>
+    <div class='g-container'>
+      <div class='g-text-asset'>
         <div>
           <div>
             <h3>Open and Extensible</h3>
@@ -120,6 +131,9 @@ description: |-
             </ul>
           </div>
         </div>
+        <div>
+          <img src='/assets/images/consul-connect/open-and-extensible.png' alt='Open and Extensible'>
+        </div>
       </div>
     </div>
   </section>
diff --git a/website/source/segmentation.html.erb b/website/source/segmentation.html.erb
index 8ad888b685..6e11866070 100644
--- a/website/source/segmentation.html.erb
+++ b/website/source/segmentation.html.erb
@@ -47,10 +47,7 @@ description: |-
       <div class='intro'>
         <h2>Features</h2>
       </div>
-      <div class='g-text-image large reverse'>
-        <div>
-          <img src='/assets/images/consul-connect/service-access-graph.png' alt='Service Access Graph '>
-        </div>
+      <div class='g-text-asset large'>
         <div>
           <div>
             <h3>Service Access Graph </h3>
@@ -60,16 +57,16 @@ description: |-
             </p>
           </div>
         </div>
+        <div>
+          <img src='/assets/images/consul-connect/service-access-graph.png' alt='Service Access Graph '>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image'>
-        <div>
-          <img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='DNS Query Interface'>
-        </div>
+      <div class='g-text-asset reverse'>
         <div>
           <div>
             <h3>Secure services across any runtime platform</h3>
@@ -79,16 +76,30 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='code-sample'>
+          <div>
+            <span>Code Sample</span>
+            <div class='code'>
+              <code class='keyword'>$ curl \</code><code>
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    "Tags": ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image reverse'>
-        <div>
-          <img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='DNS Query Interface'>
-        </div>
+      <div class='g-text-asset'>
         <div>
           <div>
             <h3>Certificate-Based Service Identity</h3>
@@ -98,16 +109,19 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='logos'>
+          <div>
+            <img src='/assets/images/consul-connect/logos/vault.png' alt='Vault'>
+            <img src='/assets/images/consul-connect/logos/spiffe.png' alt='Spiffe'>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
   <section class='g-section border-top'>
     <div class='g-container'>
-      <div class='g-text-image'>
-        <div>
-          <img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='DNS Query Interface'>
-        </div>
+      <div class='g-text-asset reverse'>
         <div>
           <div>
             <h3>Encrypted communication</h3>
@@ -117,6 +131,23 @@ description: |-
             </p>
           </div>
         </div>
+        <div class='code-sample'>
+          <div>
+            <span>Code Sample</span>
+            <div class='code'>
+              <code class='keyword'>$ curl \</code><code>
+  --request POST \
+  --data \
+'{
+  "Name": "api",
+  "Service": {
+    "Service": "api",
+    "Tags": ["v1.2.3"],
+    "Failover": {
+      "Datacenters": ["dc1", "dc2"]</code>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>