diff --git a/frontend/styles.css b/frontend/styles.css
index f1b854c4..8f1718ad 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap");
 
 @layer base {
   [x-cloak] {
diff --git a/static/css/styles.css b/static/css/styles.css
index f320ff44..3eae273e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -748,7 +748,7 @@ input[type=file] {
   color: rgb(49 74 87 / var(--tw-text-opacity));
 }
 
-.dark #signup_form input[type=email],.dark
+.dark #signup_form input[type=email],.dark 
   #signup_form input[type=password] {
   --tw-bg-opacity: 1;
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
@@ -953,8 +953,8 @@ input[type=file] {
   right: 2.5rem;
 }
 
-.-top-2 {
-  top: -0.5rem;
+.-top-\[2px\] {
+  top: -2px;
 }
 
 .-right-2 {
@@ -1201,12 +1201,8 @@ input[type=file] {
   margin-top: 4rem;
 }
 
-.mr-11 {
-  margin-right: 2.75rem;
-}
-
-.-mb-1 {
-  margin-bottom: -0.25rem;
+.-mb-3 {
+  margin-bottom: -0.75rem;
 }
 
 .-mt-1 {
@@ -1277,12 +1273,8 @@ input[type=file] {
   height: 2rem;
 }
 
-.h-\[40px\] {
-  height: 40px;
-}
-
-.h-\[50px\] {
-  height: 50px;
+.h-\[32px\] {
+  height: 32px;
 }
 
 .h-6 {
@@ -1361,8 +1353,16 @@ input[type=file] {
   width: 33.333333%;
 }
 
-.w-\[200px\] {
-  width: 200px;
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-1\/5 {
+  width: 20%;
+}
+
+.w-\[130px\] {
+  width: 130px;
 }
 
 .w-32 {
@@ -1385,10 +1385,6 @@ input[type=file] {
   width: 66.666667%;
 }
 
-.w-\[47px\] {
-  width: 47px;
-}
-
 .w-4 {
   width: 1rem;
 }
@@ -1397,10 +1393,6 @@ input[type=file] {
   width: 1.25rem;
 }
 
-.w-1\/5 {
-  width: 20%;
-}
-
 .w-\[80px\] {
   width: 80px;
 }
@@ -1409,34 +1401,30 @@ input[type=file] {
   width: 0.25rem;
 }
 
-.w-4\/5 {
-  width: 80%;
-}
-
-.w-2\/5 {
-  width: 40%;
+.w-\[200px\] {
+  width: 200px;
 }
 
 .min-w-0 {
   min-width: 0px;
 }
 
+.min-w-\[300px\] {
+  min-width: 300px;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
 
-.max-w-7xl {
-  max-width: 80rem;
+.max-w-full {
+  max-width: 100%;
 }
 
 .max-w-2xl {
   max-width: 42rem;
 }
 
-.max-w-full {
-  max-width: 100%;
-}
-
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -1639,6 +1627,12 @@ input[type=file] {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1663,6 +1657,12 @@ input[type=file] {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
@@ -1771,11 +1771,6 @@ input[type=file] {
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
 .border-orange {
   --tw-border-opacity: 1;
   border-color: rgb(255 159 0 / var(--tw-border-opacity));
@@ -1791,10 +1786,20 @@ input[type=file] {
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .border-green\/40 {
   border-color: rgb(90 213 153 / 0.4);
 }
 
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -1836,6 +1841,11 @@ input[type=file] {
   background-color: rgb(90 213 153 / 0.2);
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -1909,6 +1919,10 @@ input[type=file] {
   padding: 0.5rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2068,6 +2082,14 @@ input[type=file] {
   padding-bottom: 2.75rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pt-5 {
   padding-top: 1.25rem;
 }
@@ -2080,10 +2102,6 @@ input[type=file] {
   padding-bottom: 0.5rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2108,10 +2126,6 @@ input[type=file] {
   padding-top: 0px;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2410,6 +2424,11 @@ input[type=file] {
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2639,40 +2658,6 @@ input[type=file] {
 }
 
 @media (min-width: 768px) {
-  .md\:container {
-    width: 100%;
-  }
-
-  @media (min-width: 640px) {
-    .md\:container {
-      max-width: 640px;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .md\:container {
-      max-width: 768px;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .md\:container {
-      max-width: 1024px;
-    }
-  }
-
-  @media (min-width: 1280px) {
-    .md\:container {
-      max-width: 1280px;
-    }
-  }
-
-  @media (min-width: 1536px) {
-    .md\:container {
-      max-width: 1536px;
-    }
-  }
-
   .md\:order-2 {
     order: 2;
   }
@@ -2685,6 +2670,11 @@ input[type=file] {
     float: right;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:my-16 {
     margin-top: 4rem;
     margin-bottom: 4rem;
@@ -2705,16 +2695,6 @@ input[type=file] {
     margin-right: 0px;
   }
 
-  .md\:my-11 {
-    margin-top: 2.75rem;
-    margin-bottom: 2.75rem;
-  }
-
-  .md\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   .md\:mt-3 {
     margin-top: 0.75rem;
   }
@@ -2867,22 +2847,16 @@ input[type=file] {
     margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .md\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
-    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.75rem * var(--tw-space-x-reverse));
     margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .md\:space-x-11 > :not([hidden]) ~ :not([hidden]) {
+  .md\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
-    margin-right: calc(2.75rem * var(--tw-space-x-reverse));
-    margin-left: calc(2.75rem * calc(1 - var(--tw-space-x-reverse)));
+    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
   .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
@@ -3029,8 +3003,12 @@ input[type=file] {
     padding-right: 2.75rem;
   }
 
-  .md\:pb-6 {
-    padding-bottom: 1.5rem;
+  .md\:pb-3 {
+    padding-bottom: 0.75rem;
+  }
+
+  .md\:pt-6 {
+    padding-top: 1.5rem;
   }
 
   .md\:text-right {
@@ -3093,56 +3071,12 @@ input[type=file] {
     }
   }
 
-  .lg\:max-w-7xl {
-    max-width: 80rem;
-  }
-
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-
-  .lg\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
 }
 
 @media (min-width: 1280px) {
-  .xl\:container {
-    width: 100%;
-  }
-
-  @media (min-width: 640px) {
-    .xl\:container {
-      max-width: 640px;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .xl\:container {
-      max-width: 768px;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .xl\:container {
-      max-width: 1024px;
-    }
-  }
-
-  @media (min-width: 1280px) {
-    .xl\:container {
-      max-width: 1280px;
-    }
-  }
-
-  @media (min-width: 1536px) {
-    .xl\:container {
-      max-width: 1536px;
-    }
-  }
-
   .xl\:inline {
     display: inline;
   }
@@ -3151,9 +3085,9 @@ input[type=file] {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .xl\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
+  .xl\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
-    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 }
diff --git a/templates/base.html b/templates/base.html
index 21e17a01..2fff072b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,6 +10,8 @@
     <meta name="description" content="{% block description %}{% endblock %}">
     <meta name="keywords" content="{% block keywords %}{% endblock %}">
     <meta name="author" content="{% block author %}{% endblock %}">
+    <link rel="shortcut icon" href="{% static 'img/Boost_Symbol_Transparent.svg' %}" type="image/x-icon">
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <link href="{% static 'css/styles.css' %}" rel="stylesheet">
     <!-- Google fonts for Cairo Medium and SemiBold -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -17,6 +19,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
     <script src="//unpkg.com/alpinejs" defer></script>
     <script src="https://unpkg.com/htmx.org@1.8.5" integrity="sha384-7aHh9lqPYGYZ7sTHvzP1t3BAfLhYSTy9ArHdP3Xsr9/3TlGurYgcPBoFmXX2TX/w" crossorigin="anonymous"></script>
+    <!-- TODO bring this local if we like it -->
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <!-- detect dark or light mode -->
     <script src="{% static 'js/DetectMode.js' %}"></script>
     {% block extra_head %}{% endblock %}
@@ -51,7 +55,7 @@
       {% comment %}body block is for use in forums{% endcomment %}
       {% block forum_body %}{% endblock %}
 
-      <div class="md:px-11">
+      <div class="md:px-11 min-vh-110">
       {% block content_wrapper %}
         {% block subnav %}{% endblock %}
         {% block content %}{% endblock %}
diff --git a/templates/docs_temp.html b/templates/docs_temp.html
index 2d2752da..6b9e00a9 100644
--- a/templates/docs_temp.html
+++ b/templates/docs_temp.html
@@ -12,7 +12,6 @@ This is a temporary landing page for docs
     <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">
-        <a href="#" class="absolute top-5 right-10 py-3 px-4 text-white rounded shadow-md bg-orange">New Here?</a>
         {# FIXME #}
         <a href="/doc/user-guide/">
           <img
@@ -57,7 +56,7 @@ This is a temporary landing page for docs
             class="text-xl font-bold leading-tight text-orange">
             Contributor Guide
           </h5>
-          <p class="py-1 border-b border-gray-300 text-white/60">This is how you can help</p>
+          <p class="py-1 border-b border-gray-700 text-green">This is how you can help</p>
           <ul class="flex flex-wrap mt-2 text-sm">
             <li class="w-1/2"><a href="#">Get the Release</a></li>
             <li class="w-1/2"><a href="#">Including Headers</a></li>
diff --git a/templates/includes/_footer.html b/templates/includes/_footer.html
index 4378b4cb..7d6e40d8 100644
--- a/templates/includes/_footer.html
+++ b/templates/includes/_footer.html
@@ -1,43 +1,34 @@
 {% load static %}
 
 <footer class="py-5 px-4 my-5 mx-auto max-w-full sm:mt-24 md:py-4 md:my-6">
-  {% if not request.user.is_authenticated %}
-  <div class="md:flex" id="footerSignup">
-    <div class="grid gap-4 content-center text-left md:w-1/2">
-      <div>
-        <h1 class="block pt-6 text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl xl:inline">
-          Join the growing community
-        </h1>
-      </div>
-      <div class="grid grid-cols-1 gap-4 my-16 md:grid-cols-2">
-        <div><img class="float-left mt-1 mr-3 w-auto h-8" src="{% static 'img/icons/icon_Cup-C++.svg' %}" alt=""> Best collections of C++ libraries</div>
-        <div><img class="float-left mt-1 mr-3 w-auto h-8" src="{% static 'img/icons/icon_graduation-cap.svg' %}" alt=""> Supports research and education for C++</div>
-        <div><img class="float-left mt-1 mr-3 w-auto h-8" src="{% static 'img/icons/icon_down-arrow-stack.svg' %}" alt=""> Accessible with minimal restriction</div>
-        <div><img class="float-left mt-1 mr-3 w-auto h-8" src="{% static 'img/icons/icon_three-people.svg' %}" alt=""> Collaborative community</div>
-      </div>
-      <div class="hidden mt-5 max-w-md sm:flex md:mt-8">
-        <div class="rounded-md shadow">
-          <a href="{% url 'account_signup' %}" class="flex justify-center items-center py-3 px-8 w-full text-base font-medium text-white rounded-md border md:py-3 md:px-8 md:text-lg border-orange bg-orange dark:text-orange dark:bg-charcoal">Sign Up <i class="pl-2 text-white fas fa-chevron-right dark:text-orange"></i> </a>
-        </div>
-      </div>
-    </div>
-    <div class="text-center md:w-1/2">
-      <div id="scene01"></div>
-    </div>
-  </div>
-  {% endif %}
+{#  {% if not request.user.is_authenticated %}#}
+{#  <div class="md:flex" id="footerSignup">#}
+{#    <div class="grid gap-4 content-center text-left md:w-1/2">#}
+{#      <div>#}
+{#        <h1 class="block pt-6 text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl xl:inline">#}
+{#          Join the growing community#}
+{#        </h1>#}
+{#      </div>#}
+{#      <div class="grid grid-cols-1 gap-4 my-16 md:grid-cols-2">#}
+{#        <div><img class="float-left mt-1 mr-3 w-auto h-8" src="{% static 'img/icons/icon_Cup-C++.svg' %}" alt=""> Best collections of C++ libraries</div>#}
+{#        <div><img class="float-left mt-1 mr-3 w-auto h-8" src="{% static 'img/icons/icon_graduation-cap.svg' %}" alt=""> Supports research and education for C++</div>#}
+{#        <div><img class="float-left mt-1 mr-3 w-auto h-8" src="{% static 'img/icons/icon_down-arrow-stack.svg' %}" alt=""> Accessible with minimal restriction</div>#}
+{#        <div><img class="float-left mt-1 mr-3 w-auto h-8" src="{% static 'img/icons/icon_three-people.svg' %}" alt=""> Collaborative community</div>#}
+{#      </div>#}
+{#      <div class="hidden mt-5 max-w-md sm:flex md:mt-8">#}
+{#        <div class="rounded-md shadow">#}
+{#          <a href="{% url 'account_signup' %}" class="flex justify-center items-center py-3 px-8 w-full text-base font-medium text-white rounded-md border md:py-3 md:px-8 md:text-lg border-orange bg-orange dark:text-orange dark:bg-charcoal">Sign Up <i class="pl-2 text-white fas fa-chevron-right dark:text-orange"></i> </a>#}
+{#        </div>#}
+{#      </div>#}
+{#    </div>#}
+{#    <div class="text-center md:w-1/2">#}
+{#      <div id="scene01"></div>#}
+{#    </div>#}
+{#  </div>#}
+{#  {% endif %}#}
 
   <div class="items-center px-5 pt-4 mt-16 md:flex">
-    <div class="mr-11">
-      <img class="hidden mb-1 w-auto dark:inline-block h-[40px]"
-           src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}"
-           alt="Boost">
-
-      <img class="inline-block mb-1 w-auto dark:hidden h-[40px]"
-           src="{% static 'img/Boost_Brandmark_BlackBoost_Transparent.svg' %}"
-           alt="Boost">
-    </div>
-    <div class="justify-between pt-3 pb-3 w-4/5 md:space-x-3 xl:space-x-10">
+    <div class="justify-between pt-3 pb-3 w-4/5 md:space-x-3 xl:space-x-6">
       <a class="block my-2 md:inline" href="/">&#169; 2022 Boost.org</a>
       <a class="block my-2 md:inline" href="{% url 'contact' %}">Contact</a>
       <a class="block my-2 md:inline" href="">Privacy Policy</a>
diff --git a/templates/includes/_header.html b/templates/includes/_header.html
index 45b8eb32..dd606d84 100644
--- a/templates/includes/_header.html
+++ b/templates/includes/_header.html
@@ -3,16 +3,16 @@
 
 
 <div class="relative">
-  <div class="relative pb-11 md:pb-6">
+  <div class="relative pb-11 md:pb-3">
     <div>
-      <div class="hidden items-center py-5 border-b-2 border-gray-300 md:flex darK:border-charcoal">
-        <div class="w-[200px]">
+      <div class="hidden items-center pt-2 pb-4 border-b-2 border-gray-300 md:flex darK:border-charcoal">
+        <div class="w-[130px]">
           <a href="{% url 'home' %}">
-              <img class="hidden -mb-1 w-auto dark:inline-block h-[50px]"
+              <img class="hidden -mb-3 w-auto dark:inline-block h-[32px]"
                    src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}"
                    alt="Boost">
 
-              <img class="inline-block -mb-1 w-auto dark:hidden h-[50px]"
+              <img class="inline-block -mb-3 w-auto dark:hidden h-[32px]"
                    src="{% static 'img/Boost_Brandmark_BlackBoost_Transparent.svg' %}"
                    alt="Boost">
           </a>
@@ -36,7 +36,7 @@
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="transform opacity-100 scale-100"
                    x-transition:leave-end="transform opacity-0 scale-95"
-                   class="absolute -top-2 -right-2 z-10"
+                   class="absolute -top-[2px] -right-2 z-10"
                    x-ref="search-form"
                    x-description="Search"
                    role="menu"
diff --git a/templates/libraries/detail.html b/templates/libraries/detail.html
index ca92c788..1bc5e957 100644
--- a/templates/libraries/detail.html
+++ b/templates/libraries/detail.html
@@ -3,177 +3,250 @@
 {% load static %}
 
 {% block content %}
-  <!-- Breadcrumb used on filtered views -->
-  <div class="p-3 md:p-0">
-    <a class="text-orange" href="{% if version_slug %}{% url 'libraries-by-version' version_slug %}{% else %}{% url 'libraries' %}{% endif %}">Libraries{% if version_name %} ({{ version.name }}){% endif %}</a> > <a class="text-orange" href="{% url 'libraries' %}">Specific</a> > <span class="capitalize">{{ object.name }}</span>
+  <!-- Breadcrumb -->
+  <div class="p-3 space-x-2 text-sm divide-x divide-gray-300 md:p-0">
+    <a class="hover:text-orange" href="/"><i class="fas fa-home"></i></a>
+    <a class="pl-2 hover:text-orange" href="{% if version_slug %}{% url 'libraries-by-version' version_slug %}{% else %}{% url 'libraries' %}{% endif %}">Libraries{% if version_name %} ({{ version.name }}){% endif %}</a>
+    <span class="pl-2 capitalize">{{ object.name }}</span>
   </div>
   <!-- end breadcrumb -->
 
   <div class="flex mt-4">
-    <div class="hidden md:block md:w-1/4">
-      <ul>
-        <li class="py-2"><a href="#overview">Overview</a></li>
-        <li class="py-2"><a href="#reviews">Reviews</a></li>
-        <li class="py-2"><a href="#discussion">Forum Discussion</a></li>
-      </ul>
-    </div>
 
-    <div class="px-3 mx-3 md:px-0 md:mx-0 md:w-3/4">
+    <div class="px-3 mx-3 w-full md:px-0 md:mx-0">
 
       <!-- Overview -->
-      <div class="pb-16 mb-16 border-b border-slate">
+      <div class="pb-16 mb-16">
         <div class="pb-6">
-          <h3 class="text-4xl capitalize" id="overview">{{ object.name }}</h3>
-        </div>
-        <p>{{ object.description }}</p>
-
-        <div class="mt-4 space-y-3 max-w-md text-sm uppercase md:flex md:mt-11 md:space-y-0 md:space-x-3">
-          <a href="#" class="inline-block py-3 px-6 rounded-md border text-orange border-slate">Documentation</a>
-          <a href="{{ object.github_url }}" class="inline-block py-3 px-6 rounded-md border text-orange border-slate">Github</a>
+          <h3 class="text-4xl capitalize text-orange" id="overview">
+            Boost.{{ object.name }}
+          </h3>
         </div>
 
-        <div class="justify-between py-6 mt-4 md:flex md:mt-11">
-          <div>
-            <h3 class="text-2xl">Categories</h3>
-            {% for c in object.categories.all %}
-              <a href="{% url 'libraries-by-category' category=c.slug %}" class="text-orange">{{ c.name }}</a>{% if not forloop.last %}, {% endif %}
-            {% endfor %}
-          </div>
+        <div class="p-4 bg-white rounded-lg divide-x divide-gray-200 md:flex">
+          <div class="pr-3 space-y-2 w-full md:w-1/4">
+              <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100" href="https://github.com/boostorg/smart_ptr">
+                <i class="float-right mt-3 fas fa-folder"></i>
+                Documentation
+                <span class="block text-xs text-sky-600">boost.org/libs/exception</span>
+              </a>
+              <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Github Issues <i class="float-right fas fa-bug"></i></a>
+              <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Source Code <i class="float-right fab fa-github"></i></a>
+              <a class="inline-block py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Since 2019</a>
+              <a class="inline-block float-right py-1 px-2 rounded cursor-pointer hover:bg-gray-100">C++11</a>
+              <span class="block py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Categories: <a class="text-sky-600">Memory</a></span>
 
-          <div>
-            <h3 class="text-2xl">Minimum C++ Version</h3>
-            {{ object.cpp_standard_minimum }}
+              <p class="pt-4 pl-2 mt-4 text-sm border-t border-gray-200">{{ object.description }}</p>
+            </ul>
           </div>
+          <div class="flex space-x-6 w-full md:w-3/4">
+            <div class="w-1/2">
+              <div id="chart1"></div>
+            </div>
 
-          <div>
-            <h3 class="text-2xl">Active Development</h3>
-            <div class="text-orange">{% if object.active_development %}Yes{% else %}No{% endif %}</div>
-            <p>Last Update: {{ object.last_github_update|date:"F j, Y"}}</p>
-          </div>
-        </div>
-
-        <div class="py-6 mt-4 md:mt-11">
-          <h3 class="mb-4 text-2xl">Level of Activity</h3>
-          <div class="h-6 rounded bg-charcoal">
-            <!-- TODO: Change the width to use a percent of activity -->
-            <div class="w-3/4 h-6 bg-gradient-to-r rounded from-green to-orange"></div>
-          </div>
-        </div>
-
-        <div class="py-6 my-4 md:flex md:justify-between md:my-11">
-          <div class="py-6">
-            <h3 class="mb-1 text-2xl">Closed Pull Requests</h3>
-            {{ closed_prs_count }}
-          </div>
-
-          <div class="py-6">
-            <h3 class="mb-1 text-2xl">Open Issues</h3>
-            {{ open_issues_count }}
-          </div>
-
-          <div class="py-6">
-            <h3 class="mb-1 text-2xl">Commits Per Release</h3>
-            <p>ZZ</p>
-          </div>
-        </div>
-
-        <div class="md:flex md:py-11 md:space-x-11">
-          <div class="py-6">
-            <h3 class="mb-4 text-2xl">Authors</h3>
-            <div class="space-y-3">
-              {% for author in object.authors.all %}
-                <div>
-                  {% if author.image %}
-                    <img src="{{ author.image.url }}" alt="user" class="inline mr-2 rounded w-[47px]" />
-                  {% else %}
-                    <i class="mr-2 text-5xl fas fa-user text-white/60"></i>
-                  {% endif %}
-                  {{ author.get_display_name }}
-                </div>
-              {% endfor %}
-            </div>
-          </div>
-          <div class="py-6">
-            <h3 class="mb-4 text-2xl">Maintainers</h3>
-            <div class="space-y-3">
-              {% for maintainer in maintainers.all %}
-                <div>
-                  {% if maintainer.image %}
-                    <img src="{{ maintainer.image.url }}" alt="user" class="inline mr-2 rounded w-[47px]" />
-                  {% else %}
-                    <i class="mr-2 text-5xl fas fa-user text-white/60"></i>
-                  {% endif %}
-                  {{ maintainer.get_display_name }}
-                </div>
-              {% endfor %}
+            <div class="w-1/2">
+              <div id="chart2"></div>
             </div>
           </div>
         </div>
+
+        <!-- Avatars -->
+        <div class="p-5 my-6 w-full">
+          Profile photos here
+        </div>
+
+
+        <div class="p-4 my-4 bg-white rounded-lg">
+          <h3>Introduction</h3>
+
+          <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.</p>
+
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+
+          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.</p>
+        </div>
       </div>
       <!-- end overview -->
-
-      <!-- Review -->
-      <div class="pb-16 mb-16 border-b border-slate">
-        <h3 class="text-4xl" id="reviews">Review</h3>
-        <p>Date of Review: 10/31/20</p>
-        <div class="justify-between mt-11 md:flex">
-          <div>
-            <h3 class="text-2xl">ACCEPT Reviews:</h3>
-            <p>15 <a href="#" class="text-orange">View List</a></p>
-            <h3 class="mt-5 text-2xl">REJECT Reviews:</h3>
-            <p>3 <a href="#" class="text-orange">View List</a></p>
-            <div class="mt-11"><a href="#" class="py-2 px-4 rounded-md border text-orange border-slate">Review Results</a></div>
-          </div>
-
-          <div class="py-11 md:py-0">
-            <h3 class="mb-4 text-2xl">Review Manager</h3>
-            <div class="space-y-3">
-              <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-5" /> Glen Fernandes</div>
-            </div>
-          </div>
-
-          <div class="py-3 md:py-0">
-            <h3 class="mb-4 text-2xl">Reviewers</h3>
-            <div class="space-y-3">
-              <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-5" /> Glen Fernandes</div>
-              <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-5" /> Glen Fernandes</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- end review -->
-
-      <!-- Discussions -->
-      <div class="pb-6">
-        <h3 class="mb-11 text-4xl" id="discussion">Discussions</h3>
-
-        <div class="py-5 px-3 my-4 rounded md:px-11 md:my-0 bg-charcoal">
-          <div class="flex justify-between mb-6">
-            <span class="inline py-1 px-3 w-auto text-lg uppercase rounded text-green bg-green/10">Forum Discussions</span>
-          </div>
-          <div class="space-y-8 divide-y divide-slate">
-            <div class="pt-6">
-              <h3 class="text-xl">Topic of discussion headline from the Forum</h3>
-              <div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
-            </div>
-            <div class="pt-6">
-              <h3 class="text-xl">Topic of discussion headline from the Forum</h3>
-              <div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
-            </div>
-            <div class="pt-6">
-              <h3 class="text-xl">Topic of discussion headline from the Forum</h3>
-              <div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
-            </div>
-            <div class="pt-6">
-              <h3 class="text-xl">Topic of discussion headline from the Forum</h3>
-              <div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- end discussions -->
     </div>
 
   </div>
 
 {% endblock %}
+
+{% block footer_js %}
+<script>
+  var options = {
+      series: [{
+      name: 'Commits',
+      data: [256, 255, 251, 260, 267, 230, 254, 242, 274, 265, 243, 234]
+    }],
+      chart: {
+      height: 350,
+      type: 'bar',
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 2,
+        dataLabels: {
+          position: 'top', // top, center, bottom
+        },
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function (val) {
+        //return val + "%";
+        return val;
+      },
+      offsetY: -20,
+      style: {
+        fontSize: '12px',
+        colors: ["#304758"]
+      }
+    },
+
+    xaxis: {
+      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+      position: 'top',
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      crosshairs: {
+        fill: {
+          type: 'gradient',
+          gradient: {
+            colorFrom: '#D8E3F0',
+            colorTo: '#BED1E6',
+            stops: [0, 100],
+            opacityFrom: 0.4,
+            opacityTo: 0.5,
+          }
+        }
+      },
+      tooltip: {
+        enabled: true,
+      }
+    },
+    yaxis: {
+      axisBorder: {
+        show: true
+      },
+      axisTicks: {
+        show: true,
+      },
+      labels: {
+        show: true,
+        formatter: function (val) {
+          //return val + "%";
+          return val;
+        }
+      }
+
+    },
+    title: {
+      text: 'Commits per Month',
+      floating: true,
+      offsetY: 330,
+      align: 'center',
+      style: {
+        color: '#444'
+      }
+    }
+  };
+
+
+
+  var options2 = {
+      series: [{
+      name: 'Commits',
+      data: [1367, 981, 400, 2235, 1888]
+    }],
+      chart: {
+      height: 350,
+      type: 'bar',
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 2,
+        dataLabels: {
+          position: 'top', // top, center, bottom
+        },
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function (val) {
+        //return val + "%";
+        return val;
+      },
+      offsetY: -20,
+      style: {
+        fontSize: '12px',
+        colors: ["#304758"]
+      }
+    },
+
+    xaxis: {
+      categories: ["2019", "2020", "2021", "2022", "2023"],
+      position: 'top',
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      crosshairs: {
+        fill: {
+          type: 'gradient',
+          gradient: {
+            colorFrom: '#D8E3F0',
+            colorTo: '#BED1E6',
+            stops: [0, 100],
+            opacityFrom: 0.4,
+            opacityTo: 0.5,
+          }
+        }
+      },
+      tooltip: {
+        enabled: true,
+      }
+    },
+    yaxis: {
+      axisBorder: {
+        show: true
+      },
+      axisTicks: {
+        show: true,
+      },
+      labels: {
+        show: true,
+        formatter: function (val) {
+          //return val + "%";
+          return val;
+        }
+      }
+
+    },
+    title: {
+      text: 'Commits per Year',
+      floating: true,
+      offsetY: 330,
+      align: 'center',
+      style: {
+        color: '#444'
+      }
+    }
+  };
+
+  var chart = new ApexCharts(document.querySelector("#chart1"), options);
+  chart.render();
+
+  var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
+  chart2.render();
+</script>
+{% endblock %}
diff --git a/templates/libraries/list.html b/templates/libraries/list.html
index 1dbfac80..e9c49758 100644
--- a/templates/libraries/list.html
+++ b/templates/libraries/list.html
@@ -4,27 +4,24 @@
 
 {% block content %}
   <!-- Breadcrumb used on filtered views -->
-  <div class="p-3 md:p-0">
+  <div class="p-3 space-x-2 text-sm divide-x divide-gray-300 md:p-0">
     {% if version_slug %}
-      <a class="text-orange" href="{% url 'libraries-by-version' version_slug %}">Libraries ({{ version_name }})</a>
-    {% else %}
-      <a class="text-orange" href="{% url 'libraries' %}">Libraries</a>
+      <a class="hover:text-orange" href="/"><i class="fas fa-home"></i></a>
+      <a class="pl-2 hover:text-orange" href="{% url 'libraries-by-version' version_slug %}">Libraries ({{ version_name }})</a>
     {% endif %}
     {% if category %} > Categorized >
-      <a class="text-orange" href="
-                                   {% if version_slug %}
-                                     {% url 'libraries-by-version-by-category' version_slug=version_slug category=category.slug%}
-                                   {% else %}
-                                     {% url 'libraries-by-category' category=category.slug %}
-                                   {% endif %}">{{ category.name }}</a>
+      <a class="pl-2 hover:text-orange" href="
+           {% if version_slug %}
+             {% url 'libraries-by-version-by-category' version_slug=version_slug category=category.slug%}
+           {% else %}
+             {% url 'libraries-by-category' category=category.slug %}
+           {% endif %}">{{ category.name }}</a>
     {% endif %}
   </div>
   <!-- end breadcrumb -->
-  <div class="py-0 px-3 mb-3 md:flex md:py-6 md:px-0" x-data="{'showSearch': false}" x-on:keydown.escape="showSearch=false">
-    <div class="px-3 md:px-0 md:w-1/2">
-      <h2 class="my-5 text-4xl">Libraries</h2>
-    </div>
-    <div class="mt-3 space-y-3 w-full md:mt-0 md:w-1/2 md:text-right">
+
+  <div class="py-0 px-3 mb-3 w-1/3 text-right md:px-0 md:pt-6" x-data="{'showSearch': false}" x-on:keydown.escape="showSearch=false">
+    <div class="mt-3 space-x-3 md:flex md:mt-0">
       <div class="relative md:mb-6">
         <span class="flex absolute inset-y-0 right-3 items-center pl-2">
           <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
@@ -32,7 +29,7 @@
           </button>
         </span>
         <input @click="showSearch = true; $nextTick(() => { setTimeout(() => { document.getElementById('q').focus(); }, 300);});"
-               type="search" name="q" class="py-2 px-3 w-full text-sm bg-white rounded-md border-gray-300 md:w-1/3 text-sky-600 dark:text-orange dark:border-slate dark:bg-charcoal focus:text-charcoal" type="text" value="" placeholder="Search Library" />
+               type="search" name="q" class="py-2 px-3 w-full text-sm bg-white rounded-md border-gray-300 md:w-1/3 min-w-[300px] text-sky-600 dark:text-orange dark:border-slate dark:bg-charcoal focus:text-charcoal" type="text" value="" placeholder="Search Libraries" />
       </div>
 
       <!-- Form to select a category -->