diff --git a/src/themes/clean/assets/css/cardinal.css b/src/themes/clean/assets/css/cardinal.css
index 70b8a14c14..b132ab7c33 100644
--- a/src/themes/clean/assets/css/cardinal.css
+++ b/src/themes/clean/assets/css/cardinal.css
@@ -4,4 +4,95 @@
   --brand-secondary: #c05555;
   --text-link-alt: #7c2d2d;
   --focus-shadow: #5a1515;
+  --color-success: #5cb85c;
+    /* Highlight color (shared across themes) */
+  --highlight-color: #FFEB3B;
+
+  /* Text Colors */
+  /* Must pass WCAG color contrast at --recede-opacity */
+  --text-primary: #212529;
+  --text-muted: #747474;
+  --text-on-dark: white;
+  --text-link: var(--body-text);
+  --text-black: #000;
+  --text-white: #fff;
+  --text-header: var(--text-black);
+  --body-text: #525252;
+  --nav-text: #636363;
+  --nav-text-active: var(--brand-primary);
+  --recede-opacity: 70%;
+
+  /* Link Decoration */
+  --link-decoration: underline;
+  --link-decoration-hover: underline;
+  --nav-link-decoration: none;
+  --nav-link-decoration-hover: underline;
+  --dropdown-item-decoration: none;
+  --dropdown-item-decoration-hover: underline;
+  --link-hover-color: var(--brand-primary);
+  --link-transition: color 0.2s ease;
+
+  /* Background Colors */
+  --bg-body: #fff;
+  --bg-content: white;
+  --bg-footer: #FCFCFC;
+  --bg-card-alt: #f8f9fa;
+  --bg-blockquote: #F0F0F0;
+  --bg-overlay: rgba(55, 55, 55, 0.8);
+
+  /* UI State Colors */
+  --color-success: green;
+  --color-danger: darkred;
+
+  /* Border Colors */
+  --border-light: #e5e5e5;
+  --border-medium: #6c757d;
+  --border-gray-200: rgb(229, 231, 235);
+
+  /* Header & Navigation */
+  --header-bg: var(--brand-primary);
+  --bg-nav: #fefeff;
+
+  /* Button Colors */
+  --btn-primary-bg: var(--brand-primary);
+  --btn-primary-border: var(--brand-primary);
+  --btn-primary-text: white;
+  --btn-outline-secondary: #6c757d;
+
+  /* Focus & Accessibility */
+  --focus-outline: #F9F9F9;
+  --focus-ring-size: 4px;
+
+  /* Typography */
+  --main-font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 15px;
+  --spacing-lg: 20px;
+  --spacing-xl: 30px;
+
+  /* Sizes */
+  --border-radius: 3px;
+  --border-radius-lg: 2rem;
+  --header-height: 120px;
+  --footer-height: 70px;
+  --card-image-height: 250px;
+  --carousel-min-height: 500px;
+  --icon-size: 16px;
+
+  /* Transitions */
+  --transition-standard: all 1s ease;
+
+  /* Pagination Colors - Light Mode */
+  --pagination-color: var(--body-text);
+  --pagination-bg: var(--bg-content);
+  --pagination-border: var(--border-light);
+  --pagination-hover-color: var(--brand-primary);
+  --pagination-hover-bg: var(--bg-card-alt);
+  --pagination-active-color: var(--btn-primary-text);
+  --pagination-active-bg: var(--btn-primary-bg);
+  --pagination-active-border: var(--btn-primary-border);
+  --pagination-disabled-color: var(--text-muted);
 }
\ 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 cd2b1792d0..f093c0c9c3 100644
--- a/src/themes/clean/assets/css/clean.css
+++ b/src/themes/clean/assets/css/clean.css
@@ -2,85 +2,10 @@
 
 /* Palette Selection - Use only one palette */
 @import url('/static/clean/css/evergreen.css');
+/* @import url('/static/clean/css/evergreen.css'); */
 /* @import url('/static/clean/css/ocean.css'); */
 /* @import url('/static/clean/css/cardinal.css'); */
 
-:root {
-  /* Highlight color (shared across themes) */
-  --highlight-color: #FFEB3B;
-
-  /* Text Colors */
-  --text-primary: #212529;
-  --text-muted: #4a4a4a;
-  --text-on-dark: white;
-  --text-link: var(--body-text);
-  --text-black: #000;
-  --text-white: #fff;
-  --text-header: var(--text-black);
-  --body-text: oklch(0.556 0 0);
-  --nav-text: #636363;
-  --nav-text-active: var(--brand-primary);
-
-  /* Link Decoration */
-  --link-decoration: underline;
-  --link-decoration-hover: underline;
-  --nav-link-decoration: none;
-  --nav-link-decoration-hover: underline;
-  --link-hover-color: var(--brand-primary);
-  --link-transition: color 0.2s ease;
-
-  /* Background Colors */
-  --bg-body: #fff;
-  --bg-content: white;
-  --bg-footer: #FCFCFC;
-  --bg-card-alt: #f8f9fa;
-  --bg-blockquote: #F0F0F0;
-  --bg-overlay: rgba(55, 55, 55, 0.8);
-
-  /* UI State Colors */
-  --color-success: green;
-  --color-danger: darkred;
-
-  /* Border Colors */
-  --border-light: #e5e5e5;
-  --border-medium: #6c757d;
-  --border-gray-200: rgb(229, 231, 235);
-
-  /* Header & Navigation */
-  --header-bg: var(--brand-primary);
-  --bg-nav: #fefeff;
-
-  /* Button Colors */
-  --btn-primary-bg: var(--brand-primary);
-  --btn-primary-border: var(--brand-primary);
-  --btn-primary-text: white;
-
-  /* Focus & Accessibility */
-  --focus-outline: #F9F9F9;
-  --focus-ring-size: 4px;
-
-  /* Typography */
-  --main-font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-
-  /* Spacing */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 15px;
-  --spacing-lg: 20px;
-  --spacing-xl: 30px;
-
-  /* Sizes */
-  --border-radius: 3px;
-  --border-radius-lg: 2rem;
-  --header-height: 120px;
-  --card-image-height: 250px;
-  --carousel-min-height: 500px;
-  --icon-size: 16px;
-
-  /* Transitions */
-  --transition-standard: all 1s ease;
-}
-
 /* ========================================================================
    Base Styles
    ======================================================================== */
@@ -141,6 +66,10 @@ h6 { font-size: 0.875rem; }
   line-height: 1.2;
 }
 
+.text-muted {
+  color: var(--text-muted) !important;
+}
+
 /* ========================================================================
    Layout Components
    ======================================================================== */
@@ -185,7 +114,9 @@ main a {
 }
 
 .navbar-custom .navbar-nav .nav-link,
-.navbar-custom .nav-link.dropdown-toggle {
+.navbar-custom .nav-link.dropdown-toggle,
+.navbar-dark.navbar-custom .navbar-nav .nav-link,
+.navbar-dark.navbar-custom .nav-link.dropdown-toggle {
   color: var(--nav-text);
   text-decoration: var(--nav-link-decoration);
 }
@@ -193,13 +124,21 @@ main a {
 .navbar-custom .navbar-nav .nav-link:hover,
 .navbar-custom .navbar-nav .nav-link:focus,
 .navbar-custom .nav-link.dropdown-toggle:hover,
-.navbar-custom .nav-link.dropdown-toggle:focus {
+.navbar-custom .nav-link.dropdown-toggle:focus,
+.navbar-dark.navbar-custom .navbar-nav .nav-link:hover,
+.navbar-dark.navbar-custom .navbar-nav .nav-link:focus,
+.navbar-dark.navbar-custom .nav-link.dropdown-toggle:hover,
+.navbar-dark.navbar-custom .nav-link.dropdown-toggle:focus {
   text-decoration: var(--nav-link-decoration-hover);
+  color: var(--nav-text-active);
 }
 
 .navbar-custom .nav-item.active .nav-link,
 .navbar-custom .nav-item:hover .nav-link,
-.navbar-custom .nav-item:focus-visible .nav-link {
+.navbar-custom .nav-item:focus-visible .nav-link,
+.navbar-dark.navbar-custom .nav-item.active .nav-link,
+.navbar-dark.navbar-custom .nav-item:hover .nav-link,
+.navbar-dark.navbar-custom .nav-item:focus-visible .nav-link {
   color: var(--nav-text-active);
 }
 
@@ -217,6 +156,31 @@ main a {
   margin-top: -0.1em;
 }
 
+/* Dropdown menu container */
+.dropdown-menu {
+  padding: var(--focus-ring-size);
+  background-color: var(--bg-content);
+  border: 1px solid var(--border-light);
+}
+
+/* Dropdown item styles - standardized with nav-link behavior */
+.dropdown-item {
+  color: var(--nav-text);
+  text-decoration: var(--dropdown-item-decoration);
+  transition: var(--link-transition);
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+  color: var(--nav-text-active);
+  text-decoration: var(--dropdown-item-decoration-hover);
+  background-color: var(--bg-card-alt);
+}
+
+.dropdown-divider {
+  border-top-color: var(--border-light);
+}
+
 /* ========================================================================
    Cards
    ======================================================================== */
@@ -228,6 +192,7 @@ main a {
   border-radius: 8px;
   border: 1px solid rgba(0, 0, 0, 0.06);
   transition: box-shadow 0.3s ease;
+  background-color: var(--bg-content);
 }
 
 .card:hover {
@@ -326,7 +291,6 @@ main a {
   color: var(--btn-primary-text);
   background-color: var(--btn-primary-bg);
   border-color: var(--btn-primary-border);
-  transition: var(--transition-standard);
 }
 
 .btn-background,
@@ -337,6 +301,7 @@ main a {
   border: 1px solid var(--brand-primary);
   padding: 0 10px;
   min-width: 7rem;
+  min-height: 2rem;
   white-space: nowrap;
   vertical-align: middle;
   line-height: 1;
@@ -373,6 +338,28 @@ a.btn {
   border: 1px black solid;
 }
 
+.alert .close {
+  color: var(--color-danger);
+  opacity: var(--recede-opacity);
+}
+
+.btn-outline-secondary {
+  color: var(--btn-outline-secondary);
+  border-color: var(--btn-outline-secondary);
+  background-color: transparent;
+}
+
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus {
+  color: var(--brand-primary);
+  background-color: transparent;
+  border-color: var(--brand-primary);
+}
+
+.btn-outline-secondary:focus {
+  box-shadow: 0 0 0 var(--focus-ring-size) rgba(167, 172, 177, 0.25);
+}
+
 /* ========================================================================
    Carousel
    ======================================================================== */
@@ -408,7 +395,7 @@ a.btn {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  background: linear-gradient(transparent, rgba(0, 0, 0, var(--recede-opacity)) 20%);
   padding: 2rem;
   text-align: center;
 }
@@ -432,6 +419,7 @@ a.btn {
 .carousel-control-next,
 .carousel-control-prev {
   top: 40px;
+  opacity: var(--recede-opacity);
 }
 
 #carousel-buttons {
@@ -449,7 +437,7 @@ a.btn {
   margin-bottom: 0.25rem;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--text-header);
+  color: var(--text-white);
 }
 
 .article-thumbnail {
@@ -564,6 +552,45 @@ a.btn {
   padding-bottom: var(--spacing-sm);
 }
 
+#reading-options{
+  display: flex;
+  gap: 1rem;
+  margin: 0;
+  padding: 9px;
+  justify-content: flex-end;
+  min-height: fit-content;
+  box-sizing: border-box;  
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  width: fit-content;
+  margin-left: auto;
+  background-color: var(--bg-body);
+}
+
+.btn-opt {
+    border: 1px solid #1C304A;
+    background: #f1f1f1;
+}
+
+.dyslexia-friendly {
+    font-family: Verdana !important;
+    color: #4c4c4c;
+    background-color: #F5F5DC;
+}
+
+.dyslexia-friendly em,
+.dyslexia-friendly i {
+    background-color: #FAFAC8;
+    font-style: normal;
+}
+
+.dyslexia-friendly a {
+    font-family: inherit;
+    color: inherit;
+    text-decoration: underline;
+}
+
 /* ========================================================================
    Thumbnail Styles
    ======================================================================== */
@@ -695,7 +722,6 @@ a.btn {
   margin-bottom: 0.25rem;
   font-size: 0.9rem;
   color: var(--text-muted);
-  opacity: 0.8;
 }
 
 .search-results .article-item,
@@ -708,6 +734,11 @@ section[aria-label*="Results"] .article-item {
   margin-bottom: 1.5rem;
 }
 
+.sticky-top {
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
 /* ========================================================================
    Footer
    ======================================================================== */
@@ -727,9 +758,11 @@ section[aria-label*="Results"] .article-item {
   margin-bottom: 0;
 }
 
-footer svg {
-  height: 100px;
-  width: 100%;
+footer svg,
+footer img,
+footer .img-fluid{
+  max-height: var(--footer-height);
+  max-width: 100%;
 }
 
 header svg {
@@ -765,6 +798,33 @@ header svg {
   border-bottom-left-radius: .25rem;
 }
 
+.input-group {
+  align-items: stretch;
+}
+
+.input-group .custom-select,
+.input-group .input-group-text {
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.input-group{
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.input-group > input {
+  flex: 1;
+  min-width: 0;
+}
+
+.input-group > input.group-append{
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
 .input-group .btn {
   margin: 0;
   height: 100%;
@@ -839,9 +899,12 @@ span + .btn-background {
   transition: background-color 2s ease-out;
 }
 
-.sticky-top {
-  max-height: 100vh;
-  overflow-y: auto;
+.sticky-toc {
+    position: sticky;
+    max-height: 100vh;
+    overflow-y: auto;
+    top: 60px;
+    z-index: 999;
 }
 
 .table-caption {
@@ -870,6 +933,21 @@ span + .btn-background {
   display: inline-block;
 }
 
+.icon-recede{
+    opacity: var(--recede-opacity);
+}
+
+.superscript-icon {
+   vertical-align: super;
+   font-size: 0.7em !important; 
+}
+
+.pad-icon {
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+}
+
+
 /* ========================================================================
    Lists
    ======================================================================== */
@@ -946,14 +1024,63 @@ span + .btn-background {
   border-radius: var(--border-radius-lg);
 }
 
-.page-link,
+.pagination {
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+  gap: 4px;
+}
+
+.page-item {
+  margin: 0;
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: 0.5rem 0.75rem;
+  color: var(--pagination-color);
+  background-color: var(--pagination-bg);
+  border: 1px solid var(--pagination-border);
+  border-radius: var(--border-radius);
+  transition: var(--link-transition);
+  cursor: pointer;
+  text-decoration: none;
+}
+
 .page-link:hover,
 .page-link:focus {
-  color: var(--text-link);
+  color: var(--pagination-hover-color);
+  background-color: var(--pagination-hover-bg);
+  border-color: var(--border-medium);
+}
+
+.page-link:focus {
+  z-index: 2;
+  outline: 2px solid var(--focus-outline);
+  outline-offset: 2px;
 }
 
 .page-item.active .page-link {
-  background-color: var(--text-link);
+  color: var(--pagination-active-color);
+  background-color: var(--pagination-active-bg);
+  border-color: var(--pagination-active-border);
+  font-weight: 600;
+}
+
+.page-item.active .page-link:hover {
+  background-color: var(--pagination-active-bg);
+  border-color: var(--pagination-active-border);
+}
+
+.page-link[disabled],
+.page-link:disabled {
+  color: var(--pagination-disabled-color);
+  pointer-events: none;
+  background-color: transparent;
+  border-color: var(--pagination-border);
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
 /* ========================================================================
@@ -991,11 +1118,11 @@ span + .btn-background {
 /* ========================================================================
    Accessibility & Skip Navigation
    ======================================================================== */
-.skipnav {
+.skip-container {
   text-align: left;
 }
 
-.skipnav a {
+.skip-container a {
   position: absolute;
   left: -10000px;
   width: 1px;
@@ -1004,8 +1131,8 @@ span + .btn-background {
   color: var(--text-link);
 }
 
-.skipnav a:focus,
-.skipnav a:active {
+.skip-container a:focus,
+.skip-container a:active {
   position: static;
   left: 0;
   width: auto;
@@ -1034,6 +1161,8 @@ p a, span a, li a {
 .article-block a,
 .site-header a,
 .site-footer a,
+.article-item a,
+.carousel-caption a,
 p a,
 li a {
   display: inline-block;
@@ -1082,6 +1211,7 @@ main a:focus-visible,
 #lightbox a:focus-visible,
 .navbar-custom .nav-link:focus-visible,
 .navbar-custom .navbar-brand:focus-visible,
+.navbar-dark.navbar-custom .nav-link:focus-visible,
 .btn:focus-visible,
 .btn-primary:focus-visible,
 .btn-secondary:focus-visible,
@@ -1105,12 +1235,21 @@ input[type="submit"]:focus-visible,
 .form-control.is-valid:focus-visible,
 .form-control.is-invalid:focus-visible,
 textarea.tinymce:focus-visible,
-.custom-select:focus-visible {
+.custom-select:focus-visible,
+.modal-sticky-close:focus-visible {
   outline: 2px var(--focus-outline) solid;
   outline-offset: 0;
   box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow);
 }
 
+.carousel-control-next:focus-visible,
+.carousel-control-prev:focus-visible{
+  outline: 2px var(--focus-outline) solid;
+  outline-offset: 0;
+  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow);
+  opacity: 1;
+}
+
 /* ========================================================================
    Media Queries
    ======================================================================== */
@@ -1154,6 +1293,19 @@ textarea.tinymce:focus-visible,
   }
 }
 
+@media (min-width: 768px) {
+    .row {
+        display: flex;
+        flex-direction: row;
+    }
+    .journal-container {
+        order: 1;
+    }
+    .col-lg-4.col-md-2 {
+        order: 2;
+    }
+}
+
 /* ========================================================================
    Issue Cards - Horizontal Layout
    ======================================================================== */
@@ -1166,7 +1318,7 @@ textarea.tinymce:focus-visible,
 }
 
 .issue-card {
-  background: white;
+  background: var(--bg-content);
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(0, 0, 0, 0.06);
@@ -1347,4 +1499,4 @@ textarea.tinymce:focus-visible,
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-}
\ No newline at end of file
+}
diff --git a/src/themes/clean/assets/css/evergreen.css b/src/themes/clean/assets/css/evergreen.css
index ccb1ac0e27..a12a25c8d3 100644
--- a/src/themes/clean/assets/css/evergreen.css
+++ b/src/themes/clean/assets/css/evergreen.css
@@ -4,4 +4,95 @@
   --brand-secondary: #4F637D;
   --text-link-alt: #00688B;
   --focus-shadow: #193146;
+  --color-success: #5cb85c;
+    /* Highlight color (shared across themes) */
+  --highlight-color: #FFEB3B;
+
+  /* Text Colors */
+  /* Must pass WCAG color contrast at --recede-opacity */
+  --text-primary: #212529;
+  --text-muted: #747474;
+  --text-on-dark: white;
+  --text-link: var(--body-text);
+  --text-black: #000;
+  --text-white: #fff;
+  --text-header: var(--text-black);
+  --body-text: #525252;
+  --nav-text: #636363;
+  --nav-text-active: var(--brand-primary);
+  --recede-opacity: 70%;
+
+  /* Link Decoration */
+  --link-decoration: underline;
+  --link-decoration-hover: underline;
+  --nav-link-decoration: none;
+  --nav-link-decoration-hover: underline;
+  --dropdown-item-decoration: none;
+  --dropdown-item-decoration-hover: underline;
+  --link-hover-color: var(--brand-primary);
+  --link-transition: color 0.2s ease;
+
+  /* Background Colors */
+  --bg-body: #fff;
+  --bg-content: white;
+  --bg-footer: #FCFCFC;
+  --bg-card-alt: #f8f9fa;
+  --bg-blockquote: #F0F0F0;
+  --bg-overlay: rgba(55, 55, 55, 0.8);
+
+  /* UI State Colors */
+  --color-success: green;
+  --color-danger: darkred;
+
+  /* Border Colors */
+  --border-light: #e5e5e5;
+  --border-medium: #6c757d;
+  --border-gray-200: rgb(229, 231, 235);
+
+  /* Header & Navigation */
+  --header-bg: var(--brand-primary);
+  --bg-nav: #fefeff;
+
+  /* Button Colors */
+  --btn-primary-bg: var(--brand-primary);
+  --btn-primary-border: var(--brand-primary);
+  --btn-primary-text: white;
+  --btn-outline-secondary: #6c757d;
+
+  /* Focus & Accessibility */
+  --focus-outline: #F9F9F9;
+  --focus-ring-size: 4px;
+
+  /* Typography */
+  --main-font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 15px;
+  --spacing-lg: 20px;
+  --spacing-xl: 30px;
+
+  /* Sizes */
+  --border-radius: 3px;
+  --border-radius-lg: 2rem;
+  --header-height: 120px;
+  --footer-height: 70px;
+  --card-image-height: 250px;
+  --carousel-min-height: 500px;
+  --icon-size: 16px;
+
+  /* Transitions */
+  --transition-standard: all 1s ease;
+
+  /* Pagination Colors - Light Mode */
+  --pagination-color: var(--body-text);
+  --pagination-bg: var(--bg-content);
+  --pagination-border: var(--border-light);
+  --pagination-hover-color: var(--brand-primary);
+  --pagination-hover-bg: var(--bg-card-alt);
+  --pagination-active-color: var(--btn-primary-text);
+  --pagination-active-bg: var(--btn-primary-bg);
+  --pagination-active-border: var(--btn-primary-border);
+  --pagination-disabled-color: var(--text-muted);
 }
\ No newline at end of file
diff --git a/src/themes/clean/assets/css/midnight.css b/src/themes/clean/assets/css/midnight.css
new file mode 100644
index 0000000000..4ad24d9508
--- /dev/null
+++ b/src/themes/clean/assets/css/midnight.css
@@ -0,0 +1,95 @@
+:root {
+  /* Brand & Theme Colors */
+  --brand-primary: #0a0f1a;
+  --brand-secondary: #7eb3ff;
+  --color-success: #5cb85c;
+  --text-link-alt: #6ba3ff;
+  --focus-shadow: #2563a8;
+  --highlight-color: #ffd93d;
+
+  /* Text Colors */
+  --text-primary: #e4e6eb;
+  --text-muted: #b0b3b8;
+  --text-on-dark: white;
+  --text-link: #9bb1d4;
+  --text-black: #e4e6eb;
+  --text-white: #0a0f1a;
+  --text-header: #ffffff;
+  --body-text: #e4e6eb;
+  --nav-text: #b0b3b8;
+  --nav-text-active: #4d9fff;
+  --recede-opacity: 70%;
+
+  /* Link Decoration */
+  --link-decoration: underline;
+  --link-decoration-hover: underline;
+  --nav-link-decoration: none;
+  --nav-link-decoration-hover: underline;
+  --link-hover-color: #4d9fff;
+  --link-transition: color 0.2s ease;
+  --dropdown-item-decoration: none;
+  --dropdown-item-decoration-hover: underline;
+
+  /* Background Colors */
+  --bg-body: #0a0f1a;
+  --bg-content: #151b2b;
+  --bg-footer: #0d1219;
+  --bg-card-alt: #1a2235;
+  --bg-blockquote: #1a2235;
+  --bg-overlay: rgba(10, 15, 26, 0.9);
+
+  /* UI State Colors */
+  --color-danger: #ff6b6b;
+
+  /* Border Colors */
+  --border-light: #2d3748;
+  --border-medium: #4a5568;
+  --border-gray-200: #2d3748;
+
+  /* Header & Navigation */
+  --header-bg: #0a0f1a;
+  --bg-nav: #0d1219;
+
+  /* Button Colors */
+  --btn-primary-bg: #4d9fff;
+  --btn-primary-border: #4d9fff;
+  --btn-primary-text: #0a0f1a;
+  --btn-outline-secondary: #a7acb1;
+
+  /* Focus & Accessibility */
+  --focus-outline: #4d9fff;
+  --focus-ring-size: 4px;
+
+  /* Typography */
+  --main-font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 15px;
+  --spacing-lg: 20px;
+  --spacing-xl: 30px;
+
+  /* Sizes */
+  --border-radius: 3px;
+  --border-radius-lg: 2rem;
+  --header-height: 120px;
+  --footer-height: 70px;
+  --card-image-height: 250px;
+  --carousel-min-height: 500px;
+  --icon-size: 16px;
+
+  /* Transitions */
+  --transition-standard: all 1s ease;
+
+  /* Pagination Colors - Dark Mode */
+  --pagination-color: #a7acb1;
+  --pagination-bg: transparent;
+  --pagination-border: var(--border-light);
+  --pagination-hover-color: var(--text-on-dark);
+  --pagination-hover-bg: var(--bg-card-alt);
+  --pagination-active-color: var(--btn-primary-text);
+  --pagination-active-bg: var(--btn-primary-bg);
+  --pagination-active-border: var(--btn-primary-border);
+  --pagination-disabled-color: var(--text-muted);
+}
diff --git a/src/themes/clean/assets/css/ocean.css b/src/themes/clean/assets/css/ocean.css
index 2e1061d894..27ec91358d 100644
--- a/src/themes/clean/assets/css/ocean.css
+++ b/src/themes/clean/assets/css/ocean.css
@@ -4,4 +4,95 @@
   --brand-secondary: #5a7a9e;
   --text-link-alt: #2563a8;
   --focus-shadow: #2a4a6e;
+  --color-success: #5cb85c;
+    /* Highlight color (shared across themes) */
+  --highlight-color: #FFEB3B;
+
+  /* Text Colors */
+  /* Must pass WCAG color contrast at --recede-opacity */
+  --text-primary: #212529;
+  --text-muted: #747474;
+  --text-on-dark: white;
+  --text-link: var(--body-text);
+  --text-black: #000;
+  --text-white: #fff;
+  --text-header: var(--text-black);
+  --body-text: #525252;
+  --nav-text: #636363;
+  --nav-text-active: var(--brand-primary);
+  --recede-opacity: 70%;
+
+  /* Link Decoration */
+  --link-decoration: underline;
+  --link-decoration-hover: underline;
+  --nav-link-decoration: none;
+  --nav-link-decoration-hover: underline;
+  --dropdown-item-decoration: none;
+  --dropdown-item-decoration-hover: underline;
+  --link-hover-color: var(--brand-primary);
+  --link-transition: color 0.2s ease;
+
+  /* Background Colors */
+  --bg-body: #fff;
+  --bg-content: white;
+  --bg-footer: #FCFCFC;
+  --bg-card-alt: #f8f9fa;
+  --bg-blockquote: #F0F0F0;
+  --bg-overlay: rgba(55, 55, 55, 0.8);
+
+  /* UI State Colors */
+  --color-success: green;
+  --color-danger: darkred;
+
+  /* Border Colors */
+  --border-light: #e5e5e5;
+  --border-medium: #6c757d;
+  --border-gray-200: rgb(229, 231, 235);
+
+  /* Header & Navigation */
+  --header-bg: var(--brand-primary);
+  --bg-nav: #fefeff;
+
+  /* Button Colors */
+  --btn-primary-bg: var(--brand-primary);
+  --btn-primary-border: var(--brand-primary);
+  --btn-primary-text: white;
+  --btn-outline-secondary: #6c757d;
+
+  /* Focus & Accessibility */
+  --focus-outline: #F9F9F9;
+  --focus-ring-size: 4px;
+
+  /* Typography */
+  --main-font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 15px;
+  --spacing-lg: 20px;
+  --spacing-xl: 30px;
+
+  /* Sizes */
+  --border-radius: 3px;
+  --border-radius-lg: 2rem;
+  --header-height: 120px;
+  --footer-height: 70px;
+  --card-image-height: 250px;
+  --carousel-min-height: 500px;
+  --icon-size: 16px;
+
+  /* Transitions */
+  --transition-standard: all 1s ease;
+
+  /* Pagination Colors - Light Mode */
+  --pagination-color: var(--body-text);
+  --pagination-bg: var(--bg-content);
+  --pagination-border: var(--border-light);
+  --pagination-hover-color: var(--brand-primary);
+  --pagination-hover-bg: var(--bg-card-alt);
+  --pagination-active-color: var(--btn-primary-text);
+  --pagination-active-bg: var(--btn-primary-bg);
+  --pagination-active-border: var(--btn-primary-border);
+  --pagination-disabled-color: var(--text-muted);
 }
\ No newline at end of file
diff --git a/src/themes/clean/build_assets.py b/src/themes/clean/build_assets.py
index 9f4c4a14a6..93dbbaa01b 100644
--- a/src/themes/clean/build_assets.py
+++ b/src/themes/clean/build_assets.py
@@ -12,11 +12,8 @@ def copy_file(source, destination):
     :param destination: The destination folder for the file
     :return:
     """
-
     destination_folder = os.path.join(settings.BASE_DIR, os.path.dirname(destination))
-
-    if not os.path.exists(destination_folder):
-        os.mkdir(destination_folder)
+    os.makedirs(destination_folder, exist_ok=True)
 
     shutil.copy(
         os.path.join(settings.BASE_DIR, source),
@@ -26,7 +23,7 @@ def copy_file(source, destination):
 
 def create_paths():
     base_path = os.path.join(settings.BASE_DIR, "static", "clean")
-    folders = ["css"]
+    folders = ["css", "js"]
 
     for folder in folders:
         os.makedirs(os.path.join(base_path, folder), exist_ok=True)
@@ -38,45 +35,42 @@ def process_journals():
     for journal in journals:
         for file in journal.scss_files:
             if file.endswith("clean_override.css"):
-                print(
-                    "Copying clean override file for {name}".format(name=journal.name)
-                )
-                override_css_dir = os.path.join(
-                    settings.BASE_DIR, "static", "clean", "css"
-                )
+                print(f"Copying clean override file for {journal.name}")
+
                 override_css_file = os.path.join(
-                    override_css_dir, "journal{0}_override.css".format(str(journal.id))
+                    settings.BASE_DIR,
+                    "static",
+                    "clean",
+                    "css",
+                    f"journal{journal.id}_override.css"
                 )
 
-                # test if the journal CSS directory exists and create it if not
-                os.makedirs(override_css_dir, exist_ok=True)
-
-                # copy file to static
                 copy_file(file, override_css_file)
 
 
+def copy_theme_files():
+    """Copy theme CSS and JS files to static directory."""
+    theme_files = [
+        ("css", "clean.css"),
+        ("css", "evergreen.css"),
+        ("css", "ocean.css"),
+        ("css", "cardinal.css"),
+        ("css", "midnight.css"),
+        ("js", "tooltip-init.js"),
+    ]
+
+    for file_type, filename in theme_files:
+        source = os.path.join("themes", "clean", "assets", file_type, filename)
+        destination = os.path.join("static", "clean", file_type, filename)
+        copy_file(source, destination)
+
+
 def build():
     print("Creating folders")
     create_paths()
-    print("Copying CSS")
-    copy_file(
-        "themes/clean/assets/css/clean.css",
-        "static/clean/css/clean.css",
-    )
-    copy_file(
-        "themes/clean/assets/css/evergreen.css",
-        "static/clean/css/evergreen.css",
-    )
-    copy_file(
-        "themes/clean/assets/css/ocean.css",
-        "static/clean/css/ocean.css",
-    )
-    copy_file(
-        "themes/clean/assets/css/cardinal.css",
-        "static/clean/css/cardinal.css",
-    )
-    copy_file(
-        "themes/clean/assets/js/tooltip-init.js",
-        "static/clean/js/tooltip-init.js",
-    )
-    process_journals()
+
+    print("Copying theme files")
+    copy_theme_files()
+
+    print("Processing journal overrides")
+    process_journals()
\ No newline at end of file
diff --git a/src/themes/clean/templates/cms/page.html b/src/themes/clean/templates/cms/page.html
index a4b3b04be7..3254de5ffc 100644
--- a/src/themes/clean/templates/cms/page.html
+++ b/src/themes/clean/templates/cms/page.html
@@ -15,12 +15,16 @@ <h1 id="cms-title">{{ page.display_name }}</h1>
             </div>
             {% if page.display_toc %}
                 <div class="col-md-4 d-none d-sm-none d-md-block">
-                    <section aria-labelledby="toc-title">
-                        <div class="sticky-top">
-                            <h2 id="toc-title">{% trans "Table of Contents" %}</h2>
-                            <ul id="toc" class="table-of-contents"></ul>
-                        </div>
-                    </section>
+                    <div class="sticky-top">
+                        <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="table-of-contents"></ul>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
                 </div>
             {% endif %}
         </div>
diff --git a/src/themes/clean/templates/core/base.html b/src/themes/clean/templates/core/base.html
index d4203a6d82..b66ee7120e 100644
--- a/src/themes/clean/templates/core/base.html
+++ b/src/themes/clean/templates/core/base.html
@@ -56,6 +56,7 @@
                 <div class="col-md-2">
                     {% if 'svg' in request.press_cover %}
                         {% svg request.press_cover %}
+                        <span class="sr-only">{{ request.press.name }}</span>
                     {% else %}
                         <img class="img-fluid header-image top-bar-image" src="{% url 'press_cover_download' %}"
                                          alt="{{ request.press.name }} logo">
@@ -84,7 +85,9 @@
     {% block body %}{% endblock body %}
 </main>
 <footer class="site-footer" id="footer">
-  {% include "core/footer.html" %}
+    <div class="container">
+        {% include "core/footer.html" %}
+    </div>
 </footer>
 {% include "common/elements/analytics.html" %}
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"
diff --git a/src/themes/clean/templates/core/nav.html b/src/themes/clean/templates/core/nav.html
index 3e9318d4ef..a6abd73642 100644
--- a/src/themes/clean/templates/core/nav.html
+++ b/src/themes/clean/templates/core/nav.html
@@ -96,7 +96,7 @@
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="user">
                         <li><a class="dropdown-item" href="{% url 'core_dashboard' %}">{% trans 'Dashboard' %}</a></li>
-                        {% if not journal_settings.general.disable_journal_submission %}<a class="dropdown-item" href="{% url 'submission_start' %}">{% trans 'Submit' %}</a>{% endif %}
+                        {% if not journal_settings.general.disable_journal_submission %}<li><a class="dropdown-item" href="{% url 'submission_start' %}">{% trans 'Submit' %}</a></li>{% endif %}
                         {% user_has_role request 'editor' as user_is_editor %}
                         {% if user_is_editor or request.user.is_staff %}
                             <li><a class="dropdown-item" href="{% url 'kanban' %}">{% trans 'Kanban' %}</a></li>
diff --git a/src/themes/clean/templates/elements/article_listing.html b/src/themes/clean/templates/elements/article_listing.html
index 3731d5082e..73aab006dc 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">
+<article class="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">
@@ -52,7 +52,7 @@ <h2 class="article-title">{{ article.title|safe }}</h2>
                 </a>
             {% endif %}
 
-            <ul class="list-inline article-authors">
+            <ul class="list-inline article-authors" aria-label="{% trans 'Authors: ' %}">
                 {% for author in article.frozen_authors.all %}
                     <li class="list-inline-item">
                         {% if forloop.last and article.frozen_authors.all|length > 1 %}{% trans 'and' %} {% endif %}
@@ -61,7 +61,7 @@ <h2 class="article-title">{{ article.title|safe }}</h2>
                 {% endfor %}
             </ul>
 
-            <ul class="list-inline article-meta">
+            <ul class="list-inline article-meta" aria-label="{% trans 'Article metadata' %}">
                 <li class="list-inline-item meta-item">
                     <i aria-hidden="true" class="fa fa-calendar"></i>
                     <time datetime="{{ article.date_published|date:"Y-m-d" }}">
diff --git a/src/themes/clean/templates/elements/journal/citation_modals.html b/src/themes/clean/templates/elements/journal/citation_modals.html
index 349ddf25d4..2f925e8c6b 100644
--- a/src/themes/clean/templates/elements/journal/citation_modals.html
+++ b/src/themes/clean/templates/elements/journal/citation_modals.html
@@ -10,14 +10,12 @@ <h2 class="modal-title" id="HarvardModalLabel">{% trans 'Harvard-style Citation'
                 </div>
                 <div class="modal-body">
                     <p>
-                        <span id="harvard-cite">
-                            <ul class="list-inline comma-ampersand-sep">
-                                {% for author in article.frozenauthor_set.all %}
-                                    <li>{{ author.last_name }}, {{ author.first_name|slice:"1" }}</li>
-                                {% endfor %}
-                            </ul>
-                            ({{ article.date_published.year }}) '{{ article.title|safe }}',
-                            <em>{% if journal.name %}{{ journal.name }}{% else %}{{ request.press.name }} Preprints{% endif %}</em>. {% if article.issue %}{{ article.issue.volume }}({{ article.issue.issue }}){% endif %}{% if article.page_range %}:{{ article.page_range }}.{% endif %}
+                        <span id="harvard-cite">{% for author in article.frozenauthor_set.all %}
+                            {% if not forloop.first and not forloop.last %},
+                            {% elif forloop.last and not forloop.first %}& {% endif %}{{ author.last_name }},
+                                {{ author.first_name|slice:"1" }}{% if forloop.last %}.{% endif %} {% endfor %}
+                                ({{ article.date_published.year }}) '{{ article.title|safe }}',
+                                <em>{% if journal.name %}{{ journal.name }}{% else %}{{ request.press.name }} Preprints{% endif %}</em>. {% if article.issue %}{{ article.issue.volume }}({{ article.issue.issue }}){% endif %}{% if article.page_range %}:{{ article.page_range }}.{% endif %}
                             {% if article.identifier.id_type == 'doi' %}
                                 {% include "elements/doi_display.html" with doi=article.identifier.identifier title=article.title %}
                             {% endif %}
@@ -43,15 +41,12 @@ <h2 class="modal-title" id="VancouverModalLabel">{% trans 'Vancouver-style Citat
                 </div>
                 <div class="modal-body">
                     <p>
-                        <span id="vancouver-cite">
-                            <ul class="list-inline comma-ampersand-sep">
-                                {% for author in article.frozenauthor_set.all %}
-                                    <li>{{ author.last_name }}, {{ author.first_name|slice:"1" }}</li>
-                                {% endfor %}
-                            </ul>
-                            {{ article.title|safe }}. {% if journal.name %}{{ journal.name }}{% else %}{{ request.press.name }} Preprints{% endif %}. {{ article.date_published.year }} {{ article.date_published.month }};{% if article.issue %} {{ article.issue.volume }}({{ article.issue.issue }}){% endif %}{% if article.page_range %}:{{ article.page_range }}.{% endif %}
-                            {% if article.identifier.id_type == 'doi' %}
-                                {% include "elements/doi_display.html" with doi=article.identifier.identifier title=article.title %}
+                        <span id="vancouver-cite">{% for author in article.frozenauthor_set.all %}{% if not forloop.first and not forloop.last %},
+                            {% elif forloop.last and not forloop.first %}& {% endif %}{{ author.last_name }},
+                                {{ author.first_name|slice:"1" }}{% if forloop.last %}.{% endif %} {% endfor %}
+                                {{ article.title|safe }}. {% if journal.name %}{{ journal.name }}{% else %}{{ request.press.name }} Preprints{% endif %}. {{ article.date_published.year }} {{ article.date_published.month }};{% if article.issue %} {{ article.issue.volume }}({{ article.issue.issue }}){% endif %}{% if article.page_range %}:{{ article.page_range }}.{% endif %}
+                                {% if article.identifier.id_type == 'doi' %}
+                                    {% include "elements/doi_display.html" with doi=article.identifier.identifier title=article.title %}
                             {% endif %}
                         </span>
                         {% include "admin/elements/button_copy_element.html" with element_id="vancouver-cite" %}
@@ -75,12 +70,9 @@ <h2 class="modal-title" id="APAModalLabel">{% trans 'APA-style Citation' %}</h2>
                 </div>
                 <div class="modal-body">
                     <p>
-                        <span id="apa-cite">
-                            <ul class="list-inline comma-ampersand-sep">
-                                {% for author in article.frozenauthor_set.all %}
-                                    <li>{{ author.last_name }}, {{ author.first_name|slice:"1" }}</li>
-                                {% endfor %}
-                            </ul>
+                        <span id="apa-cite">{% for author in article.frozenauthor_set.all %}{% if forloop.last %}{% if not forloop.first %}
+                            &amp; {% endif %}{% endif %}{{ author.last_name }},
+                            {{ author.first_name|slice:"1" }}{% if forloop.last %}.{% endif %} {% endfor %}
                             ({{ article.date_published.year }}, {{ article.date_published.month }} {{ article.date_published.day }}). {{ article.title|safe }}.
                             <em>{% if journal.name %}{{ journal.name }}{% else %}{{ request.press.name }} {% trans 'Preprints' %}{% endif %}</em> {% if article.issue %}{{ article.issue.volume }}({{ article.issue.issue }}){% endif %}{% if article.page_range %}:{{ article.page_range }}.{% endif %}
                             {% if article.identifier.id_type == 'doi' %}
diff --git a/src/themes/clean/templates/elements/journal/issue_list.html b/src/themes/clean/templates/elements/journal/issue_list.html
index 4511ee016c..27008c12d5 100644
--- a/src/themes/clean/templates/elements/journal/issue_list.html
+++ b/src/themes/clean/templates/elements/journal/issue_list.html
@@ -18,14 +18,24 @@
                     {% endif %}
                 </div>
                 <div class="issue-content">
-                    <h2 class="issue-title">{{ issue.display_title }}</h2>
+                    {% if level == "deep" %}
+                        <h3 class="issue-title" id="issue-title-{{ forloop.counter }}">
+                            <span aria-hidden="true">{{ issue.display_title }}</span>
+                            <span class="sr-only"> {{ issue.display_title_a11y }}</span>
+                        </h3>
+                    {% else %}
+                        <h2 class="issue-title" id="issue-title-{{ forloop.counter }}">
+                            <span aria-hidden="true">{{ issue.display_title }}</span>
+                            <span class="sr-only"> {{ issue.display_title_a11y }}</span>
+                        </h2>
+                    {% endif %}
                     {% if issue.date %}
                         <p class="issue-date">{{ issue.date|date:"F Y" }}</p>
                     {% endif %}
                     <p class="issue-count">{{ issue.articles.all.count }} {% trans "items" %}</p>
 
                     <a href="{% url 'journal_issue' issue.id %}"
-                       aria-label='{% trans "View" %} {{ issue.display_title_a11y }} ({{ issue.articles.all.count }} {% trans "items" %})'>
+                       aria-describedby="issue-title-{{ forloop.counter }}">
                         {% trans "View issue" %}
                     </a>
                 </div>
diff --git a/src/themes/clean/templates/elements/journal/issue_list_by_decade.html b/src/themes/clean/templates/elements/journal/issue_list_by_decade.html
index 240f4ec7f3..4ede25ce8b 100644
--- a/src/themes/clean/templates/elements/journal/issue_list_by_decade.html
+++ b/src/themes/clean/templates/elements/journal/issue_list_by_decade.html
@@ -13,5 +13,5 @@
 
 {% for decade, issues in issues_by_decade.items %}
     <h2 id="decade-{{ decade }}">{{ decade }}</h2>
-    {% include "elements/journal/issue_list.html" with issues=issues %}
+    {% include "elements/journal/issue_list.html" with issues=issues level="deep" %}
 {% endfor %}
\ No newline at end of file
diff --git a/src/themes/clean/templates/elements/journal/issue_paginator.html b/src/themes/clean/templates/elements/journal/issue_paginator.html
index 055e4baa49..259edfd3b5 100644
--- a/src/themes/clean/templates/elements/journal/issue_paginator.html
+++ b/src/themes/clean/templates/elements/journal/issue_paginator.html
@@ -1,9 +1,9 @@
 {% load pages %}
 
 {% if articles and articles.paginator %}
-<section aria-label="pagination">
+<section aria-label="{% trans 'pagination' %}">
     <div class="pagination-block">
-        <ul class="d-flex justify-content-center list-inline">
+        <ul class="d-flex justify-content-center list-inline" aria-label="{% trans 'page selection' %}">
             {% if articles.has_previous %}
                 <li class="list-inline-item">
                     <a href="?page={{ articles.previous_page_number }}" class="btn btn-primary">
@@ -14,7 +14,10 @@
             {{ articles.page.page_range }}
             {% for page in articles.paginator.page_range %}
                 <li class="list-inline-item">
-                    <a href="?page={{ page }}" class="btn btn-primary">{{ page }}</a>&nbsp;
+                    <a href="?page={{ page }}" class="btn btn-primary">
+                        <span class="sr-only">{% trans 'Page: ' %}</span>
+                        {{ page }}
+                    </a>
                 </li>
             {% endfor %}
             {% if articles.has_next %}
diff --git a/src/themes/clean/templates/elements/journal/issue_sidebar.html b/src/themes/clean/templates/elements/journal/issue_sidebar.html
index 1f5936f5ff..78dc725db0 100644
--- a/src/themes/clean/templates/elements/journal/issue_sidebar.html
+++ b/src/themes/clean/templates/elements/journal/issue_sidebar.html
@@ -11,20 +11,30 @@ <h2>{% trans 'Downloads' %}</h2>
                 </a>
             </p>
             {% endif %}
-            <h2>
+            <h2 id="archive-title">
                 {% if issue.issue_type.code == 'issue' %}{% trans "Issue Archive" %}
                 {% else %} {% trans issue.issue_type.plural_name %}
                 {% endif %}
             </h2>
-            <ul>
-                {% for issue in issues %}
-                {% if issue.issue_type.code == 'issue' %}
-                    <li><a href="{% url 'journal_issue' issue.id %}" aria-label='{{ issue.display_title_a11y }}'>
-                        {{ issue.display_title }} 
-                    </a></li>
-                {% else %}
-                    <li><a href="{% url 'journal_collection' issue.id %}">{{ issue.issue_title }} </a></li>
-                {% endif %}
+            <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>
+                        </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>
         </div>
diff --git a/src/themes/clean/templates/elements/journal_footer.html b/src/themes/clean/templates/elements/journal_footer.html
index 0d4cb5a80f..aea653924f 100644
--- a/src/themes/clean/templates/elements/journal_footer.html
+++ b/src/themes/clean/templates/elements/journal_footer.html
@@ -3,11 +3,11 @@
 <div class="row">
     <div class="col-md-6">
         <small><div class="text-left">
-            <ul class="list-inline"><p></p>
-            {% if request.journal.issn %}<li class="list-inline-item">ISSN: {{ request.journal.issn }}</li>{% endif %}
-            {% if request.journal.print_issn %}<li class="list-inline-item"> {% trans 'Print ISSN' %}: {{ request.journal.print_issn }}</li>{% endif %}
+            <ul class="list-inline">
+            {% if request.journal.issn %}<li>ISSN: {{ request.journal.issn }}</li>{% endif %}
+            {% if request.journal.print_issn %}<li> {% trans 'Print ISSN' %}: {{ request.journal.print_issn }}</li>{% endif %}
             {% if journal_settings.general.publisher_name %}
-                <li class="list-inline-item">
+                <li>
                     <span id="pub-by"> {% trans 'Published by' %}</span>
                     {% if journal_settings.general.publisher_url %}
                         <a href="{{ journal_settings.general.publisher_url }}"
diff --git a/src/themes/clean/templates/elements/pagination.html b/src/themes/clean/templates/elements/pagination.html
index f512e30b6c..ff84a24364 100644
--- a/src/themes/clean/templates/elements/pagination.html
+++ b/src/themes/clean/templates/elements/pagination.html
@@ -64,6 +64,7 @@
     </div>
     <div class="input-group col-sm-12 col-md-6 col-lg-5">
         <select
+            id="paginate_by"
             class="custom-select"
             onchange="this.form.submit()"
             name="paginate_by"
@@ -77,8 +78,8 @@
             {% endif %}
         </select>
         <div class="input-group-append">
-            <label class="input-group-text" labelfor="paginate_by">
-                records per page
+            <label for="paginate_by" class="input-group-text">
+                {% trans 'records per page' %}
             </label>
         </div>
     </div>
diff --git a/src/themes/clean/templates/journal/article.html b/src/themes/clean/templates/journal/article.html
index 9eace881cb..17c800a6d4 100644
--- a/src/themes/clean/templates/journal/article.html
+++ b/src/themes/clean/templates/journal/article.html
@@ -80,18 +80,18 @@ <h2>{% trans 'Files' %}</h2>
                         {% if galleys %}
                             <ul class="no-bullet-list">
                                 {% for galley in galleys %}
-                                    <li><a href="{% url 'article_download_galley' article.id galley.id %}">{% trans "Download" %} {{ galley.label }}</a></li>
                                     {% if galley.file.mime_type == 'application/pdf' and journal.view_pdf_button %}
                                         <li><a href="{% url 'article_view_galley' article.id galley.id %}">
                                             {% trans 'View'%} PDF
                                             {% include "elements/icons/link_new_tab.html" %}
                                         </a></li>
                                     {% endif %}
-                                    <a href="{% url 'article_download_galley' article.id galley.id %}">
-                                        {{ galley.label }}
-                                        {% include "elements/icons/link_download.html" %}
-                                    </a>
-                                    <br/>
+                                    <li>
+                                        <a href="{% url 'article_download_galley' article.id galley.id %}">
+                                            {{ galley.label }}
+                                            {% include "elements/icons/link_download.html" %}
+                                        </a>
+                                    </li>
                                 {% endfor %}
                                 {% if proofing %}
                                     <li id="note_to_proofreader_1">
@@ -156,7 +156,6 @@ <h2>{% trans "Files" %}</h2>
                           <ul>
                               {% for galley in galleys %}
                                   {% if not galley.label == 'HTML' or not galley.file.mime_type == 'text/html' %}
-
                                           {% if galley.file.mime_type == 'application/pdf' and journal.view_pdf_button %}
                                               <li>
                                                   <a target="_blank" href="{% url 'article_view_galley' article.id galley.id %}">
@@ -198,6 +197,9 @@ <h3>{% trans "Supplementary Files" %}</h3>
                               {% endfor %}
                           </ul>
                       {% endif %}
+     
+                      {% include "elements/journal/article_issue_list.html" %}
+                      
                       <h2>{% trans "Information" %}</h2>
                       <ul>
                           {% if journal_settings.article.display_date_submitted and article.date_submitted %}
@@ -373,7 +375,7 @@ <h2>{% trans 'CRediT Roles' %}</h2>
             </div>
           </div>
          {% if article_content %}
-            <div class="sticky-top article-menu" id="toc-section">
+            <div class="sticky-toc article-menu" id="toc-section">
               <section aria-labelledby="toc-title">
                 <div class="card">
                   <div class="card-body">
@@ -407,7 +409,7 @@ <h2 id="toc-title">{% trans "Table of Contents" %}</h2>
     <script>
         initTableExpansion({
             modalSelector: '.modal',
-            linkTemplate: '<br /><button type="button" class="btn btn-link" data-toggle="modal" data-target="#table-{id}"  aria-describedby="{id}-label">{% trans "View Larger Table" %}</button>',
+            linkTemplate: '<br /><button type="button" class="btn-background" data-toggle="modal" data-target="#table-{id}"  aria-describedby="{id}-label">{% trans "View Larger Table" %}</button>',
         });
     </script>
     <script src="{% static "common/lightbox/js/lightbox.js" %}"></script>
diff --git a/src/themes/clean/templates/journal/contact.html b/src/themes/clean/templates/journal/contact.html
index 9dd27efef8..92da805a63 100644
--- a/src/themes/clean/templates/journal/contact.html
+++ b/src/themes/clean/templates/journal/contact.html
@@ -10,10 +10,12 @@
         <div class="col-md-4 contact">
             <h1 class="sr-only">{% trans 'Contact us' %}</h1>
             <h2 class="side-bar-title">{% trans "Journal Contacts" %}</h2>
-            {% for contact in contacts %}
-                <h3 class="card-title editor-name">{{ contact.name }}</h3>
-                <p>{{ contact.role }}</p>
+            <dl>
+                {% for contact in contacts %}
+                <dt>{{ contact.name }}</dt>
+                <dd>{{ contact.role }}</dd>
             {% endfor %}
+            </dl>
             {% if journal_settings.general.contact_info %}
                 <h2>{% trans 'Contact Information' %}</h2>
                 {{ journal_settings.general.contact_info|safe }}
@@ -21,6 +23,7 @@ <h2>{% trans 'Contact Information' %}</h2>
         </div>
         <div class="col-md-8">
             <h2>{% trans "Contact" %}</h2>
+            <p>{% trans "All fields are required." %}</p> 
             <form method="POST" novalidate>
                 {% include "elements/forms/errors.html" with form=contact_form %}
                 {% csrf_token %}
diff --git a/src/themes/clean/templates/journal/homepage_elements/carousel.html b/src/themes/clean/templates/journal/homepage_elements/carousel.html
index 564d199319..fc6e4db8ab 100644
--- a/src/themes/clean/templates/journal/homepage_elements/carousel.html
+++ b/src/themes/clean/templates/journal/homepage_elements/carousel.html
@@ -3,7 +3,12 @@
 <div class="row">
     <div class="col-md-12">
         <h2 class="sr-only">{% trans 'Latest Articles & News' %}</h2>
-        <div id="carousel" class="carousel slide" data-ride="carousel">
+        <div id="carousel" class="carousel slide" >
+            <ol class="carousel-indicators">
+              {% for carousel_item in carousel_items %}
+                <li data-target="#carousel" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.first %}active{% endif %}"></li>
+              {% endfor %}
+            </ol>
             <div class="carousel-inner" aria-roledescription="carousel" aria-label="News and article carousel">
                 {% for carousel_item in carousel_items %}
                     <div class="carousel-item {% if forloop.first %}active{% endif %} carousel-min" role="group" aria-roledescription="slide" aria-label="{{ forloop.counter }} of {{ carousel_item|length }}">
diff --git a/src/themes/clean/templates/journal/issues.html b/src/themes/clean/templates/journal/issues.html
index a67e4371df..3589e6b332 100644
--- a/src/themes/clean/templates/journal/issues.html
+++ b/src/themes/clean/templates/journal/issues.html
@@ -13,7 +13,7 @@ <h1>{% trans issue_type.plural_name %}</h1>
             {% if request.journal.current_issue %}
                 <p>{% trans 'The current issue is' %}:
                     <a href="{% url 'journal_issue' request.journal.current_issue.id %}"
-                        aria-label='{{ issue.display_title_a11y }} ({{ issue.articles.all.count }} {% trans "items" %})'
+                        aria-label='{{ request.journal.current_issue.display_title_a11y }} ({{ request.journal.current_issue.articles.all.count }} {% trans "items" %})'
                         >
                         {{ request.journal.current_issue.display_title }} - {{ request.journal.current_issue.articles.all.count }} {% trans "items" %}
                     </a>
diff --git a/src/themes/clean/templates/press/journal/contact.html b/src/themes/clean/templates/press/journal/contact.html
new file mode 100644
index 0000000000..0cd24a204b
--- /dev/null
+++ b/src/themes/clean/templates/press/journal/contact.html
@@ -0,0 +1,43 @@
+{% extends "core/base.html" %}
+{% load bootstrap4 %}
+{% load i18n %}
+
+{% block title %}{% trans "Contact" %}{% endblock title %}
+
+{% block body %}
+    <div class="row">
+
+        <div class="col-md-4 contact">
+            <h1 class="sr-only">{% trans 'Contact us' %}</h1>
+            <h2 class="side-bar-title">{% trans "Press Representatives" %}</h2>
+            <dl>
+                {% for contact in contacts %}
+                <dt>{{ contact.name }}</dt>
+                <dd>{{ contact.role }}</dd>
+            {% endfor %}
+            </dl>
+        </div>
+        <div class="col-md-8">
+            <h2>{% trans "Contact" %}</h2>
+            <p>{% trans "All fields are required." %}</p> 
+            <form method="POST" novalidate>
+                {% include "elements/forms/errors.html" with form=contact_form %}
+                {% csrf_token %}
+                <div class="form-group">
+                    <label for="id_recipient"
+                           class="form-control-label">{% trans "Who would you like to contact?" %}</label><br>
+                    <select id="id_recipient" name="recipient" class="form-control custom-select">
+                        {% for contact in contacts %}
+                            <option value="{{ contact.email }}">{{ contact.name }}, {{ contact.role }}</option>{% endfor %}
+                    </select>
+                </div>
+                {% bootstrap_field contact_form.sender %}
+                {% bootstrap_field contact_form.subject %}
+                {% bootstrap_field contact_form.body %}
+                {% bootstrap_field contact_form.captcha %}
+                <button type="submit" class="btn btn-primary">{% trans "Send Message" %}</button>
+            </form>
+        </div>
+
+    </div>
+{% endblock body %}
diff --git a/src/themes/clean/templates/press/nav.html b/src/themes/clean/templates/press/nav.html
index e4b3404ce9..001670175b 100644
--- a/src/themes/clean/templates/press/nav.html
+++ b/src/themes/clean/templates/press/nav.html
@@ -5,6 +5,7 @@
 {% load next_url %}
 
 <nav class="navbar navbar-dark navbar-expand-lg navbar-custom">
+<div class="container">
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
             data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
             aria-label="Toggle navigation">
@@ -23,13 +24,13 @@
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             {{ item.link_name }}
                         </button>
-                        <div class="dropdown-menu" aria-labelledby="{{ item.link_name|slugify }}">
+                        <ul class="dropdown-menu" aria-labelledby="{{ item.link_name|slugify }}">
                             {% if item.link %}
-                                <a href="/{{ item.link }}" class="dropdown-item">{{ item.link_name }}</a>{% endif %}
+                                <li><a href="/{{ item.link }}" class="dropdown-item">{{ item.link_name }}</a></li>{% endif %}
                             {% for subnav in item.sub_nav_items %}
-                                <a href="/{{ subnav.link }}" class="dropdown-item">{{ subnav.link_name }}</a>
+                                <li><a href="/{{ subnav.link }}" class="dropdown-item">{{ subnav.link_name }}</a></li>
                             {% endfor %}
-                        </div>
+                        </ul>
                     </li>
                 {% elif not item.for_footer %}
                     <li class="nav-item"><a href="/{{ item.link }}" class="nav-link">{{ item.link_name }}</a></li>
@@ -43,11 +44,11 @@
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         {% trans 'Repositories' %}
                     </button>
-                    <div class="dropdown-menu" aria-labelledby="preprints">
+                    <ul class="dropdown-menu" aria-labelledby="preprints">
                         {% for repo in request.press.live_repositories %}
-                            <a href="{{ repo.site_url }}" class="dropdown-item">{{ repo.name }}</a>
+                            <li><a href="{{ repo.site_url }}" class="dropdown-item">{{ repo.name }}</a></li>
                         {% endfor %}
-                    </div>
+                    </ul>
                 </li>
                 <li class="nav-item"></li>
             {% endif %}
@@ -61,17 +62,17 @@
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         {% trans 'Account' %}
                     </button>
-                    <div class="dropdown-menu" aria-labelledby="user">
+                    <ul class="dropdown-menu" aria-labelledby="user">
                         {% user_has_role request 'editor' as user_is_editor %}
                         {% if user_is_editor or request.user.is_staff %}
-                            <a class="dropdown-item" href="{% url 'core_manager_index' %}">{% trans 'Manager' %}</a>
+                            <li><a class="dropdown-item" href="{% url 'core_manager_index' %}">{% trans 'Manager' %}</a></li>
                         {% endif %}
                         {% if request.user.is_staff %}
-                            <a class="dropdown-item" href="/admin/">{% trans 'Admin' %}</a>
+                            <li><a class="dropdown-item" href="/admin/">{% trans 'Admin' %}</a></li>
                         {% endif %}
-                        <a class="dropdown-item" href="{% url 'core_edit_profile' %}">{% trans 'Profile' %}</a>
-                        <a class="dropdown-item" href="{% url 'core_logout' %}">{% trans 'Logout' %}</a>
-                    </div>
+                        <li><a class="dropdown-item" href="{% url 'core_edit_profile' %}">{% trans 'Profile' %}</a></li>
+                        <li><a class="dropdown-item" href="{% url 'core_logout' %}">{% trans 'Logout' %}</a></li>
+                    </ul>
                 </li>
             {% else %}
                 <li class="nav-item">
@@ -89,4 +90,5 @@
             {% endif %}
         </ul>
     </div>
+</div>
 </nav>
diff --git a/src/themes/clean/templates/press/press_journals.html b/src/themes/clean/templates/press/press_journals.html
index 126b046833..6d6d00332c 100644
--- a/src/themes/clean/templates/press/press_journals.html
+++ b/src/themes/clean/templates/press/press_journals.html
@@ -10,6 +10,9 @@
         <h1>{% trans 'Journals' %}</h1>
     </div>
     <div class="col-lg-8 col-md-10 journal-container">
+        <a class="skip-to-content" href="#filter">
+            {% trans "Skip to filter" %}
+        </a>
         {% for current_journal in journals %}
             {% setting_var current_journal 'disable_journal_submission' as submission_disabled %}
             <div class="row journal-div">
@@ -20,35 +23,45 @@ <h1>{% trans 'Journals' %}</h1>
                 </div>
                 <div class="col-lg-9 col-md-8 journal-description-box">
                     <span class="d-none">{{ current_journal.name|lower }}</span>
-                    <h2 class="journal-name">{{ current_journal.name }}</h2>
+                    <h2 id="journal-title-{{ forloop.counter }}" class="journal-name">{{ current_journal.name }}</h2>
                     <span>{{ current_journal.description_for_press|safe }}</span>
                     <div class="journal-button-block">
                         {% if current_journal.is_remote %}
                             {% if not submission_disabled %}
                                 <a href="{{ current_journal.remote_submit_url }}"
-                                   class="btn btn-primary" target="_blank">
+                                   class="btn btn-primary" target="_blank"
+                                   aria-describedby="journal-title-{{ forloop.counter }}">
                                    <span>{% trans 'Submit' %}</span>
                                     {% include "elements/icons/link_external.html" %} </a>
                                 </a>
                             {% endif %}
                             <a href="{{ current_journal.remote_view_url }}"
-                               class="btn btn-primary" target="_blank">
+                               class="btn btn-primary" target="_blank"
+                               aria-describedby="journal-title-{{ forloop.counter }}">
                                <span>{% trans 'View' %}</span>
                                {% include "elements/icons/link_external.html" %} 
                             </a>
                         {% else %}
                             {% if not submission_disabled %}
                                 <a href="{% journal_base_url current_journal %}{% url 'submission_start' %}"
-                                   class="btn btn-primary"><span>{% trans 'Submit' %}</span></a>
+                                   class="btn btn-primary"
+                                   aria-describedby="journal-title-{{ forloop.counter }}">
+                                   <span>{% trans 'Submit' %}</span></a>
                             {% endif %}
                             <a href="{% journal_base_url current_journal %}"
-                               class="btn btn-primary"><span>{% trans 'View' %}</span></a>
+                               class="btn btn-primary"
+                               aria-describedby="journal-title-{{ forloop.counter }}">
+                               <span>{% trans 'View' %}</span></a>
                             {% if current_journal.current_issue %}
                                 <a href="{% journal_base_url current_journal %}{% url 'current_issue' %}"
-                                   class="btn btn-primary"><span>{% trans 'Current Issue' %}</span></a>
+                                   class="btn btn-primary"
+                                   aria-describedby="journal-title-{{ forloop.counter }}">
+                                   <span>{% trans 'Current Issue' %}</span></a>
                                 {% elif current_journal.serial_issues.count > 0 %}
                                 <a href="{% journal_base_url current_journal %}{% url 'journal_issues' %}"
-                                   class="btn btn-primary"><span>{{ current_journal.issue_type_plural_name }}</span></a>
+                                   class="btn btn-primary"
+                                   aria-describedby="journal-title-{{ forloop.counter }}">
+                                   <span>{{ current_journal.issue_type_plural_name }}</span></a>
                             {% endif %}
                         {% endif %}
                     </div>
@@ -63,6 +76,7 @@ <h2 class="journal-name">{{ current_journal.name }}</h2>
             <label><span id="filter-title">{% trans "Filter" %}</span>
                 <input type="text" placeholder="{% trans "Start typing to filter." %}" id="filter" name="filter">
             </label>
+            {% include "common/elements/skip_to_main_content.html" %}
         </section>
     </div>
 </div>