diff --git a/src/templates/common/elements/affiliations_ul.html b/src/templates/common/elements/affiliations_ul.html
index 94b350b875..c57b94dbf2 100644
--- a/src/templates/common/elements/affiliations_ul.html
+++ b/src/templates/common/elements/affiliations_ul.html
@@ -1,4 +1,4 @@
-<ul>
+<ul class="no-bullet-list">
   {% for affiliation in affiliations %}
     <li>
       {% include "common/elements/affiliation_display.html" %}
diff --git a/src/themes/clean/assets/css/cardinal.css b/src/themes/clean/assets/css/cardinal.css
index b132ab7c33..8cf3d2a922 100644
--- a/src/themes/clean/assets/css/cardinal.css
+++ b/src/themes/clean/assets/css/cardinal.css
@@ -18,6 +18,7 @@
   --text-white: #fff;
   --text-header: var(--text-black);
   --body-text: #525252;
+  --body-text-dyslexia: var(--text-black);
   --nav-text: #636363;
   --nav-text-active: var(--brand-primary);
   --recede-opacity: 70%;
@@ -39,6 +40,8 @@
   --bg-card-alt: #f8f9fa;
   --bg-blockquote: #F0F0F0;
   --bg-overlay: rgba(55, 55, 55, 0.8);
+  --bg-dyslexia: #F5F5DC;
+  --bg-dyslexia-em: #FAFAC8;
 
   /* UI State Colors */
   --color-success: green;
@@ -95,4 +98,7 @@
   --pagination-active-bg: var(--btn-primary-bg);
   --pagination-active-border: var(--btn-primary-border);
   --pagination-disabled-color: var(--text-muted);
+
+  /* workarounds, note the fill colour is hardcoded not a variable*/
+  --custom-select-background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23747474' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
 }
\ No newline at end of file
diff --git a/src/themes/clean/assets/css/clean.css b/src/themes/clean/assets/css/clean.css
index f093c0c9c3..d9fb334989 100644
--- a/src/themes/clean/assets/css/clean.css
+++ b/src/themes/clean/assets/css/clean.css
@@ -234,6 +234,10 @@ main a {
   background-color: var(--bg-card-alt);
 }
 
+.card-img-overlay.white-text > .card-text {
+  background: var(--bg-overlay);
+}
+
 .card.no-image .card-img-overlay {
   position: relative;
   background-color: var(--bg-card-alt);
@@ -271,6 +275,10 @@ main a {
   font-size: 1.5rem;
 }
 
+.card-title.white-text {
+  background: var(--bg-overlay);
+}
+
 .full-width-card {
   min-width: 100%;
 }
@@ -288,8 +296,8 @@ main a {
 
 .btn-primary:hover,
 .btn-primary:focus {
-  color: var(--btn-primary-text);
-  background-color: var(--btn-primary-bg);
+  color: var(--btn-primary-bg);
+  background-color: var(--btn-primary-text);
   border-color: var(--btn-primary-border);
 }
 
@@ -298,7 +306,7 @@ main a {
 .btn-background:visited {
   background-color: inherit;
   color: inherit;
-  border: 1px solid var(--brand-primary);
+  border: 1px solid var(--btn-outline-secondary);
   padding: 0 10px;
   min-width: 7rem;
   min-height: 2rem;
@@ -312,9 +320,9 @@ main a {
 }
 
 .btn-background:hover {
-  color: var(--text-on-dark);
-  background-color: var(--brand-primary);
-  border-color: var(--brand-primary);
+  color: var(--btn-primary-text);
+  background-color: var(--btn-primary-bg);
+  border-color: var(--btn-primary-border);
   transition: var(--transition-standard);
 }
 
@@ -338,9 +346,16 @@ a.btn {
   border: 1px black solid;
 }
 
-.alert .close {
+.alert .close,
+button.close {
   color: var(--color-danger);
   opacity: var(--recede-opacity);
+  text-shadow: none;
+}
+
+button.close:hover {
+  background: var(--color-danger);
+  color: var(--body-text)
 }
 
 .btn-outline-secondary {
@@ -395,7 +410,7 @@ a.btn {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(transparent, rgba(0, 0, 0, var(--recede-opacity)) 20%);
+  background: var(--bg-overlay);
   padding: 2rem;
   text-align: center;
 }
@@ -437,7 +452,6 @@ a.btn {
   margin-bottom: 0.25rem;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--text-white);
 }
 
 .article-thumbnail {
@@ -477,6 +491,10 @@ a.btn {
   border-bottom: 1px solid var(--border-light);
 }
 
+.article-list .article-item {
+  padding: 2rem;
+}
+
 .article-item:last-child {
   border-bottom: none;
   padding-bottom: 0;
@@ -552,6 +570,14 @@ a.btn {
   padding-bottom: var(--spacing-sm);
 }
 
+dt {
+  font-size: larger;
+}
+
+a[href^="http"] {
+  overflow-wrap: anywhere;
+}
+
 #reading-options{
   display: flex;
   gap: 1rem;
@@ -565,23 +591,26 @@ a.btn {
   z-index: 1000;
   width: fit-content;
   margin-left: auto;
-  background-color: var(--bg-body);
+  background-color: var(--bg-card-alt);
 }
 
-.btn-opt {
-    border: 1px solid #1C304A;
-    background: #f1f1f1;
+#reading-options .btn-background {
+    min-width: 3rem;
 }
 
-.dyslexia-friendly {
+.dyslexia-friendly{
     font-family: Verdana !important;
-    color: #4c4c4c;
-    background-color: #F5F5DC;
+    color: var(--body-text-dyslexia) !important;
+    background-color: var(--bg-dyslexia) !important;
+}
+
+.dyslexia-friendly .fa {
+    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
 }
 
 .dyslexia-friendly em,
 .dyslexia-friendly i {
-    background-color: #FAFAC8;
+    background-color: var(--bg-dyslexia-em);
     font-style: normal;
 }
 
@@ -773,12 +802,25 @@ header svg {
 /* ========================================================================
    Form Elements
    ======================================================================== */
+input[type="text"],
+input[type="email"],
+textarea.form-control,
+.custom-select {
+  background: var(--bg-card-alt);
+  color: var(--text-muted);
+  border: solid, 1px, var(--brand-primary);
+}
+.custom-select {
+  background: var(--custom-select-background);
+}
+
 .homepage-element-search-bar input[type="text"] {
   font-size: 1.5rem;
 }
 
-.homepage-element-search-bar .input-group-text {
+.homepage-element-search-bar .input-group .input-group-text {
   font-size: 1.5rem;
+  height: 100%;
 }
 
 .input-group .form-control,
@@ -802,6 +844,12 @@ header svg {
   align-items: stretch;
 }
 
+.input-group-text {
+  color: var(--body-text);
+  background: var(--bg-card-alt);
+  border: solid, 1px, var(--brand-primary);
+}
+
 .input-group .custom-select,
 .input-group .input-group-text {
   height: 2.5rem;
@@ -833,7 +881,8 @@ header svg {
 
 .badge-secondary {
   background-color: var(--brand-secondary);
-  color: #fff;
+  color: var(--text-white);
+  text-decoration: none;
 }
 
 input + .btn-background {
@@ -903,12 +952,14 @@ span + .btn-background {
     position: sticky;
     max-height: 100vh;
     overflow-y: auto;
-    top: 60px;
+    top: 80px;
     z-index: 999;
 }
 
-.table-caption {
+.table-caption,
+.fig-caption {
   margin-bottom: var(--spacing-sm);
+  background: var(--bg-card-alt) !important;
 }
 
 .math-formulae {
@@ -957,6 +1008,10 @@ span + .btn-background {
   margin-left: 0;
 }
 
+.line-spaced-list > li {
+  margin-bottom: 0.7rem;
+}
+
 .keywords-list {
   list-style: none;
   padding-left: 0;
@@ -1115,6 +1170,15 @@ span + .btn-background {
   min-height: 24px;
 }
 
+.modal-body {
+  background: var(--bg-body);
+  border: var(--border-medium) 1px solid;
+}
+
+.modal-header {
+    background: var(--bg-card-alt);
+}
+
 /* ========================================================================
    Accessibility & Skip Navigation
    ======================================================================== */
diff --git a/src/themes/clean/assets/css/evergreen.css b/src/themes/clean/assets/css/evergreen.css
index a12a25c8d3..69bf3de9ee 100644
--- a/src/themes/clean/assets/css/evergreen.css
+++ b/src/themes/clean/assets/css/evergreen.css
@@ -18,6 +18,7 @@
   --text-white: #fff;
   --text-header: var(--text-black);
   --body-text: #525252;
+  --body-text-dyslexia: var(--text-black);
   --nav-text: #636363;
   --nav-text-active: var(--brand-primary);
   --recede-opacity: 70%;
@@ -39,6 +40,8 @@
   --bg-card-alt: #f8f9fa;
   --bg-blockquote: #F0F0F0;
   --bg-overlay: rgba(55, 55, 55, 0.8);
+  --bg-dyslexia: #F5F5DC;
+  --bg-dyslexia-em: #FAFAC8;
 
   /* UI State Colors */
   --color-success: green;
@@ -95,4 +98,7 @@
   --pagination-active-bg: var(--btn-primary-bg);
   --pagination-active-border: var(--btn-primary-border);
   --pagination-disabled-color: var(--text-muted);
+
+  /* workarounds, note the fill colour is hardcoded not a variable*/
+  --custom-select-background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23747474' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
 }
\ No newline at end of file
diff --git a/src/themes/clean/assets/css/midnight.css b/src/themes/clean/assets/css/midnight.css
index 4ad24d9508..4bc0771290 100644
--- a/src/themes/clean/assets/css/midnight.css
+++ b/src/themes/clean/assets/css/midnight.css
@@ -1,6 +1,6 @@
 :root {
   /* Brand & Theme Colors */
-  --brand-primary: #0a0f1a;
+  --brand-primary: #4d9fff;;
   --brand-secondary: #7eb3ff;
   --color-success: #5cb85c;
   --text-link-alt: #6ba3ff;
@@ -16,6 +16,7 @@
   --text-white: #0a0f1a;
   --text-header: #ffffff;
   --body-text: #e4e6eb;
+  --body-text-dyslexia: #F5F5DC;
   --nav-text: #b0b3b8;
   --nav-text-active: #4d9fff;
   --recede-opacity: 70%;
@@ -37,6 +38,8 @@
   --bg-card-alt: #1a2235;
   --bg-blockquote: #1a2235;
   --bg-overlay: rgba(10, 15, 26, 0.9);
+  --bg-dyslexia: black;
+  --bg-dyslexia-em: var(--bg-card-alt);
 
   /* UI State Colors */
   --color-danger: #ff6b6b;
@@ -92,4 +95,8 @@
   --pagination-active-bg: var(--btn-primary-bg);
   --pagination-active-border: var(--btn-primary-border);
   --pagination-disabled-color: var(--text-muted);
+
+  /* workarounds, note the fill colour is hardcoded not a variable*/
+  --custom-select-background: var(--bg-card-alt) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23b0b3b8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
+
 }
diff --git a/src/themes/clean/assets/css/ocean.css b/src/themes/clean/assets/css/ocean.css
index 27ec91358d..b7678ecf9f 100644
--- a/src/themes/clean/assets/css/ocean.css
+++ b/src/themes/clean/assets/css/ocean.css
@@ -18,6 +18,7 @@
   --text-white: #fff;
   --text-header: var(--text-black);
   --body-text: #525252;
+  --body-text-dyslexia: var(--text-black);
   --nav-text: #636363;
   --nav-text-active: var(--brand-primary);
   --recede-opacity: 70%;
@@ -39,6 +40,8 @@
   --bg-card-alt: #f8f9fa;
   --bg-blockquote: #F0F0F0;
   --bg-overlay: rgba(55, 55, 55, 0.8);
+  --bg-dyslexia: #F5F5DC;
+  --bg-dyslexia-em: #FAFAC8;
 
   /* UI State Colors */
   --color-success: green;
@@ -95,4 +98,7 @@
   --pagination-active-bg: var(--btn-primary-bg);
   --pagination-active-border: var(--btn-primary-border);
   --pagination-disabled-color: var(--text-muted);
+
+  /* workarounds, note the fill colour is hardcoded not a variable*/
+  --custom-select-background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23747474' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
 }
\ No newline at end of file
diff --git a/src/themes/clean/templates/core/accounts/public_profile.html b/src/themes/clean/templates/core/accounts/public_profile.html
index a4fc7f37f2..89b5136d48 100644
--- a/src/themes/clean/templates/core/accounts/public_profile.html
+++ b/src/themes/clean/templates/core/accounts/public_profile.html
@@ -10,14 +10,42 @@
                 {% include "common/elements/profile_image.html" with classes="thumbnail img-fluid editorial-image" user=user %}
                 <br />
                 <h1>{{ user.full_name }}</h1>
-                <p><strong>{% trans 'Roles' %}: </strong><br>
-                    <ul class="list-inline comma-sep">
-                        {% for role in roles %}
-                            <li>{{ role.role.name }}</li>
-                        {% endfor %}
-                    </ul>
-                </p>
-                {% include "common/elements/profile_affiliations.html" %}
+                <dl>
+                    {% if roles.exists %}
+                        <dt>
+                            {% blocktrans count counter=roles.count %}
+                                Role
+                            {% plural %}
+                                Roles
+                            {% endblocktrans %}
+                        </dt>
+                            <dd>
+                                <ul class="list-no-bullet">
+                                    {% for role in roles %}
+                                        <li>{{ role.role.name }}</li>
+                                    {% endfor %}
+                                </ul>
+                            </dd>
+                    {% endif %}
+                    {% if user.affiliations.exists %}
+                        <dt>
+                            {% blocktrans count counter=user.affiliations.count %}
+                                Affiliation
+                            {% plural %}
+                                Affiliations
+                            {% endblocktrans %}
+                        </dt>
+                        <dd>
+                            {% include "common/elements/affiliations_ul.html" with affiliations=user.affiliations %}
+                        </dd>
+                    {% endif %}
+                    {% if user.website or user.twitter or user.facebook or user.github or user.linkedin %}
+                        <dt>{% trans 'Social Media' %}</dt>
+                        <dd>
+                            {% include "elements/journal/editorial_social_content.html" with user=user %}
+                        </dd>
+                    {% endif %}
+                </dl>
             </div>
             <div class="col-md-9">
                 {% if user.biography %}
diff --git a/src/themes/clean/templates/core/news/index.html b/src/themes/clean/templates/core/news/index.html
index daf57afbea..8e173b25bb 100644
--- a/src/themes/clean/templates/core/news/index.html
+++ b/src/themes/clean/templates/core/news/index.html
@@ -41,13 +41,13 @@ <h2>
             </h2>
         {% endfor %}
     </div>
-    <section aria-label="pagination">
-        <div class="pagination-block site-pagination">
-            <ul class="d-flex justify-content-center list-inline">
+    <section aria-label="{% trans 'pagination' %}">
+        {% if news_items.paginator.num_pages > 1 %}
+            <ul class="pagination">
                 {% if news_items.has_previous %}
-                    <li class="list-inline-item">
-                        <a href="?page={{ news_items.previous_page_number }}" 
-                            class="btn btn-outline-primary"
+                    <li class="page-item">
+                        <a href="?page={{ news_items.previous_page_number }}"
+                            class="page-link"
                             >
                             {% include "elements/icons/page_previous.html" %}
                         </a>
@@ -56,21 +56,21 @@ <h2>
 
                 {% for page in news_items|slice_pages_with_first_last_ellipsis:2 %}
                     {% if page == '...' %}
-                        <li class="list-inline-item">
-                            <span class="btn btn-outline-secondary" disabled>...</span>
+                        <li class="page-item">
+                            <span class="page-link" disabled>...</span>
                         </li>
                     {% elif news_items.number == page.number %}
-                        <li class="list-inline-item">
-                            <a href="?page={{ page.number }}"
-                                class="btn btn-primary"
+                        <li class="page-item active">
+                            <a href="?page={{ page.number }}" 
+                                class="page-link"
                                 >
                                 <span class="sr-only">{% trans 'current page' %}</span>{{ page.number }}
                             </a>
                         </li>
                     {% else %}
-                        <li class="list-inline-item">
+                        <li class="page-item">
                             <a href="?page={{ page.number }}"
-                                class="btn btn-outline-primary"
+                                class="page-link"
                                 >
                                 <span class="sr-only">{% trans 'page' %}</span>{{ page.number }}
                             </a>
@@ -78,13 +78,13 @@ <h2>
                     {% endif %}
                 {% endfor %}
                 {% if news_items.has_next %}
-                    <li class="list-inline-item">
-                        <a href="?page={{ news_items.next_page_number }}" class="btn btn-outline-primary">
+                    <li class="page-item arrow">
+                        <a href="?page={{ news_items.next_page_number }}" class="page-link">
                             {% include "elements/icons/page_next.html" %}
                         </a>
                     </li>
                 {% endif %}
             </ul>
-        </div>
+        {% endif %}
     </section>
 {% endblock body %}
diff --git a/src/themes/clean/templates/elements/article_listing.html b/src/themes/clean/templates/elements/article_listing.html
index 73aab006dc..e78909bb36 100644
--- a/src/themes/clean/templates/elements/article_listing.html
+++ b/src/themes/clean/templates/elements/article_listing.html
@@ -2,7 +2,7 @@
 {% load static %}
 {% load dates %}
 
-<article class="article-item" aria-label="{{ article.title|striptags }}">
+<div class="card article-item" aria-label="{{ article.title|striptags }}">
     <div class="row align-items-start">
         {% if not journal_settings.article.disable_article_thumbnails %}
           <div class="col-2 col-md-2">
@@ -93,4 +93,4 @@ <h2 class="article-title">{{ article.title|safe }}</h2>
             {% endif %}
         </div>
     </div>
-</article>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/themes/clean/templates/elements/journal/editorial_social_content.html b/src/themes/clean/templates/elements/journal/editorial_social_content.html
index 00ca70d043..befcd66c7a 100644
--- a/src/themes/clean/templates/elements/journal/editorial_social_content.html
+++ b/src/themes/clean/templates/elements/journal/editorial_social_content.html
@@ -1,53 +1,63 @@
 {% if user.website or user.twitter or user.facebook or user.github or user.linkedin %}
-<p><small>
+<ul class="list-inline">
     {% if user.website %}
-        <a href="{{ user.website }}"
-            aria-label="{{ member.user.full_name }}'s website" 
-            >
-            <i aria-hidden="true" class="fa fa-globe"></i> 
-            {% trans 'Website' %}
-            {% include "elements/icons/link_external.html" %}  
-        </a>
+        <li>
+            <a href="{{ user.website }}"
+                aria-label="{{ member.user.full_name }}'s website" 
+                >
+                <i aria-hidden="true" class="fa fa-globe"></i> 
+                {% trans 'Website' %}
+                {% include "elements/icons/link_external.html" %}  
+            </a>
+        </li>
     {% endif %}
 
     {% if user.twitter %}
-        <a href="https://www.twitter.com/{{ user.twitter }}" 
-            aria-label="{{ member.user.full_name }}'s twitter profile"
-            >
-            <i aria-hidden="true" class="fa fa-twitter-square"></i> 
-            {% trans 'Twitter' %}
-            {% include "elements/icons/link_external.html" %}  
-        </a>
+        <li>
+            <a href="https://www.twitter.com/{{ user.twitter }}" 
+                aria-label="{{ member.user.full_name }}'s twitter profile"
+                >
+                <i aria-hidden="true" class="fa fa-twitter-square"></i> 
+                {% trans 'Twitter' %}
+                {% include "elements/icons/link_external.html" %}  
+            </a>
+        </li>
     {% endif %}
 
     {% if user.facebook %}
-        <a href="https://www.facebook.com/{{ user.facebook }}" 
-            aria-label="{{ member.user.full_name }}'s facebook profile"
-            >
-            <i aria-hidden="true" class="fa fa-facebook-square"></i> 
-            {% trans 'Facebook' %}
-            {% include "elements/icons/link_external.html" %}  
-        </a>
+        <li>   
+            <a href="https://www.facebook.com/{{ user.facebook }}" 
+                aria-label="{{ member.user.full_name }}'s facebook profile"
+                >
+                <i aria-hidden="true" class="fa fa-facebook-square"></i> 
+                {% trans 'Facebook' %}
+                {% include "elements/icons/link_external.html" %}  
+            </a>
+        </li>
     {% endif %}
 
     {% if user.github %}
-        <a href="https://www.github.com/{{ user.github}}" 
-            aria-label="{{ member.user.full_name }}'s github profile"
-            >
-            <i aria-hidden="true" class="fa fa-github-square"></i> 
-            {% trans 'Github' %}
-            {% include "elements/icons/link_external.html" %}  
-        </a>
+        <li>
+            <a href="https://www.github.com/{{ user.github}}" 
+                aria-label="{{ member.user.full_name }}'s github profile"
+                >
+                <i aria-hidden="true" class="fa fa-github-square"></i> 
+                {% trans 'Github' %}
+                {% include "elements/icons/link_external.html" %}  
+            </a>
+        </li>
     {% endif %}
 
     {% if user.linkedin %}
-        <a href="https://www.linkedin.com/in/{{ user.linkedin }}" 
-            aria-label="{{ member.user.full_name }}'s linkedin profile"
-            >
-            <i aria-hidden="true" class="fa fa-linkedin-square"></i> 
-            {% trans 'Linkedin' %}
-            {% include "elements/icons/link_external.html" %}  
-        </a>
+        <li>
+            <a href="https://www.linkedin.com/in/{{ user.linkedin }}" 
+                aria-label="{{ member.user.full_name }}'s linkedin profile"
+                >
+                <i aria-hidden="true" class="fa fa-linkedin-square"></i> 
+                {% trans 'Linkedin' %}
+                {% include "elements/icons/link_external.html" %}  
+            </a>
+        </li>
     {% endif %}
-</small></p>
+</ul>
 {% endif %}
\ No newline at end of file
diff --git a/src/themes/clean/templates/elements/journal/issue_sidebar.html b/src/themes/clean/templates/elements/journal/issue_sidebar.html
index 78dc725db0..18e249e845 100644
--- a/src/themes/clean/templates/elements/journal/issue_sidebar.html
+++ b/src/themes/clean/templates/elements/journal/issue_sidebar.html
@@ -16,27 +16,29 @@ <h2 id="archive-title">
                 {% else %} {% trans issue.issue_type.plural_name %}
                 {% endif %}
             </h2>
-            <ul aria-describedby="archive-title">
-                {% for issue_item in issues %}
-                    {% if issue_item.id == issue.id %}
-                        <li>
-                            <span class="sr-only"></span>
-                            <span aria-label='{{ issue.display_title_a11y }}'>
-                                {{ issue.display_title }} 
-                            </span>
-                            ({{ issue.articles.all.count}}) 
-                            <span class="sr-only">{% trans 'Articles' %} {% trans 'this page' %}</span>
+            {% spaceless %}
+                <ul aria-describedby="archive-title" class="no-bullet-list line-spaced-list">
+                    {% for issue_item in issues %}
+                            {% if issue_item.id == issue.id %}
+                                <li><span aria-label='{{ issue.display_title_a11y }}'>
+                                    {{ issue.display_title }} 
+                                    ({{ issue_item.articles.all.count}}<span class="sr-only">{% trans 'Articles' %}</span>) 
+                                </span></li>
+                            {% elif issue_item.issue_type.code == 'issue' %}
+                                <li><a href="{% url 'journal_issue' issue_item.id %}" aria-label='{{ issue_item.display_title_a11y }}'>
+                                    {{ issue_item.display_title }}
+                                    ({{ issue_item.articles.all.count}}<span class="sr-only">{% trans 'Articles' %}</span>) 
+                                </a></li>
+                            {% else %}
+                                <li><a href="{% url 'journal_collection' issue_item.id %}">
+                                    {{ issue_item.issue_title }}
+                                    ({{ issue_item.articles.all.count}}<span class="sr-only">{% trans 'Articles' %}</span>) 
+                                </a></li>
+                            {% endif %}
                         </li>
-                    {% elif issue_item.issue_type.code == 'issue' %}
-                        <li><a href="{% url 'journal_issue' issue_item.id %}" aria-label='{{ issue_item.display_title_a11y }}'>
-                            {{ issue_item.display_title }} 
-                        </a>
-                        ({{ issue_item.articles.all.count}}) <span class="sr-only">{% trans 'Articles' %}</span></li>
-                    {% else %}
-                        <li><a href="{% url 'journal_collection' issue_item.id %}">{{ issue_item.issue_title }} </a></li>
-                    {% endif %}
-                {% endfor %}
-            </ul>
+                    {% endfor %}
+                </ul>
+            {% endspaceless %}
         </div>
     </div>
 </aside>
diff --git a/src/themes/clean/templates/elements/journal/reading.html b/src/themes/clean/templates/elements/journal/reading.html
index 9503bea4be..7b1c1d24d7 100644
--- a/src/themes/clean/templates/elements/journal/reading.html
+++ b/src/themes/clean/templates/elements/journal/reading.html
@@ -1,8 +1,8 @@
-<div id="reading-options" class="col-md-12">
+<div id="reading-options" class="card col-md-12">
     <h2 class="sr-only">{% trans 'Text display options' %}</h2>
     <div class="btn-group-horizontal">
         <button
-            class="btn btn-opt"
+            class="btn-background"
             type="button"
             onclick="resizeText(-1)"
             aria-label="{% trans 'decrease text size' %}"
@@ -11,7 +11,7 @@ <h2 class="sr-only">{% trans 'Text display options' %}</h2>
             <span style="font-size: xx-small">Aa -</span>
         </button>
         <button
-            class="btn btn-opt"
+            class="btn-background"
             type="button"
             onclick="resizeText(1)"
             aria-label="{% trans 'increase text size' %}"
@@ -20,7 +20,7 @@ <h2 class="sr-only">{% trans 'Text display options' %}</h2>
             Aa +
         </button>
         <button
-            class="btn btn-opt"
+            class="btn-background"
             id="dyslexia-mode"
             type="button"
             onclick="toggleDyslexia()"
diff --git a/src/themes/clean/templates/journal/article.html b/src/themes/clean/templates/journal/article.html
index 17c800a6d4..781d55cbb9 100644
--- a/src/themes/clean/templates/journal/article.html
+++ b/src/themes/clean/templates/journal/article.html
@@ -36,7 +36,7 @@
                 <div class="card-img-overlay white-text">
                     <div class="card-text">
                         <p class="text-uppercase">{{ article.section.name }}</p>
-                        <h1 class="card-title align-text-bottom article-title">{{ article.title|safe }}</h1>
+                        <h1 class="white-text card-title align-text-bottom article-title">{{ article.title|safe }}</h1>
                         {% if article.is_published or proofing %}
                           {% include "common/elements/journal/article_authors_br.html" %}
                         {% endif %}
@@ -52,7 +52,7 @@ <h1 class="card-title align-text-bottom article-title">{{ article.title|safe }}<
 
     <div id="article_metadata" class="row">
 
-        <div class="col-md-7">
+        <div class="col-lg-7">
             <div id="article">
                 {% if journal_settings.article.disable_article_large_image %}
                     <small>{{ article.section.name }}</small>
@@ -75,7 +75,7 @@ <h2>{% trans "Rights" %}:</h2>
                     <p>{{ article.rights | safe }} </p>
                 {% endif %}
                 {% if article.is_published or proofing %}
-                    <div class="d-lg-none d-xl-none d-md-none">
+                    <div class="d-lg-none">
                         <h2>{% trans 'Files' %}</h2>
                         {% if galleys %}
                             <ul class="no-bullet-list">
@@ -131,7 +131,7 @@ <h2>{% trans "Publisher Notes" %}</h2>
                 {% endif %}
             </div>
         </div>
-        <div class="col-md-4 offset-md-1 left-bar">
+        <div class="col-lg-4 offset-lg-1 left-bar">
           <div class="card">
             <div class="card-body">
               <section aria-label="{% trans 'Article Information' %}">
@@ -375,13 +375,11 @@ <h2>{% trans 'CRediT Roles' %}</h2>
             </div>
           </div>
          {% if article_content %}
-            <div class="sticky-toc article-menu" id="toc-section">
+            <div class="sticky-toc article-menu card" id="toc-section">
               <section aria-labelledby="toc-title">
-                <div class="card">
                   <div class="card-body">
                     <h2 id="toc-title">{% trans "Table of Contents" %}</h2>
                     <ul id="toc" class="no-bullet-list table-of-contents"></ul>
-                  </div>
                 </div>
               </section>
             </div>