diff --git a/core/tests/content/leaf.html b/core/tests/content/leaf.html
index a562f6a47..699a066ed 100644
--- a/core/tests/content/leaf.html
+++ b/core/tests/content/leaf.html
@@ -109,7 +109,7 @@
     justify-content: space-between;
     box-shadow: 0px 1px 0px #d1d1d1;
     border-bottom: 1px solid #f6f6f6;
-    max-width: 80rem;
+    max-width: 120rem;
     margin: 0 auto;
     color: var(--text-color);
     font-family: "Noto Sans" !important;
@@ -265,7 +265,7 @@
     body .body {
       margin: 0px 1rem;
       padding: 1.5rem 0rem 0;
-      max-width: 80rem;
+      max-width: 120rem;
     }
     body.article  #headblock {
       padding: 0.25rem 1rem !important;
@@ -276,7 +276,7 @@
     }
     @media (min-width: 769px) {
       body.article {
-        max-width: 80rem !important;
+        max-width: 120rem !important;
         margin: auto;
         padding: 0px 2.25rem;
         border-radius: .5rem;
@@ -303,7 +303,7 @@
     /* asciidoc layout base */
       #boost-legacy-docs-wrapper {
         margin: auto;
-        max-width: 80rem;
+        max-width: 120rem;
         overflow: hidden;
         position: relative;
         margin-top: 1rem;
diff --git a/frontend/docsstyles.css b/frontend/docsstyles.css
index 7343242e7..b4d618d70 100644
--- a/frontend/docsstyles.css
+++ b/frontend/docsstyles.css
@@ -6,7 +6,7 @@
 }
 
 body {
-  @apply font-sans break-normal max-w-7xl mx-auto md:pt-11 md:px-6 my-0 h-screen;
+  @apply font-sans break-normal max-w-[120rem] mx-auto md:pt-11 md:px-6 my-0 h-screen;
 }
 
 /*  Fixes the logo's pixel shift for non-framed and framed docs, respectively. */
@@ -34,7 +34,7 @@ div.copyright-footer:first-of-type,
 div.chapter:first-of-type,
 div.refentry:first-of-type,
 div.book:first-of-type {
-  @apply max-w-7xl px-3 md:px-6 mx-auto;
+  @apply max-w-[120rem] px-3 md:px-6 mx-auto;
 }
 
 #avatar>div,
diff --git a/frontend/styles.css b/frontend/styles.css
index c6016ed9e..6788180c6 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -118,6 +118,6 @@
 }
 
 #docsiframe {
-  @apply w-full mx-0 my-auto overflow-hidden p-0 max-w-[80rem] mt-[1px];
+  @apply w-full mx-0 my-auto overflow-hidden p-0 max-w-[120rem] mt-[1px];
   height: calc(100vh - 2.6rem)
 }
diff --git a/templates/base.html b/templates/base.html
index 35e003613..ece9c9543 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -54,7 +54,7 @@
         justify-content: space-between;
         box-shadow: 0px 1px 0px #d1d1d1;
         border-bottom: 1px solid #f6f6f6;
-        max-width: 80rem;
+        max-width: 120rem;
         margin: 0 auto;
         color: var(--text-color);
         font-family: "Noto Sans" !important;
@@ -213,7 +213,7 @@
     body .body {
       margin: 0px 1rem;
       padding: 1.5rem 0rem 0;
-      max-width: 80rem;
+      max-width: 120rem;
     }
     body.article  #headblock {
       padding: 0.25rem 1rem !important;
@@ -224,7 +224,7 @@
     }
     @media (min-width: 769px) {
       body.article {
-        max-width: 80rem !important;
+        max-width: 120rem !important;
         margin: auto;
         padding: 0px 2.25rem;
         border-radius: .5rem;
@@ -251,7 +251,7 @@
     /* asciidoc layout base */
 
     .main-footer {
-      max-width: 80rem !important;
+      max-width: 120rem !important;
     }
 
     .link-icons {
@@ -335,7 +335,7 @@
         }"
         class="h-screen bg-gray-200 dark:bg-black{% if DEBUG %} DEBUG{% endif %}" {% block body_id %}{% endblock %}>
          <div class="modal-overlay" id="modalOverlay"><div class="modal-content"><iframe id="modalFrame" class="w-full h-full rounded-xl m-0 p-0"></iframe><div class="modal-close" id="modalClose" onclick="closeModal()"><i class="fa-solid fa-xmark fa-lg"></i></div></div></div>
-    <div class="max-w-7xl md:px-3 mx-auto transition-all">
+    <div class="max-w-[120rem] md:px-3 mx-auto transition-all">
       {% block content_header %}
         {% include "includes/_header.html" %}
       {% endblock %}
diff --git a/templates/community_temp.html b/templates/community_temp.html
index 20624a5b2..02c6a143b 100644
--- a/templates/community_temp.html
+++ b/templates/community_temp.html
@@ -8,7 +8,7 @@
 
 {% block content %}
   <div class="py-0 px-0 md:py-6 md:px-3">
-    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 2xl:grid-cols-3">
       <div class="p-6 bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
         <h5 class="text-2xl leading-tight text-orange">Mailing Lists</h5>
         <p class="py-1 my-2 border-b pb-4 border-gray-700 text-slate dark:text-white">Discover the Boost library community with options tailored to developers, casual users, and enthusiasts.</p>
diff --git a/templates/docs_temp.html b/templates/docs_temp.html
index dac3cc281..04375059d 100644
--- a/templates/docs_temp.html
+++ b/templates/docs_temp.html
@@ -20,42 +20,84 @@
     </div>
     {% endcomment %}
 
-    <div class="pt-0 md:pt-3 md:mt-3 grid grid-cols-1 lg:grid-cols-2 gap-y-0 lg:gap-y-5 grid-flow-row auto-rows-min">
-      <div class="order-2 mb-5 lg:mb-0 lg:order-1 p-6 pt-0 lg:pt-6 dark:text-white text-slate bg-white rounded-none md:rounded-lg rounded-t-none lg:rounded-tl-lg lg:rounded-r-none dark:bg-charcoal dark:bg-neutral-700">
-        <h5 class="text-2xl leading-tight text-orange"><a href="/doc/user-guide/index.html" class="link-header">User Guide</a></h5>
-        <p class="text-lg py-1 border-b pb-4 border-gray-700">How to use the libraries in your programs</p>
-        <div class="grid grid-cols-2 gap-2 mt-6 text-lg">
-          <div class="w-full col-span-2 md:col-span-1">
-            <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>Intro to Boost</a>
-          </div>
-          <div class="w-full col-span-2 md:col-span-1">
-            <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 col-span-2 md:col-span-1">
-            <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 col-span-2 md:col-span-1">
-            <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 col-span-2 md:col-span-1">
-            <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">Common Scenarios</a>
-          </div>
-          <div class="w-auto ml-6 mr-2 col-span-2 md:col-span-1">
-            <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">Advanced Scenarios</a>
-          </div>
-          <div class="w-auto ml-6 mr-2 col-span-2 md:col-span-1">
-            <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 col-span-2 md:col-span-1">
-            <a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/user-community-introduction.html">Introduction to the User Community</a>
+    <div class="md:pt-3 md:mt-3 grid grid-cols-1 lg:grid-cols-2 gap-y-6 lg:gap-x-4 lg:gap-y-5 grid-flow-row auto-rows-min">
+      <div class="flex flex-col 2xl:flex-row rounded-none sm:rounded-lg p-6 dark:text-white text-slate bg-white dark:bg-charcoal dark:bg-neutral-700 gap-x-6 gap-y-6" >
+        <div class="order-2 2xl:order-1 2xl:w-full">
+          <h5 class="text-2xl leading-tight text-orange"><a href="/doc/user-guide/index.html" class="link-header">User Guide</a></h5>
+          <p class="text-lg py-1 border-b pb-4 border-gray-700">How to use the libraries in your programs</p>
+          <div class="grid grid-cols-2 gap-2 mt-6 text-lg">
+            <div class="w-full col-span-2 md:col-span-1">
+              <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>Intro to Boost</a>
+            </div>
+            <div class="w-full col-span-2 md:col-span-1">
+              <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 col-span-2 md:col-span-1">
+              <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 col-span-2 md:col-span-1">
+              <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 col-span-2 md:col-span-1">
+              <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">Common Scenarios</a>
+            </div>
+            <div class="w-auto ml-6 mr-2 col-span-2 md:col-span-1">
+              <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">Advanced Scenarios</a>
+            </div>
+            <div class="w-auto ml-6 mr-2 col-span-2 md:col-span-1">
+              <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 col-span-2 md:col-span-1">
+              <a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/user-guide/user-community-introduction.html">Introduction to the User Community</a>
+            </div>
           </div>
         </div>
+        <div class="order-1 2xl:order-2 min-h-96 max-h-96 lg:max-h-max 2xl:max-w-[40%] overflow-y-hidden xl:h-1/2 2xl:h-auto">
+          <a href="/doc/user-guide/"><img class="rounded-lg object-cover object-center min-w-full min-h-full h-full border border-gray-100 dark:border-0" width="572" height="470" src="{% static 'img/fpo/learn_userguide.png' %}" alt="User Guide" /></a>
+        </div>
       </div>
-      <div class="order-1 lg:order-2 p-6 dark:text-white text-slate bg-white md:rounded-lg md:rounded-b-none lg:rounded-br-lg lg:rounded-l-none dark:bg-charcoal dark:bg-neutral-700 min-h-96 max-h-96 lg:max-h-max overflow-y-hidden">
-        <a href="/doc/user-guide/"><img class="rounded-lg lg:rounded-l-none object-cover object-center min-w-full min-h-full h-full border border-gray-100 dark:border-0" width="572" height="470" src="{% static 'img/fpo/learn_userguide.png' %}" alt="User Guide" /></a>
+      <div class="flex flex-col 2xl:flex-row rounded-none sm:rounded-lg p-6 dark:text-white text-slate bg-white dark:bg-charcoal dark:bg-neutral-700 gap-x-6 gap-y-6">
+        <div class="order-2 2xl:order-1 2xl:w-full">
+          <h5 class="text-2xl leading-tight text-orange">
+            <a href="/doc/contributor-guide/index.html" class="link-header">Contributor Guide</a>
+          </h5>
+          <p class="text-xl py-1 border-b pb-4 border-gray-700">Resources to help you contribute</p>
+          <div class="grid grid-cols-2 gap-2 mt-6 text-lg">
+            <div class="w-full col-span-2 md:col-span-1">
+              <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 col-span-2 md:col-span-1">
+              <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/contributors-faq.html"><i class="mt-1 mr-2 fas fa-clipboard-question inline-block w-6 text-center"></i>Contributors FAQ</a>
+            </div>
+            <div class="w-full col-span-2 md:col-span-1">
+              <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/design-guide/design-best-practices.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 col-span-2 md:col-span-1">
+              <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 col-span-2 md:col-span-1">
+              <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="w-full col-span-2 md:col-span-1">
+              <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/superproject/overview.html"><i class="mt-1 mr-2 fas fa-bolt-lightning inline-block w-6 text-center"></i>The Super-Project</a>
+            </div>
+            <div class="col-span-2 w-full h-3"></div>
+            <div class="w-auto ml-6 mr-2 col-span-2 md:col-span-1">
+              <a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/contributor-community-introduction.html">Introduction to the Contributors Community</a>
+            </div>
+            <div class="w-auto ml-6 mr-2 col-span-2 md:col-span-1">
+              <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 col-span-2 md:col-span-1">
+              <a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href={% url 'boost-development' %}>About Boost Development</a>
+            </div>
+          </div>
+        </div>
+        <div class="order-1 2xl:order-2 min-h-96 max-h-96 lg:max-h-max 2xl:max-w-[40%] overflow-y-hidden xl:h-1/2 2xl:h-auto">
+          <a href="/doc/contributor-guide/"><img class="rounded-lg object-cover object-center min-w-full min-h-full h-full border border-gray-100 dark:border-0" width="572" height="470" src="{% static 'img/fpo/learn_beaverdam.png' %}" alt="Contributor Guide" /></a>
+        </div>
       </div>
-
       {% comment %}
       <div class="order-3 my-5 lg:my-0 w-auto col-span-1 lg: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 text-lg">
@@ -63,63 +105,26 @@ <h5 class="text-2xl leading-tight text-orange"><a href="/doc/user-guide/index.ht
         </div>
       </div>
       {% endcomment %}
-
-      <div class="order-4 p-6 dark:text-white text-slate bg-white md:rounded-lg md:rounded-b-none lg:rounded-bl-lg lg:rounded-r-none dark:bg-charcoal dark:bg-neutral-700 min-h-96 max-h-96 lg:max-h-max overflow-y-hidden">
-        <a href="/doc/contributor-guide/"><img class="rounded-lg lg:rounded-r-none object-cover object-bottom min-w-full min-h-full h-full border border-gray-100 dark:border-0" width="572" height="470" src="{% static 'img/fpo/learn_beaverdam.png' %}" alt="Contributor Guide" /></a>
-      </div>
-      <div class="order-5 mb-5 lg:mb-0 p-6 pl-8 pt-0 lg:pt-6 dark:text-white text-slate bg-white rounded-lg rounded-t-none lg:rounded-tr-lg lg:rounded-l-none dark:bg-charcoal dark:bg-neutral-700">
-        <h5 class="text-2xl leading-tight text-orange"><a href="/doc/contributor-guide/index.html" class="link-header">Contributor Guide</a></h5>
-        <p class="text-xl py-1 border-b pb-4 border-gray-700">Resources to help you contribute</p>
-        <div class="grid grid-cols-2 gap-2 mt-6 text-lg">
-          <div class="w-full col-span-2 md:col-span-1">
-            <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 col-span-2 md:col-span-1">
-            <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/contributors-faq.html"><i class="mt-1 mr-2 fas fa-clipboard-question inline-block w-6 text-center"></i>Contributors FAQ</a>
-          </div>
-          <div class="w-full col-span-2 md:col-span-1">
-            <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/design-guide/design-best-practices.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 col-span-2 md:col-span-1">
-            <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 col-span-2 md:col-span-1">
-            <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="w-full col-span-2 md:col-span-1">
-            <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/superproject/overview.html"><i class="mt-1 mr-2 fas fa-bolt-lightning inline-block w-6 text-center"></i>The Super-Project</a>
-          </div>
-          <div class="col-span-2 w-full h-3"></div>
-          <div class="w-auto ml-6 mr-2 col-span-2 md:col-span-1">
-            <a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="/doc/contributor-guide/contributor-community-introduction.html">Introduction to the Contributors Community</a>
-          </div>
-          <div class="w-auto ml-6 mr-2 col-span-2 md:col-span-1">
-            <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 col-span-2 md:col-span-1">
-            <a class="list-item text-base text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href={% url 'boost-development' %}>About Boost Development</a>
+      <div class="flex flex-col 2xl:flex-row rounded-none sm:rounded-lg p-6 dark:text-white text-slate bg-white dark:bg-charcoal dark:bg-neutral-700 gap-x-6 gap-y-6">
+        <div class="order-2 2xl:order-1 2xl:w-full">
+          <h5 class="text-2xl leading-tight text-orange"><a href="{% url 'review-process' %}" class="link-header">Boost Formal Reviews</a></h5>
+          <p class="text-xl py-1 pb-4 border-b border-gray-700">Learn how new libraries are added</p>
+          <div class="grid grid-cols-1 gap-4 mt-6 text-lg">
+            <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="{% url 'review-process' %}">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="{% url 'review-past' %}">Past Review Results and Milestones</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="{% url 'review-upcoming' %}">Upcoming Reviews</a>
+            </div>
           </div>
         </div>
-      </div>
-
-      <div class="order-7 lg:order-6 p-6 pt-0 lg:pt-6 dark:text-white text-slate bg-white rounded-lg rounded-t-none lg:rounded-tl-lg lg:rounded-r-none dark:bg-charcoal dark:bg-neutral-700">
-        <h5 class="text-2xl leading-tight text-orange"><a href="{% url 'review-process' %}" class="link-header">Boost Formal Reviews</a></h5>
-        <p class="text-xl py-1 pb-4 border-b border-gray-700">Learn how new libraries are added</p>
-        <div class="grid grid-cols-1 gap-4 mt-6 text-lg 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="{% url 'review-process' %}">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="{% url 'review-past' %}">Past Review Results and Milestones</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="{% url 'review-upcoming' %}">Upcoming Reviews</a>
-          </div>
+        <div class="order-1 2xl:order-2 min-h-96 max-h-96 lg:max-h-max 2xl:max-w-[40%] overflow-y-hidden xl:h-1/2 2xl:h-auto">
+          <a href="{% url 'review-process' %}"><img class="rounded-lg object-cover object-center min-w-full min-h-full h-full" width="572" height="470" src="{% static 'img/fpo/learn_courtroom.png' %}" alt="Formal Reviews" /></a>
         </div>
       </div>
-      <div class="order-6 lg:order-7 p-6 dark:text-white text-slate bg-white md:rounded-lg md:rounded-b-none lg:rounded-br-lg lg:rounded-l-none dark:bg-charcoal dark:bg-neutral-700 min-h-96 max-h-96 lg:max-h-max overflow-y-hidden">
-        <a href="{% url 'review-process' %}"><img class="rounded-lg lg:rounded-l-none object-cover object-center min-w-full min-h-full h-full border border-gray-100 dark:border-0" width="572" height="470" src="{% static 'img/fpo/learn_courtroom.png' %}" alt="Formal Reviews" /></a>
-      </div>
     </div>
   </main>
   <!-- End Homepage Hero Section -->
diff --git a/templates/docsiframe.html b/templates/docsiframe.html
index ed35e9ff1..5bbbacd8d 100644
--- a/templates/docsiframe.html
+++ b/templates/docsiframe.html
@@ -7,7 +7,6 @@
         id="docsiframe"
     ></iframe>
     <script>
-      debugger;
       function iframeCustomizations(iframe) {
         let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
         {#resizeIframe(iframe);#}
diff --git a/templates/homepage.html b/templates/homepage.html
index db50e1f71..1c9a21274 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -61,6 +61,49 @@ <h4 class="mb-3 text-5xl">165+</h4>
 
     {% if events %}
         <div class="my-12 mb-3 md:mb-6 space-y-4 lg:flex lg:mt-16 lg:mb-4 lg:space-y-0 lg:space-x-4 md:shadow-lg">
+          <div class="p-6 relative bg-white md:rounded-lg md:p-11 w-full dark:bg-charcoal">
+            <div class="mb-6">
+              <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-green-500">recent news</span>
+            </div>
+            <div class="absolute top-6 right-8 p-2 group">
+              <a href="{% url 'news' %}"
+                class="text-sm font-medium md:text-base text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange">
+                All News&nbsp;<i class="fas fa-chevron-right text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange"></i>
+              </a>
+            </div>
+            <div class="space-y-4">
+              {% for entry in entries %}
+                <div class="pt-0">
+                  <h2 class="flex items-center pb-2 mb-3 text-lg md:text-2xl lg:text-2xl font-semibold mr-4 border-b border-gray-400 dark:border-slate">
+                    {% avatar user=entry.author %}
+                    <span class="text-sm ml-5 bg-white rounded-full dark:text-gray-300 w-[30px] dark:bg-charcoal">
+                      {% if entry.tag == "link" %}
+                        <i class="fas fa-link"></i>
+                      {% elif entry.tag == "news" %}
+                        <i class="fas fa-newspaper"></i>
+                      {% elif entry.tag == "blogpost" %}
+                        <i class="fas fa-comment"></i>
+                      {% elif entry.tag == "poll" %}
+                        <i class="fas fa-poll"></i>
+                      {% elif entry.tag == "video" %}
+                        <i class="fas fa-video"></i>
+                      {% endif %}
+                    </span>
+                    <a class="link-header" {% if entry.external_url %}target="_blank"{% endif %} href="{% if entry.external_url %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
+                      {{ entry.title }} {% if entry.external_url %}<i class="fa fa-external-link text-sm ml-1"></i>{% endif %}
+                    </a>
+                  </h2>
+
+                  <p class="pt-0 pb-4 mx-auto w-full text-xs md:text-sm align-left">Posted on {{ entry.publish_at|date:"M jS, Y" }} by {{ entry.author.display_name }}</p>
+                  {% if entry.content %}
+                  <div class="md:ml-[40px]">
+                    <span class="text-sm md:text-base text-gray-500 dark:text-white/70">{{ entry.content|urlize|url_target_blank:'text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange'|linebreaksbr|multi_truncate_middle:30|truncatechars_html:500 }}</span>
+                    </div>
+                  {% endif %}
+                </div>
+              {% endfor %}
+            </div>
+          </div>
       <div class="p-6 relative bg-white md:rounded-lg md:p-11 w-full dark:bg-charcoal">
             <div class="w-full">
               <div class="mb-6">
@@ -168,71 +211,24 @@ <h3 class="pb-2 mb-4 text-lg md:text-2xl capitalize border-b border-gray-400 tex
           {% endcomment %}
 
       </div>
-    </div>
-    {% endif %}
-
-    <div class="my-12 space-y-4 lg:flex lg:mb-16 lg:space-y-0 lg:space-x-4 md:shadow-lg">
       <div class="p-6 relative bg-white md:rounded-lg md:p-11 w-full dark:bg-charcoal">
-          <div>
-          <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-green-500">featured video</span>
-        </div>
-        <div class="flex flex-col justify-center items-center h-full pb-4">
-          <div class="mx-auto">
-            <div class="flex items-center justify-center h-full py-4 rounded-lg">
-              <a href="https://www.youtube.com/watch?v=Z1imC1HcJUA" target="_blank" rel="noopener noreferrer" class="text-sm md:text-lg text-center text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
-                C++ Tutorial: Using Boost.MP11 C++ Library - Jody Hagins - CppNow 2023
-              </a>
-            </div>
+        <div>
+        <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-green-500">featured video</span>
+      </div>
+      <div class="flex flex-col justify-center items-center h-full pb-4">
+        <div class="mx-auto">
+          <div class="flex items-center justify-center h-full py-4 rounded-lg">
+            <a href="https://www.youtube.com/watch?v=Z1imC1HcJUA" target="_blank" rel="noopener noreferrer" class="text-sm md:text-lg text-center text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
+              C++ Tutorial: Using Boost.MP11 C++ Library - Jody Hagins - CppNow 2023
+            </a>
           </div>
         </div>
       </div>
     </div>
+    </div>
+    {% endif %}
 
     <div class="my-12 space-y-4 lg:flex lg:mb-16 lg:space-y-0 lg:space-x-4 md:shadow-lg">
-      <div class="p-6 relative bg-white md:rounded-lg md:p-11 w-full dark:bg-charcoal">
-        <div class="mb-6">
-          <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-green-500">recent news</span>
-        </div>
-        <div class="absolute top-6 right-8 p-2 group">
-          <a href="{% url 'news' %}"
-            class="text-sm font-medium md:text-base text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange">
-            All News&nbsp;<i class="fas fa-chevron-right text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange"></i>
-          </a>
-        </div>
-        <div class="space-y-4">
-          {% for entry in entries %}
-            <div class="pt-0">
-              <h2 class="flex items-center pb-2 mb-3 text-lg md:text-2xl lg:text-2xl font-semibold mr-4 border-b border-gray-400 dark:border-slate">
-                {% avatar user=entry.author %}
-                <span class="text-sm ml-5 bg-white rounded-full dark:text-gray-300 w-[30px] dark:bg-charcoal">
-                  {% if entry.tag == "link" %}
-                    <i class="fas fa-link"></i>
-                  {% elif entry.tag == "news" %}
-                    <i class="fas fa-newspaper"></i>
-                  {% elif entry.tag == "blogpost" %}
-                    <i class="fas fa-comment"></i>
-                  {% elif entry.tag == "poll" %}
-                    <i class="fas fa-poll"></i>
-                  {% elif entry.tag == "video" %}
-                    <i class="fas fa-video"></i>
-                  {% endif %}
-                </span>
-                <a class="link-header" {% if entry.external_url %}target="_blank"{% endif %} href="{% if entry.external_url %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
-                  {{ entry.title }} {% if entry.external_url %}<i class="fa fa-external-link text-sm ml-1"></i>{% endif %}
-                </a>
-              </h2>
-
-              <p class="pt-0 pb-4 mx-auto w-full text-xs md:text-sm align-left">Posted on {{ entry.publish_at|date:"M jS, Y" }} by {{ entry.author.display_name }}</p>
-              {% if entry.content %}
-              <div class="md:ml-[40px]">
-                <span class="text-sm md:text-base text-gray-500 dark:text-white/70">{{ entry.content|urlize|url_target_blank:'text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange'|linebreaksbr|multi_truncate_middle:30|truncatechars_html:500 }}</span>
-                </div>
-              {% endif %}
-            </div>
-          {% endfor %}
-        </div>
-      </div>
-
     </div>
 
     {% comment %}
diff --git a/templates/libraries/grid_list.html b/templates/libraries/grid_list.html
index 2b64b2f25..33ec4b9cd 100644
--- a/templates/libraries/grid_list.html
+++ b/templates/libraries/grid_list.html
@@ -13,7 +13,7 @@
     {% include "libraries/includes/version_alert.html" %}
 
     {# Libraries list #}
-    <div class="grid grid-cols-1 gap-4 mb-5 md:grid-cols-2 lg:grid-cols-3">
+    <div class="grid grid-cols-1 gap-4 mb-5 md:grid-cols-2 lg:grid-cols-4">
       {% for library_version in object_list %}
         {% include "libraries/_library_grid_list_item.html" %}
       {% endfor %}
diff --git a/templates/news/list.html b/templates/news/list.html
index 300666d07..24005bc83 100644
--- a/templates/news/list.html
+++ b/templates/news/list.html
@@ -80,7 +80,7 @@ <h6 class="pb-1 text-base">Moderate</h6>
         </div>
     </div>
 
-    <div class="my-5">
+    <div class="my-5 max-w-[80rem] mx-auto">
       <div class="mx-auto w-full">
         {% for entry in entry_list %}
         <div class="md:flex md:space-x-3">