diff --git a/static/css/styles.css b/static/css/styles.css
index 458298bb..2b2bf003 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1097,14 +1097,14 @@ select.dropdown {
   right: 0.75rem;
 }
 
-.top-1 {
-  top: 0.25rem;
-}
-
 .right-1 {
   right: 0.25rem;
 }
 
+.top-1 {
+  top: 0.25rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -1129,6 +1129,22 @@ select.dropdown {
   order: 1;
 }
 
+.order-4 {
+  order: 4;
+}
+
+.order-6 {
+  order: 6;
+}
+
+.order-5 {
+  order: 5;
+}
+
+.order-7 {
+  order: 7;
+}
+
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -1163,16 +1179,16 @@ select.dropdown {
   margin-right: auto;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .my-16 {
   margin-top: 4rem;
   margin-bottom: 4rem;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -1225,14 +1241,34 @@ select.dropdown {
   margin-top: 0.5rem;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
 }
 
 .mt-6 {
   margin-top: 1.5rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1245,14 +1281,6 @@ select.dropdown {
   margin-bottom: 2.75rem;
 }
 
-.ml-6 {
-  margin-left: 1.5rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1261,10 +1289,6 @@ select.dropdown {
   margin-right: 1.25rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -1281,6 +1305,10 @@ select.dropdown {
   margin-top: 0px;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .mt-16 {
   margin-top: 4rem;
 }
@@ -1297,10 +1325,6 @@ select.dropdown {
   margin-right: 0.25rem;
 }
 
-.mb-0 {
-  margin-bottom: 0px;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1309,10 +1333,6 @@ select.dropdown {
   margin-left: -0.5rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .ml-0 {
   margin-left: 0px;
 }
@@ -1345,26 +1365,6 @@ select.dropdown {
   margin-left: 1rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
-.-mt-2 {
-  margin-top: -0.5rem;
-}
-
-.-mt-3 {
-  margin-top: -0.75rem;
-}
-
-.-mt-6 {
-  margin-top: -1.5rem;
-}
-
-.-mb-6 {
-  margin-bottom: -1.5rem;
-}
-
 .block {
   display: block;
 }
@@ -1397,14 +1397,26 @@ select.dropdown {
   display: contents;
 }
 
+.list-item {
+  display: list-item;
+}
+
 .hidden {
   display: none;
 }
 
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
 .h-screen {
   height: 100vh;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1449,6 +1461,15 @@ select.dropdown {
   height: 1rem;
 }
 
+.h-\[470px\] {
+  height: 470px;
+}
+
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .max-h-\[470px\] {
   max-height: 470px;
 }
@@ -1457,6 +1478,16 @@ select.dropdown {
   max-height: 24rem;
 }
 
+.max-h-min {
+  max-height: -moz-min-content;
+  max-height: min-content;
+}
+
+.max-h-max {
+  max-height: -moz-max-content;
+  max-height: max-content;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1465,6 +1496,10 @@ select.dropdown {
   width: 50%;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-auto {
   width: auto;
 }
@@ -1514,10 +1549,6 @@ select.dropdown {
   width: 30px;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-\[90\%\] {
   width: 90%;
 }
@@ -1578,6 +1609,16 @@ select.dropdown {
   width: 300px;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .min-w-\[100px\] {
   min-width: 100px;
 }
@@ -1594,6 +1635,19 @@ select.dropdown {
   max-width: 100%;
 }
 
+.max-w-none {
+  max-width: none;
+}
+
+.max-w-min {
+  max-width: -moz-min-content;
+  max-width: min-content;
+}
+
+.max-w-\[572px\] {
+  max-width: 572px;
+}
+
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -1658,6 +1712,10 @@ select.dropdown {
   list-style-type: disc;
 }
 
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
 .grid-flow-col {
   grid-auto-flow: column;
 }
@@ -1666,6 +1724,10 @@ select.dropdown {
   grid-auto-rows: minmax(0, 1fr);
 }
 
+.auto-rows-min {
+  grid-auto-rows: min-content;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1750,10 +1812,18 @@ select.dropdown {
   gap: 1.5rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
 
+.gap-y-5 {
+  row-gap: 1.25rem;
+}
+
 .gap-y-10 {
   row-gap: 2.5rem;
 }
@@ -1763,6 +1833,10 @@ select.dropdown {
        column-gap: 0.75rem;
 }
 
+.gap-y-0 {
+  row-gap: 0px;
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1882,6 +1956,10 @@ select.dropdown {
   justify-self: center;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -1898,6 +1976,10 @@ select.dropdown {
   overflow-y: hidden;
 }
 
+.overflow-x-clip {
+  overflow-x: clip;
+}
+
 .whitespace-normal {
   white-space: normal;
 }
@@ -1939,6 +2021,14 @@ select.dropdown {
   border-top-right-radius: 0.5rem;
 }
 
+.rounded-bl-lg {
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-br-lg {
+  border-bottom-right-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -2081,6 +2171,11 @@ select.dropdown {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
+.bg-emerald-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 211 153 / var(--tw-bg-opacity));
+}
+
 .bg-charcoal {
   --tw-bg-opacity: 1;
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
@@ -2103,60 +2198,44 @@ select.dropdown {
   background-color: rgb(254 240 138 / 0.7);
 }
 
-.bg-green {
-  --tw-bg-opacity: 1;
-  background-color: rgb(90 213 153 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 95 70 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(52 211 153 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
-}
-
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
-.bg-blue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
-
-.bg-blue-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+.bg-transparent {
+  background-color: transparent;
 }
 
 .bg-opacity-10 {
   --tw-bg-opacity: 0.1;
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+.object-fill {
+  -o-object-fit: fill;
+     object-fit: fill;
+}
+
+.object-none {
+  -o-object-fit: none;
+     object-fit: none;
+}
+
+.object-scale-down {
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
+}
+
+.object-center {
+  -o-object-position: center;
+     object-position: center;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -2218,6 +2297,11 @@ select.dropdown {
   padding-bottom: 0.25rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -2258,6 +2342,11 @@ select.dropdown {
   padding-bottom: 1.5rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -2278,21 +2367,11 @@ select.dropdown {
   padding-right: 1.25rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-\[40px\] {
   padding-left: 40px;
   padding-right: 40px;
 }
 
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
 .py-\[1px\] {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -2311,6 +2390,14 @@ select.dropdown {
   padding-top: 0.5rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2435,6 +2522,11 @@ select.dropdown {
   line-height: 1.75rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2514,6 +2606,11 @@ select.dropdown {
   color: rgb(255 159 0 / var(--tw-text-opacity));
 }
 
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
 .text-green {
   --tw-text-opacity: 1;
   color: rgb(90 213 153 / var(--tw-text-opacity));
@@ -2534,11 +2631,6 @@ select.dropdown {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.text-sky-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity));
-}
-
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2875,6 +2967,11 @@ select.dropdown {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-sky-300 {
+  --tw-text-opacity: 1;
+  color: rgb(125 211 252 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-orange {
   --tw-text-opacity: 1;
   color: rgb(255 159 0 / var(--tw-text-opacity));
@@ -3019,6 +3116,26 @@ select.dropdown {
     order: 9999;
   }
 
+  .md\:order-1 {
+    order: 1;
+  }
+
+  .md\:order-5 {
+    order: 5;
+  }
+
+  .md\:order-6 {
+    order: 6;
+  }
+
+  .md\:order-7 {
+    order: 7;
+  }
+
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   .md\:float-right {
     float: right;
   }
@@ -3056,6 +3173,10 @@ select.dropdown {
     margin-top: 3.5rem;
   }
 
+  .md\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
   .md\:mt-3 {
     margin-top: 0.75rem;
   }
@@ -3088,10 +3209,6 @@ select.dropdown {
     margin-top: 1.5rem;
   }
 
-  .md\:mb-2 {
-    margin-bottom: 0.5rem;
-  }
-
   .md\:mb-6 {
     margin-bottom: 1.5rem;
   }
@@ -3176,10 +3293,6 @@ select.dropdown {
     min-width: 150px;
   }
 
-  .md\:max-w-7xl {
-    max-width: 80rem;
-  }
-
   .md\:max-w-3xl {
     max-width: 48rem;
   }
@@ -3196,6 +3309,10 @@ select.dropdown {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:grid-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
@@ -3217,6 +3334,10 @@ select.dropdown {
          column-gap: 2.5rem;
   }
 
+  .md\:gap-y-5 {
+    row-gap: 1.25rem;
+  }
+
   .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -3274,6 +3395,10 @@ select.dropdown {
     border-radius: 0px;
   }
 
+  .md\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
   .md\:rounded-l-lg {
     border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
@@ -3283,6 +3408,22 @@ select.dropdown {
     border-top-left-radius: 0px;
   }
 
+  .md\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem;
+  }
+
+  .md\:rounded-tr-lg {
+    border-top-right-radius: 0.5rem;
+  }
+
+  .md\:rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .md\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem;
+  }
+
   .md\:border {
     border-width: 1px;
   }
@@ -3404,6 +3545,11 @@ select.dropdown {
     padding-bottom: 0px;
   }
 
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
   .md\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;
@@ -3428,11 +3574,6 @@ select.dropdown {
     font-size: 1.5rem;
     line-height: 2rem;
   }
-
-  .md\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
 }
 
 @media (min-width: 1024px) {
@@ -3501,6 +3642,11 @@ select.dropdown {
     margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .lg\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
@@ -3511,11 +3657,6 @@ select.dropdown {
     line-height: 1.5rem;
   }
 
-  .lg\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
-
   .lg\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
diff --git a/static/img/fpo/learn_beaverdam.png b/static/img/fpo/learn_beaverdam.png
new file mode 100644
index 00000000..dfb1170b
Binary files /dev/null and b/static/img/fpo/learn_beaverdam.png differ
diff --git a/static/img/fpo/learn_courtroom.png b/static/img/fpo/learn_courtroom.png
new file mode 100644
index 00000000..83a75c59
Binary files /dev/null and b/static/img/fpo/learn_courtroom.png differ
diff --git a/static/img/fpo/learn_userguide.png b/static/img/fpo/learn_userguide.png
new file mode 100644
index 00000000..53ab5abe
Binary files /dev/null and b/static/img/fpo/learn_userguide.png differ
diff --git a/templates/docs_temp.html b/templates/docs_temp.html
index 2b28ae1c..ac586a61 100644
--- a/templates/docs_temp.html
+++ b/templates/docs_temp.html
@@ -9,96 +9,118 @@ This is a temporary landing page for docs
 {% endcomment %}
 
 {% block content %}
-  <!-- Homepage Hero Section -->
-  <main class="px-4 my-4 mx-auto md:max-w-7xl">
-    <div class="mb-4 space-y-4 md:flex md:space-y-0 md:space-x-4">
-      <div
-        class="block relative w-full text-white bg-white rounded-lg shadow-lg md:w-1/2 dark:bg-charcoal dark:bg-neutral-700">
-        {# FIXME #}
+  <main class="content">
+    <div class="py-0 px-0 mb-0 w-full md:mb-2 flex flex-row flex-nowrap items-center">
+      <div class="flex-auto mb-2 w-full">
+        <div>
+          <span class="text-xl md:text-3xl lg:text-4xl">
+            Learn Boost</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-0 md:gap-y-5 grid-flow-row auto-rows-min">
+
+      <div class="order-2 md:order-1 p-4 dark:text-white text-slate bg-white md:rounded-tl-lg shadow-lg dark:bg-charcoal dark:bg-neutral-700">
+        <h5
+            class="text-3xl font-bold leading-tight text-orange mb-2">
+            <a href="/doc/user-guide/index.html" class="link-header">User Guide</a>
+          </h5>
+          <p class="text-xl py-1 border-b border-gray-700">Learn how to use Boost in your programs</p>
+          <div class="grid grid-cols-2 gap-2 mt-6 text-xl">
+
+            <div class="w-full"><a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/intro.html"><i class="mt-1 mr-2 fas fa-book inline-block w-6 text-center"></i>Introduction to Boost</a></div>
+            <div class="w-full"><a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/getting-started.html"><i class="mt-1 mr-2 fas fa-school inline-block w-6 text-center"></i>Getting Started</a></div>
+            <div class="w-full"><a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/explore-the-content.html"><i class="mt-1 mr-2 fas fa-globe inline-block w-6 text-center"></i>Explore the Content</a></div>
+            <div class="w-full"><a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/faq.html"><i class="mt-1 mr-2 fas fa-clipboard-question inline-block w-6 text-center"></i>FAQ</a></div>
+            <div class="col-span-2 w-full h-3"></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/common-introduction.html">Introduction to Common Scenarios</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/advanced-introduction.html">Introduction to Advanced Scenarios</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/resources.html">Additional Resources</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/library-naming.html">Library Names and Organization</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/header-organization-compilation.html">Header Organization and Compiled Binaries</a></div>
+          </div>
+      </div>
+      <div class="order-1 md:order-2 p-4 dark:text-white text-slate bg-white md:rounded-tr-lg shadow-lg dark:bg-charcoal dark:bg-neutral-700">
         <a href="/doc/user-guide/">
           <img
-            class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
-            src="{% static 'img/fpo/user_guide.png' %}"
-            alt="" />
+            class="md:rounded-tr-lg object-cover h-full"
+            width="572"
+            height="470"
+            src="{% static 'img/fpo/learn_userguide.png' %}"
+            alt="User Guide" />
         </a>
-        <div class="py-3 px-6 dark:text-white text-slate">
-          <h5
-            class="text-xl font-bold leading-tight text-orange">
-            User Guide
-          </h5>
-          <p class="py-1 border-b border-gray-700">How to use Boost in your programs</p>
-          <ul class="flex flex-wrap mt-2 text-sm">
-            <li class="w-1/2"><a href="/doc/user-guide/intro.html">Introduction to Boost</a></li>
-            <li class="w-1/2"><a href="/doc/user-guide/getting-started.html">Getting Started</a></li>
-            <li class="w-1/2"><a href="/doc/user-guide/boost-history.html">History of Boost</a></li>
-            <li class="w-1/2"><a href="/doc/user-guide/library-naming.html">Library Organization</a></li>
-            <li class="w-1/2"><a href="/doc/user-guide/header-organization-compilation.html">Header Organization</a></li>
-          </ul>
+      </div>
+
+      <div class="order-3 my-5 md:my-0 w-auto col-span-1 md:col-span-2  dark:text-white text-slate bg-transparent">
+        <div class="w-4/6 p-4 mx-auto text-center bg-green/40 rounded-lg shadow-lg text-lg">
+          <i class="fab fa-xl fa-slack"></i> You can also find help by <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="https://cppalliance.org/slack/">joining the C++ Slack</a> and then <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="https://cpplang.slack.com/">visiting the workspace</a>.
         </div>
       </div>
 
-      <div
-        class="block relative w-full bg-white rounded-lg shadow-lg md:w-1/2 dark:bg-charcoal dark:bg-neutral-700">
-        {# FIXME #}
+      <div class="order-4 p-4 dark:text-white text-slate bg-white md:rounded-tl-lg md:rounded-bl-lg shadow-lg dark:bg-charcoal dark:bg-neutral-700">
         <a href="/doc/contributor-guide/">
           <img
-            class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
-            src="{% static 'img/fpo/contributor_guide.png' %}"
-            alt="" />
+            class="md:rounded-tr-lg object-cover h-full"
+            width="572"
+            height="470"
+            src="{% static 'img/fpo/learn_beaverdam.png' %}"
+            alt="Contributor Guide" />
         </a>
-        <div class="py-3 px-6 dark:text-white text-slate">
-          <h5
-            class="text-xl font-bold leading-tight">
+      </div>
+      <div class="order-5 p-4 pl-8 dark:text-white text-slate bg-white md:rounded-tr-lg md:rounded-br-lg shadow-lg dark:bg-charcoal dark:bg-neutral-700">
+        <h5
+        class="text-3xl font-bold leading-tight text-orange mb-2">
             <a href="/doc/contributor-guide/index.html" class="link-header">Contributor Guide</a>
           </h5>
-          <p class="py-1 border-b border-gray-700">This is how you can help</p>
-          <ul class="flex flex-wrap mt-2 text-sm">
-            <li class="w-1/2"><a href="/doc/contributor-guide/getting-involved.html">Getting Involved</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/requirements/library-requirements.html">Library Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/requirements/license-requirements.html">License Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/requirements/portability-requirements.html">Portability Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/requirements/organization-requirements.html">Organization Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/design-guide/design-guide.html">Design Guide</a></li>
-          </ul>
-        </div>
-      </div>
-    </div>
+          <p class="text-xl py-1 border-b border-gray-700">Learn how you can help Boost continue improving</p>
+          <div class="grid grid-cols-2 gap-2 mt-6 text-xl">
 
-    <div class="mb-16 space-y-4">
-      <div
-        class="flex flex-col text-white bg-white rounded-lg shadow-lg md:flex-row dark:bg-charcoal dark:bg-neutral-700">
-        {# FIXME #}
-        <a href="/doc/formal-reviews/" class="block md:w-1/2">
-          <img
-            class="object-cover overflow-x-hidden w-auto h-full rounded-t-lg md:rounded-none md:rounded-l-lg"
-            src="{% static 'img/fpo/formal_reviews.png' %}"
-            alt="" />
-        </a>
-        <div class="flex flex-col justify-start p-6 md:w-1/2 dark:text-white text-slate">
-          <h5
-            class="text-xl font-bold leading-tight text-orange">
-            Boost Formal Reviews
+            <div class="w-full"><a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/getting-involved.html"><i class="mt-1 mr-2 far fa-handshake inline-block w-6 text-center"></i>Getting Involved</a></div>
+            <div class="w-full"><a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/design-guide/design-guide.html"><i class="mt-1 mr-2 fas fa-diagram-project inline-block w-6 text-center"></i>Design Guide</a></div>
+            <div class="w-full"><a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/version-control.html"><i class="mt-1 mr-2 fab fa-github inline-block w-6 text-center"></i>Version Control</a></div>
+            <div class="w-full"><a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/testing/intro.html"><i class="mt-1 mr-2 fas fa-microscope inline-block w-6 text-center"></i>Testing</a></div>
+            <div class="col-span-2 w-full h-3"></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/requirements/library-requirements.html">Library Requirements</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/requirements/license-requirements.html">License Requirements</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/requirements/portability-requirements.html">Portability Requirements</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/requirements/organization-requirements.html">Organization Requirements</a></div>
+
+          </div>
+
+      </div>
+
+      <div class="order-7 md:order-6 p-4 dark:text-white text-slate bg-white md:rounded-bl-lg shadow-lg dark:bg-charcoal dark:bg-neutral-700">
+        <h5
+        class="text-3xl font-bold leading-tight text-orange mb-2">
+            <a href="/doc/formal-reviews/index.html" class="link-header">Boost Formal Reviews</a>
           </h5>
-          <p class="py-1 border-b border-gray-700">
-            How libraries become part of the collection.
+          <p class="text-xl py-1 border-b border-gray-700">
+            Learn how libraries become part of Boost
           </p>
-          <ul class="flex flex-wrap">
-            <ul class="flex flex-wrap mt-2 text-sm">
-              <li class="w-1/2"><a href="/doc/formal-reviews/index.html">Introduction</a></li>
-              <li class="w-1/2"><a href="/doc/formal-reviews/submissions.html">Submit a Library</a></li>
-              <li class="w-1/2"><a href="/doc/formal-reviews/writing-reviews.html">Write a Review</a></li>
-              <li class="w-1/2"><a href="/doc/formal-reviews/managing-reviews.html">Manage a Review</a></li>
-            </ul>
+          <div class="grid grid-cols-1 gap-4 mt-6 text-xl pl-4">
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/formal-reviews/index.html">Introduction to Formal Reviews</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/formal-reviews/submissions.html">Library Submission Process</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/formal-reviews/writing-reviews.html">How to Write a Review</a></div>
+            <div class="w-auto ml-6 mr-2"><a class="list-item text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/formal-reviews/managing-reviews.html">How to Manage a Review</a></div>
+          </div>
 
-
-
-
-
-
-          </ul>
-        </div>
       </div>
+      <div class="order-6 md:order-7 p-4 dark:text-white text-slate bg-white md:rounded-br-lg shadow-lg dark:bg-charcoal dark:bg-neutral-700">
+        <a href="/doc/formal-reviews/">
+          <img
+            class="md:rounded-tr-lg object-cover h-full"
+            width="572"
+            height="470"
+            src="{% static 'img/fpo/learn_courtroom.png' %}"
+            alt="Formal Reviews" />
+        </a>
+      </div>
+
     </div>
+
+
+
   </main>
   <!-- End Homepage Hero Section -->