diff --git a/site/_includes/icons/circle-square.svg b/site/_includes/icons/circle-square.svg
new file mode 100644
index 0000000000..432a5ab98b
--- /dev/null
+++ b/site/_includes/icons/circle-square.svg
@@ -0,0 +1,4 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 6a6 6 0 1112 0A6 6 0 010 6z"/>
+  <path d="M12.93 5h1.57a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1.57a6.953 6.953 0 01-1-.22v1.79A1.5 1.5 0 005.5 16h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 4h-1.79c.097.324.17.658.22 1z"/>
+</svg>
diff --git a/site/_includes/icons/cloud-fill.svg b/site/_includes/icons/cloud-fill.svg
new file mode 100644
index 0000000000..0116a0dcc8
--- /dev/null
+++ b/site/_includes/icons/cloud-fill.svg
@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M3.5 13a3.5 3.5 0 11.59-6.95 5.002 5.002 0 119.804 1.98A2.5 2.5 0 0113.5 13h-10z" clip-rule="evenodd"/>
+</svg>
diff --git a/site/_includes/icons/code.svg b/site/_includes/icons/code.svg
new file mode 100644
index 0000000000..29756662a0
--- /dev/null
+++ b/site/_includes/icons/code.svg
@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
+</svg>
diff --git a/site/_includes/icons/download.svg b/site/_includes/icons/download.svg
deleted file mode 100644
index ef8af76627..0000000000
--- a/site/_includes/icons/download.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Download</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>
\ No newline at end of file
diff --git a/site/_includes/icons/droplet-fill.svg b/site/_includes/icons/droplet-fill.svg
new file mode 100644
index 0000000000..41b7b58f2a
--- /dev/null
+++ b/site/_includes/icons/droplet-fill.svg
@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z" clip-rule="evenodd"/>
+</svg>
diff --git a/site/_includes/icons/import.svg b/site/_includes/icons/import.svg
deleted file mode 100644
index 28563c2be1..0000000000
--- a/site/_includes/icons/import.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Import</title><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>
\ No newline at end of file
diff --git a/site/_includes/icons/lightning.svg b/site/_includes/icons/lightning.svg
deleted file mode 100644
index bbcf24a76d..0000000000
--- a/site/_includes/icons/lightning.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Lightning</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
\ No newline at end of file
diff --git a/site/_layouts/simple.html b/site/_layouts/simple.html
index 9d869be514..833061b700 100644
--- a/site/_layouts/simple.html
+++ b/site/_layouts/simple.html
@@ -7,8 +7,10 @@ layout: default
     <h1 class="bd-title mt-0">{{ page.title | smartify }}</h1>
     <p class="bd-lead">{{ page.description | smartify }}</p>
     {%- if page.title == "Examples" -%}
-    <a href="{{ site.download.source }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
-    <a href="{{ site.download.dist_examples }}" class="btn btn-lg btn-bd-primary mt-3 mt-sm-0 ml-sm-3 ml-md-5" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download Examples</a>
+    <div class="d-flex flex-column flex-sm-row">
+      <a href="{{ site.download.dist_examples }}" class="btn btn-bd-primary py-2 px-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
+      <a href="{{ site.download.source }}" class="btn btn-outline-secondary py-2 px-3 mt-3 mt-sm-0 ml-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
+    </div>
     {%- endif -%}
   </div>
   {% include ads.html %}
diff --git a/site/docs/4.4/assets/img/bootstrap-icons.png b/site/docs/4.4/assets/img/bootstrap-icons.png
new file mode 100644
index 0000000000..73f45ee2d8
Binary files /dev/null and b/site/docs/4.4/assets/img/bootstrap-icons.png differ
diff --git a/site/docs/4.4/assets/img/bootstrap-icons@2x.png b/site/docs/4.4/assets/img/bootstrap-icons@2x.png
new file mode 100644
index 0000000000..48f0472056
Binary files /dev/null and b/site/docs/4.4/assets/img/bootstrap-icons@2x.png differ
diff --git a/site/docs/4.4/assets/img/bootstrap-themes-collage.png b/site/docs/4.4/assets/img/bootstrap-themes-collage.png
new file mode 100644
index 0000000000..54eba99938
Binary files /dev/null and b/site/docs/4.4/assets/img/bootstrap-themes-collage.png differ
diff --git a/site/docs/4.4/assets/img/bootstrap-themes-collage@2x.png b/site/docs/4.4/assets/img/bootstrap-themes-collage@2x.png
new file mode 100644
index 0000000000..ad165eb19a
Binary files /dev/null and b/site/docs/4.4/assets/img/bootstrap-themes-collage@2x.png differ
diff --git a/site/docs/4.4/assets/img/bootstrap-themes.png b/site/docs/4.4/assets/img/bootstrap-themes.png
index d1e1fc2678..d43dba2a7d 100644
Binary files a/site/docs/4.4/assets/img/bootstrap-themes.png and b/site/docs/4.4/assets/img/bootstrap-themes.png differ
diff --git a/site/docs/4.4/assets/img/bootstrap-themes@2x.png b/site/docs/4.4/assets/img/bootstrap-themes@2x.png
index 3876a18ee3..13c32337d6 100644
Binary files a/site/docs/4.4/assets/img/bootstrap-themes@2x.png and b/site/docs/4.4/assets/img/bootstrap-themes@2x.png differ
diff --git a/site/docs/4.4/assets/scss/_buttons.scss b/site/docs/4.4/assets/scss/_buttons.scss
index 25bcbbd4b0..8d35fef460 100644
--- a/site/docs/4.4/assets/scss/_buttons.scss
+++ b/site/docs/4.4/assets/scss/_buttons.scss
@@ -4,14 +4,15 @@
 
 .btn-bd-primary {
   font-weight: 600;
-  color: $bd-purple-bright;
+  color: $white;
+  background-color: $bd-purple-bright;
   border-color: $bd-purple-bright;
 
   &:hover,
   &:active {
     color: $white;
-    background-color: $bd-purple-bright;
-    border-color: $bd-purple-bright;
+    background-color: darken($bd-purple-bright, 10%);
+    border-color: darken($bd-purple-bright, 10%);
   }
 
   &:focus {
diff --git a/site/docs/4.4/assets/scss/_content.scss b/site/docs/4.4/assets/scss/_content.scss
index 439601d1ec..030a1a2564 100644
--- a/site/docs/4.4/assets/scss/_content.scss
+++ b/site/docs/4.4/assets/scss/_content.scss
@@ -107,7 +107,6 @@
 .bd-title {
   margin-top: 1rem;
   margin-bottom: .5rem;
-  font-weight: 300;
   @include font-size(3rem);
 }
 
@@ -122,3 +121,7 @@
 
 .bd-text-purple { color: $bd-purple; }
 .bd-text-purple-bright { color: $bd-purple-bright; }
+
+.bd-bg-purple-bright {
+  background-color: $bd-purple-bright;
+}
diff --git a/site/docs/4.4/assets/scss/_masthead.scss b/site/docs/4.4/assets/scss/_masthead.scss
index f4e70a2cfb..62047fbbb3 100644
--- a/site/docs/4.4/assets/scss/_masthead.scss
+++ b/site/docs/4.4/assets/scss/_masthead.scss
@@ -3,13 +3,19 @@
 .bd-masthead {
   position: relative;
   padding: 3rem ($grid-gutter-width / 2);
-  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
+  background: linear-gradient(to right bottom, lighten($bd-purple-light, 16%) 50%, #fff 50%);
 
   h1 {
     @include font-size(4rem);
     line-height: 1;
   }
 
+  .lead {
+    @include font-size(1.5rem);
+    font-weight: 400;
+    color: $gray-700;
+  }
+
   .btn {
     padding: .8rem 2rem;
     font-weight: 600;
@@ -37,16 +43,38 @@
   }
 }
 
-.half-rule {
-  width: 6rem;
-  margin: 2.5rem 0;
-}
-
 .masthead-followup {
   .bd-clipboard { display: none; }
 
+  h2 {
+    @include font-size(2.5rem);
+  }
+
   .highlight {
-    padding: .5rem 0;
-    background-color: transparent;
+    @include border-radius(.5rem);
+
+    pre::-webkit-scrollbar {
+      display: none;
+    }
+
+    pre code {
+      display: inline-block;
+      white-space: pre;
+
+      &::before {
+        display: none;
+      }
+    }
   }
 }
+
+.masthead-followup-icon {
+  padding: .75rem;
+  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01));
+  @include border-radius(.75rem);
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
+}
+
+.masthead-followup-svg {
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
+}
diff --git a/site/docs/4.4/assets/scss/_nav.scss b/site/docs/4.4/assets/scss/_nav.scss
index 8958ccde1d..d8d24b7230 100644
--- a/site/docs/4.4/assets/scss/_nav.scss
+++ b/site/docs/4.4/assets/scss/_nav.scss
@@ -4,7 +4,7 @@
 
 .bd-navbar {
   min-height: 4rem;
-  background-color: $bd-purple;
+  background-color: $bd-purple-bright;
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
 
   @include media-breakpoint-down(md) {
@@ -38,7 +38,7 @@
     .nav-link {
       padding-right: .5rem;
       padding-left: .5rem;
-      color: $bd-purple-light;
+      color: rgba($white, .85);
 
       &.active,
       &:hover {
diff --git a/site/docs/4.4/examples/index.html b/site/docs/4.4/examples/index.html
index 965c275646..ced9cc814a 100644
--- a/site/docs/4.4/examples/index.html
+++ b/site/docs/4.4/examples/index.html
@@ -14,7 +14,8 @@ redirect_from: "/examples/"
         <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/{{ example.name | slugify }}/">
           <img class="img-thumbnail mb-3" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png,
                                                   {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}@2x.png 2x"
-                                          src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png" alt="{{ example.name }} screenshot" width="480" height="300">
+                                          src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png"
+                                          alt="{{ example.name }} screenshot" width="480" height="300">
           <h5 class="mb-1">{{ example.name }}</h5>
         </a>
         <p class="text-muted">{{ example.description }}</p>
@@ -22,3 +23,22 @@ redirect_from: "/examples/"
     {% if forloop.last %}</div>{% endif %}
   {% endfor %}
 {% endfor %}
+
+<hr class="my-5">
+
+<div class="container">
+  <div class="text-center">
+    <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
+      {% include icons/droplet-fill.svg width="32" height="32" %}
+    </div>
+    <h2>Go further with Bootstrap Themes</h2>
+    <p class="col-md-10 mx-auto lead font-weight-normal">
+      Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+    </p>
+    <a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+  </div>
+  <img class="d-block img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png,
+                                              {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
+                                              src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png"
+                                              alt="Bootstrap Themes" width="1151" height="320">
+</div>
diff --git a/site/index.html b/site/index.html
index f16ea4878a..adae306b5e 100644
--- a/site/index.html
+++ b/site/index.html
@@ -5,24 +5,17 @@ layout: home
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
     <div class="row">
-      <div class="col-6 mx-auto col-md-6 order-md-2">
+      <div class="col-6 mx-auto col-md-4 order-md-2">
         {% include icons/bootstrap-stack.svg width="512" height="430" class="img-fluid mb-3 mb-md-0" %}
       </div>
-      <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
-        <h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
-        <p class="lead">
-          Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
-        </p>
+      <div class="col-md-8 order-md-1 text-center text-md-left pr-md-5">
+        <h1 class="mb-3">Build fast, responsive sites with Bootstrap</h1>
         <p class="lead mb-4">
-          Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
+          Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
         </p>
-        <div class="row mx-n2">
-          <div class="col-md px-2">
-            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
-          </div>
-          <div class="col-md px-2">
-            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
-          </div>
+        <div class="d-flex flex-column flex-md-row">
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
         </div>
         <p class="text-muted mb-0">
           Currently v{{ site.current_version }}
@@ -33,57 +26,100 @@ layout: home
   </div>
 </main>
 
-<div class="masthead-followup row m-0 border border-white">
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
-    {% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
-    <h3>Installation</h3>
-    <p>Include Bootstrap’s source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don’t include documentation, but do include our build system and readme.</p>
-
+<div class="masthead-followup">
+  <div class="container">
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
+          {% include icons/code.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>Installation</h2>
+        <p class="lead font-weight-normal">
+          Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor.
+        </p>
+        <p>Package managed installs don’t include documentation, but do include our build system and readme. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
+        <a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation docs</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
 {% highlight sh %}
+# Via npm
 npm install bootstrap
-{% endhighlight %}
 
-{% highlight sh %}
+# Via gem
 gem install bootstrap -v {{ site.current_ruby_version }}
 {% endhighlight %}
+      </div>
+    </div>
 
-    <hr class="half-rule">
-    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation docs</a>
-  </div>
-
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
-    {% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
-    <h3>BootstrapCDN</h3>
-    <p>When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.</p>
-
-<h5>CSS only</h5>
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
+          {% include icons/cloud-fill.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>BootstrapCDN</h2>
+        <p class="lead font-weight-normal">
+          When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.
+        </p>
+        <p>
+          See it in action with our simple <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/">browse the examples</a> to jumpstart your next project.
+        </p>
+        <a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
 {% highlight html %}
+<!-- CSS only -->
 <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
-{% endhighlight %}
 
-<h5>JS, Popper.js, and jQuery</h5>
-{% highlight html %}
+<!-- JS, Popper.js, and jQuery -->
 <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
 <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
 <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
 {% endhighlight %}
-    <hr class="half-rule">
-    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
-  </div>
+      </div>
+    </div>
 
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
-    {% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
-    <h3>Official Themes</h3>
-    <p>
-      Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
-    </p>
-    <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
-                                                {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
-                                        src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="500" height="200">
-    <hr class="half-rule">
-    <a href="{{ site.themes }}/" class="btn btn-outline-primary">Browse themes</a>
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
+          {% include icons/circle-square.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>Bootstrap Icons</h2>
+        <p class="lead font-weight-normal">
+          For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
+        </p>
+        <p>
+          Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project. They’re SVGs, so they scale quickly and easily, can be implmented in several ways, and can be styled with CSS.
+        </p>
+        <a href="{{ site.icons }}" class="btn btn-lg btn-outline-primary mb-3">Get Bootstrap Icons</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
+        <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png,
+                                                    {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
+                                                    src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png"
+                                                    alt="Bootstrap Icons" width="966" height="600">
+      </div>
+    </div>
+
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
+          {% include icons/droplet-fill.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>Official Themes</h2>
+        <p class="lead font-weight-normal">
+          Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>.
+        </p>
+        <p>
+          Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+        </p>
+        <a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
+        <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
+                                                    {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
+                                                    src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png"
+                                                    alt="Bootstrap Themes" width="700" height="500">
+      </div>
+    </div>
   </div>
 </div>