diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 00000000..8ede3d52
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,37 @@
+default_language_version:
+  python: python3.9
+
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.3.0
+    hooks:
+      - id: check-case-conflict
+      - id: check-merge-conflict
+      - id: check-yaml
+      - id: end-of-file-fixer
+      - id: trailing-whitespace
+  - repo: https://github.com/charliermarsh/ruff-pre-commit
+    rev: 'v0.0.263'
+    hooks:
+      - id: ruff
+  - repo: https://github.com/rtts/djhtml
+    rev: 'v2.0.0'
+    hooks:
+      - id: djhtml
+        entry: djhtml --tabwidth 2
+        files: .*/templates/.*\.html$
+        alias: autoformat
+  - repo: https://github.com/ambv/black
+    rev: 22.8.0
+    hooks:
+      - id: black
+  - repo: local
+    hooks:
+      - id: rustywind
+        name: rustywind Tailwind CSS class linter
+        language: node
+        additional_dependencies:
+          - rustywind@0.16.0
+        entry: rustywind
+        args: [ --write, templates ]
+        types_or: [ html ]
diff --git a/frontend/styles.css b/frontend/styles.css
index 55481e9b..bb37d346 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -9,7 +9,7 @@
   }
 
   body {
-    @apply text-charcoal dark:text-white;
+    @apply text-slate/80 dark:text-white;
     @apply font-cairo;
   }
   h1 {
@@ -41,20 +41,20 @@
   }
   /* Forum style overrides */
   textarea {
-    @apply w-full rounded bg-charcoal border border-slate;
+    @apply w-full rounded bg-white dark:bg-charcoal border border-slate;
   }
   input[type=email] {
-    @apply w-full rounded bg-charcoal border border-slate mt-3;
+    @apply w-full rounded bg-white dark:bg-charcoal border border-slate mt-3;
   }
   input[type=checkbox] {
-    @apply mr-3 rounded bg-charcoal border border-slate text-orange;
+    @apply mr-3 rounded bg-white dark:bg-charcoal border border-slate text-orange;
   }
   input[type=file] {
-    @apply block w-full px-3 py-1 text-base font-normal text-orange bg-clip-padding border border-solid border-slate rounded transition ease-in-out my-2;
+    @apply block w-full px-3 py-1 text-base text-slate dark:text-white font-normal text-orange bg-clip-padding border border-solid border-slate rounded transition ease-in-out my-2;
   }
   #signup_form input[type=email],
   #signup_form input[type=password]{
-    @apply rounded bg-charcoal text-white border border-slate w-full;
+    @apply rounded bg-white dark:bg-charcoal text-slate dark:text-white border border-slate w-full;
   }
   #authpages #footerSignup {
     @apply hidden;
diff --git a/package.json b/package.json
index 1e26a8ea..a91f64a2 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "autoprefixer": "^10.4.12",
     "cssnano": "^5.1.14",
     "htmx": "^0.0.2",
+    "rustywind": "^0.16.0",
     "tailwindcss": "^3.2.1"
   }
 }
diff --git a/pyproject.toml b/pyproject.toml
index 9d7aba75..a2402520 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -3,3 +3,5 @@ fail-under = 100
 quiet = false
 verbose = 2
 whitelist-regex = ["test_.*"]
+[tool.ruff]
+line-length = 88
diff --git a/static/css/styles.css b/static/css/styles.css
index 3ac530b2..30e8ea9c 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -587,8 +587,7 @@ select {
 }
 
 body {
-  --tw-text-opacity: 1;
-  color: rgb(23 42 52 / var(--tw-text-opacity));
+  color: rgb(49 74 87 / 0.8);
 }
 
 .dark body {
@@ -659,6 +658,11 @@ textarea {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.dark textarea {
   --tw-bg-opacity: 1;
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
 }
@@ -670,6 +674,11 @@ input[type=email] {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.dark input[type=email] {
   --tw-bg-opacity: 1;
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
 }
@@ -681,11 +690,16 @@ input[type=checkbox] {
   --tw-border-opacity: 1;
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(23 42 52 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 159 0 / var(--tw-text-opacity));
 }
 
+.dark input[type=checkbox] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 42 52 / var(--tw-bg-opacity));
+}
+
 input[type=file] {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -704,6 +718,7 @@ input[type=file] {
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 400;
+  color: rgb(49 74 87 / var(--tw-text-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 159 0 / var(--tw-text-opacity));
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
@@ -713,6 +728,11 @@ input[type=file] {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.dark input[type=file] {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 #signup_form input[type=email],
   #signup_form input[type=password] {
   width: 100%;
@@ -721,6 +741,14 @@ input[type=file] {
   --tw-border-opacity: 1;
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(49 74 87 / var(--tw-text-opacity));
+}
+
+.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));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -999,16 +1027,16 @@ input[type=file] {
   margin: 0px;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1099,10 +1127,6 @@ input[type=file] {
   margin-top: 1.25rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -1131,6 +1155,10 @@ input[type=file] {
   margin-right: 0.75rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -1613,6 +1641,11 @@ input[type=file] {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
 .divide-slate > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(49 74 87 / var(--tw-divide-opacity));
@@ -1740,6 +1773,21 @@ input[type=file] {
   border-color: rgb(90 213 153 / 0.4);
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -1759,6 +1807,11 @@ input[type=file] {
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .bg-green\/10 {
   background-color: rgb(90 213 153 / 0.1);
 }
@@ -1790,9 +1843,12 @@ input[type=file] {
   background-color: transparent;
 }
 
-.bg-slate {
-  --tw-bg-opacity: 1;
-  background-color: rgb(49 74 87 / var(--tw-bg-opacity));
+.bg-green\/30 {
+  background-color: rgb(90 213 153 / 0.3);
+}
+
+.bg-green\/20 {
+  background-color: rgb(90 213 153 / 0.2);
 }
 
 .bg-opacity-70 {
@@ -1961,6 +2017,10 @@ input[type=file] {
   padding-right: 0.5rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -2013,10 +2073,6 @@ input[type=file] {
   padding-left: 1.5rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2194,10 +2250,6 @@ input[type=file] {
   color: rgb(255 255 255 / 0.6);
 }
 
-.text-white\/70 {
-  color: rgb(255 255 255 / 0.7);
-}
-
 .text-slate\/80 {
   color: rgb(49 74 87 / 0.8);
 }
@@ -2252,6 +2304,10 @@ input[type=file] {
   color: rgb(181 201 211 / var(--tw-text-opacity));
 }
 
+.text-white\/70 {
+  color: rgb(255 255 255 / 0.7);
+}
+
 .text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -2426,6 +2482,11 @@ input[type=file] {
   display: none;
 }
 
+.dark .dark\:divide-slate > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(49 74 87 / var(--tw-divide-opacity));
+}
+
 .dark .dark\:border-slate {
   --tw-border-opacity: 1;
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
@@ -2441,6 +2502,15 @@ input[type=file] {
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-slate {
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 74 87 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-green\/10 {
+  background-color: rgb(90 213 153 / 0.1);
+}
+
 .dark .dark\:font-medium {
   font-weight: 500;
 }
@@ -2450,6 +2520,15 @@ input[type=file] {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-orange {
+  --tw-text-opacity: 1;
+  color: rgb(255 159 0 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-white\/70 {
+  color: rgb(255 255 255 / 0.7);
+}
+
 .dark .dark\:text-white\/50 {
   color: rgb(255 255 255 / 0.5);
 }
@@ -2486,11 +2565,6 @@ input[type=file] {
   color: rgb(147 197 253 / 0.6);
 }
 
-.dark .dark\:text-orange {
-  --tw-text-opacity: 1;
-  color: rgb(255 159 0 / var(--tw-text-opacity));
-}
-
 .dark .dark\:ring-gray-500 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
@@ -2616,14 +2690,14 @@ input[type=file] {
     margin-top: 0.75rem;
   }
 
-  .md\:mb-11 {
-    margin-bottom: 2.75rem;
-  }
-
   .md\:mt-5 {
     margin-top: 1.25rem;
   }
 
+  .md\:mb-11 {
+    margin-bottom: 2.75rem;
+  }
+
   .md\:mt-8 {
     margin-top: 2rem;
   }
@@ -2740,18 +2814,18 @@ input[type=file] {
     justify-content: space-between;
   }
 
-  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(1rem * var(--tw-space-x-reverse));
-    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .md\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.5rem * var(--tw-space-x-reverse));
diff --git a/templates/404.html b/templates/404.html
index e5193805..2d937eea 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -3,12 +3,12 @@
 {% block title %}Page Not Found{% endblock %}
 
 {% block content_wrapper %}
-<div class="flex mb-4 bg-red-600 justify-center items-center">
-    <h1 class="text-white text-5xl m-10">404 - Page Not Found</h1>
+<div class="flex justify-center items-center mb-4 bg-red-600">
+    <h1 class="m-10 text-5xl text-white">404 - Page Not Found</h1>
 </div>
-<div class="container mx-auto px-4 my-8">
+<div class="container px-4 my-8 mx-auto">
     <p class="text-2xl text-center">
         The page you requested was not found on this site.
     </p>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/500.html b/templates/500.html
index 851bfa6b..5cf05d80 100644
--- a/templates/500.html
+++ b/templates/500.html
@@ -3,12 +3,12 @@
 {% block title %}Server Error{% endblock %}
 
 {% block content_wrapper %}
-<div class="flex mb-4 bg-red-600 justify-center items-center">
-    <h1 class="text-white text-5xl m-10">500 - Server Error</h1>
+<div class="flex justify-center items-center mb-4 bg-red-600">
+    <h1 class="m-10 text-5xl text-white">500 - Server Error</h1>
 </div>
-<div class="container mx-auto px-4 my-8">
+<div class="container px-4 my-8 mx-auto">
     <p class="text-2xl text-center">
         There was a problem building the page you requested.
     </p>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/account/login.html b/templates/account/login.html
index 5df0436f..f892c49c 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -10,28 +10,28 @@
 
 {% block content %}
 
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:flex md:space-x-6 mt-1">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="mt-1 md:flex md:space-x-6">
 
-      <div class="md:w-1/2 md:mt-11 md:pt-11" x-data="{ tab: '#social' }">
+      <div class="md:pt-11 md:mt-11 md:w-1/2" x-data="{ tab: '#social' }">
         <div class="md:w-full">
           <h1 class="text-4xl text-center">{% trans "Log In" %}</h1>
         </div>
 
-        <div class="w-full space-y-4 text-center">
+        <div class="space-y-4 w-full text-center">
           {% get_providers as socialaccount_providers %}
 
           {% if socialaccount_providers %}
-          <p class="text-center mt-0">
+          <p class="mt-0 text-center">
             {% blocktrans with site.name as site_name %}
-              <a :class="tab === '#social' ? 'text-white' : 'text-orange'"
+              <a :class="tab === '#social' ? 'text-slate dark:text-white' : 'text-orange'"
                  href="#"
                  data-toggle="tab"
                  x-on:click.prevent="tab='#social'"
               >
                 Log in with one of your existing third party accounts<br />
               </a> or you can
-              <a :class="tab === '#email' ? 'text-white' : 'text-orange'"
+              <a :class="tab === '#email' ? 'text-slate dark:text-white' : 'text-orange'"
                  href="#"
                  data-toggle="tab"
                  x-on:click.prevent="tab='#email'"
@@ -51,20 +51,20 @@
           </div>
 
           {% else %}
-            <p class="text-center mt-0">{% blocktrans %}If you have not created an account yet, then please
+            <p class="mt-0 text-center">{% blocktrans %}If you have not created an account yet, then please
             <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
           {% endif %}
 
           <div x-show="tab == '#email'" x-cloak>
             <form class="login" method="POST" action="{% url 'account_login' %}">
-              <div class="w-2/3 mx-auto space-y-4" id="signup_form">
+              <div class="mx-auto space-y-4 w-2/3" id="signup_form">
                 {% csrf_token %}
 
                 {% for field in form.visible_fields %}
                   <div>
                     {% if field.label == "E-mail" or field.label == "Password" %}
                       {% else %}
-                    <label class="uppercase text-white/70 text-xs">{{ field.label }}</label>
+                    <label class="text-xs uppercase text-slate dark:text-white/70">{{ field.label }}</label>
                     {% endif %}
                     {{ field }}
                     {% if field.help_text %}
@@ -77,9 +77,9 @@
                 <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
                 {% endif %}
 
-                <div class="mb-4 flex justify-between">
+                <div class="flex justify-between mb-4">
                   <a class="text-orange" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
-                  <button type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm">{% trans "Login" %}</button>
+                  <button type="submit" class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange">{% trans "Login" %}</button>
                 </div>
               </div>
             </form>
diff --git a/templates/account/password_reset.html b/templates/account/password_reset.html
index b2bca96a..3fba7c50 100644
--- a/templates/account/password_reset.html
+++ b/templates/account/password_reset.html
@@ -6,7 +6,7 @@
 {% block head_title %}{% trans "Password Reset" %}{% endblock %}
 
 {% block content %}
-<div class="text-center my-6">
+<div class="my-6 text-center">
   <div class="py-6">
     <h1 class="text-4xl">{% trans "Password Reset" %}</h1>
     {% if user.is_authenticated %}
@@ -17,11 +17,11 @@
 
     <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
         {% csrf_token %}
-        <div class="w-full md:w-1/2 mx-auto">
+        <div class="mx-auto w-full md:w-1/2">
           {{ form.as_p }}
           <input type="submit"
                  value="{% trans 'Reset My Password' %}"
-                 class="border border-orange py-3 px-4 rounded text-orange uppercase"
+                 class="py-3 px-4 uppercase rounded border border-orange text-orange"
           />
         </div>
     </form>
diff --git a/templates/account/signup.html b/templates/account/signup.html
index ec300a2c..2c0354fb 100644
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -10,10 +10,10 @@
 
 {% block content %}
 
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:flex md:space-x-6 mt-1">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="mt-1 md:flex md:space-x-6">
 
-      <div class="md:w-1/2 md:mt-11 md:pt-11" x-data="{ tab: '#social' }">
+      <div class="md:pt-11 md:mt-11 md:w-1/2" x-data="{ tab: '#social' }">
         <div class="md:w-full">
           <h1 class="text-4xl text-center">{% trans "Sign Up" %}</h1>
           <p class="mt-0 text-center">
@@ -21,16 +21,16 @@
           </p>
         </div>
 
-        <div class="w-full space-y-4 text-center">
-          <p class="text-center mt-0">
-              <a :class="tab === '#social' ? 'text-white' : 'text-orange'"
+        <div class="space-y-4 w-full text-center">
+          <p class="mt-0 text-center">
+              <a :class="tab === '#social' ? 'text-slate dark:text-white' : 'text-orange'"
                  href="#"
                  data-toggle="tab"
                  x-on:click.prevent="tab='#social'"
               >
                 Sign Up with one of your existing third party accounts<br />
               </a> or you can
-              <a :class="tab === '#email' ? 'text-white' : 'text-orange'"
+              <a :class="tab === '#email' ? 'text-slate dark:text-white' : 'text-orange'"
                  href="#"
                  data-toggle="tab"
                  x-on:click.prevent="tab='#email'"
@@ -51,12 +51,12 @@
 
           <div x-show="tab == '#email'" x-cloak>
             <form id="signup_form" method="post" action="{% url 'account_signup' %}">
-              <div class="space-y-4 w-2/3 mx-auto">
+              <div class="mx-auto space-y-4 w-2/3">
                 {% csrf_token %}
 
                 {% if form.errors %}
                   {% for error in field.errors %}
-                    <p class="text-orange font-bold">
+                    <p class="font-bold text-orange">
                       {{ error|escape }}
                     </p>
                   {% endfor %}
@@ -77,7 +77,7 @@
               </div>
               <div class="my-11">
                 <button type="submit"
-                        class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm"
+                        class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange"
                 >
                   {% trans "Sign Up" %}
                 </button>
diff --git a/templates/base.html b/templates/base.html
index e1cf56a3..4f42031c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -39,7 +39,7 @@
             if (m !== 'dark' && m !== 'light') return;
             mode = m;
         }"
-        class="h-screen bg-stone/60 dark:bg-black font-cairo" {% block body_id %}{% endblock %}>
+        class="h-screen dark:bg-black bg-stone/60 font-cairo" {% block body_id %}{% endblock %}>
     <div class="container mx-auto">
       {% include "includes/_header.html" %}
 
diff --git a/templates/board_base.html b/templates/board_base.html
index a393e59f..f4123754 100644
--- a/templates/board_base.html
+++ b/templates/board_base.html
@@ -22,11 +22,11 @@
 {#  </button>#}
 {#  <div class="collapse navbar-collapse" id="navbarSupportedContent">#}
 {#    {% block header_collapse %}#}
-{#    <form class="form-inline my-2 ml-3 my-lg-0" role="search" action="{% url 'forum_search:search' %}">#}
+{#    <form class="my-2 ml-3 form-inline my-lg-0" role="search" action="{% url 'forum_search:search' %}">#}
 {#      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="q">#}
-{#      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">{% trans "Search" %}</button>#}
+{#      <button class="my-2 btn btn-outline-light my-sm-0" type="submit">{% trans "Search" %}</button>#}
 {#    </form>#}
-{#    <div class="navbar-nav mr-auto">#}
+{#    <div class="mr-auto navbar-nav">#}
 {#      <a class="nav-item nav-link" href="{% url 'forum_search:search' %}">{% trans "Advanced search" %}</a>#}
 {#    </div>#}
 {#    {% endblock header_collapse %}#}
@@ -34,20 +34,20 @@
 {#</nav>#}
 {#{% endblock header %}#}
 
-<div class="my-5 container" id="main_container">
+<div class="container my-5" id="main_container">
   <div class="flex w-full">
-    <div class="w-1/2 pl-11">
+    <div class="pl-11 w-1/2">
       {% block breadcrumb %}{% include "partials/breadcrumb.html" %}{% endblock breadcrumb %}
     </div>
-    <div class="w-1/2 text-right controls-link-wrapper pr-11">
+    <div class="pr-11 w-1/2 text-right controls-link-wrapper">
       {% spaceless %}
       {% if not request.user.is_anonymous %}
-        <a href="{% url 'forum_member:user_subscriptions' %}" class="uppercase text-sm"><img src="{% static 'img/icons/icon_subscription.svg' %}" class="inline mr-2" />{% trans "Subscriptions" %}</a>
-        <a href="{% url 'forum_member:user_posts' request.user.id %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_my_posts.svg' %}" class="inline mr-2" />{% trans "View my posts" %}</a>
+        <a href="{% url 'forum_member:user_subscriptions' %}" class="text-sm uppercase"><img src="{% static 'img/icons/icon_subscription.svg' %}" class="inline mr-2" />{% trans "Subscriptions" %}</a>
+        <a href="{% url 'forum_member:user_posts' request.user.id %}" class="ml-11 text-sm uppercase"><img src="{% static 'img/icons/icon_my_posts.svg' %}" class="inline mr-2" />{% trans "View my posts" %}</a>
       {% endif %}
       {% get_permission 'can_access_moderation_queue' request.user as can_access_moderation_queue %}
       {% if can_access_moderation_queue %}
-        <a href="{% url 'forum_moderation:queue' %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_gavel.svg' %}" class="inline mr-2" />{% trans "Moderation queue" %}</a>
+        <a href="{% url 'forum_moderation:queue' %}" class="ml-11 text-sm uppercase"><img src="{% static 'img/icons/icon_gavel.svg' %}" class="inline mr-2" />{% trans "Moderation queue" %}</a>
       {% endif %}
       {% endspaceless %}
     </div>
diff --git a/templates/boost/about.html b/templates/boost/about.html
index ed3495c7..505c1d2f 100644
--- a/templates/boost/about.html
+++ b/templates/boost/about.html
@@ -3,16 +3,16 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
-    <a href="{% url 'boost-about' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">About</a>
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
+    <a href="{% url 'boost-about' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">About</a>
     <a href="{% url 'boost-people' %}" class="block md:inline">People</a>
     <a href="{% url 'boost-moderators' %}" class="block md:inline">Moderators</a>
   </div>
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0 flex">
-    <div class="w-1/6 hidden md:block">
+  <div class="flex py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="hidden w-1/6 md:block">
       <ul class="py-8 space-y-4">
         <li><a href="#overview" class="text-orange">Overview</a></li>
         <li><a href="#whosUsingBoost">Who's Using Boost</a></li>
@@ -24,12 +24,12 @@
 
     <div class="w-full md:w-5/6">
 
-      <div class="md:flex md:w-full py-8 md:space-x-18" id="overview">
-        <div class="w-3/4 mx-auto md:w-1/2 md:text-right order-1 md:order-2 mb-6">
+      <div class="py-8 md:flex md:w-full md:space-x-18" id="overview">
+        <div class="order-1 mx-auto mb-6 w-3/4 md:order-2 md:w-1/2 md:text-right">
           <img src="{% static 'img/icons/graphic_stairs.svg' %}" class="md:float-right" />
         </div>
 
-        <div class="md:w-1/2 align-middle md:py-11 md:pr-11">
+        <div class="align-middle md:py-11 md:pr-11 md:w-1/2">
           <h2>The Boost C++ Libraries are a collection of modern libraries based on the C++ standard.</h2>
 
           <p>
@@ -40,10 +40,10 @@
         </div>
       </div>
 
-      <div class="hidden md:block my-6 border-b border-slate"></div>
+      <div class="hidden my-6 border-b md:block border-slate"></div>
 
       <div class="space-y-11">
-        <div class="border-b border-slate py-2 md:py-6" id="whosUsingBoost">
+        <div class="py-2 border-b md:py-6 border-slate" id="whosUsingBoost">
           <h2>Who's Using Boost?</h2>
 
           <p>
@@ -60,7 +60,7 @@
             please contact the <a href="{% url 'boost-moderators' %}" class="text-orange">Boost Moderators</a>.
           </p>
 
-          <h3 class="text-orange py-5">Open Source Boost</h3>
+          <h3 class="py-5 text-orange">Open Source Boost</h3>
           <p>
             Boost is used in a variety of Open Source Projects, both applications and libraries. Indeed many Open Source
             libraries developed around Boost have in the past been judged of high enough quality to be absorbed into the
@@ -69,13 +69,13 @@
             interest you'll find something of value in Boost.
           </p>
 
-          <h3 class="text-orange py-5">In House Boost</h3>
+          <h3 class="py-5 text-orange">In House Boost</h3>
           <p>
             Whether you're a government department, an internet startup, or a specialist consultancy, in-house developement
             using the Boost Libraries can significantly shorten your development cycles.
           </p>
 
-          <h3 class="text-orange py-5">Shrink Wrap Boost</h3>
+          <h3 class="py-5 text-orange">Shrink Wrap Boost</h3>
           <p>
             Boost has found it's way into many products that are available "off the shelf", including consumer
             applications from Adobe, through to business middleware from SAP.
@@ -84,7 +84,7 @@
 
         </div>
 
-        <div class="border-b border-slate py-2 md:py-6" id="mission">
+        <div class="py-2 border-b md:py-6 border-slate" id="mission">
           <h2>Mission</h2>
           <p>
             The Boost mission is threefold: (a) develop high-quality, expert+reviewed, open-source C++ libraries,
@@ -95,7 +95,7 @@
           </p>
         </div>
 
-        <div class="border-b border-slate py-2 md:py-6" id="history">
+        <div class="py-2 border-b md:py-6 border-slate" id="history">
           <h2>History</h2>
           <p>
             Beman Dawes and Robert Klarer developed the idea for the web site during a series of corridor
@@ -108,7 +108,7 @@
           </p>
         </div>
 
-        <div class="border-b border-slate py-2 md:py-6" id="board">
+        <div class="py-2 border-b md:py-6 border-slate" id="board">
           <h2>Boost Foundation Board of Directors</h2>
           <p>
             After being a project of Software Freedom Conservancy for over a decade, Boost has spun-off into it owns
@@ -121,7 +121,7 @@
           </p>
 
           <div class="my-11">
-            <a href="#" class="uppercase text-orange border border-slate rounded-md py-2 px-4 text-base">Learn More</a>
+            <a href="#" class="py-2 px-4 text-base uppercase rounded-md border text-orange border-slate">Learn More</a>
           </div>
         </div>
       </div>
diff --git a/templates/boost/moderators.html b/templates/boost/moderators.html
index f4d13fda..6ccee5ed 100644
--- a/templates/boost/moderators.html
+++ b/templates/boost/moderators.html
@@ -3,23 +3,23 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
     <a href="{% url 'boost-about' %}" class="block md:inline">About</a>
     <a href="{% url 'boost-people' %}" class="block md:inline">People</a>
-    <a href="{% url 'boost-moderators' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Moderators</a>
+    <a href="{% url 'boost-moderators' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Moderators</a>
   </div>
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:w-full py-16">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="py-16 md:w-full">
       <h1 class="text-4xl text-center">Boost Moderators</h1>
-      <p class="text-center mt-0">
+      <p class="mt-0 text-center">
         These are some of the collaborative experts behind Boost!
       </p>
     </div>
 
-    <div class="my-6 border-t border-b border-slate py-5">
+    <div class="py-5 my-6 border-t border-b border-slate">
       <div class="grid grid-rows-5 grid-flow-col gap-4 text-sm">
         {% for i in range %}
           {% include 'boost/_person.html' %}
diff --git a/templates/boost/people.html b/templates/boost/people.html
index bca1f6b5..9581d468 100644
--- a/templates/boost/people.html
+++ b/templates/boost/people.html
@@ -3,23 +3,23 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
     <a href="{% url 'boost-about' %}" class="block md:inline">About</a>
-    <a href="{% url 'boost-people' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">People</a>
+    <a href="{% url 'boost-people' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">People</a>
     <a href="{% url 'boost-moderators' %}" class="block md:inline">Moderators</a>
   </div>
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:w-full py-16">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="py-16 md:w-full">
       <h1 class="text-4xl text-center">Boost People</h1>
-      <p class="text-center mt-0">
+      <p class="mt-0 text-center">
         These are some of the collaborative experts behind Boost!
       </p>
     </div>
 
-    <div class="my-6 border-t border-b border-slate py-5">
+    <div class="py-5 my-6 border-t border-b border-slate">
       <div class="grid grid-rows-5 grid-flow-col gap-4 text-sm">
         {% for i in range %}
           {% include 'boost/_person.html' %}
diff --git a/templates/boost/people_detail.html b/templates/boost/people_detail.html
index d2e6dbc8..00846342 100644
--- a/templates/boost/people_detail.html
+++ b/templates/boost/people_detail.html
@@ -9,8 +9,8 @@
   </div>
   <!-- end breadcrumb -->
 
-  <div class="py-0 mb-3 px-3 md:px-0">
-    <div class="flex py-16 border-b border-slate py-8 my-5 ">
+  <div class="py-0 px-3 mb-3 md:px-0">
+    <div class="flex py-8 py-16 my-5 border-b border-slate">
       <div class="w-1/2">
         <h1 class="text-4xl">Dave Abrahams</h1>
         <p>
@@ -38,12 +38,12 @@
 
     </div>
 
-    <div class="flex my-16 block">
+    <div class="block flex my-16">
       <div class="w-1/2 text-left">
-        <a href="#" class="uppercase px-4 py-2 border border-slate text-sm font-medium rounded-md text-orange">< Previous</a>
+        <a href="#" class="py-2 px-4 text-sm font-medium uppercase rounded-md border border-slate text-orange">< Previous</a>
       </div>
       <div class="w-1/2 text-right">
-        <a href="#" class="uppercase px-4 py-2 border border-slate text-sm font-medium rounded-md text-orange">Next ></a>
+        <a href="#" class="py-2 px-4 text-sm font-medium uppercase rounded-md border border-slate text-orange">Next ></a>
       </div>
     </div>
 
diff --git a/templates/docs_temp.html b/templates/docs_temp.html
index 04008069..2d2752da 100644
--- a/templates/docs_temp.html
+++ b/templates/docs_temp.html
@@ -8,19 +8,19 @@ This is a temporary landing page for docs
 
 {% block content %}
   <!-- Homepage Hero Section -->
-  <main class="my-4 mx-auto md:max-w-7xl px-4">
-    <div class="md:flex md:space-x-4 space-y-4 md:space-y-0 mb-4">
+  <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="w-full md:w-1/2 block rounded-lg bg-white dark:bg-charcoal shadow-lg dark:bg-neutral-700 relative text-white">
-        <a href="#" class="rounded bg-orange text-white py-3 px-4 absolute top-5 right-10 shadow-md">New Here?</a>
+        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
-            class="rounded-t-lg w-full max-h-[470px] overflow-y-hidden"
+            class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
             src="{% static 'img/fpo/guide.jpg' %}"
             alt="" />
         </a>
-        <div class="px-6 py-3 text-slate dark:text-white">
+        <div class="py-3 px-6 dark:text-white text-slate">
           <h5
             class="text-xl font-bold leading-tight text-orange">
             User Guide
@@ -44,15 +44,15 @@ This is a temporary landing page for docs
       </div>
 
       <div
-        class="w-full md:w-1/2 block rounded-lg bg-white dark:bg-charcoal shadow-lg dark:bg-neutral-700 relative">
+        class="block relative w-full bg-white rounded-lg shadow-lg md:w-1/2 dark:bg-charcoal dark:bg-neutral-700">
         {# FIXME #}
         <a href="/doc/contributor-guide/">
           <img
-            class="rounded-t-lg w-full max-h-[470px] overflow-y-hidden"
+            class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
             src="{% static 'img/fpo/man-tree.jpeg' %}"
             alt="" />
         </a>
-        <div class="px-6 py-3 text-slate dark:text-white">
+        <div class="py-3 px-6 dark:text-white text-slate">
           <h5
             class="text-xl font-bold leading-tight text-orange">
             Contributor Guide
@@ -78,20 +78,20 @@ This is a temporary landing page for docs
 
     <div class="mb-16 space-y-4">
       <div
-        class="flex flex-col rounded-lg bg-white dark:bg-charcoal shadow-lg text-white dark:bg-neutral-700 md:flex-row">
+        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/">
           <img
-            class="h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
+            class="object-cover w-full h-96 rounded-t-lg md:w-48 md:h-auto md:rounded-none md:rounded-l-lg"
             src="{% static 'img/fpo/clipboardman.jpeg' %}"
             alt="" />
         </a>
-        <div class="flex flex-col justify-start p-6 text-slate dark:text-white">
+        <div class="flex flex-col justify-start p-6 dark:text-white text-slate">
           <h5
             class="text-xl font-bold leading-tight">
             Boost Formal Reviews
           </h5>
-          <p class="mb-4 py-1 text-base">
+          <p class="py-1 mb-4 text-base">
             How libraries become part of the collection.
           </p>
           <ul class="flex flex-wrap">
@@ -105,13 +105,13 @@ This is a temporary landing page for docs
       </div>
 
       <div
-        class="flex flex-col rounded-lg bg-white dark:bg-charcoal shadow-lg dark:bg-neutral-700 md:flex-row">
-        <div class="flex flex-col justify-start p-6 w-full text-slate dark:text-white">
+        class="flex flex-col bg-white rounded-lg shadow-lg md:flex-row dark:bg-charcoal dark:bg-neutral-700">
+        <div class="flex flex-col justify-start p-6 w-full dark:text-white text-slate">
           <h5
             class="text-xl font-bold leading-tight">
             Release Process
           </h5>
-          <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200 py-1">
+          <p class="py-1 mb-4 text-base text-neutral-600 dark:text-neutral-200">
             "The trains always run on time"
           </p>
           <ul class="flex flex-wrap">
@@ -126,7 +126,7 @@ This is a temporary landing page for docs
         {# FIXME #}
         <a href="/doc/release-process/">
         <img
-          class="h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-r-lg"
+          class="object-cover w-full h-96 rounded-t-lg md:w-48 md:h-auto md:rounded-none md:rounded-r-lg"
           src="{% static 'img/fpo/construction.png' %}"
           alt="" />
         </a>
diff --git a/templates/donate/donate.html b/templates/donate/donate.html
index a1a50ec4..4b6f8cb0 100644
--- a/templates/donate/donate.html
+++ b/templates/donate/donate.html
@@ -3,8 +3,8 @@
 {% load static %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:w-full py-16">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="py-16 md:w-full">
       <h1 class="text-4xl">Donate to the Boost C++ Libraries</h1>
 
       <p>
diff --git a/templates/forum/forum_detail.html b/templates/forum/forum_detail.html
index d2c229a2..c9d2cf8c 100644
--- a/templates/forum/forum_detail.html
+++ b/templates/forum/forum_detail.html
@@ -9,14 +9,14 @@
 {% block sub_title %}{{ forum.name }}{% endblock sub_title %}
 
 {% block content %}
-<div class="flex flex-wrap ">
+<div class="flex flex-wrap">
   <div class="w-full">
     <h1 class="text-4xl">{{ forum.name }}</h1>
   </div>
 </div>
 {% if sub_forums %}
-<div class="flex flex-wrap ">
-  <div class="forumlist-top-controls w-full">
+<div class="flex flex-wrap">
+  <div class="w-full forumlist-top-controls">
     {% if request.user.is_authenticated %}
     <div class="float-right">
       <a href="{% url 'forum_tracking:mark_subforums_read' forum.pk %}" class="inline-block"><i class="fa fa-check-circle-o">&nbsp;</i>{% trans "Mark subforums read" %}</a>
@@ -27,17 +27,17 @@
 {% forum_list sub_forums %}
 {% endif %}
 {% if forum.is_forum %}
-<div class="mt-4 mb-3 flex flex-wrap">
-  <div class="w-1/4 pr-4 pl-4 forum-actions-block">
+<div class="flex flex-wrap mt-4 mb-3">
+  <div class="pr-4 pl-4 w-1/4 forum-actions-block">
     {% get_permission 'can_add_topic' forum request.user as user_can_add_topic %}
     {% if user_can_add_topic %}
-    <a href="{% url 'forum_conversation:topic_create' forum.slug forum.pk %}" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4">{% trans "New topic" %}</a>
+    <a href="{% url 'forum_conversation:topic_create' forum.slug forum.pk %}" class="py-3 px-8 text-base font-medium rounded-md border md:py-1 md:px-4 md:text-lg border-orange text-orange">{% trans "New topic" %}</a>
     {% endif %}
   </div>
-  <div class="w-full md:w-2/3 pr-4 pl-4">
+  <div class="pr-4 pl-4 w-full md:w-2/3">
     {% if topics|length > 0 and request.user.is_authenticated %}
     <div class="float-left">
-      <a href="{% url 'forum_tracking:mark_topics_read' forum.pk %}" class="my-1 inline-block uppercase text-sm">{% trans "Mark topics read" %}</a>
+      <a href="{% url 'forum_tracking:mark_topics_read' forum.pk %}" class="inline-block my-1 text-sm uppercase">{% trans "Mark topics read" %}</a>
     </div>
     {% endif %}
     {% with "pagination-sm justify-content-end" as pagination_size %}
@@ -53,16 +53,16 @@
 {% with topic_list_title=topics_title_trans unread_topics=unread_topics%}
 {% include "forum_conversation/topic_list.html" %}
 {% endwith %}
-<div class="mt-3 mb-5 flex flex-wrap ">
-  <div class="w-1/4 pr-4 pl-4 forum-actions-block">
+<div class="flex flex-wrap mt-3 mb-5">
+  <div class="pr-4 pl-4 w-1/4 forum-actions-block">
     {% if user_can_add_topic %}
-    <a href="{% url 'forum_conversation:topic_create' forum.slug forum.pk %}" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4">{% trans "New topic" %}</a>
+    <a href="{% url 'forum_conversation:topic_create' forum.slug forum.pk %}" class="py-3 px-8 text-base font-medium rounded-md border md:py-1 md:px-4 md:text-lg border-orange text-orange">{% trans "New topic" %}</a>
     {% endif %}
   </div>
-  <div class="w-full md:w-2/3 pr-4 pl-4">
+  <div class="pr-4 pl-4 w-full md:w-2/3">
     {% if topics|length > 0 and request.user.is_authenticated %}
     <div class="float-left">
-      <a href="{% url 'forum_tracking:mark_topics_read' forum.pk %}" class="my-1 inline-block uppercase text-sm">{% trans "Mark topics read" %}</a>
+      <a href="{% url 'forum_tracking:mark_topics_read' forum.pk %}" class="inline-block my-1 text-sm uppercase">{% trans "Mark topics read" %}</a>
     </div>
     {% endif %}
     {% with "pagination-sm justify-content-end" as pagination_size %}
diff --git a/templates/forum/forum_list.html b/templates/forum/forum_list.html
index de07ee0d..2ac12d3f 100644
--- a/templates/forum/forum_list.html
+++ b/templates/forum/forum_list.html
@@ -5,47 +5,47 @@
 {% load forum_member_tags %}
 {% load forum_tracking_tags %}
 
-<div class="flex flex-wrap ">
+<div class="flex flex-wrap">
   <div class="w-full">
     {% if forum_contents.nodes %}
     {% recurseforumcontents forum_contents %}
     {% if node.level == root_level %}
     {% if node.obj.is_category %}
-    <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-charcoal border-1 border-slate forumlist rounded">
-      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-gray-300 ">
-        <div class="flex m-0 px-3 py-2 border-b border-slate">
-          <div class="pl-0 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-full forum-name-col">
+    <div class="flex relative flex-col mt-3 min-w-0 break-words rounded border bg-charcoal border-1 border-slate forumlist">
+      <div class="p-0 py-3 px-6 mb-0 border-gray-300 border-b-1">
+        <div class="flex py-2 px-3 m-0 border-b border-slate">
+          <div class="pr-4 pl-0 pl-4 w-full sm:w-3/4 forum-name-col">
             <h3 class="m-0 mb-3 h5"><a href="{% url 'forum:forum' node.obj.slug node.obj.id %}">{{ node.obj.name }}</a></h3>
           </div>
-          <div class="pr-4 pl-4 hidden md:block text-center whitespace-no-wrap forum-count-col">{% trans "Topics" %}</div>
-          <div class="pr-4 pl-4 hidden md:block text-center whitespace-no-wrap forum-count-col">{% trans "Posts" %}</div>
-          <div class="pr-0 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 hidden sm:block whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
+          <div class="hidden pr-4 pl-4 text-center md:block whitespace-no-wrap forum-count-col">{% trans "Topics" %}</div>
+          <div class="hidden pr-4 pl-4 text-center md:block whitespace-no-wrap forum-count-col">{% trans "Posts" %}</div>
+          <div class="hidden pr-0 pr-4 pl-4 sm:block sm:w-1/4 whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
         </div>
       </div>
-      <div class="p-0 flex-auto p-6">
+      <div class="flex-auto p-0 p-6">
         {{ children }}
       </div>
     </div>
     {% else %}
     {% with node.previous_sibling.obj as previous_sibling %}
     {% if previous_sibling and previous_sibling.is_category or not previous_sibling in forum_contents.visible_forums or not previous_sibling %}
-    <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-charcoal border-1 border-slate forumlist">
-      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-slate ">
-        <div class="flex m-0 px-3 py-2 border-b border-slate">
+    <div class="flex relative flex-col mt-3 min-w-0 break-words rounded border bg-charcoal border-1 border-slate forumlist">
+      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-slate">
+        <div class="flex py-2 px-3 m-0 border-b border-slate">
           <div class="pl-0 w-3/4 forum-name-col">
-            <h3 class="m-0 mb-3 h5 ">{% trans "Forums" %}</h3>
+            <h3 class="m-0 mb-3 h5">{% trans "Forums" %}</h3>
           </div>
-          <div class="pr-4 pl-4 hidden md:block text-center whitespace-no-wrap forum-count-col w-25">{% trans "Topics" %}</div>
-          <div class="pr-4 pl-4 hidden md:block text-center whitespace-no-wrap forum-count-col w-25">{% trans "Posts" %}</div>
-          <div class="pr-0  pr-4 pl-4 sm:w-1/4 pr-4 pl-4 hidden sm:block whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
+          <div class="hidden pr-4 pl-4 text-center md:block whitespace-no-wrap forum-count-col w-25">{% trans "Topics" %}</div>
+          <div class="hidden pr-4 pl-4 text-center md:block whitespace-no-wrap forum-count-col w-25">{% trans "Posts" %}</div>
+          <div class="hidden pr-0 pr-4 pl-4 sm:block sm:w-1/4 whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
         </div>
       </div>
-      <div class="p-0 flex-auto p-6">
+      <div class="flex-auto p-0 p-6">
     {% endif %}
     {% endwith %}
-    <div class="flex m-0 px-3 py-2 border-b border-slate">
+    <div class="flex py-2 px-3 m-0 border-b border-slate">
       {% if not node.obj.is_link %}
-      <div class="w-3/4 pl-0 forum-name">
+      <div class="pl-0 w-3/4 forum-name">
         <table class="forum-data-table">
           <tr>
             <td class="pt-1 pr-3 align-top forum-icon {% if node.obj in unread_forums %}unread{% endif %}">
@@ -54,7 +54,7 @@
             <td>
             {% if node.obj.image %}
             <td>
-              <div class="hidden md:block forum-image pr-2">
+              <div class="hidden pr-2 md:block forum-image">
                 <img src="{{ node.obj.image.url }}" alt="{{ node.obj.name }}" />
               </div>
             </td>
@@ -67,10 +67,10 @@
           </tr>
         </table>
       </div>
-      <div class="py-2 pr-4 pl-4 hidden md:block forum-syndication"><a href="{% url 'forum_feeds:forum_latest_topics_with_descendants' node.obj.slug node.obj.pk %}" title="{% trans 'RSS feed' %}"><img src="{% static 'img/icons/icon_signal.svg' %}" /></a></div>
-      <div class="py-2 pr-4 pl-4 hidden md:block text-center forum-count">{{ node.topics_count }}</div>
-      <div class="py-2 pr-4 pl-4 hidden md:block text-center forum-count">{{ node.posts_count }}</div>
-      <div class="py-2 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 hidden sm:block forum-last-post">
+      <div class="hidden py-2 pr-4 pl-4 md:block forum-syndication"><a href="{% url 'forum_feeds:forum_latest_topics_with_descendants' node.obj.slug node.obj.pk %}" title="{% trans 'RSS feed' %}"><img src="{% static 'img/icons/icon_signal.svg' %}" /></a></div>
+      <div class="hidden py-2 pr-4 pl-4 text-center md:block forum-count">{{ node.topics_count }}</div>
+      <div class="hidden py-2 pr-4 pl-4 text-center md:block forum-count">{{ node.posts_count }}</div>
+      <div class="hidden py-2 pr-4 pl-4 sm:block sm:w-1/4 forum-last-post">
         {% if node.last_post %}
         {% if node.last_post.poster %}
         {% url 'forum_member:profile' node.last_post.poster_id as poster_url %}
@@ -82,7 +82,7 @@
         By: {{ poster_username }}
         {% endblocktrans %}
         {% endif %}
-        &nbsp;<a href="{% url 'forum_conversation:topic' node.obj.slug node.obj.pk node.last_post.topic.slug node.last_post.topic.pk %}?post={{ node.last_post.pk }}#{{ node.last_post.pk }}"><i class="fas fa-arrow-circle-right "></i></a>
+        &nbsp;<a href="{% url 'forum_conversation:topic' node.obj.slug node.obj.pk node.last_post.topic.slug node.last_post.topic.pk %}?post={{ node.last_post.pk }}#{{ node.last_post.pk }}"><i class="fas fa-arrow-circle-right"></i></a>
         <br />
         <small>{{ node.last_post.created }}</small>
         {% else %}
@@ -90,7 +90,7 @@
         {% endif %}
       </div>
       {% else %}
-      <div class="pl-0 md:w-2/3 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-5/6 forum-name" colspan="2">
+      <div class="pr-4 pl-0 pl-4 w-5/6 sm:w-3/4 md:w-2/3 forum-name" colspan="2">
         <table class="forum-data-table">
           <tr>
             <td class="pt-1 pr-3 align-top forum-icon link"><i class="fas fa-link fa-2x"></i></td>
@@ -101,9 +101,9 @@
           </tr>
         </table>
       </div>
-      <div class="md:w-1/6 pr-4 pl-4 hidden md:block forum-count"></div>
-      <div class="md:w-1/6 pr-4 pl-4 hidden md:block forum-count"></div>
-      <div class="py-2 md:w-1/5 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 hidden sm:block forum-link-redirects">
+      <div class="hidden pr-4 pl-4 md:block md:w-1/6 forum-count"></div>
+      <div class="hidden pr-4 pl-4 md:block md:w-1/6 forum-count"></div>
+      <div class="hidden py-2 pr-4 pl-4 sm:block sm:w-1/4 md:w-1/5 forum-link-redirects">
         {% if node.obj.link_redirects %}
         {% trans "Total redirects:" %}&nbsp;{{ node.obj.link_redirects_count|default:"0" }}
         {% endif %}
@@ -119,15 +119,15 @@
     {% endif %}
     {% elif node.level == root_level_middle %}
     {% if node.parent.obj.is_category %}
-    <div class="flex flex-wrap  m-0 px-3 py-2 border-b">
+    <div class="flex flex-wrap py-2 px-3 m-0 border-b">
       {% if not node.obj.is_link %}
-      <div class="pl-0 md:w-3/5 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-5/6 forum-name">
+      <div class="pr-4 pl-0 pl-4 w-5/6 sm:w-3/4 md:w-3/5 forum-name">
         <table class="forum-data-table">
           <tr>
             <td class="pt-1 pr-3 align-top forum-icon {% if node.obj in unread_forums %}unread{% endif %}"><i class="far fa-circle fa-2x"></i></td>
             {% if node.obj.image %}
             <td>
-              <div class="hidden md:block forum-image pr-2">
+              <div class="hidden pr-2 md:block forum-image">
                 <img src="{{ node.obj.image.url }}" alt="{{ node.obj.name }}" />
               </div>
             </td>
@@ -140,10 +140,10 @@
           </tr>
         </table>
       </div>
-      <div class="py-2 md:w-1/6 pr-4 pl-4 hidden md:block forum-syndication"><a href="{% url 'forum_feeds:forum_latest_topics_with_descendants' node.obj.slug node.obj.pk %}" title="{% trans 'RSS feed' %}"><i class="fas fa-rss-square"></i></a></div>
-      <div class="py-2 md:w-1/6 pr-4 pl-4 hidden md:block text-center forum-count">{{ node.topics_count }}</div>
-      <div class="py-2 md:w-1/6 pr-4 pl-4 hidden md:block text-center forum-count">{{ node.posts_count }}</div>
-      <div class="py-2 md:w-1/5 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 hidden sm:block forum-last-post">
+      <div class="hidden py-2 pr-4 pl-4 md:block md:w-1/6 forum-syndication"><a href="{% url 'forum_feeds:forum_latest_topics_with_descendants' node.obj.slug node.obj.pk %}" title="{% trans 'RSS feed' %}"><i class="fas fa-rss-square"></i></a></div>
+      <div class="hidden py-2 pr-4 pl-4 text-center md:block md:w-1/6 forum-count">{{ node.topics_count }}</div>
+      <div class="hidden py-2 pr-4 pl-4 text-center md:block md:w-1/6 forum-count">{{ node.posts_count }}</div>
+      <div class="hidden py-2 pr-4 pl-4 sm:block sm:w-1/4 md:w-1/5 forum-last-post">
         {% if node.last_post %}
         {% if node.last_post.poster_id %}
         {% url 'forum_member:profile' node.last_post.poster_id as poster_url %}
@@ -155,7 +155,7 @@
         By: {{ poster_username }}
         {% endblocktrans %}
         {% endif %}
-        &nbsp;<a href="{% url 'forum_conversation:topic' node.obj.slug node.obj.pk node.last_post.topic.slug node.last_post.topic.pk %}?post={{ node.last_post.pk }}#{{ node.last_post.pk }}"><i class="fas fa-arrow-circle-right "></i></a>
+        &nbsp;<a href="{% url 'forum_conversation:topic' node.obj.slug node.obj.pk node.last_post.topic.slug node.last_post.topic.pk %}?post={{ node.last_post.pk }}#{{ node.last_post.pk }}"><i class="fas fa-arrow-circle-right"></i></a>
         <br />
         <small>{{ node.last_post.created }}</small>
         {% else %}
@@ -163,7 +163,7 @@
         {% endif %}
       </div>
       {% else %}
-      <div class="pl-0 md:w-2/3 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-5/6 forum-name" colspan="2">
+      <div class="pr-4 pl-0 pl-4 w-5/6 sm:w-3/4 md:w-2/3 forum-name" colspan="2">
         <table class="forum-data-table">
           <tr>
             <td class="pt-1 pr-3 align-top forum-icon link"><i class="fas fa-link fa-2x"></i></td>
@@ -174,9 +174,9 @@
           </tr>
         </table>
       </div>
-      <div class="md:w-1/6 pr-4 pl-4 hidden md:block forum-count"></div>
-      <div class="md:w-1/6 pr-4 pl-4 hidden md:block forum-count"></div>
-      <div class="py-2 md:w-1/5 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 hidden sm:block forum-last-post forum-link-redirects">
+      <div class="hidden pr-4 pl-4 md:block md:w-1/6 forum-count"></div>
+      <div class="hidden pr-4 pl-4 md:block md:w-1/6 forum-count"></div>
+      <div class="hidden py-2 pr-4 pl-4 sm:block sm:w-1/4 md:w-1/5 forum-last-post forum-link-redirects">
         {% if node.obj.link_redirects %}
         {% trans "Total redirects:" %}&nbsp;{{ node.obj.link_redirects_count|default:"0" }}
         {% endif %}
@@ -197,20 +197,20 @@
     {% endif %}
     {% endrecurseforumcontents %}
     {% else %}
-    <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border border-1 border-gray-300 forumlist">
-      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-gray-300 ">
-        <div class="flex flex-wrap  m-0 px-3 py-2">
-          <div class="pl-0 md:w-2/3 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-3/4 forum-name-col">
-            <h3 class="m-0 mb-3 h5 ">{% trans "Forums" %}</h3>
+    <div class="flex relative flex-col mt-3 min-w-0 break-words rounded border border-gray-300 border-1 forumlist">
+      <div class="p-0 py-3 px-6 mb-0 border-gray-300 border-b-1">
+        <div class="flex flex-wrap py-2 px-3 m-0">
+          <div class="pr-4 pl-0 pl-4 w-3/4 sm:w-3/4 md:w-2/3 forum-name-col">
+            <h3 class="m-0 mb-3 h5">{% trans "Forums" %}</h3>
           </div>
-          <div class="md:w-1/6 pr-4 pl-4 hidden md:block text-center whitespace-no-wrap forum-count-col">{% trans "Topics" %}</div>
-          <div class="md:w-1/6 pr-4 pl-4 hidden md:block text-center whitespace-no-wrap forum-count-col">{% trans "Posts" %}</div>
-          <div class="pr-0 md:w-1/5 pr-4 pl-4 sm:w-1/4 pr-4 pl-4 hidden sm:block whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
+          <div class="hidden pr-4 pl-4 text-center md:block md:w-1/6 whitespace-no-wrap forum-count-col">{% trans "Topics" %}</div>
+          <div class="hidden pr-4 pl-4 text-center md:block md:w-1/6 whitespace-no-wrap forum-count-col">{% trans "Posts" %}</div>
+          <div class="hidden pr-0 pr-4 pl-4 sm:block sm:w-1/4 md:w-1/5 whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
         </div>
       </div>
-      <div class="p-0 flex-auto p-6">
-        <div class="m-0 px-3 py-2 flex flex-wrap ">
-          <div class="p-0 md:w-full pr-4 pl-4">{% trans "No forums." %}</div>
+      <div class="flex-auto p-0 p-6">
+        <div class="flex flex-wrap py-2 px-3 m-0">
+          <div class="p-0 pr-4 pl-4 md:w-full">{% trans "No forums." %}</div>
         </div>
       </div>
     </div>
diff --git a/templates/forum/index.html b/templates/forum/index.html
index 15ac9860..61b5d298 100644
--- a/templates/forum/index.html
+++ b/templates/forum/index.html
@@ -6,8 +6,8 @@
 {% block sub_title %}{% trans "Index" %}{% endblock sub_title %}
 
 {% block content %}
-<div class="mt-3 flex flex-wrap ">
-  <div class="forumlist-top-controls w-full">
+<div class="flex flex-wrap mt-3">
+  <div class="w-full forumlist-top-controls">
     {% if request.user.is_authenticated %}
     <div class="float-right">
       <a href="{% url 'forum_tracking:mark_all_forums_read' %}" class="inline-block uppercase"><i class="fas fa-check-circle">&nbsp;</i>{% trans "Mark forums read" %}</a>
@@ -17,10 +17,10 @@
   </div>
 </div>
 {% forum_list forums %}
-<div class="my-4 flex flex-wrap ">
-  <div class="forum-page-statistics w-full">
+<div class="flex flex-wrap my-4">
+  <div class="w-full forum-page-statistics">
     <h3 class="page-header">{% trans "Stats" %}</h3>
-    <div class="mt-3 flex space-x-24">
+    <div class="flex mt-3 space-x-24">
       <div>
         <h4>{% trans "Total Posts" %}</h4>
         {{ total_posts_count }}
diff --git a/templates/forum_conversation/forum_attachments/attachment_formset.html b/templates/forum_conversation/forum_attachments/attachment_formset.html
index d842a26c..3f590b13 100644
--- a/templates/forum_conversation/forum_attachments/attachment_formset.html
+++ b/templates/forum_conversation/forum_attachments/attachment_formset.html
@@ -2,7 +2,7 @@
 
 {{ attachment_formset.management_form }}
 {% for form in attachment_formset.forms %}
-<div class="attachment-form w-full space-y-3 mb-4">
+<div class="mb-4 space-y-3 w-full attachment-form">
   {% for field in form.visible_fields %}
   <div class="my-5">
     {% if forloop.first %}
@@ -16,7 +16,7 @@
     {% endfor %}
     {% endif %}
     {% if field.name == 'DELETE' %}
-    <div class="checkbox mt-3">
+    <div class="mt-3 checkbox">
       <label for="{{ field.auto_id }}">
         {{ field }}
         {{ field.label }}
@@ -38,6 +38,6 @@
     {% endfor %}
 </div>
 {% endfor %}
-<a href="#" id="add_more_attachment" class="border-slate border py-3 px-4 text-orange my-5 text-xs rounded uppercase">
+<a href="#" id="add_more_attachment" class="py-3 px-4 my-5 text-xs uppercase rounded border border-slate text-orange">
   <i class="icon-white icon-plus-sign"></i>&nbsp;{% trans "Add another file" %}
 </a>
diff --git a/templates/forum_conversation/forum_attachments/attachments_detail.html b/templates/forum_conversation/forum_attachments/attachments_detail.html
index 1a735edb..8de5d972 100644
--- a/templates/forum_conversation/forum_attachments/attachments_detail.html
+++ b/templates/forum_conversation/forum_attachments/attachments_detail.html
@@ -3,7 +3,7 @@
 
 {% get_permission 'can_download_files' post.topic.forum request.user as user_can_download_files %}
 {% if post.attachments.exists and user_can_download_files %}
-<div class="w-full attachments space-y-4">
+<div class="space-y-4 w-full attachments">
   <div class="col-md-12">
     <span class="text-muted attachments-title"><i class="fa fa-files-o"></i>&nbsp;{% trans "Attachments" %}</span>
   </div>
diff --git a/templates/forum_conversation/forum_polls/poll_detail.html b/templates/forum_conversation/forum_polls/poll_detail.html
index c4a54d25..7aa61ee7 100644
--- a/templates/forum_conversation/forum_polls/poll_detail.html
+++ b/templates/forum_conversation/forum_polls/poll_detail.html
@@ -9,7 +9,7 @@
       {% with can_be_completed=user_can_vote_in_poll has_been_completed=poll|has_been_completed_by:request.user poll=poll %}
       <h4 class="question">{{ poll.question }}</h4>
       <hr />
-      <div class="max-options-indication my-3">
+      <div class="my-3 max-options-indication">
         {% if can_be_completed and not view_results_action %}
         {% if not has_been_completed or change_vote_action %}
         {% if poll.max_options == 1 %}
diff --git a/templates/forum_conversation/forum_polls/poll_option_formset.html b/templates/forum_conversation/forum_polls/poll_option_formset.html
index b4f2eb82..623113f9 100644
--- a/templates/forum_conversation/forum_polls/poll_option_formset.html
+++ b/templates/forum_conversation/forum_polls/poll_option_formset.html
@@ -24,7 +24,7 @@
 </div>
 {% endfor %}
 <div class="py-3">
-  <a href="#" id="add_more_poll_option" class="rounded border border-slate text-orange text-sm my-3 py-2 px-3"><i class="icon-white icon-plus-sign"></i>&nbsp;{% trans "Add a poll option" %}</a>
+  <a href="#" id="add_more_poll_option" class="py-2 px-3 my-3 text-sm rounded border border-slate text-orange"><i class="icon-white icon-plus-sign"></i>&nbsp;{% trans "Add a poll option" %}</a>
 </div>
 {% if poll_option_formset.initial_form_count %}
 <br /><br />
diff --git a/templates/forum_conversation/forum_polls/poll_results.html b/templates/forum_conversation/forum_polls/poll_results.html
index 07959e01..6af2fc37 100644
--- a/templates/forum_conversation/forum_polls/poll_results.html
+++ b/templates/forum_conversation/forum_polls/poll_results.html
@@ -2,11 +2,11 @@
 
 {% for option in poll.options.all %}
 {% if forloop.first or not forloop.counter|divisibleby:2 %}
-<div class="mb-3 w-full md:w-3/4 mx-auto">
+<div class="mx-auto mb-3 w-full md:w-3/4">
 {% endif %}
 <div class="col-md-6">
-  <b>{{ option.text }}</b> <span class="text-white/60 text-sm">({{ option.percentage|floatformat }}%)</span>
-  <div class="my-2 bg-charcoal rounded h-6" aria-valuenow="{{ option.percentage|floatformat }}" aria-valuemin="0" aria-valuemax="100">
+  <b>{{ option.text }}</b> <span class="text-sm text-white/60">({{ option.percentage|floatformat }}%)</span>
+  <div class="my-2 h-6 rounded bg-charcoal" aria-valuenow="{{ option.percentage|floatformat }}" aria-valuemin="0" aria-valuemax="100">
     <div class="{% if option.percentage > 0 %}w-[{{ option.percentage|floatformat }}%]{% else %}w-1{% endif %} bg-gradient-to-r from-green to-orange h-6 rounded"></div>
   </div>
 </div>
@@ -14,6 +14,6 @@
 </div>
 {% endif %}
 {% endfor %}
-<div class="mb-3 w-full md:w-3/4 mx-auto">
+<div class="mx-auto mb-3 w-full md:w-3/4">
   {% trans "Total votes:" %}&nbsp;{{ poll.votes|length }}
 </div>
diff --git a/templates/forum_conversation/forum_polls/poll_vote_form.html b/templates/forum_conversation/forum_polls/poll_vote_form.html
index 4204b0e4..cd9ddefe 100644
--- a/templates/forum_conversation/forum_polls/poll_vote_form.html
+++ b/templates/forum_conversation/forum_polls/poll_vote_form.html
@@ -12,14 +12,14 @@
       {% if poll.max_options == 1 %}
       <div class="radio">
         <label class="peer-checked:text-orange">
-          <input type="radio" name="options" value="{{ option.id }}" class="border rounded-full bg-charcoal hover:bg-orange cursor-pointer checked:bg-orange mr-1 peer">
+          <input type="radio" name="options" value="{{ option.id }}" class="mr-1 rounded-full border cursor-pointer bg-charcoal peer checked:bg-orange hover:bg-orange">
           {{ option.text }}
         </label>
       </div>
       {% else %}
       <div class="checkbox">
         <label class="peer-checked:text-orange">
-          <input type="checkbox" name="options" value="{{ option.id }}" class="border rounded-sm bg-charcoal hover:bg-orange cursor-pointer checked:bg-orange mr-1 peer">
+          <input type="checkbox" name="options" value="{{ option.id }}" class="mr-1 rounded-sm border cursor-pointer bg-charcoal peer checked:bg-orange hover:bg-orange">
           {{ option.text }}
         </label>
       </div>
@@ -31,8 +31,8 @@
   {% endif %}
   {% endfor %}
 
-  <div class="form-actions my-4">
-    <input type="submit" class="rounded rounded-lg border border-orange text-orange uppercase text-sm py-2 px-3" value="{% trans "Submit" %}" />
-    <a href="{% if change_vote_action %}.{% else %}?view_results=true{% endif %}" class="rounded rounded-lg border border-slate text-orange uppercase text-sm py-2 px-3">{% trans "View results" %}</a>
+  <div class="my-4 form-actions">
+    <input type="submit" class="py-2 px-3 text-sm uppercase rounded rounded-lg border border-orange text-orange" value="{% trans "Submit" %}" />
+    <a href="{% if change_vote_action %}.{% else %}?view_results=true{% endif %}" class="py-2 px-3 text-sm uppercase rounded rounded-lg border border-slate text-orange">{% trans "View results" %}</a>
   </div>
 </form>
diff --git a/templates/forum_conversation/partials/post_form.html b/templates/forum_conversation/partials/post_form.html
index 047453fd..ca974675 100644
--- a/templates/forum_conversation/partials/post_form.html
+++ b/templates/forum_conversation/partials/post_form.html
@@ -20,16 +20,16 @@
 <div class="tab-content" x-data="{ tab: '#options' }">
   <!-- Sub "forms" tabs -->
   {% if attachment_formset %}
-  <ul class="w-full flex flex-row justify-between">
+  <ul class="flex flex-row justify-between w-full">
     <a href="#"
        :class="tab === '#options' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
-       class="px-11 w-1/2 text-center active pb-4"
+       class="px-11 pb-4 w-1/2 text-center active"
        data-toggle="tab"
        x-on:click.prevent="tab='#options'"
     >{% trans "Options" %}</a>
     <a href="#"
        :class="tab === '#attachments' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
-       class="px-11 w-1/2 text-center pb-4"
+       class="px-11 pb-4 w-1/2 text-center"
        data-toggle="tab"
        x-on:click.prevent="tab='#attachments'"
     >{% trans "Attachments" %}</a>
diff --git a/templates/forum_conversation/partials/topic_detail_actions.html b/templates/forum_conversation/partials/topic_detail_actions.html
index 7ed2b662..ded798cb 100644
--- a/templates/forum_conversation/partials/topic_detail_actions.html
+++ b/templates/forum_conversation/partials/topic_detail_actions.html
@@ -13,20 +13,20 @@
 
 {% if user_can_add_post %}
   <a href="{% url 'forum_conversation:post_create' forum.slug forum.pk topic.slug topic.pk %}"
-     class="rounded rounded-lg border border-orange text-orange uppercase text-sm py-3 px-4"><img
+     class="py-3 px-4 text-sm uppercase rounded rounded-lg border border-orange text-orange"><img
     class="inline-block mr-2" src="{% static 'img/icons/icon_button-talk-bubble.svg' %}"/>{% trans "Post reply" %}</a>
 {% endif %}
 {% if user_can_subscribe_to_topic %}
   <a href="{% url 'forum_member:topic_subscribe' topic.pk %}"
-     class="rounded rounded-lg border border-slate text-orange uppercase text-sm py-3 px-4"><img
+     class="py-3 px-4 text-sm uppercase rounded rounded-lg border border-slate text-orange"><img
     class="inline-block mr-2" src="{% static 'img/icons/icon_button-checkmark.svg' %}"/>{% trans "Subscribe" %}</a>
 {% elif user_can_unsubscribe_from_topic %}
-  <a href="{% url 'forum_member:topic_unsubscribe' topic.pk %}" class="rounded rounded-lg border border-slate text-orange uppercase text-sm py-3 px-4"><img
+  <a href="{% url 'forum_member:topic_unsubscribe' topic.pk %}" class="py-3 px-4 text-sm uppercase rounded rounded-lg border border-slate text-orange"><img
     class="inline-block mr-2" src="{% static 'img/icons/icon_button-checkmark.svg' %}"/>{% trans "Unsubscribe" %}</a>
 {% endif %}
 {% if user_can_lock_topics and not topic.is_locked or user_can_move_topics or user_can_delete_topics %}
   <div class="inline-block relative" x-data="{ menuOpen: false }">
-    <button id="id_dropdown_moderation_menu_button" class="rounded rounded-lg border border-slate text-orange py-3 px-4"
+    <button id="id_dropdown_moderation_menu_button" class="py-3 px-4 rounded rounded-lg border border-slate text-orange"
             type="button"
             data-toggle="dropdown"
             aria-haspopup="true"
@@ -38,7 +38,7 @@
 
     <!-- Moderator menu -->
     <div x-show="menuOpen"
-         class="absolute top-14 rounded border border-slate inset-x-0 bg-black text-orange space-y-2 p-3 w-[200px]"
+         class="absolute inset-x-0 top-14 p-3 space-y-2 bg-black rounded border border-slate text-orange w-[200px]"
          aria-labelledby="id_dropdown_moderation_menu_button"
          @click.away="menuOpen = !menuOpen"
     >
diff --git a/templates/forum_conversation/partials/topic_form.html b/templates/forum_conversation/partials/topic_form.html
index c92d1775..aa5853a9 100644
--- a/templates/forum_conversation/partials/topic_form.html
+++ b/templates/forum_conversation/partials/topic_form.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<form method="post" action="." class="form space-y-4" enctype="multipart/form-data" novalidate>{% csrf_token %}
+<form method="post" action="." class="space-y-4 form" enctype="multipart/form-data" novalidate>{% csrf_token %}
   {% for error in post_form.non_field_errors %}
   <div class="alert alert-danger">
     <i class="icon-exclamation-sign"></i> {{ error }}
@@ -20,17 +20,17 @@
   <div class="tab-content" x-data="{ tab: '#options' }">
     <!-- Sub "forms" tabs -->
     {% if poll_option_formset or attachment_formset %}
-    <ul class="w-full flex flex-row justify-between">
+    <ul class="flex flex-row justify-between w-full">
       <a href="#options"
          :class="tab === '#options' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
-         class="px-11 w-1/2 text-center active pb-4"
+         class="px-11 pb-4 w-1/2 text-center active"
          data-toggle="tab"
          x-on:click.prevent="tab='#options'"
       >{% trans "Options" %}</a>
       {% if poll_option_formset %}
         <a href="#poll"
            :class="tab === '#poll' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
-           class="px-11 w-1/2 text-center active pb-4"
+           class="px-11 pb-4 w-1/2 text-center active"
            data-toggle="tab"
            x-on:click.prevent="tab='#poll'"
         >{% trans "Poll" %}</a>
@@ -38,7 +38,7 @@
       {% if attachment_formset %}
         <a href="#attachments"
            :class="tab === '#attachments' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
-           class="px-11 w-1/2 text-center active pb-4"
+           class="px-11 pb-4 w-1/2 text-center active"
            data-toggle="tab"
            x-on:click.prevent="tab='#attachments'"
         >{% trans "Attachments" %}</a>
@@ -53,7 +53,7 @@
           <div class="w-full">
             {% include "partials/form_field.html" with field=post_form.topic_type %}
             {% with field=post_form.enable_signature %}
-            <div class="checkbox mt-3">
+            <div class="mt-3 checkbox">
               <label for="{{ field.auto_id }}">
                 {{ field }}
                 {{ field.label }}
@@ -79,8 +79,8 @@
       <div class="form-group">
         <br />
         {% if poll_options_validated and poll_option_formset.non_form_errors %}<div class="alert alert-danger">{{ poll_option_formset.non_form_errors|striptags }}</div>{% endif %}
-        <div class="w-full flex space-x-4">
-          <div class="w-1/2 space-y-4">
+        <div class="flex space-x-4 w-full">
+          <div class="space-y-4 w-1/2">
             {% include "partials/form_field.html" with field=post_form.poll_question %}
             {% include "partials/form_field.html" with field=post_form.poll_max_options %}
             {% include "partials/form_field.html" with field=post_form.poll_duration %}
@@ -93,7 +93,7 @@
               </div>
             </div>
           </div>
-          <div id="poll_formset" class="w-1/2 space-y-4">
+          <div id="poll_formset" class="space-y-4 w-1/2">
             {% include "forum_conversation/forum_polls/poll_option_formset.html" %}
           </div>
         </div>
@@ -114,8 +114,8 @@
     {% endif %}
   </div>
 
-  <div class="form-actions pt-6">
-    <input type="submit" name="preview" class="px-8 py-3 border border-slate text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Preview" %}" />&nbsp;
-    <input type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Submit" %}" />
+  <div class="pt-6 form-actions">
+    <input type="submit" name="preview" class="py-3 px-8 text-sm text-base font-medium uppercase rounded-md border md:py-1 md:px-4 md:text-lg border-slate text-orange" value="{% trans "Preview" %}" />&nbsp;
+    <input type="submit" class="py-3 px-8 text-sm text-base font-medium uppercase rounded-md border md:py-1 md:px-4 md:text-lg border-orange text-orange" value="{% trans "Submit" %}" />
   </div>
 </form>
diff --git a/templates/forum_conversation/post_create.html b/templates/forum_conversation/post_create.html
index 3dc1f063..0e72c4f2 100644
--- a/templates/forum_conversation/post_create.html
+++ b/templates/forum_conversation/post_create.html
@@ -15,17 +15,17 @@
   {% include "forum_conversation/post_preview.html" %}
 {% endif %}
 <div>
-  <div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
+  <div class="w-full rounded border bg-charcoal/60 border-1 border-slate">
     <div class="card post-edit">
-      <div class="card-header border-b border-slate px-4 py-2">
-        <h3 class="m-0 h5 card-title text-base">{% trans "Post a reply" %}</h3>
+      <div class="py-2 px-4 border-b card-header border-slate">
+        <h3 class="m-0 text-base h5 card-title">{% trans "Post a reply" %}</h3>
       </div>
-      <div class="card-body p-4">
-        <form method="post" action="." class="form space-y-4" enctype="multipart/form-data" novalidate>{% csrf_token %}
+      <div class="p-4 card-body">
+        <form method="post" action="." class="space-y-4 form" enctype="multipart/form-data" novalidate>{% csrf_token %}
           {% include "forum_conversation/partials/post_form.html" %}
-          <div class="form-actions pt-6">
-            <input type="submit" name="preview" class="px-8 py-3 border border-slate text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Preview" %}" />&nbsp;
-            <input type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Submit" %}" />
+          <div class="pt-6 form-actions">
+            <input type="submit" name="preview" class="py-3 px-8 text-sm text-base font-medium uppercase rounded-md border md:py-1 md:px-4 md:text-lg border-slate text-orange" value="{% trans "Preview" %}" />&nbsp;
+            <input type="submit" class="py-3 px-8 text-sm text-base font-medium uppercase rounded-md border md:py-1 md:px-4 md:text-lg border-orange text-orange" value="{% trans "Submit" %}" />
           </div>
         </form>
       </div>
diff --git a/templates/forum_conversation/post_update.html b/templates/forum_conversation/post_update.html
index 5400bd56..b6662aed 100644
--- a/templates/forum_conversation/post_update.html
+++ b/templates/forum_conversation/post_update.html
@@ -14,17 +14,17 @@
   {% include "forum_conversation/post_preview.html" %}
 {% endif %}
 <div>
-  <div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
+  <div class="w-full rounded border bg-charcoal/60 border-1 border-slate">
     <div class="card post-edit">
-      <div class="card-header border-b border-slate px-4 py-2">
-        <h3 class="m-0 h5 card-title text-base">{% trans "Edit post" %}</h3>
+      <div class="py-2 px-4 border-b card-header border-slate">
+        <h3 class="m-0 text-base h5 card-title">{% trans "Edit post" %}</h3>
       </div>
-      <div class="card-body p-4">
+      <div class="p-4 card-body">
         <form method="post" action="." class="form" enctype="multipart/form-data" novalidate>{% csrf_token %}
           {% include "forum_conversation/partials/post_form.html" %}
           <div class="form-actions">
-            <input type="submit" name="preview" class="px-8 py-3 border border-slate text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Preview" %}" />&nbsp;
-            <input type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Submit" %}" />
+            <input type="submit" name="preview" class="py-3 px-8 text-sm text-base font-medium uppercase rounded-md border md:py-1 md:px-4 md:text-lg border-slate text-orange" value="{% trans "Preview" %}" />&nbsp;
+            <input type="submit" class="py-3 px-8 text-sm text-base font-medium uppercase rounded-md border md:py-1 md:px-4 md:text-lg border-orange text-orange" value="{% trans "Submit" %}" />
           </div>
         </form>
       </div>
diff --git a/templates/forum_conversation/topic_create.html b/templates/forum_conversation/topic_create.html
index b63abb3b..58e6b770 100644
--- a/templates/forum_conversation/topic_create.html
+++ b/templates/forum_conversation/topic_create.html
@@ -17,12 +17,12 @@
 {% include "forum_conversation/post_preview.html" %}
 {% endif %}
 <div class="w-full">
-  <div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
+  <div class="w-full rounded border bg-charcoal/60 border-1 border-slate">
     <div class="card post-edit">
-      <div class="card-header border-b border-slate px-4 py-2">
-        <h3 class="m-0 h5 card-title text-base">{% trans "Post a new topic" %}</h3>
+      <div class="py-2 px-4 border-b card-header border-slate">
+        <h3 class="m-0 text-base h5 card-title">{% trans "Post a new topic" %}</h3>
       </div>
-      <div class="card-body p-4">
+      <div class="p-4 card-body">
         {% include "forum_conversation/partials/topic_form.html" %}
       </div>
     </div>
diff --git a/templates/forum_conversation/topic_detail.html b/templates/forum_conversation/topic_detail.html
index f2cecdf4..db0b487f 100644
--- a/templates/forum_conversation/topic_detail.html
+++ b/templates/forum_conversation/topic_detail.html
@@ -7,9 +7,9 @@
 {% block sub_title %}{{ topic.subject }}{% endblock sub_title %}
 
 {% block content %}
-<div class="w-full mb-8"><h1 class="text-3xl">{{ topic.subject }}</h1></div>
+<div class="mb-8 w-full"><h1 class="text-3xl">{{ topic.subject }}</h1></div>
 <div class="w-full">
-  <div class="items-center inline-flex space-x-3 mb-6">
+  <div class="inline-flex items-center mb-6 space-x-3">
   {% include "forum_conversation/partials/topic_detail_actions.html" %}
   </div>
   <div class="pagination-block">
@@ -26,13 +26,13 @@
     {% endif %}
     <div id="{{ post.id }}" class="my-3 card post">
       <div class="card-body">
-        <div class="flex space-x-8 bg-charcoal border border-1 border-slate rounded p-6">
+        <div class="flex p-6 space-x-8 rounded border bg-charcoal border-1 border-slate">
           <div class="w-5/6 post-content-wrapper">
-            <div class="float-right post-controls ">
+            <div class="float-right post-controls">
               {% get_permission 'can_edit_post' post request.user as user_can_edit_post %}
               {% if user_can_edit_post %}
               <a href="{% if post.is_topic_head %}{% url 'forum_conversation:topic_update' forum.slug forum.pk topic.slug topic.pk %}{% else %}{% url 'forum_conversation:post_update' forum.slug forum.pk topic.slug topic.pk post.pk %}{% endif %}"
-                 class="border border-1 border-orange text-orange text-sm uppercase px-4 py-2 rounded rounded-lg"
+                 class="py-2 px-4 text-sm uppercase rounded rounded-lg border border-1 border-orange text-orange"
                  title="{% trans "Edit" %}"
               >
                 <img src="{% static 'img/icons/icon_button-edit.svg' %}" class="inline-block mr-4" />
@@ -42,16 +42,16 @@
               {% get_permission 'can_delete_post' post request.user as user_can_delete_post %}
               {% if user_can_delete_post %}
               <a href="{% url 'forum_conversation:post_delete' forum.slug forum.pk topic.slug topic.pk post.pk %}"
-                 class="border border-1 border-orange text-orange text-sm uppercase px-4 py-2 rounded rounded-lg ml-3"
+                 class="py-2 px-4 ml-3 text-sm uppercase rounded rounded-lg border border-1 border-orange text-orange"
                  title="{% trans "Delete" %}">
                 <i class="fas fa-times text-orange"></i>
               </a>
               {% endif %}
             </div>
               {% spaceless %}
-              <h4 class="text-2xl m-0 subject mb-3 items-center">
+              <h4 class="items-center m-0 mb-3 text-2xl subject">
                 {{ post.subject }}
-                &nbsp;<a href="{% url 'forum_conversation:topic' forum.slug forum.pk topic.slug topic.pk %}?post={{ post.pk }}#{{ post.pk }}"><i class="fas fa-link text-white/60 text-sm"></i></a>
+                &nbsp;<a href="{% url 'forum_conversation:topic' forum.slug forum.pk topic.slug topic.pk %}?post={{ post.pk }}#{{ post.pk }}"><i class="text-sm fas fa-link text-white/60"></i></a>
               </h4>
               {% endspaceless %}
               <p class="p-0">
@@ -94,7 +94,7 @@
               </div>
               {% endif %}
           </div>
-          <div class="w-1/6 d-none d-md-block post-sidebar text-sm">
+          <div class="w-1/6 text-sm d-none d-md-block post-sidebar">
             {% if post.poster %}
             <div class="avatar">
               <a href="{% url 'forum_member:profile' post.poster_id %}">
@@ -114,8 +114,8 @@
   {% endfor %}
   </div>
 </div>
-<div class="w-full mt-11">
-  <div class="w-1/2 items-center inline-flex space-x-3">
+<div class="mt-11 w-full">
+  <div class="inline-flex items-center space-x-3 w-1/2">
     {% include "forum_conversation/partials/topic_detail_actions.html" %}
   </div>
   <div class="w-full">
diff --git a/templates/forum_conversation/topic_list.html b/templates/forum_conversation/topic_list.html
index 359abf54..357656e0 100644
--- a/templates/forum_conversation/topic_list.html
+++ b/templates/forum_conversation/topic_list.html
@@ -4,29 +4,29 @@
 {% load forum_tracking_tags %}
 
 {% if topics or not hide_if_empty %}
-<div class="my-9 flex">
+<div class="flex my-9">
   <div class="w-full">
-    <div class="card topiclist rounded break-words border bg-charcoal border-1 border-slate">
+    <div class="break-words rounded border card topiclist bg-charcoal border-1 border-slate">
       <div class="p-0 border-b border-slate">
-        <div class="flex m-0 px-3 py-2">
-          <div class="w-2/3 uppercase text-sm pl-0 topic-name-col">{% trans topic_list_title %}</div>
-          <div class="w-1/6 uppercase text-sm d-none d-md-block text-center text-nowrap topic-count-col">{% trans "Replies" %}</div>
-          <div class="w-1/6 uppercase text-sm d-none d-md-block text-center text-nowrap topic-count-col">{% trans "Views" %}</div>
-          <div class="w-1/6 uppercase text-sm pr-0 d-none d-sm-block text-nowrap topic-last-post-col">{% trans "Last post" %}</div>
+        <div class="flex py-2 px-3 m-0">
+          <div class="pl-0 w-2/3 text-sm uppercase topic-name-col">{% trans topic_list_title %}</div>
+          <div class="w-1/6 text-sm text-center uppercase d-none d-md-block text-nowrap topic-count-col">{% trans "Replies" %}</div>
+          <div class="w-1/6 text-sm text-center uppercase d-none d-md-block text-nowrap topic-count-col">{% trans "Views" %}</div>
+          <div class="pr-0 w-1/6 text-sm uppercase d-none d-sm-block text-nowrap topic-last-post-col">{% trans "Last post" %}</div>
         </div>
       </div>
       <div class="p-0 card-body">{% if not force_all_unread and unread_topics == None %}{% get_unread_topics topics request.user as unread_topics %}{% endif %}
       {% for topic in topics %}
-      <div class="flex m-0 px-3 py-2 border-b border-slate">
-        <div class="w-2/3 pl-0 col-md-8 col-sm-9 col-xs-11 topic-name">
-          <div class="topic-inline-pagination float-right d-none d-sm-block">{% topic_pages_inline_list topic %}</div>
+      <div class="flex py-2 px-3 m-0 border-b border-slate">
+        <div class="pl-0 w-2/3 col-md-8 col-sm-9 col-xs-11 topic-name">
+          <div class="float-right topic-inline-pagination d-none d-sm-block">{% topic_pages_inline_list topic %}</div>
           <table class="topic-data-table">
             <tr>
               <td class="pt-1 pr-3 align-top topic-icon {% if topic in unread_topics or force_all_unread %}unread{% endif %}">
                 <i class="fas {% if topic.is_sticky %}fa-lightbulb{% elif topic.is_announce %}fa-info{% else %}fa-dot-circle{% endif %} fa-2x"></i>
               </td>
               <td class="align-top topic-name">
-                <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}" class="topic-name-link text-xl">{{ topic.subject }}</a>{% if topic.is_locked %}&nbsp;<i class="fas fa-times-circle locked-indicator" title="{% trans 'This topic is locked' %}"></i>{% endif %}
+                <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}" class="text-xl topic-name-link">{{ topic.subject }}</a>{% if topic.is_locked %}&nbsp;<i class="fas fa-times-circle locked-indicator" title="{% trans 'This topic is locked' %}"></i>{% endif %}
                 <div>
                   <div class="topic-created">
                   {% if topic.poster %}
@@ -45,9 +45,9 @@
             </tr>
           </table>
         </div>
-        <div class="w-1/6 py-2 d-none d-md-block text-center topic-count">{{ topic.posts_count|add:"-1" }}</div>
-        <div class="w-1/6 py-2 col-md-1 d-none d-md-block text-center topic-count">{{ topic.views_count }}</div>
-        <div class="w-1/6 py-2 col-md-2 col-sm-3 d-none d-sm-block topic-last-post">
+        <div class="py-2 w-1/6 text-center d-none d-md-block topic-count">{{ topic.posts_count|add:"-1" }}</div>
+        <div class="py-2 w-1/6 text-center col-md-1 d-none d-md-block topic-count">{{ topic.views_count }}</div>
+        <div class="py-2 w-1/6 col-md-2 col-sm-3 d-none d-sm-block topic-last-post">
         {% with last_post=topic.last_post %}
           {% if last_post.poster %}
             {% url 'forum_member:profile' last_post.poster_id as poster_url %}
@@ -59,14 +59,14 @@
               <span class="text-sm">By: {{ poster_username }}</span>
             {% endblocktrans %}
           {% endif %}
-          &nbsp;<a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}?post={{ last_post.pk }}#{{ last_post.pk }}"><i class="fas fa-arrow-circle-right "></i></a>
+          &nbsp;<a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}?post={{ last_post.pk }}#{{ last_post.pk }}"><i class="fas fa-arrow-circle-right"></i></a>
           <br />
           <small>{{ last_post.created }}</small>
         {% endwith %}
         </div>
       </div>
       {% empty %}
-      <div class="row m-0 px-3 py-2">
+      <div class="py-2 px-3 m-0 row">
         <div class="p-0 col-12">
         {% if empty_message %}
           {{ empty_message }}
diff --git a/templates/forum_conversation/topic_update.html b/templates/forum_conversation/topic_update.html
index b7e9ce3e..1173b909 100644
--- a/templates/forum_conversation/topic_update.html
+++ b/templates/forum_conversation/topic_update.html
@@ -17,12 +17,12 @@
 {% include "forum_conversation/post_preview.html" %}
 {% endif %}
 <div>
-  <div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
+  <div class="w-full rounded border bg-charcoal/60 border-1 border-slate">
     <div class="card post-edit">
-      <div class="card-header border-b border-slate px-4 py-2">
-        <h3 class="m-0 h5 card-title text-base">{% trans "Edit post" %}</h3>
+      <div class="py-2 px-4 border-b card-header border-slate">
+        <h3 class="m-0 text-base h5 card-title">{% trans "Edit post" %}</h3>
       </div>
-      <div class="card-body p-4">
+      <div class="p-4 card-body">
         {% include "forum_conversation/partials/topic_form.html" %}
       </div>
     </div>
diff --git a/templates/forum_member/forum_profile_detail.html b/templates/forum_member/forum_profile_detail.html
index 7d75b0c3..41e9dd45 100644
--- a/templates/forum_member/forum_profile_detail.html
+++ b/templates/forum_member/forum_profile_detail.html
@@ -8,15 +8,15 @@
 <div class="mb-3 w-full">
   <h1 class="text-4xl">{% blocktrans with username=profile.user|forum_member_display_name %}{{ username }} profile{% endblocktrans %}</h1>
 </div>
-<div class="profile w-full py-3">
-  <div class="profile-sidebar flex mb-6">
-    <div class="profile-avatar w-1/3">
+<div class="py-3 w-full profile">
+  <div class="flex mb-6 profile-sidebar">
+    <div class="w-1/3 profile-avatar">
       {% include "partials/avatar.html" with profile=profile show_placeholder=True %}
     </div>
-    <div class="profile-username w-2/3 text-right pb-3">
+    <div class="pb-3 w-2/3 text-right profile-username">
       <h3 class="mb-3 text-lg">{{ profile.user|forum_member_display_name }}</h3>
       {% if profile.user == request.user %}
-        <a href="{%url 'forum_member:profile_update' %}" class="text-xs rounded border border-slate text-orange py-3 px-4 uppercase">{% trans "Edit profile" %}</a>
+        <a href="{%url 'forum_member:profile_update' %}" class="py-3 px-4 text-xs uppercase rounded border border-slate text-orange">{% trans "Edit profile" %}</a>
       {% endif %}
     </div>
   </div>
@@ -25,7 +25,7 @@
   <div class="w-full">
     <div class="card-header">{% trans "Statistics" %}</div>
 
-    <div class="mt-3 flex space-x-24">
+    <div class="flex mt-3 space-x-24">
       <div>
         {% blocktrans count counter=profile.posts_count %}
           <h4><strong>{{ counter }}</strong></h4>
@@ -43,10 +43,10 @@
     </div>
 
 
-    <div class="w-full rounded p-3 bg-charcoal border border-slate">
-      <h3 class="mb-6 border-b border-slate py-2">{% trans "Recent posts" %}
+    <div class="p-3 w-full rounded border bg-charcoal border-slate">
+      <h3 class="py-2 mb-6 border-b border-slate">{% trans "Recent posts" %}
         {% if recent_posts %}&nbsp;
-        <span class="float-right uppercase text-green bg-green/10 rounded text-xs w-auto px-3 py-1">
+        <span class="float-right py-1 px-3 w-auto text-xs uppercase rounded text-green bg-green/10">
           <a href="{% url 'forum_member:user_posts' profile.user_id %}">{% trans "View all" %}</a>
         </span>
         {% endif %}
@@ -58,7 +58,7 @@
           <div class="text-xl">
             <a href="{% url 'forum_conversation:topic' post.topic.forum.slug post.topic.forum.pk post.topic.slug post.topic.pk %}?post={{ post.pk }}#{{ post.pk }}">{{ post.subject }}</a>
           </div>
-          <p class="text-sm py-1">
+          <p class="py-1 text-sm">
             <i class="fa fa-clock-o"></i>&nbsp;{% blocktrans with creation_date=post.created %}On {{ creation_date }}{% endblocktrans %}
           </p>
           <div class="py-2">
diff --git a/templates/forum_member/topic_subscribe.html b/templates/forum_member/topic_subscribe.html
index d51f0041..83cc275b 100644
--- a/templates/forum_member/topic_subscribe.html
+++ b/templates/forum_member/topic_subscribe.html
@@ -15,8 +15,8 @@
         <div class="mb-3 warning-message">{% trans "Would you like to subscribe to this topic?" %}</div>
         <form action="" method="post">{% csrf_token %}
           <input type="hidden" name="post" value="yes" />
-          <button role="submit" class="border border-orange text-orange py-2 px-3 rounded">{% trans "Yes, I'm sure" %}</button>
-          <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}" class="border border-slate text-white py-3 px-3 rounded ml-3">{% trans "No, take me back" %}</a>
+          <button role="submit" class="py-2 px-3 rounded border border-orange text-orange">{% trans "Yes, I'm sure" %}</button>
+          <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}" class="py-3 px-3 ml-3 text-white rounded border border-slate">{% trans "No, take me back" %}</a>
         </form>
       </div>
     </div>
diff --git a/templates/forum_member/topic_unsubscribe.html b/templates/forum_member/topic_unsubscribe.html
index 4a282200..b9e49c55 100644
--- a/templates/forum_member/topic_unsubscribe.html
+++ b/templates/forum_member/topic_unsubscribe.html
@@ -15,8 +15,8 @@
         <div class="mb-3 warning-message">{% trans "Would you like to unsubscribe from this topic?" %}</div>
         <form action="" method="post">{% csrf_token %}
           <input type="hidden" name="post" value="yes" />
-          <button role="submit" class="border border-orange text-orange py-2 px-3 rounded">{% trans "Yes, I'm sure" %}</button>
-          <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}" class="border border-slate text-white py-3 px-3 rounded ml-3">{% trans "No, take me back" %}</a>
+          <button role="submit" class="py-2 px-3 rounded border border-orange text-orange">{% trans "Yes, I'm sure" %}</button>
+          <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}" class="py-3 px-3 ml-3 text-white rounded border border-slate">{% trans "No, take me back" %}</a>
         </form>
       </div>
     </div>
diff --git a/templates/forum_moderation/moderation_queue/list.html b/templates/forum_moderation/moderation_queue/list.html
index 687700fb..f2c734cb 100644
--- a/templates/forum_moderation/moderation_queue/list.html
+++ b/templates/forum_moderation/moderation_queue/list.html
@@ -74,7 +74,7 @@
           </div>
         </div>
         {% empty %}
-        <div class="row m-0 px-3 py-2">
+        <div class="py-2 px-3 m-0 row">
           <div class="p-0 col-12">
             {% trans "No posts awaiting approval." %}
           </div>
diff --git a/templates/homepage.html b/templates/homepage.html
index a8b7dd96..945a816a 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -4,54 +4,60 @@
 
 {% block content %}
   <!-- Homepage Hero Section -->
-  <main class="my-16 mx-auto md:max-w-7xl px-4 sm:mt-24">
+  <main class="px-4 my-16 mx-auto sm:mt-24 md:max-w-7xl">
     <div class="md:flex">
-      <div class="w-full md:w-1/2 text-center mt-6 md:mt-3 order-1 md:order-2">
+      <div class="order-1 mt-6 w-full text-center md:order-2 md:mt-3 md:w-1/2">
         <div id="scene03"></div>
       </div>
       <div class="text-left md:w-1/2">
-        <h1 class="font-extrabold  text-4xl md:text-6xl">
+        <h1 class="text-4xl font-extrabold md:text-6xl">
           <span class="block xl:inline">Boost provides free peer-reviewed portable C++ source libraries.</span>
         </h1>
-        <p class="mt-3 md:mb-11 max-w-md mx-auto text-base text-lg md:mt-5 md:text-xl md:max-w-3xl">Experience C++ libraries created by experts to be reliable, skillfully designed, and well-tested.</p>
-        <div class="mt-5 max-w-md md:flex justify-center md:justify-between md:mt-8 space-y-3 md:space-y-0">
-          <a href="#" class="flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-4"><img class="mt-1 pr-2" src="{% static 'img/icons/icon-download-orng.svg' %}" alt="Downloads" /> Download Latest </a>
-          <a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Version Details > </a>
+        <p class="mx-auto mt-3 max-w-md text-base text-lg md:mt-5 md:mb-11 md:max-w-3xl md:text-xl">Experience C++ libraries created by experts to be reliable, skillfully designed, and well-tested.</p>
+        <div class="justify-center mt-5 space-y-3 max-w-md md:flex md:justify-between md:mt-8 md:space-y-0">
+          <a href="#" class="flex justify-center items-center py-3 px-8 text-base font-medium text-white rounded-md border md:py-4 md:px-4 md:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
+            <i class="pr-2 text-white fas fa-arrow-circle-down dark:text-orange"></i> Download Latest
+          </a>
+          <a href="#" class="flex justify-center items-center py-3 px-8 text-base font-medium bg-gray-300 rounded-md border md:py-4 md:px-10 md:text-lg border-steel text-slate dark:bg-charcoal dark:text-orange">
+            Version Details <i class="pl-2 fas fa-chevron-right text-slate dark:text-orange"></i>
+          </a>
         </div>
       </div>
     </div>
 
-    <div class="md:flex my-16 border-t border-slate md:border-t-0 py-4">
+    <div class="py-4 my-16 border-t md:flex md:border-t-0 border-slate">
       <div class="md:order-last md:w-1/2">
-        <h2 class="text-4xl mb-3">Boost Mission</h2>
+        <h2 class="mb-3 text-4xl">Boost Mission</h2>
         The Boost mission is threefold:
-        <ul class="mb-11 list-disc ml-6 space-y-2">
+        <ul class="mb-11 ml-6 space-y-2 list-disc">
           <li>develop high-quality, expert+reviewed, open-source C++ libraries</li>
           <li>incubate C++ standard library enhancements</li>
           <li>advance and disseminate C++ software development best practices</li>
         </ul>
         <div>
-          <a href="{% url 'boost-about' %}" class="justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> About Us > </a>
+          <a href="{% url 'boost-about' %}" class="justify-center py-3 px-8 text-base font-medium bg-gray-300 rounded-md border md:py-4 md:px-10 md:text-lg border-steel text-slate dark:bg-charcoal dark:text-orange">
+            About Us <i class="fas fa-chevron-right text-slate dark:text-orange"></i>
+          </a>
         </div>
       </div>
-      <div class="flex md:w-1/2 my-16">
-        <div class="w-1/2 items-center text-center">
+      <div class="flex my-16 md:w-1/2">
+        <div class="items-center w-1/2 text-center">
           <img class="mx-auto mb-2" src="{% static 'img/icons/icon-download-grn.svg' %}" alt="Downloads" />
-          <h4 class="text-5xl mb-3">10M+</h4>
+          <h4 class="mb-3 text-5xl">10M+</h4>
           Total Downloads
         </div>
-        <div class="w-1/2 items-center text-center">
+        <div class="items-center w-1/2 text-center">
           <img class="mx-auto mb-2" src="{% static 'img/icons/icon-library-grn.svg' %}" alt="Libraries" />
-          <h4 class="text-5xl mb-3">165+</h4>
+          <h4 class="mb-3 text-5xl">165+</h4>
           Individual Libraries
         </div>
       </div>
     </div>
 
-    <div class="md:flex my-4 md:my-16 md:space-x-4 space-y-4 md:space-y-0">
-      <div class="md:w-1/2 rounded bg-white dark:bg-charcoal p-4 md:p-11">
+    <div class="my-4 space-y-4 md:flex md:my-16 md:space-y-0 md:space-x-4">
+      <div class="p-4 bg-white rounded md:p-11 md:w-1/2 dark:bg-charcoal">
         <div class="mb-6">
-          <span class="inline uppercase text-green bg-green/10 rounded text-sm md:text-base w-auto px-3 py-1">library spotlight</span>
+          <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">library spotlight</span>
         </div>
         <h3 class="text-xl">Boost.JSON</h3>
         <p class="my-3">Released 4/5/22</p>
@@ -60,77 +66,81 @@
         <div class="my-5"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
         <div class="mt-5 max-w-md sm:flex md:mt-8">
           <div class="rounded-md shadow">
-            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Download </a>
+            <a href="#" class="flex justify-center items-center py-3 px-8 w-full text-base font-medium text-white rounded-md border md:py-4 md:px-10 md:text-base border-orange bg-orange">
+              <i class="pr-2 fas fa-arrow-circle-down"></i> Download
+            </a>
           </div>
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Version Details > </a>
+            <a href="#" class="flex justify-center items-center py-3 px-8 w-full text-base font-medium bg-gray-300 rounded-md border md:py-4 md:px-10 md:text-base border-steel text-slate dark:bg-charcoal dark:text-orange">
+              Version Details <i class="pl-2 fas fa-chevron-right text-slate dark:text-orange"></i>
+            </a>
           </div>
         </div>
       </div>
-      <div class="md:w-1/2 rounded bg-white dark:bg-charcoal p-4 md:p-11">
+      <div class="p-4 bg-white rounded md:p-11 md:w-1/2 dark:bg-charcoal">
         <div class="mb-6">
-          <span class="inline uppercase text-green bg-green/10 rounded text-sm md:text-base w-auto px-3 py-1">featured video</span>
+          <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">featured video</span>
         </div>
         <img src="{% static 'img/fpo/video_fpo.png' %}" alt="user" class="mb-2" />
         <div class="text-lg">Name of Video</div>
       </div>
     </div>
 
-    <div class="hidden md:block my-4 md:my-16 rounded bg-white dark:bg-charcoal px-4 md:px-11 py-5">
-      <div class="flex justify-between mb-6 items-center">
-        <span class="inline uppercase text-green bg-green/10 rounded text-sm md:text-base w-auto px-3 py-1">Recent reviews</span>
-        <span class="inline uppercase text-orange w-auto px-2 text-xs md:text-base"><a href="{% url 'review-upcoming' %}">See All ></a></span>
+    <div class="hidden py-5 px-4 my-4 bg-white rounded md:block md:px-11 md:my-16 dark:bg-charcoal">
+      <div class="flex justify-between items-center mb-6">
+        <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">Recent reviews</span>
+        <span class="inline px-2 w-auto text-xs uppercase md:text-base text-orange"><a href="{% url 'review-upcoming' %}">See All ></a></span>
       </div>
-      <div class="md:flex md:space-x-6 py-11 md:divide-x-2 divide-slate">
-        <div class="md:pl-6 pr-2">
-          <h3 class="text-2xl pb-3">Library Name Here</h3>
-          <p class="text-lg py-5">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
+      <div class="py-11 divide-gray-200 md:flex md:space-x-6 md:divide-x-2 dark:divide-slate">
+        <div class="pr-2 md:pl-6">
+          <h3 class="pb-3 text-2xl">Library Name Here</h3>
+          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
           <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
         </div>
-        <div class="md:pl-6 pr-2">
-          <h3 class="text-2xl pb-3">Library Name Here</h3>
-          <p class="text-lg py-5">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
+        <div class="pr-2 md:pl-6">
+          <h3 class="pb-3 text-2xl">Library Name Here</h3>
+          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
           <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
         </div>
-        <div class="md:pl-6 pr-2">
-          <h3 class="text-2xl pb-3">Library Name Here</h3>
-          <p class="text-lg py-5">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
+        <div class="pr-2 md:pl-6">
+          <h3 class="pb-3 text-2xl">Library Name Here</h3>
+          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
           <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
         </div>
       </div>
     </div>
 
     <!-- RECENT NEWS & JOIN CONVERSATION -->
-    <div class="md:flex my-4 md:my-16 md:space-x-4">
-      <div class="md:w-1/2 rounded bg-white dark:bg-charcoal px-4 md:px-11 py-5">
-        <div class="flex justify-between mb-6 items-center">
-          <span class="inline uppercase text-green bg-green/10 rounded text-sm md:text-base w-auto px-3 py-1">recent news</span>
-          <span class="inline uppercase text-orange w-auto text-xs md:text-base"><a href="{% url 'news' %}">See All ></a></span>
+    <div class="my-4 md:flex md:my-16 md:space-x-4">
+      <div class="py-5 px-4 bg-white rounded md:px-11 md:w-1/2 dark:bg-charcoal">
+        <div class="flex justify-between items-center mb-6">
+          <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">recent news</span>
+          <span class="inline w-auto text-xs uppercase md:text-base text-orange"><a href="{% url 'news' %}">See All ></a></span>
         </div>
-        <div class="divide-y divide-slate space-y-8">
+        <div class="space-y-8 divide-y divide-gray-200 dark:divide-slate">
           <div class="pt-6">
-            <h3 class="text-xl mb-2">Name of Article</h3>
+            <h3 class="mb-2 text-xl">Name of Article</h3>
             <p class="mb-3">Category | 4/5/22</p>
             <p class="mb-3">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum... <a href="" class="text-orange">Read&nbsp;More</a></p>
           </div>
           <div class="pt-6">
-            <h3 class="text-xl mb-2">Name of Article</h3>
+            <h3 class="mb-2 text-xl">Name of Article</h3>
             <p class="mb-3">Category | 4/5/22</p>
             <p class="mb-3">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum... <a href="" class="text-orange">Read&nbsp;More</a></p>
           </div>
           <div class="pt-6">
-            <h3 class="text-xl mb-2">Name of Article</h3>
+            <h3 class="mb-2 text-xl">Name of Article</h3>
             <p class="mb-3">Category | 4/5/22</p>
             <p class="mb-3">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum... <a href="" class="text-orange">Read&nbsp;More</a></p>
           </div>
         </div>
       </div>
-      <div class="md:w-1/2 my-4 md:my-0 rounded bg-white dark:bg-charcoal px-4 md:px-11 py-5">
-        <div class="flex justify-between mb-6 items-center">
-          <span class="inline uppercase text-green bg-green/10 rounded text-sm md:text-base w-auto px-3 py-1">Join the conversation</span>
-          <span class="inline uppercase text-orange w-auto text-xs md:text-base"><a href="/forum/">Visit&nbsp;Forum ></a></span>
+      <div class="py-5 px-4 my-4 bg-white rounded md:px-11 md:my-0 md:w-1/2 dark:bg-charcoal">
+        <div class="flex justify-between items-center mb-6">
+          <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">Join the conversation</span>
+          <span class="inline w-auto text-xs uppercase md:text-base text-orange"><a href="/forum/">Visit&nbsp;Forum ></a></span>
         </div>
-        <div class="divide-y divide-slate space-y-8">
+        <div class="space-y-8 divide-y divide-gray-200 dark: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>
@@ -154,8 +164,8 @@
 
     <!-- BOOST LIBRARIES LOGOS AND TESTIMONIALS -->
 {#    <div>#}
-{#      <h2 class="text-center text-4xl">Boost Libraries Headline</h2>#}
-{#      <div class="justify-between grid grid-cols-2 md:grid-cols-6 my-16 justify-items-center items-center gap-4">#}
+{#      <h2 class="text-4xl text-center">Boost Libraries Headline</h2>#}
+{#      <div class="grid grid-cols-2 gap-4 justify-between justify-items-center items-center my-16 md:grid-cols-6">#}
 {#        <img src="{% static 'img/fpo/airbus.svg' %}" alt="airbus" />#}
 {#        <img src="{% static 'img/fpo/usairforce.svg' %}" alt="air force" />#}
 {#        <img src="{% static 'img/fpo/airbus.svg' %}" alt="airbus" />#}
diff --git a/templates/includes/_contact_form.html b/templates/includes/_contact_form.html
index aaabe8c1..380c707c 100644
--- a/templates/includes/_contact_form.html
+++ b/templates/includes/_contact_form.html
@@ -1,6 +1,6 @@
 <form action="" method="POST">
   <div class="space-y-5">
-    <div class="w-full flex space-x-3">
+    <div class="flex space-x-3 w-full">
       <div class="w-1/2">
         {% include "includes/_form_input.html" with form=form field=form.first_name %}
       </div>
@@ -20,8 +20,8 @@
     <div class="w-full">
       {% include "includes/_form_input.html" with form=form field=form.message %}
     </div>
-    <div class="w-full mt-3">
-      <button type="submit" class="py-2 px-3 text-sm rounded-lg border border-orange uppercase text-orange">Submit</button>
+    <div class="mt-3 w-full">
+      <button type="submit" class="py-2 px-3 text-sm uppercase rounded-lg border border-orange text-orange">Submit</button>
     </div>
   </div>
 </form>
diff --git a/templates/includes/_footer.html b/templates/includes/_footer.html
index ce69b5bc..6bc70014 100644
--- a/templates/includes/_footer.html
+++ b/templates/includes/_footer.html
@@ -1,23 +1,23 @@
 {% load static %}
 
-<footer class="my-5 md:my-6 mx-auto max-w-7xl px-4 sm:mt-24 py-5 md:py-4">
+<footer class="py-5 px-4 my-5 mx-auto max-w-7xl sm:mt-24 md:py-4 md:my-6">
   {% if not request.user.is_authenticated %}
   <div class="md:flex" id="footerSignup">
-    <div class="text-left md:w-1/2 content-center gap-4 grid">
+    <div class="grid gap-4 content-center text-left md:w-1/2">
       <div>
-        <h1 class="text-4xl tracking-tight font-extrabold  sm:text-5xl md:text-6xl block xl:inline pt-6">
+        <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="my-16 grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div><img class="float-left mr-3 mt-1 h-8 w-auto" src="{% static 'img/icons/icon_Cup-C++.svg' %}" alt=""> Best collections of C++ libraries</div>
-        <div><img class="float-left mr-3 mt-1 h-8 w-auto" src="{% static 'img/icons/icon_graduation-cap.svg' %}" alt=""> Supports research and education for C++</div>
-        <div><img class="float-left mr-3 mt-1 h-8 w-auto" src="{% static 'img/icons/icon_down-arrow-stack.svg' %}" alt=""> Accessible with minimal restriction</div>
-        <div><img class="float-left mr-3 mt-1 h-8 w-auto" src="{% static 'img/icons/icon_three-people.svg' %}" alt=""> Collaborative community</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="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-3 md:text-lg md:px-8">Sign Up > </a>
+          <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>
@@ -27,17 +27,17 @@
   </div>
   {% endif %}
 
-  <div class="px-5 pt-4 md:flex items-center mt-16">
+  <div class="items-center px-5 pt-4 mt-16 md:flex">
     <div class="mr-11">
-      <img class="h-[53px] w-auto" src="{% static 'img/Boost_Symbol_Transparent.svg' %}" alt="">
+      <img class="w-auto h-[53px]" src="{% static 'img/Boost_Symbol_Transparent.svg' %}" alt="">
     </div>
-    <div class="justify-between md:space-x-10 pt-3 pb-3 w-1/2">
-      <a class="my-2 block md:inline" href="/">&#169; 2022 Boost.org</a>
-      <a class="my-2 block md:inline" href="{% url 'contact' %}">Contact</a>
-      <a class="my-2 block md:inline" href="">Privacy Policy</a>
-      <a class="my-2 block md:inline" href="">Terms of Use</a>
+    <div class="justify-between pt-3 pb-3 w-1/2 md:space-x-10">
+      <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>
+      <a class="block my-2 md:inline" href="">Terms of Use</a>
     </div>
-    <div class="md:space-x-5 space-x-3 pt-3 pb-3 md:text-right w-1/2">
+    <div class="pt-3 pb-3 space-x-3 w-1/2 md:space-x-5 md:text-right">
       <a href="https://twitter.com/boost_libraries" target="_blank"><i class="fab fa-twitter text-orange hover:orange/70"></i></a>
       <a href="https://github.com/boostorg" target="_blank"><i class="fab fa-github text-orange hover:orange/70"></i></a>
     </div>
diff --git a/templates/includes/_form_input.html b/templates/includes/_form_input.html
index 8b10a4b6..0f5238b6 100644
--- a/templates/includes/_form_input.html
+++ b/templates/includes/_form_input.html
@@ -3,17 +3,17 @@
 
 {% if form.is_bound %}
   {% if field.errors %}
-    {% render_field field class="rounded bg-charcoal text-slate w-full" placeholder="{{ field.label }}" %}
+    {% render_field field class="w-full rounded bg-charcoal text-slate" placeholder="{{ field.label }}" %}
 
     {% for error in field.errors %}
-    <div class="bg-red text-white">
+    <div class="text-white bg-red">
       {{ error }}
     </div>
     {% endfor %}
 
   {% else %}
-    {% render_field field class="rounded bg-charcoal text-slate w-full" placeholder="{{ field.label }}" %}
+    {% render_field field class="w-full rounded bg-charcoal text-slate" placeholder="{{ field.label }}" %}
   {% endif %}
 {% else %}
-  {% render_field field class="rounded bg-charcoal text-slate w-full" placeholder=field.label %}
+  {% render_field field class="w-full rounded bg-charcoal text-slate" placeholder=field.label %}
 {% endif %}
diff --git a/templates/includes/_header.html b/templates/includes/_header.html
index 5369b043..f3d36e88 100644
--- a/templates/includes/_header.html
+++ b/templates/includes/_header.html
@@ -5,29 +5,29 @@
 <div class="relative">
   <div class="relative pb-11 md:pb-6">
     <div>
-      <div class="hidden items-center py-5 border-b-2 md:flex border-gray-300 darK:border-charcoal">
+      <div class="hidden items-center py-5 border-b-2 border-gray-300 md:flex darK:border-charcoal">
         <div class="w-[200px]">
           <a href="{% url 'home' %}">
-              <img class="w-auto h-[50px] hidden dark:inline-block"
+              <img class="hidden w-auto dark:inline-block h-[50px]"
                    src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}"
                    alt="Boost">
 
-              <img class="w-auto h-[50px] inline-block dark:hidden"
+              <img class="inline-block w-auto dark:hidden h-[50px]"
                    src="{% static 'img/Boost_Brandmark_BlackBoost_Transparent.svg' %}"
                    alt="Boost">
           </a>
         </div>
         <div class="flex pt-5 w-full">
           <nav class="relative items-center pl-6 space-x-10 w-3/4 text-lg text-left">
-            <a href="{% url 'news' %}" class="font-semibold dark:font-medium text-slate/80 dark:text-white hover:text-orange dark:hover:text-orange">News</a>
-            <a href="{% url 'docs' %}" class="font-semibold dark:font-medium text-slate/80 dark:text-white hover:text-orange dark:hover:text-orange">Learn</a>
-            <a href="/forum/" class="font-semibold dark:font-medium text-slate/80 dark:text-white hover:text-orange dark:hover:text-orange">Community</a>
-            <a href="/libraries/" class="font-semibold dark:font-medium text-slate/80 dark:text-white hover:text-orange dark:hover:text-orange">Libraries</a>
-            <a href="#" class="font-semibold dark:font-medium text-slate/80 dark:text-white hover:text-orange dark:hover:text-orange">Releases</a>
+            <a href="{% url 'news' %}" class="font-semibold dark:font-medium dark:text-white text-slate/80 dark:hover:text-orange hover:text-orange">News</a>
+            <a href="{% url 'docs' %}" class="font-semibold dark:font-medium dark:text-white text-slate/80 dark:hover:text-orange hover:text-orange">Learn</a>
+            <a href="/forum/" class="font-semibold dark:font-medium dark:text-white text-slate/80 dark:hover:text-orange hover:text-orange">Community</a>
+            <a href="/libraries/" class="font-semibold dark:font-medium dark:text-white text-slate/80 dark:hover:text-orange hover:text-orange">Libraries</a>
+            <a href="#" class="font-semibold dark:font-medium dark:text-white text-slate/80 dark:hover:text-orange hover:text-orange">Releases</a>
           </nav>
           <nav class="items-center space-x-5 w-1/4 text-right" x-data="{ 'searchOpen': false }">
             <span class="relative">
-              <i class="text-slate/80 dark:text-white/50 hover:text-orange dark:hover:text-orange fas fa-search inline-flex -mt-1 cursor-pointer" @click="searchOpen = !searchOpen"></i>
+              <i class="inline-flex -mt-1 cursor-pointer text-slate/80 fas fa-search dark:text-white/50 dark:hover:text-orange hover:text-orange" @click="searchOpen = !searchOpen"></i>
               <div x-show="searchOpen"
                    @click.away="searchOpen = false"
                    x-transition:enter="transition ease-out duration-100"
@@ -48,7 +48,7 @@
                 <form action="https://www.google.com/search" method="get" name="searchform" target="_blank">
                   <input name="sitesearch" type="hidden" value="boost.org">
                   <input autocomplete="on"
-                         class="py-2 px-3 text-xs text-charcoal dark:text-charcoal rounded-lg border-gray-300 dark:border-slate bg-white dark:bg-charcoal"
+                         class="py-2 px-3 text-xs bg-white rounded-lg border-gray-300 text-charcoal dark:text-charcoal dark:border-slate dark:bg-charcoal"
                          name="q"
                          placeholder="Search Boost.org"
                          required="required"
@@ -56,22 +56,22 @@
                   >
                   <span class="flex absolute inset-y-0 right-3 items-center pl-2">
                     <button type="submit">
-                      <i class="fas fa-search text-charcoal dark:text-white/40 hover:text-orange dark:hover:text-orange"></i>
+                      <i class="fas fa-search text-charcoal dark:text-white/40 dark:hover:text-orange hover:text-orange"></i>
                     </button>
                   </span>
                 </form>
               </div>
             </span>
 
-            <a href="{% url 'support' %}" class="inline-flex"><i class="text-slate/80 dark:text-white/50 hover:text-orange dark:hover:text-orange fas fa-question-circle"></i></a>
+            <a href="{% url 'support' %}" class="inline-flex"><i class="text-slate/80 fas fa-question-circle dark:text-white/50 dark:hover:text-orange hover:text-orange"></i></a>
 
             <!-- theme switcher -->
             <span x-data="{ 'modeOpen': false }" class="relative">
               <span class="dark:hidden">
-                <i class="fas fa-sun inline-block cursor-pointer text-sky-500 dark:text-white/50 hover:text-gold dark:hover:text-gold" @click="modeOpen = !modeOpen"></i>
+                <i class="inline-block cursor-pointer fas fa-sun text-sky-500 dark:text-white/50 dark:hover:text-gold hover:text-gold" @click="modeOpen = !modeOpen"></i>
               </span>
               <span class="hidden dark:inline">
-                <i class="fas fa-moon inline-block cursor-pointer text-orange dark:text-sky-600 hover:text-gold/60 dark:hover:text-gold/80" @click="modeOpen = !modeOpen"></i>
+                <i class="inline-block cursor-pointer fas fa-moon text-orange dark:text-sky-600 dark:hover:text-gold/80 hover:text-gold/60" @click="modeOpen = !modeOpen"></i>
               </span>
 
               <div
@@ -96,23 +96,23 @@
                     }
                 }"
 
-                class="bg-white dark:bg-charcoal absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left rounded-md divide-y divide-gray-300 ring-1 ring-gray-300 dark:ring-gray-500 shadow-lg origin-top-right"
+                class="absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left bg-white rounded-md divide-y divide-gray-300 ring-1 ring-gray-300 shadow-lg origin-top-right dark:ring-gray-500 dark:bg-charcoal"
               >
                 <a
                   @click="mode='light'; setColorMode('light'); modeOpen = false;"
                   :class="{'font-bold': mode === 'light', 'font-thin': mode !== 'light' }"
-                  class="cursor-pointer block py-2 text-xs text-charcoal dark:text-white hover:text-orange dark:hover:text-orange dark:hover:text-orange dark:hover:text-orange"
+                  class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                   >
-                  <i class="fas fa-sun inline-block text-gold mr-1"></i>
+                  <i class="inline-block mr-1 fas fa-sun text-gold"></i>
                   Light Mode
                 </a>
 
                 <a
                   @click="mode = 'dark'; setColorMode('dark'); modeOpen = false;"
                   :class="{'font-bold': mode === 'dark', 'font-thin': mode !== 'dark' }"
-                  class="cursor-pointer block py-2 text-xs text-charcoal dark:text-white hover:text-orange dark:hover:text-orange dark:hover:text-orange dark:hover:text-orange"
+                  class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                   >
-                  <i class="fas fa-moon inline-block text-sky-600 mr-1"></i>
+                  <i class="inline-block mr-1 fas fa-moon text-sky-600"></i>
                   Dark Mode
                 </a>
               </div>
@@ -121,7 +121,7 @@
 
             <span x-data="{ 'userOpen': false }" class="relative">
               {% if not user.is_authenticated %}
-                <a href="{% url 'account_signup' %}" class="font-medium text-charcoal dark:text-white hover:text-orange dark:hover:text-orange">Join</a>
+                <a href="{% url 'account_signup' %}" class="font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Join</a>
               {% else %}
                 {% if user.image %}
                   <img src="{{ user.image.url }}" alt="user" class="inline-flex rounded-sm cursor-pointer w-[30px]" @click="userOpen = !userOpen" />
@@ -139,7 +139,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 right-0 z-10 py-1 px-2 mt-2 w-32 text-left rounded-md divide-y divide-gray-300 darK:divide-gray-500 ring-1 ring-gray-300 dark:ring-gray-500 shadow-lg origin-top-right bg-white dark:bg-charcoal"
+                   class="absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left bg-white rounded-md divide-y divide-gray-300 ring-1 ring-gray-300 shadow-lg origin-top-right dark:ring-gray-500 darK:divide-gray-500 dark:bg-charcoal"
                    x-ref="menu-items"
                    x-description="Profile Menu"
                    role="menu"
@@ -148,8 +148,8 @@
                    tabindex="-1"
                    style="display: none;"
               >
-                <a href="#" class="block py-2 text-xs text-charcoal dark:text-white hover:text-orange dark:hover:text-orange">My Profile</a>
-                <a href="{% url 'account_logout' %}" class="block py-2 text-xs text-charcoal dark:text-white hover:text-orange dark:hover:text-orange">Log Out</a>
+                <a href="#" class="block py-2 text-xs dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">My Profile</a>
+                <a href="{% url 'account_logout' %}" class="block py-2 text-xs dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Log Out</a>
               </div>
             {% endif %}
             </span>
@@ -205,17 +205,17 @@
         </div>
         <div x-show="isOpen" class="absolute inset-x-0 top-10 z-50 h-screen bg-charcoal">
           <div class="px-2 pt-2 pb-3 text-2xl">
-            <a href="/versions/" class="block py-2 px-3 text-white hover:text-orange dark:hover:text-orange">Versions</a>
+            <a href="/versions/" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Versions</a>
 
-            <a href="/libraries/" class="block py-2 px-3 text-white hover:text-orange dark:hover:text-orange">Libraries</a>
+            <a href="/libraries/" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Libraries</a>
 
-            <a href="{% url 'review-process' %}" class="block py-2 px-3 text-white hover:text-orange dark:hover:text-orange">Review Process</a>
+            <a href="{% url 'review-process' %}" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Review Process</a>
 
-            <a href="/forum/" class="block py-2 px-3 text-white hover:text-orange dark:hover:text-orange">Forums</a>
+            <a href="/forum/" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Forums</a>
 
-            <a href="{% url 'news' %}" class="block py-2 px-3 text-white hover:text-orange dark:hover:text-orange">News</a>
+            <a href="{% url 'news' %}" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">News</a>
 
-            <a href="{% url 'donate' %}" class="block py-2 px-3 text-white hover:text-orange dark:hover:text-orange">Donate</a>
+            <a href="{% url 'donate' %}" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Donate</a>
           </div>
           <div class="absolute left-0 bottom-10 px-2 pt-2 pb-3 text-sm">
             <a href="{% url 'boost-about' %}" class="block py-2 px-3 text-gray-700 text-thin">About</a>
diff --git a/templates/libraries/_library_list_item.html b/templates/libraries/_library_list_item.html
index 8562f630..17544200 100644
--- a/templates/libraries/_library_list_item.html
+++ b/templates/libraries/_library_list_item.html
@@ -1,8 +1,8 @@
 {% load static %}
 
-<div class="p-3 rounded md:p-5 bg-white dark:bg-charcoal relative content-between">
+<div class="relative content-between p-3 bg-white rounded md:p-5 dark:bg-charcoal">
   <div class="">
-    <h3 class="text-2xl capitalize border-b border-slate pb-2">
+    <h3 class="pb-2 text-2xl capitalize border-b border-gray-300 dark:border-slate">
       <a class="text-orange" href="
                {% if version_slug %}
                  {% url 'library-detail-by-version' version_slug=version_slug slug=library.slug %}
@@ -12,7 +12,7 @@
       >{{ library.name }}</a>
       {% for author in library.authors.all %}
         {% if author.image %}
-          <img src="{{ author.image.url }}" class="inline rounded w-[30px] float-right" alt="{{ author.get_display_name }}" />
+          <img src="{{ author.image.url }}" class="inline float-right rounded w-[30px]" alt="{{ author.get_display_name }}" />
         {% endif %}
       {% endfor %}
     </h3>
@@ -21,9 +21,9 @@
     <p class="mb-3 text-gray-700 dark:text-gray-300">{{ library.description }}</p>
   </div>
   <div class="text-sm flex py-3 bottom-0 absolute w-[90%]">
-    <div class="w-1/6"><span class="rounded-full border border-green/40 py-1 px-2 text-gray-400 text-sm font-bold hover:bg-green/40">{{ library.cpp_standard_minimum }}</span></div>
-    <div class="w-1/6 text-charcoal dark:text-white/60 tracking-wider">2yrs</div>
-    <div class="w-4/6 text-right text-slate dark:text-gray-400">
+    <div class="w-1/6"><span class="py-1 px-2 text-sm font-bold text-gray-400 rounded-full border bg-green/20 border-green/40 dark:bg-green/10">{{ library.cpp_standard_minimum }}</span></div>
+    <div class="w-1/6 tracking-wider text-charcoal dark:text-white/60">2yrs</div>
+    <div class="w-4/6 text-right dark:text-gray-400 text-slate">
       {% for c in library.categories.all %}
         <a href="{% if version_slug %}{% url 'libraries-by-version-by-category' version_slug=version_slug category=c.slug%}{% else %}{% url 'libraries-by-category' category=c.slug %}{% endif %}" class="text-sky-400 dark:text-blue-300/60">
           {{ c.name }}
diff --git a/templates/libraries/list.html b/templates/libraries/list.html
index bcb103c6..d3694db2 100644
--- a/templates/libraries/list.html
+++ b/templates/libraries/list.html
@@ -32,7 +32,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 text-sky-600 dark:text-orange rounded-md md:w-1/3 bg-white border-gray-300 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 text-sky-600 dark:text-orange dark:border-slate dark:bg-charcoal focus:text-charcoal" type="text" value="" placeholder="Search Library" />
       </div>
 
       <!-- Form to select a category -->
@@ -42,7 +42,7 @@
           <label for="id_categories" hidden="true">Categories:</label>
           <select onchange="this.form.submit()"
                   name="categories"
-                  class="block py-2 pr-11 pl-5 mb-3 w-full text-sm uppercase bg-white dark:bg-black rounded-md border cursor-pointer sm:inline-block md:mb-0 md:w-auto text-sky-600 dark:text-orange border-gray-300 dark:border-slate"
+                  class="block py-2 pr-11 pl-5 mb-3 w-full text-sm uppercase bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
                   id="id_categories"
           >
             <option>Filter by category</option>
@@ -58,7 +58,7 @@
   </div>
 
   <!-- Libraries list -->
-  <div class="mb-5 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+  <div class="grid grid-cols-1 gap-4 mb-5 md:grid-cols-2 xl:grid-cols-3">
     {% for library in object_list %}
       {% include "libraries/_library_list_item.html" %}
     {% endfor %}
diff --git a/templates/mailing_list/list.html b/templates/mailing_list/list.html
index 9d7a371d..ce836207 100644
--- a/templates/mailing_list/list.html
+++ b/templates/mailing_list/list.html
@@ -23,7 +23,7 @@
         </li>
       {% endfor %}
     </ul>
-    <div class="space-x-3 text-center mt-5">
+    <div class="mt-5 space-x-3 text-center">
       {% if messages.has_previous %}
         <a href="?page=1" class="text-orange"><small> &lt;&lt; First</small></a>
         <a href="?page={{ messages.previous_page_number }}" class="text-orange"><small> &lt; Previous</small> </a>
diff --git a/templates/markdown_template.html b/templates/markdown_template.html
index a09029bf..bf194af3 100644
--- a/templates/markdown_template.html
+++ b/templates/markdown_template.html
@@ -8,7 +8,7 @@
 {% block author %}{{ frontmatter.author }}{% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
 
     <div class="mb-6 md:mb-0">
       {{ content|safe }}
diff --git a/templates/news/news_detail.html b/templates/news/news_detail.html
index 8582ded1..7513d5ab 100644
--- a/templates/news/news_detail.html
+++ b/templates/news/news_detail.html
@@ -9,8 +9,8 @@
   </div>
 
   <!-- end breadcrumb -->
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:w-3/4 py-16 md:mx-auto">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="py-16 md:mx-auto md:w-3/4">
       <h1 class="text-4xl">
         Boost has moved downloads to JFrog Artifactory
       </h1>
@@ -44,7 +44,7 @@
 
     </div>
 
-    <div class="flex border-t border-b border-slate py-8 my-5 md:w-3/4 md:mx-auto space-x-4">
+    <div class="flex py-8 my-5 space-x-4 border-t border-b md:mx-auto md:w-3/4 border-slate">
       <span class="inline-block">Share:</span>
       <img class="inline-block" src="{% static 'img/icons/icon_Facebook-logo.svg' %}" alt="Facebook" />
       <img class="inline-block" src="{% static 'img/icons/icon_Twitter-logo.svg' %}" alt="Twitter" />
@@ -52,14 +52,13 @@
       <img class="inline-block" src="{% static 'img/icons/icon_email.svg' %}" alt="Email" />
     </div>
 
-    <div class="flex md:w-3/4 md:mx-auto my-16 block">
+    <div class="block flex my-16 md:mx-auto md:w-3/4">
       <div class="w-1/2 text-left">
-        <a href="#" class="uppercase px-4 py-2 border border-slate text-sm font-medium rounded-md text-orange">< Newer Entries</a>
+        <a href="#" class="py-2 px-4 text-sm font-medium uppercase rounded-md border border-slate text-orange">< Newer Entries</a>
       </div>
       <div class="w-1/2 text-right">
-        <a href="#" class="uppercase px-4 py-2 border border-slate text-sm font-medium rounded-md text-orange">Older Entries ></a>
+        <a href="#" class="py-2 px-4 text-sm font-medium uppercase rounded-md border border-slate text-orange">Older Entries ></a>
       </div>
     </div>
   </div>
 {% endblock %}
-
diff --git a/templates/news/news_list.html b/templates/news/news_list.html
index 3f4338c0..03f47040 100644
--- a/templates/news/news_list.html
+++ b/templates/news/news_list.html
@@ -3,15 +3,15 @@
 {% load static %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:w-full py-16">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="py-16 md:w-full">
       <h1 class="text-4xl text-center">Boost News</h1>
-      <p class="text-center mt-0">
+      <p class="mt-0 text-center">
         Keep up with the latest exciting news from Boost and our community!
       </p>
 
-      <div class="flex w-full py-11 mt-11 border-t border-slate">
-        <div class="w-1/4 py-5">
+      <div class="flex py-11 mt-11 w-full border-t border-slate">
+        <div class="py-5 w-1/4">
           <h3>Version 1.78.0</h3>
           <p class="p-0">December 8th, 2021 03:45 GMT</p>
         </div>
@@ -21,16 +21,16 @@
             Updated Libraries: Asio, Assert, Atomic, Beast, Core, Describe, DLL, Filesystem, Geometry, JSON, Lambda2,
             Log, Math, MultiIndex, Multiprecision, Nowide, PFR, Predef, Regex, System, Utility, Variant2.
           </p>
-          <div class="uppercase space-x-8">
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Release notes</a></span>
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Download</a></span>
+          <div class="space-x-8 uppercase">
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Release notes</a></span>
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Download</a></span>
             <span><a href="#" class="text-orange">Version Details</a></span>
           </div>
         </div>
       </div>
 
-      <div class="flex w-full py-11 mt-11 border-t border-slate">
-        <div class="w-1/4 py-5">
+      <div class="flex py-11 mt-11 w-full border-t border-slate">
+        <div class="py-5 w-1/4">
           <h3>Version 1.78.0</h3>
           <p class="p-0">December 8th, 2021 03:45 GMT</p>
         </div>
@@ -40,16 +40,16 @@
             Updated Libraries: Asio, Assert, Atomic, Beast, Core, Describe, DLL, Filesystem, Geometry, JSON, Lambda2,
             Log, Math, MultiIndex, Multiprecision, Nowide, PFR, Predef, Regex, System, Utility, Variant2.
           </p>
-          <div class="uppercase space-x-8">
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Release notes</a></span>
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Download</a></span>
+          <div class="space-x-8 uppercase">
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Release notes</a></span>
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Download</a></span>
             <span><a href="#" class="text-orange">Version Details</a></span>
           </div>
         </div>
       </div>
 
-      <div class="flex w-full py-11 mt-11 border-t border-slate">
-        <div class="w-1/4 py-5">
+      <div class="flex py-11 mt-11 w-full border-t border-slate">
+        <div class="py-5 w-1/4">
           <h3>Version 1.78.0</h3>
           <p class="p-0">December 8th, 2021 03:45 GMT</p>
         </div>
@@ -59,16 +59,16 @@
             Updated Libraries: Asio, Assert, Atomic, Beast, Core, Describe, DLL, Filesystem, Geometry, JSON, Lambda2,
             Log, Math, MultiIndex, Multiprecision, Nowide, PFR, Predef, Regex, System, Utility, Variant2.
           </p>
-          <div class="uppercase space-x-8">
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Release notes</a></span>
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Download</a></span>
+          <div class="space-x-8 uppercase">
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Release notes</a></span>
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Download</a></span>
             <span><a href="#" class="text-orange">Version Details</a></span>
           </div>
         </div>
       </div>
 
-      <div class="flex w-full py-11 mt-11 border-t border-slate">
-        <div class="w-1/4 py-5">
+      <div class="flex py-11 mt-11 w-full border-t border-slate">
+        <div class="py-5 w-1/4">
           <h3>Version 1.78.0</h3>
           <p class="p-0">December 8th, 2021 03:45 GMT</p>
         </div>
@@ -78,16 +78,16 @@
             Updated Libraries: Asio, Assert, Atomic, Beast, Core, Describe, DLL, Filesystem, Geometry, JSON, Lambda2,
             Log, Math, MultiIndex, Multiprecision, Nowide, PFR, Predef, Regex, System, Utility, Variant2.
           </p>
-          <div class="uppercase space-x-8">
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Release notes</a></span>
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Download</a></span>
+          <div class="space-x-8 uppercase">
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Release notes</a></span>
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Download</a></span>
             <span><a href="#" class="text-orange">Version Details</a></span>
           </div>
         </div>
       </div>
 
-      <div class="flex w-full py-11 mt-11 border-t border-slate">
-        <div class="w-1/4 py-5">
+      <div class="flex py-11 mt-11 w-full border-t border-slate">
+        <div class="py-5 w-1/4">
           <h3>Version 1.78.0</h3>
           <p class="p-0">December 8th, 2021 03:45 GMT</p>
         </div>
@@ -97,9 +97,9 @@
             Updated Libraries: Asio, Assert, Atomic, Beast, Core, Describe, DLL, Filesystem, Geometry, JSON, Lambda2,
             Log, Math, MultiIndex, Multiprecision, Nowide, PFR, Predef, Regex, System, Utility, Variant2.
           </p>
-          <div class="uppercase space-x-8">
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Release notes</a></span>
-            <span><a href="#" class="pr-8 text-orange border-r border-slate">Download</a></span>
+          <div class="space-x-8 uppercase">
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Release notes</a></span>
+            <span><a href="#" class="pr-8 border-r text-orange border-slate">Download</a></span>
             <span><a href="#" class="text-orange">Version Details</a></span>
           </div>
         </div>
diff --git a/templates/partials/breadcrumb.html b/templates/partials/breadcrumb.html
index 5ab428a9..4fa543ae 100644
--- a/templates/partials/breadcrumb.html
+++ b/templates/partials/breadcrumb.html
@@ -1,12 +1,12 @@
 {% load i18n %}
 
 <nav aria-label="breadcrumb">
-  <ol class="inline-flex space-x-2 items-center">
+  <ol class="inline-flex items-center space-x-2">
     <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:index' %}"><i
       class="fas fa-home">&nbsp;</i>{% trans "Forum index" %}</a></li>
     {% if forum %}
       {% for ancestor in forum.get_ancestors %}
-        <svg class="h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+        <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
              fill="currentColor" aria-hidden="true">
           <path fill-rule="evenodd"
                 d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
@@ -15,7 +15,7 @@
         <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:forum' ancestor.slug ancestor.id %}">{{ ancestor.name }}</a>
         </li>
       {% endfor %}
-      <svg class="h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+      <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
            fill="currentColor" aria-hidden="true">
         <path fill-rule="evenodd"
               d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
@@ -24,7 +24,7 @@
       <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:forum' forum.slug forum.id %}">{{ forum.name }}</a></li>
     {% endif %}
     {% if topic %}
-      <svg class="h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+      <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
            fill="currentColor" aria-hidden="true">
         <path fill-rule="evenodd"
               d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
diff --git a/templates/partials/form_field.html b/templates/partials/form_field.html
index f795d0c4..ba3e02d3 100644
--- a/templates/partials/form_field.html
+++ b/templates/partials/form_field.html
@@ -4,7 +4,7 @@
 <div id="div_id_{{ field.html_name }}" class="form-group{% if field.errors %} has-error{% endif %}">
   <div class="controls">
     {% if field.label %}
-      <label class="control-label text-white block mb-3"
+      <label class="block mb-3 text-white control-label"
              for="{{ field.auto_id }}"
       >
         {{ field.label }}
diff --git a/templates/resources/resources.html b/templates/resources/resources.html
index 236d0221..29832c1f 100644
--- a/templates/resources/resources.html
+++ b/templates/resources/resources.html
@@ -3,117 +3,117 @@
 {% load static %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
 
-    <div class="w-full py-16">
+    <div class="py-16 w-full">
       <h1 class="text-4xl text-center">Resources</h1>
-      <p class="text-center mt-0">
+      <p class="mt-0 text-center">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non vestibulum velit. Aenean fringilla, arcu sit amet.
       </p>
     </div>
 
     <div class="w-full">
-      <h3 class="border-b border-slate py-2">Resource Category</h3>
+      <h3 class="py-2 border-b border-slate">Resource Category</h3>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 my-11">
-        <div class="bg-charcoal py-3 px-4">
+      <div class="grid grid-cols-1 gap-4 my-11 md:grid-cols-2 lg:grid-cols-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
       </div>
 
 
-      <h3 class="border-b border-slate py-2">Resource Category</h3>
+      <h3 class="py-2 border-b border-slate">Resource Category</h3>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 my-11">
-        <div class="bg-charcoal py-3 px-4">
+      <div class="grid grid-cols-1 gap-4 my-11 md:grid-cols-2 lg:grid-cols-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
       </div>
 
 
-      <h3 class="border-b border-slate py-2">Resource Category</h3>
+      <h3 class="py-2 border-b border-slate">Resource Category</h3>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 my-11">
-        <div class="bg-charcoal py-3 px-4">
+      <div class="grid grid-cols-1 gap-4 my-11 md:grid-cols-2 lg:grid-cols-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
 
-        <div class="bg-charcoal py-3 px-4">
+        <div class="py-3 px-4 bg-charcoal">
           <h4>Name or Resource</h4>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-          <a href="#" class="text-orange uppercase text-sm">Learn More <span class="text-xs">></span></a>
+          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
         </div>
       </div>
 
diff --git a/templates/review/past_reviews.html b/templates/review/past_reviews.html
index 1ac3d069..6542645a 100644
--- a/templates/review/past_reviews.html
+++ b/templates/review/past_reviews.html
@@ -3,24 +3,24 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
     <a href="{% url 'review-process' %}" class="block md:inline">Review Process</a>
     <a href="{% url 'review-request' %}" class="block md:inline">Submit Review</a>
     <a href="{% url 'review-upcoming' %}" class="block md:inline">Upcoming Reviews</a>
-    <a href="{% url 'review-past' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Past Reviews</a>
+    <a href="{% url 'review-past' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Past Reviews</a>
   </div>
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:w-full py-16">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="py-16 md:w-full">
       <h1 class="text-4xl text-center">Upcoming Reviews</h1>
-      <p class="text-center mt-0">
+      <p class="mt-0 text-center">
         We are proud of the past reviews and community members who worked on them.
       </p>
-      <div class="w-full rounded bg-charcoal p-6 mt-11">
+      <div class="p-6 mt-11 w-full rounded bg-charcoal">
 
-        <div class="md:flex w-full hidden">
+        <div class="hidden w-full md:flex">
           <div class="p-3 w-1/5">Submnission</div>
           <div class="p-3 w-1/5">Submitter</div>
           <div class="p-3 w-1/5">Review Manager</div>
@@ -28,68 +28,68 @@
           <div class="p-3 w-1/5">Result</div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Lambda 2</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Peter Dimov</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Joel de Guzman</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Result:</span> <a href="#" class="text-orange">Pending</a></div>
         </div>
 
       </div>
diff --git a/templates/review/review_detail.html b/templates/review/review_detail.html
index 46e14d28..325aed4f 100644
--- a/templates/review/review_detail.html
+++ b/templates/review/review_detail.html
@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
     <a href="{% url 'review-process' %}" class="block md:inline">Review Process</a>
     <a href="{% url 'review-request' %}" class="block md:inline">Submit Review</a>
     <a href="{% url 'review-upcoming' %}" class="block md:inline">Upcoming Reviews</a>
@@ -12,8 +12,8 @@
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0 flex">
-    <div class="w-1/6 hidden md:block">
+  <div class="flex py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="hidden w-1/6 md:block">
       <ul class="py-8 space-y-4">
         <li><a href="#overview" class="text-orange">Overview</a></li>
         <li><a href="#accepted">Accepted</a></li>
@@ -22,12 +22,12 @@
     </div>
     <div class="w-5/6">
 
-      <div class="md:w-full py-8" id="overview">
+      <div class="py-8 md:w-full" id="overview">
         <h1 class="text-4xl">Lambda2</h1>
         <p class="p-0 m-0">Review Dates: March 22, 2021 - March 31, 2021</p>
       </div>
 
-      <div class="bg-charcoal flex rounded-lg py-3 px-4 text-lg">
+      <div class="flex py-3 px-4 text-lg rounded-lg bg-charcoal">
         <div class="w-1/3">Accepted: 4</div>
         <div class="w-1/3">Conditional Accepted: 1</div>
         <div class="w-1/3">Reject: 1</div>
@@ -36,12 +36,12 @@
       <div class="my-6 border-b border-slate"></div>
 
       <div class="space-y-11">
-        <div class="border-b border-slate py-6" id="accepted">
-          <h5 class="inline uppercase text-green bg-green/10 rounded w-auto px-3 py-1">Accepted</h5>
+        <div class="py-6 border-b border-slate" id="accepted">
+          <h5 class="inline py-1 px-3 w-auto uppercase rounded text-green bg-green/10">Accepted</h5>
           <p class="mt-6">
             There was initially a single reject, but was later changed to Conditional Accept with the condition that:
           </p>
-          <ul class="list-disc ml-5">
+          <ul class="ml-5 list-disc">
             <li>Lambda2 provides its own placeholders instead of importing the standard ones.</li>
           </ul>
 
@@ -50,14 +50,14 @@
           </p>
 
           <p>Pros:</p>
-          <ul class="list-disc ml-5">
+          <ul class="ml-5 list-disc">
             <li>It's simple, clean, and elegant.</li>
             <li>lightweight, single header dependency</li>
             <li>Involves less typing</li>
           </ul>
 
           <p>Cons:</p>
-          <ul class="list-disc ml-5">
+          <ul class="ml-5 list-disc">
             <li>lambda and phoenix library have much larger functionality</li>
             <li>For complex lambda expressions, native C++ lambdas are more "future-proof"
             than boost::lambda2 expressions because you have the full range of the language available.</li>
@@ -97,7 +97,7 @@
         </div>
 
         <div id="pending">
-          <h5 class="inline uppercase text-green bg-green/10 rounded w-auto px-3 py-1">Pending</h5>
+          <h5 class="inline py-1 px-3 w-auto uppercase rounded text-green bg-green/10">Pending</h5>
           <p class="mt-6">
             The Boost formal review of the Lambda2, authored by Peter Dimov, starts Monday, March 22, 2021 to March 31, 2021 (inclusive).
           </p>
@@ -124,7 +124,7 @@
             Some other questions you might want to consider answering:
           </p>
 
-          <ul class="list-disc ml-5">
+          <ul class="ml-5 list-disc">
             <li>What is your evaluation of the design?</li>
             <li>What is your evaluation of the implementation?</li>
             <li>What is your evaluation of the documentation?</li>
diff --git a/templates/review/review_form.html b/templates/review/review_form.html
index 92941a0b..add28af6 100644
--- a/templates/review/review_form.html
+++ b/templates/review/review_form.html
@@ -3,17 +3,17 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
     <a href="{% url 'review-process' %}" class="block md:inline">Review Process</a>
-    <a href="{% url 'review-request' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Submit Review</a>
+    <a href="{% url 'review-request' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Submit Review</a>
     <a href="{% url 'review-upcoming' %}" class="block md:inline">Upcoming Reviews</a>
     <a href="{% url 'review-past' %}" class="block md:inline">Past Reviews</a>
   </div>
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:w-full space-y-11 py-16">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="py-16 space-y-11 md:w-full">
       <h1 class="text-4xl text-center">Submit a Review</h1>
       <p>
         What does this form look like?  I don't see mockups or a model definition.
diff --git a/templates/review/review_process.html b/templates/review/review_process.html
index 031e476e..fe85d851 100644
--- a/templates/review/review_process.html
+++ b/templates/review/review_process.html
@@ -3,8 +3,8 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
-    <a href="{% url 'review-process' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Review Process</a>
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
+    <a href="{% url 'review-process' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Review Process</a>
     <a href="{% url 'review-request' %}" class="block md:inline">Submit Review</a>
     <a href="{% url 'review-upcoming' %}" class="block md:inline">Upcoming Reviews</a>
     <a href="{% url 'review-past' %}" class="block md:inline">Past Reviews</a>
@@ -12,10 +12,10 @@
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
 
-    <div class="md:flex space-x-3 md:space-x-6 mb-6 md:mb-0 items-center">
-      <div class="md:w-1/2 space-y-11 py-16">
+    <div class="items-center mb-6 space-x-3 md:flex md:mb-0 md:space-x-6">
+      <div class="py-16 space-y-11 md:w-1/2">
         <h1 class="text-4xl">Formal Reviews are Vital</h1>
         <p>
           Boost libraries are selected for their relevance, high quality, and fitness for purpose. The review
@@ -23,19 +23,19 @@
           Volunteers who write reviews are performing a vital service for the community. They are heroes!
         </p>
         <div class="mt-16">
-          <a href="#" class="uppercase text-orange border border-slate rounded-md py-3 px-6">Submit a review <small> > </small></a>
+          <a href="#" class="py-3 px-6 uppercase rounded-md border text-orange border-slate">Submit a review <small> > </small></a>
         </div>
       </div>
       <div id="reviewProcessAnim" class="md:w-1/2"></div>
     </div>
 
-    <h2 class="block text-center my-16 text-4xl">How It Works</h2>
+    <h2 class="block my-16 text-4xl text-center">How It Works</h2>
 
-    <div class="md:flex border-t border-slate py-11 px-4 space-y-8">
+    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
       <div class="md:w-1/4">
         <img class="mx-auto"  src="{% static 'img/icons/graphic_determine-interest.svg' %}" alt="Determine Interest" />
       </div>
-      <div class="md:w-3/4 space-y-6">
+      <div class="space-y-6 md:w-3/4">
         <h3 class="text-2xl">1. Determine Interest</h3>
         <p>
           Make sure your library is suitable for the collection by proposing it to the Boost community in the forum.
@@ -45,11 +45,11 @@
       </div>
     </div>
 
-    <div class="md:flex border-t border-slate py-11 px-4 space-y-8">
+    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
       <div class="md:w-1/4">
         <img class="mx-auto"  src="{% static 'img/icons/graphic_post-and-request-manager.svg' %}" alt="Post and Request a Manager" />
       </div>
-      <div class="md:w-3/4 space-y-6">
+      <div class="space-y-6 md:w-3/4">
         <h3 class="text-2xl">2. Post and Request a Manager</h3>
         <p>
           The Review Manager is the overseer for the review process of a library. To get the library on the schedule,
@@ -58,11 +58,11 @@
       </div>
     </div>
 
-    <div class="md:flex border-t border-slate py-11 px-4 space-y-8">
+    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
       <div class="md:w-1/4">
         <img class="mx-auto"  src="{% static 'img/icons/graphic_prepare-for-review.svg' %}" alt="Prepare for Review" />
       </div>
-      <div class="md:w-3/4 space-y-6">
+      <div class="space-y-6 md:w-3/4">
         <h3 class="text-2xl">3. Prepare for Review</h3>
         <p>
           The time between the library endorsement and the beginning of the review on the schedule is a great
@@ -75,11 +75,11 @@
       </div>
     </div>
 
-    <div class="md:flex border-t border-slate py-11 px-4 space-y-8">
+    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
       <div class="md:w-1/4">
         <img class="mx-auto" src="{% static 'img/icons/graphic_review-period.svg' %}" alt="Review Period" />
       </div>
-      <div class="md:w-3/4 space-y-6">
+      <div class="space-y-6 md:w-3/4">
         <h3 class="text-2xl">4. Review Period</h3>
         <p>
           For the two weeks after the review starts, engaged community members from the mailing list ask questions,
@@ -89,11 +89,11 @@
       </div>
     </div>
 
-    <div class="md:flex border-t border-slate py-11 px-4 space-y-8">
+    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
       <div class="md:w-1/4">
         <img class="mx-auto"  src="{% static 'img/icons/graphic_accepted-or-rejected.svg' %}" alt="Accepted or Rejected" />
       </div>
-      <div class="md:w-3/4 space-y-6">
+      <div class="space-y-6 md:w-3/4">
         <h3 class="text-2xl">4. Accepted or Rejected</h3>
         <p>
           After the scheduled time has passed, the review manager retreats for a while to contemplate the results
@@ -102,25 +102,25 @@
       </div>
     </div>
 
-    <div class="my-4 md:my-16 rounded bg-charcoal px-3 md:px-11 py-5">
+    <div class="py-5 px-3 my-4 rounded md:px-11 md:my-16 bg-charcoal">
       <div class="flex justify-between mb-6">
-        <span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">Recent reviews</span>
-        <span class="inline uppercase text-orange w-auto px-2">See All ></span>
+        <span class="inline py-1 px-3 w-auto text-lg uppercase rounded text-green bg-green/10">Recent reviews</span>
+        <span class="inline px-2 w-auto uppercase text-orange">See All ></span>
       </div>
-      <div class="md:flex md:space-x-6 py-11 md:divide-x-2 divide-slate sm:space-y-11 md:space-y-0">
-        <div class="md:pl-6 pr-2 border-b border-slate last:border-0 pb-6 md:border-0">
-          <h3 class="text-2xl pb-3">Library Name Here</h3>
-          <p class="text-lg py-5">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
+      <div class="py-11 sm:space-y-11 md:flex md:space-y-0 md:space-x-6 md:divide-x-2 divide-slate">
+        <div class="pr-2 pb-6 border-b md:pl-6 md:border-0 last:border-0 border-slate">
+          <h3 class="pb-3 text-2xl">Library Name Here</h3>
+          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
           <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
         </div>
-        <div class="md:pl-6 pr-2 border-b border-slate last:border-0 pb-6 md:border-0">
-          <h3 class="text-2xl pb-3">Library Name Here</h3>
-          <p class="text-lg py-5">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
+        <div class="pr-2 pb-6 border-b md:pl-6 md:border-0 last:border-0 border-slate">
+          <h3 class="pb-3 text-2xl">Library Name Here</h3>
+          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
           <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
         </div>
-        <div class="md:pl-6 pr-2 border-b border-slate last:border-0 pb-6 md:border-0">
-          <h3 class="text-2xl pb-3">Library Name Here</h3>
-          <p class="text-lg py-5">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
+        <div class="pr-2 pb-6 border-b md:pl-6 md:border-0 last:border-0 border-slate">
+          <h3 class="pb-3 text-2xl">Library Name Here</h3>
+          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
           <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
         </div>
       </div>
diff --git a/templates/review/upcoming_reviews.html b/templates/review/upcoming_reviews.html
index 613d33a3..249b55f5 100644
--- a/templates/review/upcoming_reviews.html
+++ b/templates/review/upcoming_reviews.html
@@ -3,21 +3,21 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
     <a href="{% url 'review-process' %}" class="block md:inline">Review Process</a>
     <a href="{% url 'review-request' %}" class="block md:inline">Submit Review</a>
-    <a href="{% url 'review-upcoming' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Upcoming Reviews</a>
+    <a href="{% url 'review-upcoming' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Upcoming Reviews</a>
     <a href="{% url 'review-past' %}" class="block md:inline">Past Reviews</a>
   </div>
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
-    <div class="md:w-full space-y-11 py-16">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="py-16 space-y-11 md:w-full">
       <h1 class="text-4xl text-center">Upcoming Reviews</h1>
-      <div class="w-full rounded bg-charcoal p-6">
+      <div class="p-6 w-full rounded bg-charcoal">
 
-        <div class="md:flex w-full hidden">
+        <div class="hidden w-full md:flex">
           <div class="p-3 w-1/5">Submnission</div>
           <div class="p-3 w-1/5">Submitter</div>
           <div class="p-3 w-1/5">Link</div>
@@ -25,36 +25,36 @@
           <div class="p-3 w-1/5">Review Dates</div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Text (mini-review)</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Zach Laine</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Link:</span> <a href="#" class="text-orange">Github Documentation</a></div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Needed!</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Text (mini-review)</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Zach Laine</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Link:</span> <a href="#" class="text-orange">Github Documentation</a></div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Needed!</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Text (mini-review)</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Zach Laine</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Link:</span> <a href="#" class="text-orange">Github Documentation</a></div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Needed!</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Text (mini-review)</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Zach Laine</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Link:</span> <a href="#" class="text-orange">Github Documentation</a></div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Needed!</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Text (mini-review)</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Zach Laine</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Link:</span> <a href="#" class="text-orange">Github Documentation</a></div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Needed!</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Text (mini-review)</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Zach Laine</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Link:</span> <a href="#" class="text-orange">Github Documentation</a></div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Needed!</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
         </div>
 
-        <div class="md:flex border-b border-slate md:border-b-0 py-6 md:py-0">
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submission:</span> Text (mini-review)</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Submitter:</span> Zach Laine</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Link:</span> <a href="#" class="text-orange">Github Documentation</a></div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Manager:</span> Needed!</div>
-          <div class="p-3 text-left md:border md:border-slate md:w-1/5"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
+        <div class="py-6 border-b md:flex md:py-0 md:border-b-0 border-slate">
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submission:</span> Text (mini-review)</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Submitter:</span> Zach Laine</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Link:</span> <a href="#" class="text-orange">Github Documentation</a></div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Manager:</span> Needed!</div>
+          <div class="p-3 text-left md:w-1/5 md:border md:border-slate"><span class="font-bold md:hidden">Review Dates:</span> March 22, 2021 - March 31, 2021</div>
         </div>
 
       </div>
diff --git a/templates/scratch.html b/templates/scratch.html
index accd33a1..7bb4c4f7 100644
--- a/templates/scratch.html
+++ b/templates/scratch.html
@@ -4,18 +4,18 @@
 
 {% block content %}
   <!-- Homepage Hero Section -->
-  <main class="my-4 mx-auto md:max-w-7xl px-4">
-    <div class="md:flex md:space-x-4 space-y-4 md:space-y-0 mb-4">
+  <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="w-full md:w-1/2 block rounded-lg bg-charcoal shadow-lg dark:bg-neutral-700 relative text-white">
-        <a href="#" class="rounded bg-orange text-white py-3 px-4 absolute top-5 right-10 shadow-md">New Here?</a>
+        class="block relative w-full text-white rounded-lg shadow-lg md:w-1/2 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>
         <a href="#!">
           <img
-            class="rounded-t-lg w-full max-h-[470px] overflow-y-hidden"
+            class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
             src="{% static 'img/fpo/guide.jpg' %}"
             alt="" />
         </a>
-        <div class="px-6 py-3 text-white">
+        <div class="py-3 px-6 text-white">
           <h5
             class="text-xl font-bold leading-tight text-orange">
             User Guide
@@ -39,14 +39,14 @@
       </div>
 
       <div
-        class="w-full md:w-1/2 block rounded-lg bg-charcoal shadow-lg dark:bg-neutral-700 relative">
+        class="block relative w-full rounded-lg shadow-lg md:w-1/2 bg-charcoal dark:bg-neutral-700">
         <a href="#!">
           <img
-            class="rounded-t-lg w-full max-h-[470px] overflow-y-hidden"
+            class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
             src="{% static 'img/fpo/man-tree.jpeg' %}"
             alt="" />
         </a>
-        <div class="px-6 py-3 text-white">
+        <div class="py-3 px-6 text-white">
           <h5
             class="text-xl font-bold leading-tight text-orange">
             Contributor Guide
@@ -72,9 +72,9 @@
 
     <div class="mb-16 space-y-4">
       <div
-        class="flex flex-col rounded-lg bg-charcoal shadow-lg text-white dark:bg-neutral-700 md:flex-row">
+        class="flex flex-col text-white rounded-lg shadow-lg md:flex-row bg-charcoal dark:bg-neutral-700">
         <img
-          class="h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
+          class="object-cover w-full h-96 rounded-t-lg md:w-48 md:h-auto md:rounded-none md:rounded-l-lg"
           src="{% static 'img/fpo/clipboardman.jpeg' %}"
           alt="" />
         <div class="flex flex-col justify-start p-6">
@@ -82,7 +82,7 @@
             class="text-xl font-bold leading-tight">
             Boost Formal Reviews
           </h5>
-          <p class="mb-4 py-1 text-base text-neutral-600 dark:text-neutral-200">
+          <p class="py-1 mb-4 text-base text-neutral-600 dark:text-neutral-200">
             How libraries become part of the collection.
           </p>
           <ul class="flex flex-wrap">
@@ -96,13 +96,13 @@
       </div>
 
       <div
-        class="flex flex-col rounded-lg bg-charcoal shadow-lg dark:bg-neutral-700 md:flex-row">
+        class="flex flex-col rounded-lg shadow-lg md:flex-row bg-charcoal dark:bg-neutral-700">
         <div class="flex flex-col justify-start p-6 w-full">
           <h5
             class="text-xl font-bold leading-tight">
             Release Process
           </h5>
-          <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200 py-1">
+          <p class="py-1 mb-4 text-base text-neutral-600 dark:text-neutral-200">
             "The trains always run on time"
           </p>
           <ul class="flex flex-wrap">
@@ -115,7 +115,7 @@
           </ul>
         </div>
         <img
-          class="h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-r-lg"
+          class="object-cover w-full h-96 rounded-t-lg md:w-48 md:h-auto md:rounded-none md:rounded-r-lg"
           src="{% static 'img/fpo/construction.png' %}"
           alt="" />
       </div>
@@ -124,4 +124,3 @@
   <!-- End Homepage Hero Section -->
 
 {% endblock %}
-
diff --git a/templates/socialaccount/login.html b/templates/socialaccount/login.html
index 629a50cb..e3f1ddb9 100644
--- a/templates/socialaccount/login.html
+++ b/templates/socialaccount/login.html
@@ -4,7 +4,7 @@
 {% block head_title %}{% trans "Sign In" %}{% endblock %}
 
 {% block content %}
-<div class="text-center my-6">
+<div class="my-6 text-center">
   <div class="py-6">
     {% if process == "connect" %}
       <h1 class="text-4xl">{% blocktrans with provider.name as provider %}Connect {{ provider }}{% endblocktrans %}</h1>
@@ -17,7 +17,7 @@
 
   <form method="post">
     {% csrf_token %}
-    <button type="submit" class="border border-orange py-3 px-4 rounded text-orange uppercase">{% trans "Continue" %}</button>
+    <button type="submit" class="py-3 px-4 uppercase rounded border border-orange text-orange">{% trans "Continue" %}</button>
   </form>
 </div>
 {% endblock %}
diff --git a/templates/socialaccount/snippets/provider_list.html b/templates/socialaccount/snippets/provider_list.html
index 21361062..5d8a0248 100644
--- a/templates/socialaccount/snippets/provider_list.html
+++ b/templates/socialaccount/snippets/provider_list.html
@@ -12,7 +12,7 @@
 {% endfor %}
 {% endif %}
     <a title="{{provider.name}}"
-       class="w-2/3 mx-auto block px-8 py-3 text-base font-medium rounded-md border border-orange text-white bg-slate md:py-4 md:text-lg md:px-10 {{provider.id}}"
+       class="w-2/3 mx-auto block px-8 py-3 text-base font-medium rounded-md border border-orange text-white bg-orange dark:bg-slate md:py-4 md:text-lg md:px-10 {{provider.id}}"
        href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}"
     >
       {% if provider.name == "GitHub" %}
diff --git a/templates/support/contact.html b/templates/support/contact.html
index dccb2241..7446a159 100644
--- a/templates/support/contact.html
+++ b/templates/support/contact.html
@@ -3,20 +3,20 @@
 {% load static %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
 
-    <div class="w-full py-16 border-b border-slate mb-5">
+    <div class="py-16 mb-5 w-full border-b border-slate">
       <h1 class="text-4xl">Contact Us</h1>
     </div>
 
-    <div class="md:flex space-x-8 w-full">
-      <div class="md:w-1/4 pt-5">
+    <div class="space-x-8 w-full md:flex">
+      <div class="pt-5 md:w-1/4">
         <h3>Boost</h3>
-        <div class="space-x-3 pt-3 pb-3">
-          <a href=""><img class="h-[15px] w-auto inline" src="{% static 'img/icons/icon_Facebook-logo.svg' %}" alt="Facebook"></a>
-          <a href=""><img class="h-[15px] w-auto inline" src="{% static 'img/icons/icon_Twitter-logo.svg' %}" alt="Twitter"></a>
-          <a href=""><img class="h-[15px] w-auto inline" src="{% static 'img/icons/icon_Linkedin-logo.svg' %}" alt="LinkedIn"></a>
-          <a href=""><img class="h-[15px] w-auto inline" src="{% static 'img/icons/icon_YouTube-logo.svg' %}" alt="Youtube"></a>
+        <div class="pt-3 pb-3 space-x-3">
+          <a href=""><img class="inline w-auto h-[15px]" src="{% static 'img/icons/icon_Facebook-logo.svg' %}" alt="Facebook"></a>
+          <a href=""><img class="inline w-auto h-[15px]" src="{% static 'img/icons/icon_Twitter-logo.svg' %}" alt="Twitter"></a>
+          <a href=""><img class="inline w-auto h-[15px]" src="{% static 'img/icons/icon_Linkedin-logo.svg' %}" alt="LinkedIn"></a>
+          <a href=""><img class="inline w-auto h-[15px]" src="{% static 'img/icons/icon_YouTube-logo.svg' %}" alt="Youtube"></a>
         </div>
       </div>
       <div class="md:w-3/4">
diff --git a/templates/support/getting_started.html b/templates/support/getting_started.html
index fc70d104..ea9e812a 100644
--- a/templates/support/getting_started.html
+++ b/templates/support/getting_started.html
@@ -3,17 +3,17 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
     <a href="{% url 'support' %}" class="block md:inline">Support</a>
-    <a href="{% url 'getting-started' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Getting Started</a>
+    <a href="{% url 'getting-started' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Getting Started</a>
     <a href="https://cppalliance.org/slack/" target="_blank" class="block md:inline">Join Slack</a>
   </div>
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0 flex">
+  <div class="flex py-0 px-3 mb-3 md:py-6 md:px-0">
 
-    <div class="w-1/6 hidden md:block">
+    <div class="hidden w-1/6 md:block">
       <ul class="py-8 space-y-4">
         <li><a href="#getting-started" class="text-orange">Getting Started</a></li>
         <li><a href="#windows">Windows</a></li>
@@ -23,7 +23,7 @@
 
     <div class="w-full md:w-5/6">
 
-      <div class="md:w-full py-8 md:space-x-18 border-b border-slate" id="getting-started">
+      <div class="py-8 border-b md:w-full border-slate md:space-x-18" id="getting-started">
 
         <h2>Getting Started</h2>
 
@@ -46,13 +46,13 @@
           a descriptive placeholder for something else, usually information that you'll provide. For example:
         </p>
 
-        <pre class="rounded-lg bg-charcoal border border-slate p-2">
+        <pre class="p-2 rounded-lg border bg-charcoal border-slate">
           <code>$ echo "My name is [your name]"</code>
         </pre>
 
       </div>
 
-      <div class="md:w-full py-8 md:space-x-18 border-b border-slate" id="windows">
+      <div class="py-8 border-b md:w-full border-slate md:space-x-18" id="windows">
 
         <h3>Getting Started On Microsoft Windows</h3>
 
@@ -64,12 +64,12 @@
         </p>
 
         <div class="my-3">
-          <a href="#" class="text-orange uppercase py-2 px-4 border border-slate rounded-lg">Start Now</a>
+          <a href="#" class="py-2 px-4 uppercase rounded-lg border text-orange border-slate">Start Now</a>
         </div>
 
       </div>
 
-      <div class="md:w-full py-8 md:space-x-18" id="unix">
+      <div class="py-8 md:w-full md:space-x-18" id="unix">
 
         <h3>Getting Started On Unix Variants</h3>
 
@@ -81,7 +81,7 @@
         </p>
 
         <div class="my-3">
-          <a href="#" class="text-orange uppercase py-2 px-4 border border-slate rounded-lg">Start Now</a>
+          <a href="#" class="py-2 px-4 uppercase rounded-lg border text-orange border-slate">Start Now</a>
         </div>
 
       </div>
diff --git a/templates/support/support.html b/templates/support/support.html
index 73056a84..4fefa96a 100644
--- a/templates/support/support.html
+++ b/templates/support/support.html
@@ -3,59 +3,59 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase">
-    <a href="{% url 'support' %}" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Support</a>
+  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
+    <a href="{% url 'support' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Support</a>
     <a href="{% url 'getting-started' %}" class="block md:inline">Getting Started</a>
     <a href="https://cppalliance.org/slack/" target="_blank" class="block md:inline">Join Slack</a>
   </div>
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0">
+  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
 
-    <div class="w-full py-16">
+    <div class="py-16 w-full">
       <h1 class="text-4xl text-center">Support</h1>
-      <p class="text-center mt-0">
+      <p class="mt-0 text-center">
         We are here for you! If you need us, we are a click away!
       </p>
     </div>
 
     <div class="pb-6 mb-8 border-b border-slate">
-      <div class="md:flex items-center space-x-0 md:space-x-8 my-8">
-        <div class="md:w-1/2 mb-4">
+      <div class="items-center my-8 space-x-0 md:flex md:space-x-8">
+        <div class="mb-4 md:w-1/2">
           <div id="supportStart"></div>
         </div>
-        <div class="md:w-1/2 mb-4">
+        <div class="mb-4 md:w-1/2">
           <h3>Getting Started</h3>
           <p>
             Welcome to the Boost libraries! By the time you've completed this tutorial, you'll be at least somewhat
             comfortable with the contents of a Boost distribution and how to go about using it.
           </p>
           <div class="my-3">
-            <a href="#" class="uppercase text-orange border border-slate rounded-md py-2 px-4 text-sm">Start Now</a>
+            <a href="#" class="py-2 px-4 text-sm uppercase rounded-md border text-orange border-slate">Start Now</a>
           </div>
         </div>
       </div>
 
-      <div class="md:flex items-center space-x-0 md:space-x-8 my-8">
-        <div class="md:w-1/2 mb-4 order-1 md:order-2">
+      <div class="items-center my-8 space-x-0 md:flex md:space-x-8">
+        <div class="order-1 mb-4 md:order-2 md:w-1/2">
           <div id="joinSlack"></div>
         </div>
-        <div class="md:w-1/2 mb-4">
+        <div class="mb-4 md:w-1/2">
           <h3>Join our Slack!</h3>
           <p>
             We have engaging conversations with our community of over 21K members! As a question, state an update, or
             make a new friend in the community!
           </p>
           <div class="my-3">
-            <a href="https://cppalliance.org/slack/" target="_blank" class="uppercase text-orange border border-slate rounded-md py-2 px-4 text-sm">Learn More</a>
+            <a href="https://cppalliance.org/slack/" target="_blank" class="py-2 px-4 text-sm uppercase rounded-md border text-orange border-slate">Learn More</a>
           </div>
         </div>
 
       </div>
     </div>
 
-    <div class="md:flex space-x-8 w-full">
+    <div class="space-x-8 w-full md:flex">
       <div class="md:w-1/3">
         <h3>Contact Us For Support</h3>
         <p>
diff --git a/templates/users/_library.html b/templates/users/_library.html
index f1444a51..edc2053a 100644
--- a/templates/users/_library.html
+++ b/templates/users/_library.html
@@ -1,5 +1,5 @@
 <div class="py-3">
-  <h4 class="text-orange capitalize"><a href="{% url "library-detail" slug=library.slug %}">{{ library.name }}</a></h4>
+  <h4 class="capitalize text-orange"><a href="{% url "library-detail" slug=library.slug %}">{{ library.name }}</a></h4>
   <p class="pt-0">
     {{ library.description }}
   </p>
diff --git a/templates/users/_library_version.html b/templates/users/_library_version.html
index 45f39ded..49069a9d 100644
--- a/templates/users/_library_version.html
+++ b/templates/users/_library_version.html
@@ -1,5 +1,5 @@
 <div class="py-3">
-  <h4 class="text-orange capitalize">
+  <h4 class="capitalize text-orange">
     <a href="{% url 'library-detail-by-version' version_slug=library_version.version.slug slug=library_version.library.slug %}">
       {{ library_version }}
     </a>
diff --git a/templates/users/photo_upload.html b/templates/users/photo_upload.html
index 09e518c4..5110f8d7 100644
--- a/templates/users/photo_upload.html
+++ b/templates/users/photo_upload.html
@@ -3,21 +3,21 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="py-3 px-4 md:px-0 flex border-b border-slate md:border-0 items-center">
+  <div class="flex items-center py-3 px-4 border-b md:px-0 md:border-0 border-slate">
     <div>
       {% if user.image.url %}
-        <img src="{{ user.image.url }}" alt="user" class="inline w-[80px] rounded-lg" />
+        <img src="{{ user.image.url }}" alt="user" class="inline rounded-lg w-[80px]" />
       {% else %}
-        <i class="fas fa-user text-5xl mr-2 text-white/60"></i>
+        <i class="mr-2 text-5xl fas fa-user text-white/60"></i>
       {% endif %}
     </div>
-    <div class="text-sm ml-4">
-      <span class="block">{{ user.get_display_name }}</span>
-      <span class="text-slate text-xs">Joined {{ user.date_joined }}</span>
+    <div class="ml-4 text-sm">
+      <span class="block">{{ user.get_full_name }}</span>
+      <span class="text-xs text-slate">Joined {{ user.date_joined }}</span>
     </div>
   </div>
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase relative">
-    <a href="" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Account</a>
+  <div class="relative py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
+    <a href="" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Account</a>
     <a href="" class="block md:inline">Settings</a>
     <a href="#" class="block md:inline">Password</a>
     <a href="#" class="block md:inline">Help</a>
@@ -28,7 +28,7 @@
 <div class="container">
 <div class="content-section">
     <div class="mt-6">
-      <img class="w-32 h-32 md:h-auto rounded-full" src="{{ user.profile.image.url }}">
+      <img class="w-32 h-32 rounded-full md:h-auto" src="{{ user.profile.image.url }}">
     </div>
 
     <h3>Update Profile Photo</h3>
@@ -36,7 +36,7 @@
     {% if user_has_gh_username %}
       <form method="POST" action="{% url 'profile-photo-github' %}">
         {% csrf_token %}
-        <button class="rounded border border-orange text-orange text-sm py-2 px-3 uppercase" type="submit">Use My GitHub Photo</button>
+        <button class="py-2 px-3 text-sm uppercase rounded border border-orange text-orange" type="submit">Use My GitHub Photo</button>
       </form>
     {% endif %}
 
@@ -46,11 +46,11 @@
             {{ form.as_p }}
       </fieldset>
       <div class="mb-4">
-          <button class="rounded border border-orange text-orange text-sm py-2 px-3 uppercase" type="submit">Update</button>
+          <button class="py-2 px-3 text-sm uppercase rounded border border-orange text-orange" type="submit">Update</button>
       </div>
   </form>
 
-  
+
 
 </div>
 </div>
diff --git a/templates/users/profile.html b/templates/users/profile.html
index 73d009fa..b4fb294f 100644
--- a/templates/users/profile.html
+++ b/templates/users/profile.html
@@ -3,21 +3,21 @@
 {% load static %}
 
 {% block subnav %}
-  <div class="py-3 px-4 md:px-0 flex border-b border-slate md:border-0 items-center">
+  <div class="flex items-center py-3 px-4 border-b md:px-0 md:border-0 border-slate">
     <div>
       {% if user.image %}
-        <img src="{{ user.image.url }}" alt="user" class="inline w-[80px] rounded-lg" />
+        <img src="{{ user.image.url }}" alt="user" class="inline rounded-lg w-[80px]" />
       {% else %}
-        <i class="fas fa-user text-5xl mr-2 text-white/60"></i>
+        <i class="mr-2 text-5xl fas fa-user text-white/60"></i>
       {% endif %}
     </div>
-    <div class="text-sm ml-4">
+    <div class="ml-4 text-sm">
       <span class="block">{{ user.get_full_name }}</span>
-      <span class="text-slate text-xs">Joined {{ user.date_joined }}</span>
+      <span class="text-xs text-slate">Joined {{ user.date_joined }}</span>
     </div>
   </div>
-  <div class="space-y-4 border-b border-slate py-8 md:py-2 px-4 md:px-0 md:space-x-10 text-sm uppercase relative">
-    <a href="" class="block md:inline md:py-1 md:border-b md:border-orange text-orange">Account</a>
+  <div class="relative py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
+    <a href="" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Account</a>
     <a href="" class="block md:inline">Settings</a>
     <a href="#" class="block md:inline">Password</a>
     <a href="#" class="block md:inline">Help</a>
@@ -25,9 +25,9 @@
 {% endblock %}
 
 {% block content %}
-  <div class="py-0 md:py-6 mb-3 px-3 md:px-0 md:flex">
+  <div class="py-0 px-3 mb-3 md:flex md:py-6 md:px-0">
 
-    <div class="w-full md:w-1/4 hidden md:block">
+    <div class="hidden w-full md:block md:w-1/4">
       <ul class="py-8 space-y-4">
         <li><a href="#stats" class="text-orange">Stats</a></li>
         <li><a href="#badges">Badges</a></li>
@@ -40,7 +40,7 @@
       <div class="py-6 border-b border-slate">
         <h3 id="stats">Stats</h3>
 
-        <div class="grid gap-8 grid-cols-1 md:grid-cols-3 my-4">
+        <div class="grid grid-cols-1 gap-8 my-4 md:grid-cols-3">
           <div>
             <h5>Number of Posts</h5>
             5,043
@@ -59,14 +59,14 @@
       <div class="py-6 border-b border-slate">
         <h3 id="badges">Badges</h3>
 
-        <div class="grid gap-8 grid-cols-1 md:grid-cols-3 my-4">
+        <div class="grid grid-cols-1 gap-8 my-4 md:grid-cols-3">
           <div>
             <h4>Author</h4>
             <p>
               Ut vehicula fermentum mi, a bibendum nunc sagittis ac.
             </p>
             <div class="text-gold">
-              <svg class="fill-gold inline-block mr-2" width="33" height="25" viewBox="0 0 33 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg class="inline-block mr-2 fill-gold" width="33" height="25" viewBox="0 0 33 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M17.875 19.1647V22H24.75V24.75H8.25V22H15.125V19.1647C12.4667 18.8295 10.0221 17.5357 8.25 15.5262C6.47788 13.5166 5.50005 10.9293 5.5 8.25V0H27.5V8.25C27.5 10.9293 26.5221 13.5166 24.75 15.5262C22.9779 17.5357 20.5333 18.8295 17.875 19.1647Z"/>
                 <rect width="2.75" height="6.875"/>
                 <rect x="30.25" width="2.75" height="6.875"/>
@@ -81,7 +81,7 @@
               Ut vehicula fermentum mi, a bibendum nunc sagittis ac.
             </p>
             <div class="text-bronze">
-              <svg class="fill-bronze inline-block mr-2" width="33" height="25" viewBox="0 0 33 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg class="inline-block mr-2 fill-bronze" width="33" height="25" viewBox="0 0 33 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M17.875 19.1647V22H24.75V24.75H8.25V22H15.125V19.1647C12.4667 18.8295 10.0221 17.5357 8.25 15.5262C6.47788 13.5166 5.50005 10.9293 5.5 8.25V0H27.5V8.25C27.5 10.9293 26.5221 13.5166 24.75 15.5262C22.9779 17.5357 20.5333 18.8295 17.875 19.1647Z"/>
                 <rect width="2.75" height="6.875"/>
                 <rect x="30.25" width="2.75" height="6.875"/>
@@ -96,7 +96,7 @@
               Ut vehicula fermentum mi, a bibendum nunc sagittis ac.
             </p>
             <div class="text-silver">
-              <svg class="fill-silver inline-block mr-2" width="33" height="25" viewBox="0 0 33 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg class="inline-block mr-2 fill-silver" width="33" height="25" viewBox="0 0 33 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M17.875 19.1647V22H24.75V24.75H8.25V22H15.125V19.1647C12.4667 18.8295 10.0221 17.5357 8.25 15.5262C6.47788 13.5166 5.50005 10.9293 5.5 8.25V0H27.5V8.25C27.5 10.9293 26.5221 13.5166 24.75 15.5262C22.9779 17.5357 20.5333 18.8295 17.875 19.1647Z"/>
                 <rect width="2.75" height="6.875"/>
                 <rect x="30.25" width="2.75" height="6.875"/>
@@ -111,7 +111,7 @@
               Ut vehicula fermentum mi, a bibendum nunc sagittis ac.
             </p>
             <div class="text-gold">
-              <svg class="fill-gold inline-block mr-2" width="33" height="25" viewBox="0 0 33 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg class="inline-block mr-2 fill-gold" width="33" height="25" viewBox="0 0 33 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M17.875 19.1647V22H24.75V24.75H8.25V22H15.125V19.1647C12.4667 18.8295 10.0221 17.5357 8.25 15.5262C6.47788 13.5166 5.50005 10.9293 5.5 8.25V0H27.5V8.25C27.5 10.9293 26.5221 13.5166 24.75 15.5262C22.9779 17.5357 20.5333 18.8295 17.875 19.1647Z"/>
                 <rect width="2.75" height="6.875"/>
                 <rect x="30.25" width="2.75" height="6.875"/>
diff --git a/templates/versions/_past_version_list_item.html b/templates/versions/_past_version_list_item.html
index 4aae2957..ce5370a5 100644
--- a/templates/versions/_past_version_list_item.html
+++ b/templates/versions/_past_version_list_item.html
@@ -1,5 +1,5 @@
-<div class="md:flex border-b border-slate pb-6">
-  <div class="md:w-1/4 mb-4">
+<div class="pb-6 border-b md:flex border-slate">
+  <div class="mb-4 md:w-1/4">
     <h3 class="text-2xl">{{ v.name }}</h3>
     <p>Released {{ v.release_date|date:"n/j/y" }}</p>
   </div>
@@ -7,10 +7,10 @@
     <p>{{ v.description }}</p>
     <div class="mt-5 max-w-md sm:flex md:mt-8">
       <div class="rounded-md shadow">
-        <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Download </a>
+        <a href="#" class="flex justify-center items-center py-3 px-8 w-full text-base font-medium rounded-md border md:py-4 md:px-10 md:text-lg border-orange text-orange"> Download </a>
       </div>
       <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-        <a href="{% url 'version-detail' v.slug %}" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Version Details > </a>
+        <a href="{% url 'version-detail' v.slug %}" class="flex justify-center items-center py-3 px-8 w-full text-base font-medium rounded-md border md:py-4 md:px-10 md:text-lg border-steel text-orange"> Version Details > </a>
       </div>
     </div>
   </div>
diff --git a/templates/versions/detail.html b/templates/versions/detail.html
index 4adbdb0b..93426264 100644
--- a/templates/versions/detail.html
+++ b/templates/versions/detail.html
@@ -9,7 +9,7 @@
   </div>
 
   <div class="flex mt-4">
-    <div class="md:w-1/4 hidden md:block">
+    <div class="hidden md:block md:w-1/4">
       <ul>
         <li class="py-2"><a href="#download">Download</a></li>
         <li class="py-2"><a href="#known-issues">Known Issues</a></li>
@@ -19,73 +19,73 @@
         <li class="py-2"><a href="#acknowledgements">Acknowledgements</a></li>
       </ul>
     </div>
-    <div class="md:w-3/4 px-3 md:px-0 mx-3 md:mx-0">
+    <div class="px-3 mx-3 md:px-0 md:mx-0 md:w-3/4">
       <div class="mb-6">
         <span class="inline uppercase {% if current_version %}text-green bg-green/10{% else %}text-orange bg-charcoal{% endif %} rounded text-lg w-auto px-3 py-1">{% if current_version %}Current Version{% else %}Past Version{% endif %}</span>
       </div>
 
-      <div class="border-b border-slate py-6">
+      <div class="py-6 border-b border-slate">
         <h3 class="text-4xl">{{ version.name }}</h3>
         <h4>{{ version.release_date }}</h4>
         <p class="my-4">{{ version.description }}</p>
       </div>
 
-      <div class="border-b border-slate py-6">
+      <div class="py-6 border-b border-slate">
         <h3 class="text-2xl" id="download">
           Download
-          <span class="float-right uppercase text-base"><a href="#" class="text-orange">DOCUMENTATION</a></span>
+          <span class="float-right text-base uppercase"><a href="#" class="text-orange">DOCUMENTATION</a></span>
         </h3>
 
         <!-- TODO: unhide this after fixing mobile layout -->
-        <table class="hidden md:block table-auto border-spacing-2 w-full my-5">
+        <table class="hidden my-5 w-full table-auto md:block border-spacing-2">
           <thead>
             <tr>
-              <th class="border border-slate p-3">Platform</th>
-              <th class="border border-slate p-3">File</th>
-              <th class="border border-slate p-3">SHA256 Hash</th>
+              <th class="p-3 border border-slate">Platform</th>
+              <th class="p-3 border border-slate">File</th>
+              <th class="p-3 border border-slate">SHA256 Hash</th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td class="border border-slate p-3">Unix</td>
-              <td class="border border-slate p-3"><a href="" class="text-orange">boost_1_78_0.tar.bz2</a></td>
-              <td class="border border-slate p-3">8681f175d4bdb26c52222665793eef08490d7758529330f98d3b29dd0735bccc</td>
+              <td class="p-3 border border-slate">Unix</td>
+              <td class="p-3 border border-slate"><a href="" class="text-orange">boost_1_78_0.tar.bz2</a></td>
+              <td class="p-3 border border-slate">8681f175d4bdb26c52222665793eef08490d7758529330f98d3b29dd0735bccc</td>
             </tr>
             <tr>
-              <td class="border border-slate p-3">Windows</td>
-              <td class="border border-slate p-3"><a href="" class="text-orange">boost_1_78_0.zip</a></td>
-              <td class="border border-slate p-3">f22143b5528e081123c3c5ed437e92f648fe69748e95fa6e2bd41484e2986cc3</td>
+              <td class="p-3 border border-slate">Windows</td>
+              <td class="p-3 border border-slate"><a href="" class="text-orange">boost_1_78_0.zip</a></td>
+              <td class="p-3 border border-slate">f22143b5528e081123c3c5ed437e92f648fe69748e95fa6e2bd41484e2986cc3</td>
             </tr>
           </tbody>
         </table>
       </div>
 
-      <div class="border-b border-slate py-6">
+      <div class="py-6 border-b border-slate">
         <h3 class="text-2xl" id="known-issues">Known Issues</h3>
         <p>Content Here</p>
       </div>
 
-      <div class="border-b border-slate py-6">
+      <div class="py-6 border-b border-slate">
         <h3 class="text-2xl" id="new-libraries">New Libraries</h3>
         <p>Content Here</p>
       </div>
 
-      <div class="border-b border-slate py-6">
+      <div class="py-6 border-b border-slate">
         <h3 class="text-2xl" id="updated-libraries">Updated Libraries</h3>
         <p>Content Here</p>
       </div>
 
-      <div class="border-b border-slate py-6">
+      <div class="py-6 border-b border-slate">
         <h3 class="text-2xl" id="updated-tools">Updated Tools</h3>
         <p>Content Here</p>
       </div>
 
-      <div class="border-b border-slate py-6">
+      <div class="py-6 border-b border-slate">
         <h3 class="text-2xl" id="compilers-tested">Compilers Tested</h3>
         <p>Content Here</p>
       </div>
 
-      <div class="border-b border-slate py-6">
+      <div class="py-6 border-b border-slate">
         <h3 class="text-2xl" id="acknowledgements">Acknowledgements</h3>
         <p>Content Here</p>
       </div>
diff --git a/templates/versions/list.html b/templates/versions/list.html
index 907cba18..0c7a41a9 100644
--- a/templates/versions/list.html
+++ b/templates/versions/list.html
@@ -3,18 +3,18 @@
 {% load static %}
 
 {% block content %}
-  <div class="text-center mb-11">
-    <h2 class="text-4xl mb-3">Versions</h2>
+  <div class="mb-11 text-center">
+    <h2 class="mb-3 text-4xl">Versions</h2>
     <p>Our libraries are ever evolving. Keep up without latest updates here.</p>
   </div>
 
   <!-- Current Version -->
-  <div class="rounded bg-charcoal p-3 md:p-11 mb-5 mx-3">
+  <div class="p-3 mx-3 mb-5 rounded md:p-11 bg-charcoal">
     <div class="mb-6">
-      <span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">Current Version</span>
+      <span class="inline py-1 px-3 w-auto text-lg uppercase rounded text-green bg-green/10">Current Version</span>
     </div>
     <div class="md:flex">
-      <div class="md:w-1/4 mb-4">
+      <div class="mb-4 md:w-1/4">
         <h3 class="text-2xl">{{ current_version.name }}</h3>
         <p>Released {{ current_version.release_date|date:"n/j/y" }}</p>
       </div>
@@ -23,12 +23,12 @@
         <div class="mt-5 max-w-md sm:flex md:mt-8">
           <div class="rounded-md shadow">
             <a href="#"
-               class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10">
+               class="flex justify-center items-center py-3 px-8 w-full text-base font-medium rounded-md border md:py-4 md:px-10 md:text-lg border-orange text-orange">
               Download </a>
           </div>
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
             <a href="{% url 'version-detail' current_version.slug %}"
-               class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
+               class="flex justify-center items-center py-3 px-8 w-full text-base font-medium rounded-md border md:py-4 md:px-10 md:text-lg hover:bg-gray-50 border-steel text-orange">
               Version Details > </a>
           </div>
         </div>
@@ -38,9 +38,9 @@
   <!-- End Current Version -->
 
   <!-- Past Versions -->
-  <div class="rounded bg-charcoal p-3 md:p-11 mx-3 space-y-8">
+  <div class="p-3 mx-3 space-y-8 rounded md:p-11 bg-charcoal">
     <div class="mb-6">
-      <span class="inline uppercase text-orange bg-black rounded text-lg w-auto px-3 py-1">Past Versions</span>
+      <span class="inline py-1 px-3 w-auto text-lg uppercase bg-black rounded text-orange">Past Versions</span>
     </div>
 
     {% for v in version_list %}
diff --git a/yarn.lock b/yarn.lock
index 5dd8417c..5704f688 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -75,6 +75,11 @@ acorn@^7.0.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+agent-base@5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
+  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
+
 alpinejs@^3.10.2:
   version "3.10.2"
   resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.10.2.tgz#bf3a12b8c3793f346bc9794038bb6e09341600e4"
@@ -286,6 +291,13 @@ csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
+debug@4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 defined@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.1.tgz#c0b9db27bfaffd95d6f61399419b893df0f91ebf"
@@ -433,6 +445,14 @@ htmx@^0.0.2:
   resolved "https://registry.yarnpkg.com/htmx/-/htmx-0.0.2.tgz#790b3cd816b74f9f2648326e5f4f8a9b320f9fb0"
   integrity sha512-FfUo3ynRYr6Ra4vqmS4Nq9g47607FSmvHYCOuU8bvbW8s4kPMhAmCbMBjuW2cEZI6DauaFNZKinfgV91cc9Feg==
 
+https-proxy-agent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
+  integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
+  dependencies:
+    agent-base "5"
+    debug "4"
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -517,6 +537,11 @@ minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
 
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
 nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@@ -836,6 +861,11 @@ postcss@^8.4.17:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -881,6 +911,14 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rustywind@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/rustywind/-/rustywind-0.16.0.tgz#b3355c23e84949608119ed4bb7fad2832b70b4cd"
+  integrity sha512-V3Z8eSY7eVpA8y+6LKVv4l6ary9aVzxYBp5oCu1Nj40PKOivfnGureeDYI9wnSw/qO2DLLpPo90WKlkbJwr7MQ==
+  dependencies:
+    https-proxy-agent "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"