diff --git a/frontend/styles.css b/frontend/styles.css
index 71fd0b35..d6d08a75 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -48,4 +48,7 @@
   #signup_form input[type=password]{
     @apply rounded bg-charcoal text-white border border-slate w-full;
   }
+  #authpages #footerSignup {
+    @apply hidden;
+  }
 }
diff --git a/static/css/styles.css b/static/css/styles.css
index 224ff02d..b7ff3e62 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -699,6 +699,10 @@ input[type=file] {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+#authpages #footerSignup {
+  display: none;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1201,10 +1205,6 @@ input[type=file] {
   width: auto;
 }
 
-.w-1\/3 {
-  width: 33.333333%;
-}
-
 .w-1\/6 {
   width: 16.666667%;
 }
@@ -1225,6 +1225,10 @@ input[type=file] {
   width: 66.666667%;
 }
 
+.w-1\/3 {
+  width: 33.333333%;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -1241,14 +1245,14 @@ input[type=file] {
   width: 20%;
 }
 
-.w-\[200px\] {
-  width: 200px;
-}
-
 .w-1 {
   width: 0.25rem;
 }
 
+.w-\[200px\] {
+  width: 200px;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1331,10 +1335,6 @@ input[type=file] {
   align-items: center;
 }
 
-.justify-end {
-  justify-content: flex-end;
-}
-
 .justify-center {
   justify-content: center;
 }
@@ -1546,6 +1546,11 @@ input[type=file] {
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
 }
 
+.bg-orange {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 159 0 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1910,8 +1915,8 @@ input[type=file] {
   color: rgb(90 213 153 / var(--tw-text-opacity));
 }
 
-.text-white\/50 {
-  color: rgb(255 255 255 / 0.5);
+.text-white\/70 {
+  color: rgb(255 255 255 / 0.7);
 }
 
 .text-slate {
@@ -1934,19 +1939,10 @@ input[type=file] {
   color: rgb(181 201 211 / var(--tw-text-opacity));
 }
 
-.text-charcoal {
-  --tw-text-opacity: 1;
-  color: rgb(23 42 52 / var(--tw-text-opacity));
-}
-
 .text-white\/60 {
   color: rgb(255 255 255 / 0.6);
 }
 
-.text-white\/70 {
-  color: rgb(255 255 255 / 0.7);
-}
-
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2101,11 +2097,6 @@ input[type=file] {
     margin-bottom: 0px;
   }
 
-  .md\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   .md\:my-6 {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
@@ -2121,6 +2112,11 @@ input[type=file] {
     margin-bottom: 2.75rem;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:mt-3 {
     margin-top: 0.75rem;
   }
@@ -2185,10 +2181,6 @@ input[type=file] {
     width: 100%;
   }
 
-  .md\:w-1\/3 {
-    width: 33.333333%;
-  }
-
   .md\:w-5\/6 {
     width: 83.333333%;
   }
@@ -2217,6 +2209,10 @@ input[type=file] {
     width: 25%;
   }
 
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:w-auto {
     width: auto;
   }
@@ -2347,6 +2343,10 @@ input[type=file] {
     padding: 0px;
   }
 
+  .md\:p-5 {
+    padding: 1.25rem;
+  }
+
   .md\:px-11 {
     padding-left: 2.75rem;
     padding-right: 2.75rem;
diff --git a/templates/account/login.html b/templates/account/login.html
index 1236d6c3..2ccdf688 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -6,6 +6,8 @@
 
 {% block head_title %}{% trans "Login" %}{% endblock %}
 
+{% block body_id %}id="authpages"{% endblock %}
+
 {% block content %}
 
   <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
diff --git a/templates/account/signup.html b/templates/account/signup.html
index f49ff965..939d7415 100644
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -4,6 +4,8 @@
 
 {% block head_title %}{% trans "Signup" %}{% endblock %}
 
+{% block body_id %}id="authpages"{% endblock %}
+
 {% block content %}
 
   <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
diff --git a/templates/base.html b/templates/base.html
index 0a61bcc3..0a314e62 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,7 +32,7 @@
     </style>
   </head>
 
-  <body class="h-screen bg-black font-cairo">
+  <body class="h-screen bg-black font-cairo" {% block body_id %}{% endblock %}>
     <div class="container mx-auto">
       {% include "includes/_header.html" %}
 
diff --git a/templates/includes/_footer.html b/templates/includes/_footer.html
index 12c6f668..b7675523 100644
--- a/templates/includes/_footer.html
+++ b/templates/includes/_footer.html
@@ -2,7 +2,7 @@
 
 <footer class="my-5 md:my-6 mx-auto max-w-7xl px-4 sm:mt-24 py-5 md:py-4">
   {% if not request.user.is_authenticated %}
-  <div class="md:flex">
+  <div class="md:flex" id="footerSignup">
     <div class="text-left md:w-1/2 content-center gap-4 grid">
       <div>
         <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block xl:inline pt-6">
diff --git a/templates/libraries/_library_list_item.html b/templates/libraries/_library_list_item.html
index 3a76d797..f55af23d 100644
--- a/templates/libraries/_library_list_item.html
+++ b/templates/libraries/_library_list_item.html
@@ -1,23 +1,23 @@
 {% load static %}
 
-<div class="md:flex border-b border-slate py-4">
-  <div class="md:w-3/4 mb-4 space-y-2">
-    <h3 class="text-2xl mb-3">Accumulators</h3>
-    <p class="mb-3">Framework for incremental calculation, and collection of statistical accumulators.</p>
-    <div class="md:flex text-sm">
-      <div class="md:mr-11">First Release:  1.36.0</div>
-      <div>Categories:  <a href="#" class="text-orange">Math and Numerics</a></div>
-    </div>
-    <div class="text-sm">C++ Standard Minimum Level:  03</div>
-  </div>
-  <div class="md:w-1/4 mb-4 text-sm">
-    <div class="my-5 md:flex">
-      <div class="mr-5">Author(s):</div>
-      <div class="space-y-3">
-        <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /> Glen Fernandes</div>
-        <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /> Glen Fernandes</div>
-        <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /> Glen Fernandes</div>
+<div class="md:flex rounded bg-charcoal p-3 md:p-5">
+      <div class="md:w-3/4 mb-4 space-y-4 md:space-y-2">
+        <h3 class="text-2xl mb-3 capitalize"><a href="{% url 'library-detail' slug=library.slug %}">{{ library.name }}</a></h3>
+        <p class="mb-3">{{ library.description }}</p>
+        <div class="md:flex text-sm">
+          <div class="md:mr-11">First Release:  X.YY.Z</div>
+          <div class="mt-4 md:mt-0">Categories:  {% for c in library.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>
+        <div class="text-sm">C++ Standard Minimum Level:  {{ library.cpp_standard_minimum }}</div>
+      </div>
+      <div class="md:w-1/4 mb-4 text-sm">
+        <div class="my-5 flex">
+          <div class="md:mr-5 w-1/3">Author(s):</div>
+          <div class="space-y-3">
+            {% for author in library.authors.all %}
+              <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /> {{ author.get_full_name }}</div>
+            {% endfor %}
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</div>
diff --git a/templates/libraries/list.html b/templates/libraries/list.html
index 60d21da8..5e2ba24b 100644
--- a/templates/libraries/list.html
+++ b/templates/libraries/list.html
@@ -9,30 +9,9 @@
   </div>
   <!-- end breadcrumb -->
 
-  <div class="md:flex md:border-b md:border-slate py-0 md:py-6 mb-3 px-3 md:px-0">
+  <div class="md:flex py-0 md:py-6 mb-3 px-3 md:px-0">
     <div class="md:w-1/2 px-3 md:px-0">
       <h2 class="text-4xl my-5">Libraries</h2>
-      <div class="flex space-x-3 md:space-x-6 mb-6 md:mb-0">
-        <span>View by:</span>
-        <span>
-          <label>
-            <input type="checkbox" id="view" name="view" value="all" class="border rounded-sm bg-charcoal hover:bg-orange cursor-pointer checked:bg-orange mr-1 peer" />
-            <span class="peer-checked:text-orange">All</span>
-          </label>
-        </span>
-        <span>
-          <label>
-            <input type="checkbox" id="view" name="view" value="categorized" class="border rounded-sm bg-charcoal hover:bg-orange cursor-pointer checked:bg-orange mr-1 peer" />
-            <span class="peer-checked:text-orange">Categorized</span>
-          </label>
-        </span>
-        <span>
-          <label>
-            <input type="checkbox" id="view" name="view" value="condensed" class="border rounded-sm bg-charcoal hover:bg-orange cursor-pointer checked:bg-orange mr-1 peer" />
-            <span class="peer-checked:text-orange">Condensed</span>
-          </label>
-        </span>
-      </div>
     </div>
     <div class="w-full md:w-1/2 md:text-right space-y-3 mt-3 md:mt-0">
       <div class="relative md:mb-6">
@@ -45,50 +24,29 @@
       </div>
 
       <!-- Form to select a category -->
-      <form action="/libraries/" method="post">
+      <form action="/libraries/" method="post" x-ref="categoryform">
         {% csrf_token %}
         <div>
           <label for="id_categories" hidden="true">Categories:</label>
-          <select name="categories" class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-3 mr-3" id="id_categories">
+          <select x-on:input="$refs.categoryform.submit()" name="categories"
+                  class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-3 mr-3"
+                  id="id_categories"
+          >
             <option>Filter by category</option>
             {% for c in categories %}
               <option value="{{ c.pk }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
             {% endfor %}
           </select>
+          <button class="bg-orange rounded p-2" @click="$refs.categoryform.submit()">Go</button>
         </div>
-        <input type="submit" value="Submit" style="color: red">
       </form>
     </div>
   </div>
 
-  {% include "libraries/_alphabet_filter.html" %}
-
   <!-- Libraries list -->
-  <div class="rounded bg-charcoal p-3 md:p-11 mb-5 mx-3">
+  <div class="mb-5 space-y-3">
     {% for library in object_list %}
-
-    <div class="md:flex border-b border-slate last:border-0 py-4 my-6">
-      <div class="md:w-3/4 mb-4 space-y-4 md:space-y-2">
-        <h3 class="text-2xl mb-3 capitalize"><a href="{% url 'library-detail' slug=library.slug %}">{{ library.name }}</a></h3>
-        <p class="mb-3">{{ library.description }}</p>
-        <div class="md:flex text-sm">
-          <div class="md:mr-11">First Release:  X.YY.Z</div>
-          <div class="mt-4 md:mt-0">Categories:  {% for c in library.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>
-        <div class="text-sm">C++ Standard Minimum Level:  {{ library.cpp_standard_minimum }}</div>
-      </div>
-      <div class="md:w-1/4 mb-4 text-sm">
-        <div class="my-5 flex">
-          <div class="md:mr-5 w-1/3">Author(s):</div>
-          <div class="space-y-3">
-            {% for author in library.authors.all %}
-              <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /> {{ author.get_full_name }}</div>
-            {% endfor %}
-          </div>
-        </div>
-      </div>
-    </div>
-
+      {% include "libraries/_library_list_item.html" %}
     {% endfor %}
   </div>
   <!-- end libraries list -->