diff --git a/services/web/.prettierignore b/services/web/.prettierignore
index f4be187b87..39282c64c2 100644
--- a/services/web/.prettierignore
+++ b/services/web/.prettierignore
@@ -6,7 +6,7 @@ frontend/js/vendor
 modules/**/frontend/js/vendor
 public/js
 public/minjs
-frontend/stylesheets/components/nvd3.less
+frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss
 frontend/js/features/source-editor/lezer-latex/latex.mjs
 frontend/js/features/source-editor/lezer-latex/latex.terms.mjs
 frontend/js/features/source-editor/lezer-bibtex/bibtex.mjs
diff --git a/services/web/frontend/stylesheets/app/admin-hub.less b/services/web/frontend/stylesheets/app/admin-hub.less
deleted file mode 100644
index bae3312447..0000000000
--- a/services/web/frontend/stylesheets/app/admin-hub.less
+++ /dev/null
@@ -1,156 +0,0 @@
-.hub-header {
-  h2 {
-    display: inline-block;
-  }
-  a {
-    color: @ol-dark-green;
-  }
-  i {
-    font-size: 30px;
-  }
-  .dropdown {
-    margin-right: 10px;
-  }
-}
-.admin-item {
-  position: relative;
-  margin-bottom: 60px;
-  .section-title {
-    text-transform: capitalize;
-  }
-  .alert-danger {
-    color: @ol-red;
-  }
-}
-.hidden-chart-section {
-  display: none;
-}
-.hub-circle {
-  display: inline-block;
-  background-color: @accent-color-secondary;
-  border-radius: 50%;
-  width: 160px;
-  height: 160px;
-  text-align: center;
-  //padding-top: 160px / 6.4;
-  img {
-    height: 160px - 160px / 3.2;
-  }
-  padding-top: 50px;
-  color: white;
-}
-.hub-circle-number {
-  display: block;
-  font-size: 36px;
-  font-weight: 900;
-  line-height: 1;
-}
-.hub-big-number {
-  float: left;
-  font-size: 32px;
-  font-weight: 900;
-  line-height: 40px;
-  color: @accent-color-secondary;
-}
-.hub-big-number,
-.hub-number-label {
-  display: block;
-}
-.hub-metric-link {
-  position: absolute;
-  top: 9px;
-  right: 0;
-  a {
-    color: @accent-color-secondary;
-  }
-  i {
-    margin-right: 5px;
-  }
-}
-.custom-donut-container {
-  svg {
-    max-width: 700px;
-    margin: auto;
-  }
-  .chart-center-text {
-    font-family: @font-family-sans-serif;
-    font-size: 40px;
-    font-weight: bold;
-    fill: @accent-color-secondary;
-    text-anchor: middle;
-  }
-
-  .nv-legend-text {
-    font-family: @font-family-sans-serif;
-    font-size: 14px;
-  }
-}
-.chart-no-center-text {
-  .chart-center-text {
-    display: none;
-  }
-}
-
-.superscript {
-  font-size: @font-size-large;
-}
-
-.admin-page {
-  summary {
-    // firefox does not show markers for block items
-    display: list-item;
-  }
-}
-
-.material-switch {
-  input[type='checkbox'] {
-    display: none;
-
-    &:checked + label::before {
-      background: inherit;
-      opacity: 0.5;
-    }
-    &:checked + label::after {
-      background: inherit;
-      left: 20px;
-    }
-    &:disabled + label {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  label {
-    cursor: pointer;
-    height: 0;
-    position: relative;
-    width: 40px;
-
-    &:before {
-      background: rgb(0, 0, 0);
-      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
-      border-radius: 8px;
-      content: '';
-      height: 16px;
-      margin-top: -2px;
-      position: absolute;
-      opacity: 0.3;
-      transition: all 0.2s ease-in-out;
-      width: 40px;
-    }
-
-    &:after {
-      background: rgb(255, 255, 255);
-      border-radius: 16px;
-      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-      content: '';
-      height: 24px;
-      left: -4px;
-      margin-top: -2px;
-      position: absolute;
-      top: -4px;
-      transition: all 0.2s ease-in-out;
-      width: 24px;
-    }
-  }
-}
diff --git a/services/web/frontend/stylesheets/app/portals.less b/services/web/frontend/stylesheets/app/portals.less
index 9dfd4a57b7..b69176b05f 100644
--- a/services/web/frontend/stylesheets/app/portals.less
+++ b/services/web/frontend/stylesheets/app/portals.less
@@ -141,4 +141,38 @@
       }
     }
   }
+  .hub-circle {
+    display: inline-block;
+    background-color: @green-70;
+    border-radius: 50%;
+    width: 160px;
+    height: 160px;
+    text-align: center;
+    padding-top: 50px;
+    color: white;
+  }
+  .hub-circle-number {
+    display: block;
+    font-size: 36px;
+    font-weight: 900;
+    line-height: 1;
+  }
+  .custom-donut-container {
+    svg {
+      max-width: 700px;
+      margin: auto;
+    }
+    .chart-center-text {
+      font-family: @font-family-sans-serif;
+      font-size: 40px;
+      font-weight: bold;
+      fill: @green-70;
+      text-anchor: middle;
+    }
+
+    .nv-legend-text {
+      font-family: @font-family-sans-serif;
+      font-size: 14px;
+    }
+  }
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss b/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss
index b92eb80551..01d58c8c20 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss
@@ -1,3 +1,10 @@
+@import 'metrics/admin-hub';
+@import 'metrics/daterange-picker';
+@import 'metrics/institution-hub';
+@import 'metrics/metrics';
+@import 'metrics/nvd3';
+@import 'metrics/nvd3_override';
+@import 'metrics/publisher-hub';
 @import 'third-party-references';
 @import 'symbol-palette';
 @import 'writefull';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/admin-hub.scss b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/admin-hub.scss
new file mode 100644
index 0000000000..3e6576cf92
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/admin-hub.scss
@@ -0,0 +1,93 @@
+.hub-header {
+  h2 {
+    display: inline-block;
+  }
+
+  .dropdown {
+    margin-right: var(--spacing-04);
+  }
+}
+
+.admin-item {
+  position: relative;
+  margin-bottom: var(--spacing-12);
+
+  .section-title {
+    text-transform: capitalize;
+  }
+
+  .alert-danger {
+    color: var(--content-danger);
+  }
+}
+
+.hidden-chart-section {
+  display: none;
+}
+
+.hub-circle {
+  display: inline-block;
+  background-color: var(--green-70);
+  border-radius: 50%;
+  width: 160px;
+  height: 160px;
+  text-align: center;
+  padding-top: 50px;
+  color: white;
+}
+
+.hub-circle-number {
+  display: block;
+  font-size: 36px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.hub-big-number {
+  float: left;
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 40px;
+  color: var(--green-70);
+}
+
+.hub-big-number,
+.hub-number-label {
+  display: block;
+}
+
+.hub-metric-link {
+  position: absolute;
+  top: 9px;
+  right: 0;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.custom-donut-container {
+  svg {
+    max-width: 700px;
+    margin: auto;
+  }
+
+  .chart-center-text {
+    font-family: $font-family-sans-serif;
+    font-size: 40px;
+    font-weight: bold;
+    fill: var(--green-70);
+    text-anchor: middle;
+  }
+
+  .nv-legend-text {
+    font-family: $font-family-sans-serif;
+    font-size: 14px;
+  }
+}
+
+.chart-no-center-text {
+  .chart-center-text {
+    display: none;
+  }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/daterange-picker.scss b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/daterange-picker.scss
new file mode 100644
index 0000000000..33e466bd91
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/daterange-picker.scss
@@ -0,0 +1,617 @@
+// A stylesheet for use with Bootstrap 3.x
+// @author: Dan Grossman http://www.dangrossman.info/
+// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
+// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
+// @website: https://www.improvely.com/
+
+/* stylelint-disable selector-class-pattern */
+
+// VARIABLES
+
+// Settings
+
+// The class name to contain everything within.
+$arrow-size: 7px;
+
+// Colors
+$daterangepicker-color: $green-50;
+$daterangepicker-bg-color: #fff;
+$daterangepicker-cell-color: $daterangepicker-color;
+$daterangepicker-cell-border-color: transparent;
+$daterangepicker-cell-bg-color: $daterangepicker-bg-color;
+$daterangepicker-cell-hover-color: $daterangepicker-color;
+$daterangepicker-cell-hover-border-color: $daterangepicker-cell-border-color;
+$daterangepicker-cell-hover-bg-color: #eee;
+$daterangepicker-in-range-color: #000;
+$daterangepicker-in-range-border-color: transparent;
+$daterangepicker-in-range-bg-color: #ebf4f8;
+$daterangepicker-active-color: #fff;
+$daterangepicker-active-bg-color: #138a07;
+$daterangepicker-active-border-color: transparent;
+$daterangepicker-unselected-color: #999;
+$daterangepicker-unselected-border-color: transparent;
+$daterangepicker-unselected-bg-color: #fff;
+
+// daterangepicker
+$daterangepicker-width: 278px;
+$daterangepicker-padding: 4px;
+$daterangepicker-z-index: 3000;
+$daterangepicker-border-size: 1px;
+$daterangepicker-border-color: #ccc;
+$daterangepicker-border-radius: 4px;
+
+// Calendar
+$daterangepicker-calendar-margin: $daterangepicker-padding;
+$daterangepicker-calendar-bg-color: $daterangepicker-bg-color;
+$daterangepicker-calendar-border-size: 1px;
+$daterangepicker-calendar-border-color: $daterangepicker-bg-color;
+$daterangepicker-calendar-border-radius: $daterangepicker-border-radius;
+
+// Calendar Cells
+$daterangepicker-cell-size: 20px;
+$daterangepicker-cell-width: $daterangepicker-cell-size;
+$daterangepicker-cell-height: $daterangepicker-cell-size;
+$daterangepicker-cell-border-radius: $daterangepicker-calendar-border-radius;
+$daterangepicker-cell-border-size: 1px;
+
+// Dropdowns
+$daterangepicker-dropdown-z-index: $daterangepicker-z-index + 1;
+
+// Controls
+$daterangepicker-control-height: 30px;
+$daterangepicker-control-line-height: $daterangepicker-control-height;
+$daterangepicker-control-color: #555;
+$daterangepicker-control-border-size: 1px;
+$daterangepicker-control-border-color: #ccc;
+$daterangepicker-control-border-radius: 4px;
+$daterangepicker-control-active-border-size: 1px;
+$daterangepicker-control-active-border-color: $green-50;
+$daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius;
+$daterangepicker-control-disabled-color: #ccc;
+
+// Ranges
+$daterangepicker-ranges-color: $green-50;
+$daterangepicker-ranges-bg-color: daterangepicker-ranges-color;
+$daterangepicker-ranges-border-size: 1px;
+$daterangepicker-ranges-border-color: $daterangepicker-ranges-bg-color;
+$daterangepicker-ranges-border-radius: $daterangepicker-border-radius;
+$daterangepicker-ranges-hover-color: #fff;
+$daterangepicker-ranges-hover-bg-color: $daterangepicker-ranges-color;
+$daterangepicker-ranges-hover-border-size: $daterangepicker-ranges-border-size;
+$daterangepicker-ranges-hover-border-color: $daterangepicker-ranges-hover-bg-color;
+$daterangepicker-ranges-hover-border-radius: $daterangepicker-border-radius;
+$daterangepicker-ranges-active-border-size: $daterangepicker-ranges-border-size;
+$daterangepicker-ranges-active-border-color: $daterangepicker-ranges-bg-color;
+$daterangepicker-ranges-active-border-radius: $daterangepicker-border-radius;
+
+// STYLESHEETS
+.daterangepicker {
+  position: absolute;
+  color: $daterangepicker-color;
+  background-color: $daterangepicker-bg-color;
+  border-radius: $daterangepicker-border-radius;
+  width: $daterangepicker-width;
+  padding: $daterangepicker-padding;
+  margin-top: $daterangepicker-border-size;
+
+  // TODO: Should these be parameterized??
+  // top: 100px;
+  // left: 20px;
+
+  $arrow-prefix-size: $arrow-size;
+  $arrow-suffix-size: ($arrow-size - $daterangepicker-border-size);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    border-bottom-color: rgb(0 0 0 / 20%);
+    content: '';
+  }
+
+  &::before {
+    top: -$arrow-prefix-size;
+    border-right: $arrow-prefix-size solid transparent;
+    border-left: $arrow-prefix-size solid transparent;
+    border-bottom: $arrow-prefix-size solid $daterangepicker-border-color;
+  }
+
+  &::after {
+    top: -$arrow-suffix-size;
+    border-right: $arrow-suffix-size solid transparent;
+    border-bottom: $arrow-suffix-size solid $daterangepicker-bg-color;
+    border-left: $arrow-suffix-size solid transparent;
+  }
+
+  &.opensleft {
+    &::before {
+      // TODO: Make this relative to prefix size.
+      right: $arrow-prefix-size + 2px;
+    }
+
+    &::after {
+      // TODO: Make this relative to suffix size.
+      right: $arrow-suffix-size + 4px;
+    }
+  }
+
+  &.openscenter {
+    &::before {
+      left: 0;
+      right: 0;
+      width: 0;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &::after {
+      left: 0;
+      right: 0;
+      width: 0;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  &.opensright {
+    &::before {
+      // TODO: Make this relative to prefix size.
+      left: $arrow-prefix-size + 2px;
+    }
+
+    &::after {
+      // TODO: Make this relative to suffix size.
+      left: $arrow-suffix-size + 4px;
+    }
+  }
+
+  &.dropup {
+    margin-top: -5px;
+
+    // NOTE: Note sure why these are special-cased.
+    &::before {
+      top: initial;
+      bottom: -$arrow-prefix-size;
+      border-bottom: initial;
+      border-top: $arrow-prefix-size solid $daterangepicker-border-color;
+    }
+
+    &::after {
+      top: initial;
+      bottom: -$arrow-suffix-size;
+      border-bottom: initial;
+      border-top: $arrow-suffix-size solid $daterangepicker-bg-color;
+    }
+  }
+
+  &.dropdown-menu {
+    max-width: none;
+    z-index: $daterangepicker-dropdown-z-index;
+  }
+
+  &.single {
+    .ranges,
+    .calendar {
+      float: none;
+    }
+  }
+
+  /* Calendars */
+  &.show-calendar {
+    .calendar {
+      display: block;
+    }
+  }
+
+  .calendar {
+    display: none;
+    max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2);
+    margin: $daterangepicker-calendar-margin;
+
+    &.single {
+      .calendar-table {
+        border: none;
+      }
+    }
+
+    th,
+    td {
+      white-space: nowrap;
+      text-align: center;
+
+      // TODO: Should this actually be hard-coded?
+      min-width: 32px;
+    }
+  }
+
+  .calendar-table {
+    border: $daterangepicker-calendar-border-size solid
+      $daterangepicker-calendar-border-color;
+    padding: $daterangepicker-calendar-margin;
+    border-radius: $daterangepicker-calendar-border-radius;
+    background-color: $daterangepicker-calendar-bg-color;
+  }
+
+  table {
+    width: 100%;
+    margin: 0;
+  }
+
+  td,
+  th {
+    text-align: center;
+    width: $daterangepicker-cell-width;
+    height: $daterangepicker-cell-height;
+    border-radius: $daterangepicker-cell-border-radius;
+    border: $daterangepicker-cell-border-size solid
+      $daterangepicker-cell-border-color;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &.available {
+      &:hover {
+        background-color: $daterangepicker-cell-hover-bg-color;
+        border-color: $daterangepicker-cell-hover-border-color;
+        color: $daterangepicker-cell-hover-color;
+      }
+    }
+
+    &.week {
+      font-size: 80%;
+      color: #ccc;
+    }
+  }
+
+  td {
+    &.off {
+      &,
+      &.in-range,
+      &.start-date,
+      &.end-date {
+        background-color: $daterangepicker-unselected-bg-color;
+        border-color: $daterangepicker-unselected-border-color;
+        color: $daterangepicker-unselected-color;
+      }
+    }
+
+    // Date Range
+    &.in-range {
+      background-color: $daterangepicker-in-range-bg-color;
+      border-color: $daterangepicker-in-range-border-color;
+      color: $daterangepicker-in-range-color;
+
+      // TODO: Should this be static or should it be parameterized?
+      border-radius: 0;
+    }
+
+    &.start-date {
+      border-radius: $daterangepicker-cell-border-radius 0 0
+        $daterangepicker-cell-border-radius;
+    }
+
+    &.end-date {
+      border-radius: 0 $daterangepicker-cell-border-radius
+        $daterangepicker-cell-border-radius 0;
+    }
+
+    &.start-date.end-date {
+      border-radius: $daterangepicker-cell-border-radius;
+    }
+
+    &.active {
+      &,
+      &:hover {
+        background-color: $daterangepicker-active-bg-color;
+        border-color: $daterangepicker-active-border-color;
+        color: $daterangepicker-active-color;
+      }
+    }
+  }
+
+  th {
+    &.month {
+      width: auto;
+    }
+  }
+
+  // Disabled Controls
+  td,
+  option {
+    &.disabled {
+      color: #999;
+      cursor: not-allowed;
+      text-decoration: line-through;
+    }
+  }
+
+  select {
+    &.monthselect,
+    &.yearselect {
+      font-size: 12px;
+      padding: 1px;
+      height: auto;
+      margin: 0;
+      cursor: default;
+    }
+
+    &.monthselect {
+      margin-right: 2%;
+      width: 56%;
+    }
+
+    &.yearselect {
+      width: 40%;
+    }
+
+    &.hourselect,
+    &.minuteselect,
+    &.secondselect,
+    &.ampmselect {
+      width: 50px;
+      margin-bottom: 0;
+    }
+  }
+
+  // Text Input Controls (above calendar)
+  .input-mini {
+    border: $daterangepicker-control-border-size solid
+      $daterangepicker-control-border-color;
+    border-radius: $daterangepicker-control-border-radius;
+    color: $daterangepicker-control-color;
+    height: $daterangepicker-control-line-height;
+    line-height: $daterangepicker-control-height;
+    display: block;
+    vertical-align: middle;
+
+    // TODO: Should these all be static, too??
+    margin: 0 0 5px;
+    padding: 0 6px 0 28px;
+    width: 100%;
+
+    &.active {
+      border: $daterangepicker-control-active-border-size solid
+        $daterangepicker-control-active-border-color;
+      border-radius: $daterangepicker-control-active-border-radius;
+    }
+  }
+
+  .daterangepicker_input {
+    position: relative;
+    padding-left: 0;
+
+    i {
+      position: absolute;
+
+      // NOTE: These appear to be eyeballed to me...
+      left: 8px;
+      top: var(--spacing-04);
+    }
+  }
+
+  &.rtl {
+    .input-mini {
+      padding-right: 28px;
+      padding-left: 6px;
+    }
+
+    .daterangepicker_input i {
+      left: auto;
+      right: 8px;
+    }
+  }
+
+  // Time Picker
+  .calendar-time {
+    text-align: center;
+    margin: 5px auto;
+    line-height: $daterangepicker-control-line-height;
+    position: relative;
+    padding-left: 28px;
+
+    select {
+      &.disabled {
+        color: $daterangepicker-control-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+// Predefined Ranges
+.ranges {
+  font-size: 11px;
+  float: none;
+  margin: 4px;
+  text-align: left;
+
+  ul {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+  }
+
+  li {
+    font-size: 13px;
+    background-color: $daterangepicker-ranges-bg-color;
+    border: $daterangepicker-ranges-border-size solid
+      $daterangepicker-ranges-border-color;
+    border-radius: $daterangepicker-ranges-border-radius;
+    color: $daterangepicker-ranges-color;
+    padding: 3px 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $daterangepicker-ranges-hover-bg-color;
+      color: $daterangepicker-ranges-hover-color;
+    }
+
+    &.active {
+      background-color: $daterangepicker-ranges-hover-bg-color;
+      border: $daterangepicker-ranges-hover-border-size solid
+        $daterangepicker-ranges-hover-border-color;
+      color: $daterangepicker-ranges-hover-color;
+    }
+  }
+}
+
+/*  Larger Screen Styling */
+@include media-breakpoint-up(sm) {
+  .daterangepicker {
+    .glyphicon {
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: FontAwesome;
+    }
+
+    .glyphicon-chevron-left::before {
+      content: '\f053';
+    }
+
+    .glyphicon-chevron-right::before {
+      content: '\f054';
+    }
+
+    .glyphicon-calendar::before {
+      content: '\f073';
+    }
+
+    width: auto;
+
+    .ranges {
+      ul {
+        width: 160px;
+      }
+    }
+
+    &.single {
+      .ranges {
+        ul {
+          width: 100%;
+        }
+      }
+
+      .calendar.left {
+        clear: none;
+      }
+
+      &.ltr {
+        .ranges,
+        .calendar {
+          float: left;
+        }
+      }
+
+      &.rtl {
+        .ranges,
+        .calendar {
+          float: right;
+        }
+      }
+    }
+
+    &.ltr {
+      direction: ltr;
+      text-align: left;
+
+      .calendar {
+        &.left {
+          clear: left;
+          margin-right: 0;
+
+          .calendar-table {
+            border-right: none;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            padding-right: 12px;
+          }
+        }
+
+        &.right {
+          margin-left: 0;
+
+          .calendar-table {
+            border-left: none;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+
+      .left .daterangepicker_input {
+        padding-right: 12px;
+      }
+
+      .ranges,
+      .calendar {
+        float: left;
+      }
+    }
+
+    &.rtl {
+      direction: rtl;
+      text-align: right;
+
+      .calendar {
+        &.left {
+          clear: right;
+          margin-left: 0;
+
+          .calendar-table {
+            border-left: none;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            padding-left: 12px;
+          }
+        }
+
+        &.right {
+          margin-right: 0;
+
+          .calendar-table {
+            border-right: none;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        }
+      }
+
+      .ranges,
+      .calendar {
+        text-align: right;
+        float: right;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  /* force the calendar to display on one row */
+  .show-calendar {
+    min-width: 658px; /* width of all contained elements, IE/Edge fallback */
+    width: max-content;
+  }
+
+  .daterangepicker {
+    .ranges {
+      width: auto;
+    }
+
+    &.ltr {
+      .ranges {
+        float: left;
+        clear: none !important;
+      }
+    }
+
+    &.rtl {
+      .ranges {
+        float: right;
+      }
+    }
+
+    .calendar {
+      clear: none !important;
+    }
+  }
+}
diff --git a/services/web/frontend/stylesheets/app/institution-hub.less b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/institution-hub.scss
similarity index 52%
rename from services/web/frontend/stylesheets/app/institution-hub.less
rename to services/web/frontend/stylesheets/bootstrap-5/modules/metrics/institution-hub.scss
index cb705e4b99..67cbe580e4 100644
--- a/services/web/frontend/stylesheets/app/institution-hub.less
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/institution-hub.scss
@@ -1,38 +1,54 @@
 #institution-hub {
-  .section_header {
+  .section-header {
     .dropdown {
-      margin-right: 10px;
+      margin-right: var(--spacing-04);
     }
   }
 
   #usage {
     .recent-activity {
       .overbox {
-        font-size: 16px;
+        @include body-base;
       }
+
       .hub-big-number,
       .hub-number-label,
       .worked-on {
         display: block;
         width: 50%;
       }
+
       .hub-big-number {
-        padding-right: 10px;
+        padding-right: var(--spacing-04);
         text-align: right;
       }
+
       .hub-number-label,
       .worked-on {
         float: right;
       }
+
       .hub-number-label {
         &:nth-child(odd) {
-          margin-top: 16px;
+          margin-top: var(--spacing-06);
         }
       }
+
       .worked-on {
-        color: @text-small-color;
+        color: var(--content-secondary);
         font-style: italic;
       }
     }
   }
+
+  .overbox {
+    margin: 0;
+    padding: var(--spacing-10) var(--spacing-07);
+    background: var(--white);
+    border: 1px solid var(--content-disabled);
+
+    &.overbox-small {
+      padding: var(--spacing-04);
+    }
+  }
 }
diff --git a/services/web/frontend/stylesheets/app/metrics.less b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/metrics.scss
similarity index 78%
rename from services/web/frontend/stylesheets/app/metrics.less
rename to services/web/frontend/stylesheets/bootstrap-5/modules/metrics/metrics.scss
index 5256b8a8bd..f6e6a3fd3e 100644
--- a/services/web/frontend/stylesheets/app/metrics.less
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/metrics.scss
@@ -1,6 +1,6 @@
 #metrics {
   max-width: none;
-  padding: 0 30px;
+  padding: 0 var(--spacing-09);
   width: auto;
 
   svg.nvd3-svg {
@@ -9,17 +9,18 @@
 
   .overbox {
     margin: 0;
-    padding: 40px 20px;
+    padding: var(--spacing-10) var(--spacing-07);
     background: #fff;
     border: 1px solid #dfdfdf;
+
     .box {
-      padding-bottom: 30px;
+      padding-bottom: var(--spacing-09);
       overflow: hidden;
-      margin-bottom: 40px;
-      border-bottom: 1px solid rgb(216, 216, 216);
+      margin-bottom: var(--spacing-10);
+      border-bottom: 1px solid rgb(216 216 216);
 
       .header {
-        margin-bottom: 20px;
+        margin-bottom: var(--spacing-07);
 
         h4 {
           font-size: 19px;
@@ -27,10 +28,14 @@
         }
       }
     }
+
+    &.overbox-small {
+      padding: var(--spacing-04);
+    }
   }
 
   .print-button {
-    margin-right: 10px;
+    margin-right: var(--spacing-04);
     font-size: 20px;
   }
 
@@ -40,21 +45,18 @@
   }
 
   .metric-col {
-    padding: 15px;
-  }
-
-  .metric-header-container {
-    h4 {
-      margin-bottom: 0;
-    }
+    position: relative;
+    padding: var(--spacing-06);
   }
 
   svg {
     display: block;
     height: 250px;
+
     text {
       font-family: 'Open Sans', sans-serif;
     }
+
     &:not(:root) {
       overflow: visible;
     }
@@ -79,6 +81,10 @@
 
   // BEGIN: Metrics header
   .metric-header-container {
+    h4 {
+      margin-bottom: 0;
+    }
+
     > h4 {
       margin-top: 0;
       margin-bottom: 0;
@@ -89,12 +95,14 @@
       font-size: 0.5em;
     }
   }
+
   // END: Metrics header
 
   // BEGIN: Metrics footer
   .metric-footer-container {
     text-align: center;
   }
+
   // END: Metrics footer
 
   // BEGIN: Metrics overlays
@@ -107,7 +115,7 @@
     height: 100%;
     width: 100%;
     padding: 16px; /* 15px of .metric-col padding + 1px border */
-    padding-top: 56px; /* Same as above + 30px for title + 10px overbox padding*/
+    padding-top: 56px; /* Same as above + 30px for title + 10px overbox padding */
   }
 
   .metric-overlay-loading {
@@ -129,19 +137,20 @@
     width: 100%;
     height: 100%;
   }
+
   // END: Metrics overlays
 }
 
 #metrics-header {
-  @media (min-width: 1200px) {
-    margin-bottom: 30px;
+  @include media-breakpoint-up(lg) {
+    margin-bottom: var(--spacing-09);
   }
 
   h3 {
     display: inline-block;
   }
 
-  .section_header {
+  .section-header {
     margin-bottom: 0;
   }
 
@@ -162,9 +171,11 @@
 
   #dates-container {
     display: inline-block;
+
     .daterangepicker {
-      margin-right: 15px;
+      margin-right: var(--spacing-06);
     }
+
     #metrics-dates {
       padding: 0;
     }
@@ -172,14 +183,10 @@
 }
 
 #metrics-footer {
-  margin-top: 30px;
+  margin-top: var(--spacing-09);
   text-align: center;
 }
 
-body.print-loading {
-  #metrics {
-    .metric-col {
-      opacity: 0.5;
-    }
-  }
+body.print-loading #metrics .metric-col {
+  opacity: 0.5;
 }
diff --git a/services/web/frontend/stylesheets/components/nvd3.less b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss
similarity index 78%
rename from services/web/frontend/stylesheets/components/nvd3.less
rename to services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss
index f1fea65901..4983129a80 100755
--- a/services/web/frontend/stylesheets/components/nvd3.less
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss
@@ -1,691 +1,677 @@
-/* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */
-.nvd3 .nv-axis {
-  pointer-events: none;
-  opacity: 1;
-}
-
-.nvd3 .nv-axis path {
-  fill: none;
-  stroke: #000;
-  stroke-opacity: 0.75;
-  shape-rendering: crispEdges;
-}
-
-.nvd3 .nv-axis path.domain {
-  stroke-opacity: 0.75;
-}
-
-.nvd3 .nv-axis.nv-x path.domain {
-  stroke-opacity: 0;
-}
-
-.nvd3 .nv-axis line {
-  fill: none;
-  stroke: #e5e5e5;
-  shape-rendering: crispEdges;
-}
-
-.nvd3 .nv-axis .zero line,
-    /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
-  stroke-opacity: 0.75;
-}
-
-.nvd3 .nv-axis .nv-axisMaxMin text {
-  font-weight: bold;
-}
-
-.nvd3 .x .nv-axis .nv-axisMaxMin text,
-.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
-.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
-  text-anchor: middle;
-}
-
-.nvd3 .nv-axis.nv-disabled {
-  opacity: 0;
-}
-
-.nvd3 .nv-bars rect {
-  fill-opacity: 0.75;
-
-  transition: fill-opacity 250ms linear;
-  -moz-transition: fill-opacity 250ms linear;
-  -webkit-transition: fill-opacity 250ms linear;
-}
-
-.nvd3 .nv-bars rect.hover {
-  fill-opacity: 1;
-}
-
-.nvd3 .nv-bars .hover rect {
-  fill: lightblue;
-}
-
-.nvd3 .nv-bars text {
-  fill: rgba(0, 0, 0, 0);
-}
-
-.nvd3 .nv-bars .hover text {
-  fill: rgba(0, 0, 0, 1);
-}
-
-.nvd3 .nv-multibar .nv-groups rect,
-.nvd3 .nv-multibarHorizontal .nv-groups rect,
-.nvd3 .nv-discretebar .nv-groups rect {
-  stroke-opacity: 0;
-
-  transition: fill-opacity 250ms linear;
-  -moz-transition: fill-opacity 250ms linear;
-  -webkit-transition: fill-opacity 250ms linear;
-}
-
-.nvd3 .nv-multibar .nv-groups rect:hover,
-.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
-.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
-.nvd3 .nv-discretebar .nv-groups rect:hover {
-  fill-opacity: 1;
-}
-
-.nvd3 .nv-discretebar .nv-groups text,
-.nvd3 .nv-multibarHorizontal .nv-groups text {
-  font-weight: bold;
-  fill: rgba(0, 0, 0, 1);
-  stroke: rgba(0, 0, 0, 0);
-}
-
-/* boxplot CSS */
-.nvd3 .nv-boxplot circle {
-  fill-opacity: 0.5;
-}
-
-.nvd3 .nv-boxplot circle:hover {
-  fill-opacity: 1;
-}
-
-.nvd3 .nv-boxplot rect:hover {
-  fill-opacity: 1;
-}
-
-.nvd3 line.nv-boxplot-median {
-  stroke: black;
-}
-
-.nv-boxplot-tick:hover {
-  stroke-width: 2.5px;
-}
-/* bullet */
-.nvd3.nv-bullet {
-  font: 10px sans-serif;
-}
-.nvd3.nv-bullet .nv-measure {
-  fill-opacity: 0.8;
-}
-.nvd3.nv-bullet .nv-measure:hover {
-  fill-opacity: 1;
-}
-.nvd3.nv-bullet .nv-marker {
-  stroke: #000;
-  stroke-width: 2px;
-}
-.nvd3.nv-bullet .nv-markerTriangle {
-  stroke: #000;
-  fill: #fff;
-  stroke-width: 1.5px;
-}
-.nvd3.nv-bullet .nv-markerLine {
-  stroke: #000;
-  stroke-width: 1.5px;
-}
-.nvd3.nv-bullet .nv-tick line {
-  stroke: #666;
-  stroke-width: 0.5px;
-}
-.nvd3.nv-bullet .nv-range.nv-s0 {
-  fill: #eee;
-}
-.nvd3.nv-bullet .nv-range.nv-s1 {
-  fill: #ddd;
-}
-.nvd3.nv-bullet .nv-range.nv-s2 {
-  fill: #ccc;
-}
-.nvd3.nv-bullet .nv-title {
-  font-size: 14px;
-  font-weight: bold;
-}
-.nvd3.nv-bullet .nv-subtitle {
-  fill: #999;
-}
-
-.nvd3.nv-bullet .nv-range {
-  fill: #bababa;
-  fill-opacity: 0.4;
-}
-.nvd3.nv-bullet .nv-range:hover {
-  fill-opacity: 0.7;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
-  stroke-width: 1px;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
-  stroke-width: 2px;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
-  stroke: #2ca02c;
-  fill: #2ca02c;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
-  stroke: #d62728;
-  fill: #d62728;
-}
-
-.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
-  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks line {
-  stroke: #333;
-}
-
-.nv-force-node {
-  stroke: #fff;
-  stroke-width: 1.5px;
-}
-.nv-force-link {
-  stroke: #999;
-  stroke-opacity: 0.6;
-}
-.nv-force-node text {
-  stroke-width: 0px;
-}
-
-.nvd3 .nv-legend .nv-disabled rect {
-  /*fill-opacity: 0;*/
-}
-
-.nvd3 .nv-check-box .nv-box {
-  fill-opacity: 0;
-  stroke-width: 2;
-}
-
-.nvd3 .nv-check-box .nv-check {
-  fill-opacity: 0;
-  stroke-width: 4;
-}
-
-.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
-  fill-opacity: 0;
-  stroke-opacity: 0;
-}
-
-.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
-  opacity: 0;
-}
-
-/* line plus bar */
-.nvd3.nv-linePlusBar .nv-bar rect {
-  fill-opacity: 0.75;
-}
-
-.nvd3.nv-linePlusBar .nv-bar rect:hover {
-  fill-opacity: 1;
-}
-.nvd3 .nv-groups path.nv-line {
-  fill: none;
-}
-
-.nvd3 .nv-groups path.nv-area {
-  stroke: none;
-}
-
-.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
-  fill-opacity: 0;
-  stroke-opacity: 0;
-}
-
-.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
-  fill-opacity: 0.5 !important;
-  stroke-opacity: 0.5 !important;
-}
-
-.with-transitions .nvd3 .nv-groups .nv-point {
-  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-}
-
-.nvd3.nv-scatter .nv-groups .nv-point.hover,
-.nvd3 .nv-groups .nv-point.hover {
-  stroke-width: 7px;
-  fill-opacity: 0.95 !important;
-  stroke-opacity: 0.95 !important;
-}
-
-.nvd3 .nv-point-paths path {
-  stroke: #aaa;
-  stroke-opacity: 0;
-  fill: #eee;
-  fill-opacity: 0;
-}
-
-.nvd3 .nv-indexLine {
-  cursor: ew-resize;
-}
-
-/********************
- * SVG CSS
- */
-
-/********************
-  Default CSS for an svg element nvd3 used
-*/
-svg.nvd3-svg {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/********************
-  Box shadow and border radius styling
-*/
-.nvtooltip.with-3d-shadow,
-.with-3d-shadow .nvtooltip {
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-
-.nvd3 text {
-  font: normal 12px Arial;
-}
-
-.nvd3 .title {
-  font: bold 14px Arial;
-}
-
-.nvd3 .nv-background {
-  fill: white;
-  fill-opacity: 0;
-}
-
-.nvd3.nv-noData {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-/**********
-*  Brush
-*/
-
-.nv-brush .extent {
-  fill-opacity: 0.125;
-  shape-rendering: crispEdges;
-}
-
-.nv-brush .resize path {
-  fill: #eee;
-  stroke: #666;
-}
-
-/**********
-*  Legend
-*/
-
-.nvd3 .nv-legend .nv-series {
-  cursor: pointer;
-}
-
-.nvd3 .nv-legend .nv-disabled circle {
-  fill-opacity: 0;
-}
-
-/* focus */
-.nvd3 .nv-brush .extent {
-  fill-opacity: 0 !important;
-}
-
-.nvd3 .nv-brushBackground rect {
-  stroke: #000;
-  stroke-width: 0.4;
-  fill: #fff;
-  fill-opacity: 0.7;
-}
-
-/**********
-*  Print
-*/
-
-@media print {
-  .nvd3 text {
-    stroke-width: 0;
-    fill-opacity: 1;
-  }
-}
-
-.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
-  stroke-width: 1px;
-}
-
-.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
-  stroke-width: 2px;
-}
-
-.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
-  stroke: #2ca02c;
-}
-
-.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
-  stroke: #d62728;
-}
-
-.nvd3 .background path {
-  fill: none;
-  stroke: #eee;
-  stroke-opacity: 0.4;
-  shape-rendering: crispEdges;
-}
-
-.nvd3 .foreground path {
-  fill: none;
-  stroke-opacity: 0.7;
-}
-
-.nvd3 .nv-parallelCoordinates-brush .extent {
-  fill: #fff;
-  fill-opacity: 0.6;
-  stroke: gray;
-  shape-rendering: crispEdges;
-}
-
-.nvd3 .nv-parallelCoordinates .hover {
-  fill-opacity: 1;
-  stroke-width: 3px;
-}
-
-.nvd3 .missingValuesline line {
-  fill: none;
-  stroke: black;
-  stroke-width: 1;
-  stroke-opacity: 1;
-  stroke-dasharray: 5, 5;
-}
-.nvd3.nv-pie path {
-  stroke-opacity: 0;
-  transition: fill-opacity 250ms linear, stroke-width 250ms linear,
-    stroke-opacity 250ms linear;
-  -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear,
-    stroke-opacity 250ms linear;
-  -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear,
-    stroke-opacity 250ms linear;
-}
-
-.nvd3.nv-pie .nv-pie-title {
-  font-size: 24px;
-  fill: rgba(19, 196, 249, 0.59);
-}
-
-.nvd3.nv-pie .nv-slice text {
-  stroke: #000;
-  stroke-width: 0;
-}
-
-.nvd3.nv-pie path {
-  stroke: #fff;
-  stroke-width: 1px;
-  stroke-opacity: 1;
-}
-
-.nvd3.nv-pie path {
-  fill-opacity: 0.7;
-}
-.nvd3.nv-pie .hover path {
-  fill-opacity: 1;
-}
-.nvd3.nv-pie .nv-label {
-  pointer-events: none;
-}
-.nvd3.nv-pie .nv-label rect {
-  fill-opacity: 0;
-  stroke-opacity: 0;
-}
-
-/* scatter */
-.nvd3 .nv-groups .nv-point.hover {
-  stroke-width: 20px;
-  stroke-opacity: 0.5;
-}
-
-.nvd3 .nv-scatter .nv-point.hover {
-  fill-opacity: 1;
-}
-.nv-noninteractive {
-  pointer-events: none;
-}
-
-.nv-distx,
-.nv-disty {
-  pointer-events: none;
-}
-
-/* sparkline */
-.nvd3.nv-sparkline path {
-  fill: none;
-}
-
-.nvd3.nv-sparklineplus g.nv-hoverValue {
-  pointer-events: none;
-}
-
-.nvd3.nv-sparklineplus .nv-hoverValue line {
-  stroke: #333;
-  stroke-width: 1.5px;
-}
-
-.nvd3.nv-sparklineplus,
-.nvd3.nv-sparklineplus g {
-  pointer-events: all;
-}
-
-.nvd3 .nv-hoverArea {
-  fill-opacity: 0;
-  stroke-opacity: 0;
-}
-
-.nvd3.nv-sparklineplus .nv-xValue,
-.nvd3.nv-sparklineplus .nv-yValue {
-  stroke-width: 0;
-  font-size: 0.9em;
-  font-weight: normal;
-}
-
-.nvd3.nv-sparklineplus .nv-yValue {
-  stroke: #f66;
-}
-
-.nvd3.nv-sparklineplus .nv-maxValue {
-  stroke: #2ca02c;
-  fill: #2ca02c;
-}
-
-.nvd3.nv-sparklineplus .nv-minValue {
-  stroke: #d62728;
-  fill: #d62728;
-}
-
-.nvd3.nv-sparklineplus .nv-currentValue {
-  font-weight: bold;
-  font-size: 1.1em;
-}
-/* stacked area */
-.nvd3.nv-stackedarea path.nv-area {
-  fill-opacity: 0.7;
-  stroke-opacity: 0;
-  transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-  -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-  -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-}
-
-.nvd3.nv-stackedarea path.nv-area.hover {
-  fill-opacity: 0.9;
-}
-
-.nvd3.nv-stackedarea .nv-groups .nv-point {
-  stroke-opacity: 0;
-  fill-opacity: 0;
-}
-
-.nvtooltip {
-  position: absolute;
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
-  padding: 1px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  z-index: 10000;
-  display: block;
-
-  font-family: Arial;
-  font-size: 13px;
-  text-align: left;
-  pointer-events: none;
-
-  white-space: nowrap;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.nvtooltip {
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(0, 0, 0, 0.5);
-  border-radius: 4px;
-}
-
-/*Give tooltips that old fade in transition by
-    putting a "with-transitions" class on the container div.
-*/
-.nvtooltip.with-transitions,
-.with-transitions .nvtooltip {
-  transition: opacity 50ms linear;
-  -moz-transition: opacity 50ms linear;
-  -webkit-transition: opacity 50ms linear;
-
-  transition-delay: 200ms;
-  -moz-transition-delay: 200ms;
-  -webkit-transition-delay: 200ms;
-}
-
-.nvtooltip.x-nvtooltip,
-.nvtooltip.y-nvtooltip {
-  padding: 8px;
-}
-
-.nvtooltip h3 {
-  margin: 0;
-  padding: 4px 14px;
-  line-height: 18px;
-  font-weight: normal;
-  background-color: rgba(247, 247, 247, 0.75);
-  color: rgba(0, 0, 0, 1);
-  text-align: center;
-
-  border-bottom: 1px solid #ebebeb;
-
-  -webkit-border-radius: 5px 5px 0 0;
-  -moz-border-radius: 5px 5px 0 0;
-  border-radius: 5px 5px 0 0;
-}
-
-.nvtooltip p {
-  margin: 0;
-  padding: 5px 14px;
-  text-align: center;
-}
-
-.nvtooltip span {
-  display: inline-block;
-  margin: 2px 0;
-}
-
-.nvtooltip table {
-  margin: 6px;
-  border-spacing: 0;
-}
-
-.nvtooltip table td {
-  padding: 2px 9px 2px 0;
-  vertical-align: middle;
-}
-
-.nvtooltip table td.key {
-  font-weight: normal;
-}
-.nvtooltip table td.key.total {
-  font-weight: bold;
-}
-.nvtooltip table td.value {
-  text-align: right;
-  font-weight: bold;
-}
-
-.nvtooltip table td.percent {
-  color: darkgray;
-}
-
-.nvtooltip table tr.highlight td {
-  padding: 1px 9px 1px 0;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-top-style: solid;
-  border-top-width: 1px;
-}
-
-.nvtooltip table td.legend-color-guide div {
-  width: 8px;
-  height: 8px;
-  vertical-align: middle;
-}
-
-.nvtooltip table td.legend-color-guide div {
-  width: 12px;
-  height: 12px;
-  border: 1px solid #999;
-}
-
-.nvtooltip .footer {
-  padding: 3px;
-  text-align: center;
-}
-
-.nvtooltip-pending-removal {
-  pointer-events: none;
-  display: none;
-}
-
-/****
-Interactive Layer
-*/
-.nvd3 .nv-interactiveGuideLine {
-  pointer-events: none;
-}
-.nvd3 line.nv-guideline {
-  stroke: #ccc;
-}
+/* stylelint-disable */
+
+/* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */
+.nvd3 .nv-axis {
+  pointer-events: none;
+  opacity: 1;
+}
+
+.nvd3 .nv-axis path {
+  fill: none;
+  stroke: #000;
+  stroke-opacity: 0.75;
+  shape-rendering: crispedges;
+}
+
+.nvd3 .nv-axis path.domain {
+  stroke-opacity: 0.75;
+}
+
+.nvd3 .nv-axis.nv-x path.domain {
+  stroke-opacity: 0;
+}
+
+.nvd3 .nv-axis line {
+  fill: none;
+  stroke: #e5e5e5;
+  shape-rendering: crispedges;
+}
+
+.nvd3 .nv-axis .zero line,
+    /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
+  stroke-opacity: 0.75;
+}
+
+.nvd3 .nv-axis .nv-axisMaxMin text {
+  font-weight: bold;
+}
+
+.nvd3 .x .nv-axis .nv-axisMaxMin text,
+.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
+.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
+  text-anchor: middle;
+}
+
+.nvd3 .nv-axis.nv-disabled {
+  opacity: 0;
+}
+
+.nvd3 .nv-bars rect {
+  fill-opacity: 0.75;
+  transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-bars rect.hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-bars .hover rect {
+  fill: lightblue;
+}
+
+.nvd3 .nv-bars text {
+  fill: rgb(0 0 0 / 0%);
+}
+
+.nvd3 .nv-bars .hover text {
+  fill: rgb(0 0 0 / 100%);
+}
+
+.nvd3 .nv-multibar .nv-groups rect,
+.nvd3 .nv-multibarHorizontal .nv-groups rect,
+.nvd3 .nv-discretebar .nv-groups rect {
+  stroke-opacity: 0;
+  transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-multibar .nv-groups rect:hover,
+.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
+.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
+.nvd3 .nv-discretebar .nv-groups rect:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-discretebar .nv-groups text,
+.nvd3 .nv-multibarHorizontal .nv-groups text {
+  font-weight: bold;
+  fill: rgb(0 0 0 / 100%);
+  stroke: rgb(0 0 0 / 0%);
+}
+
+/* boxplot CSS */
+.nvd3 .nv-boxplot circle {
+  fill-opacity: 0.5;
+}
+
+.nvd3 .nv-boxplot circle:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-boxplot rect:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 line.nv-boxplot-median {
+  stroke: black;
+}
+
+.nv-boxplot-tick:hover {
+  stroke-width: 2.5px;
+}
+
+/* bullet */
+.nvd3.nv-bullet {
+  font: 10px sans-serif;
+}
+
+.nvd3.nv-bullet .nv-measure {
+  fill-opacity: 0.8;
+}
+
+.nvd3.nv-bullet .nv-measure:hover {
+  fill-opacity: 1;
+}
+
+.nvd3.nv-bullet .nv-marker {
+  stroke: #000;
+  stroke-width: 2px;
+}
+
+.nvd3.nv-bullet .nv-markerTriangle {
+  stroke: #000;
+  fill: #fff;
+  stroke-width: 1.5px;
+}
+
+.nvd3.nv-bullet .nv-markerLine {
+  stroke: #000;
+  stroke-width: 1.5px;
+}
+
+.nvd3.nv-bullet .nv-tick line {
+  stroke: #666;
+  stroke-width: 0.5px;
+}
+
+.nvd3.nv-bullet .nv-range.nv-s0 {
+  fill: #eee;
+}
+
+.nvd3.nv-bullet .nv-range.nv-s1 {
+  fill: #ddd;
+}
+
+.nvd3.nv-bullet .nv-range.nv-s2 {
+  fill: #ccc;
+}
+
+.nvd3.nv-bullet .nv-title {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.nvd3.nv-bullet .nv-subtitle {
+  fill: #999;
+}
+
+.nvd3.nv-bullet .nv-range {
+  fill: #bababa;
+  fill-opacity: 0.4;
+}
+
+.nvd3.nv-bullet .nv-range:hover {
+  fill-opacity: 0.7;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
+  stroke-width: 1px;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
+  stroke-width: 2px;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
+  stroke: #2ca02c;
+  fill: #2ca02c;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
+  stroke: #d62728;
+  fill: #d62728;
+}
+
+.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
+  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks line {
+  stroke: #333;
+}
+
+.nv-force-node {
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
+
+.nv-force-link {
+  stroke: #999;
+  stroke-opacity: 0.6;
+}
+
+.nv-force-node text {
+  stroke-width: 0;
+}
+
+.nvd3 .nv-legend .nv-disabled rect {
+  /* fill-opacity: 0; */
+}
+
+.nvd3 .nv-check-box .nv-box {
+  fill-opacity: 0;
+  stroke-width: 2;
+}
+
+.nvd3 .nv-check-box .nv-check {
+  fill-opacity: 0;
+  stroke-width: 4;
+}
+
+.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
+  opacity: 0;
+}
+
+/* line plus bar */
+.nvd3.nv-linePlusBar .nv-bar rect {
+  fill-opacity: 0.75;
+}
+
+.nvd3.nv-linePlusBar .nv-bar rect:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-groups path.nv-line {
+  fill: none;
+}
+
+.nvd3 .nv-groups path.nv-area {
+  stroke: none;
+}
+
+.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
+  fill-opacity: 0.5 !important;
+  stroke-opacity: 0.5 !important;
+}
+
+.with-transitions .nvd3 .nv-groups .nv-point {
+  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-scatter .nv-groups .nv-point.hover,
+.nvd3 .nv-groups .nv-point.hover {
+  stroke-width: 7px;
+  fill-opacity: 0.95 !important;
+  stroke-opacity: 0.95 !important;
+}
+
+.nvd3 .nv-point-paths path {
+  stroke: #aaa;
+  stroke-opacity: 0;
+  fill: #eee;
+  fill-opacity: 0;
+}
+
+.nvd3 .nv-indexLine {
+  cursor: ew-resize;
+}
+
+/********************
+ * SVG CSS
+ */
+
+/********************
+  Default CSS for an svg element nvd3 used
+*/
+svg.nvd3-svg, svg.nvd3-iddle {
+  -webkit-touch-callout: none;
+  user-select: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/********************
+  Box shadow and border radius styling
+*/
+.nvtooltip.with-3d-shadow,
+.with-3d-shadow .nvtooltip {
+  box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
+  border-radius: 5px;
+}
+
+.nvd3 text {
+  font: normal 12px Arial;
+}
+
+.nvd3 .title {
+  font: bold 14px Arial;
+}
+
+.nvd3 .nv-background {
+  fill: white;
+  fill-opacity: 0;
+}
+
+.nvd3.nv-noData {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+/**********
+*  Brush
+*/
+
+.nv-brush .extent {
+  fill-opacity: 0.125;
+  shape-rendering: crispedges;
+}
+
+.nv-brush .resize path {
+  fill: #eee;
+  stroke: #666;
+}
+
+/**********
+*  Legend
+*/
+
+.nvd3 .nv-legend .nv-series {
+  cursor: pointer;
+}
+
+.nvd3 .nv-legend .nv-disabled circle {
+  fill-opacity: 0;
+}
+
+/* focus */
+.nvd3 .nv-brush .extent {
+  fill-opacity: 0 !important;
+}
+
+.nvd3 .nv-brushBackground rect {
+  stroke: #000;
+  stroke-width: 0.4;
+  fill: #fff;
+  fill-opacity: 0.7;
+}
+
+/**********
+*  Print
+*/
+
+@media print {
+  .nvd3 text {
+    stroke-width: 0;
+    fill-opacity: 1;
+  }
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
+  stroke-width: 1px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
+  stroke-width: 2px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
+  stroke: #2ca02c;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
+  stroke: #d62728;
+}
+
+.nvd3 .background path {
+  fill: none;
+  stroke: #eee;
+  stroke-opacity: 0.4;
+  shape-rendering: crispedges;
+}
+
+.nvd3 .foreground path {
+  fill: none;
+  stroke-opacity: 0.7;
+}
+
+.nvd3 .nv-parallelCoordinates-brush .extent {
+  fill: #fff;
+  fill-opacity: 0.6;
+  stroke: gray;
+  shape-rendering: crispedges;
+}
+
+.nvd3 .nv-parallelCoordinates .hover {
+  fill-opacity: 1;
+  stroke-width: 3px;
+}
+
+.nvd3 .missingValuesline line {
+  fill: none;
+  stroke: black;
+  stroke-width: 1;
+  stroke-opacity: 1;
+  stroke-dasharray: 5, 5;
+}
+
+.nvd3.nv-pie path {
+  stroke-opacity: 0;
+  transition: fill-opacity 250ms linear, stroke-width 250ms linear,
+    stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-pie .nv-pie-title {
+  font-size: 24px;
+  fill: rgb(19 196 249 / 59%);
+}
+
+.nvd3.nv-pie .nv-slice text {
+  stroke: #000;
+  stroke-width: 0;
+}
+
+.nvd3.nv-pie path {
+  stroke: #fff;
+  stroke-width: 1px;
+  stroke-opacity: 1;
+}
+
+.nvd3.nv-pie path {
+  fill-opacity: 0.7;
+}
+
+.nvd3.nv-pie .hover path {
+  fill-opacity: 1;
+}
+
+.nvd3.nv-pie .nv-label {
+  pointer-events: none;
+}
+
+.nvd3.nv-pie .nv-label rect {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+/* scatter */
+.nvd3 .nv-groups .nv-point.hover {
+  stroke-width: 20px;
+  stroke-opacity: 0.5;
+}
+
+.nvd3 .nv-scatter .nv-point.hover {
+  fill-opacity: 1;
+}
+
+.nv-noninteractive {
+  pointer-events: none;
+}
+
+.nv-distx,
+.nv-disty {
+  pointer-events: none;
+}
+
+/* sparkline */
+.nvd3.nv-sparkline path {
+  fill: none;
+}
+
+.nvd3.nv-sparklineplus g.nv-hoverValue {
+  pointer-events: none;
+}
+
+.nvd3.nv-sparklineplus .nv-hoverValue line {
+  stroke: #333;
+  stroke-width: 1.5px;
+}
+
+.nvd3.nv-sparklineplus,
+.nvd3.nv-sparklineplus g {
+  pointer-events: all;
+}
+
+.nvd3 .nv-hoverArea {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+.nvd3.nv-sparklineplus .nv-xValue,
+.nvd3.nv-sparklineplus .nv-yValue {
+  stroke-width: 0;
+  font-size: 0.9em;
+  font-weight: normal;
+}
+
+.nvd3.nv-sparklineplus .nv-yValue {
+  stroke: #f66;
+}
+
+.nvd3.nv-sparklineplus .nv-maxValue {
+  stroke: #2ca02c;
+  fill: #2ca02c;
+}
+
+.nvd3.nv-sparklineplus .nv-minValue {
+  stroke: #d62728;
+  fill: #d62728;
+}
+
+.nvd3.nv-sparklineplus .nv-currentValue {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+/* stacked area */
+.nvd3.nv-stackedarea path.nv-area {
+  fill-opacity: 0.7;
+  stroke-opacity: 0;
+  transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-stackedarea path.nv-area.hover {
+  fill-opacity: 0.9;
+}
+
+.nvd3.nv-stackedarea .nv-groups .nv-point {
+  stroke-opacity: 0;
+  fill-opacity: 0;
+}
+
+.nvtooltip {
+  position: absolute;
+  background-color: rgb(255 255 255 / 100%);
+  color: rgb(0 0 0 / 100%);
+  padding: 1px;
+  border: 1px solid rgb(0 0 0 / 20%);
+  z-index: 10000;
+  display: block;
+  font-family: Arial;
+  font-size: 13px;
+  text-align: left;
+  pointer-events: none;
+  white-space: nowrap;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.nvtooltip {
+  background: rgb(255 255 255 / 80%);
+  border: 1px solid rgb(0 0 0 / 50%);
+  border-radius: 4px;
+}
+
+/* Give tooltips that old fade in transition by
+    putting a "with-transitions" class on the container div.
+*/
+.nvtooltip.with-transitions,
+.with-transitions .nvtooltip {
+  transition: opacity 50ms linear;
+  transition-delay: 200ms;
+}
+
+.nvtooltip.x-nvtooltip,
+.nvtooltip.y-nvtooltip {
+  padding: 8px;
+}
+
+.nvtooltip h3 {
+  margin: 0;
+  padding: 4px 14px;
+  line-height: 18px;
+  font-weight: normal;
+  background-color: rgb(247 247 247 / 75%);
+  color: rgb(0 0 0 / 100%);
+  text-align: center;
+  border-bottom: 1px solid #ebebeb;
+  border-radius: 5px 5px 0 0;
+}
+
+.nvtooltip p {
+  margin: 0;
+  padding: 5px 14px;
+  text-align: center;
+}
+
+.nvtooltip span {
+  display: inline-block;
+  margin: 2px 0;
+}
+
+.nvtooltip table {
+  margin: 6px;
+  border-spacing: 0;
+}
+
+.nvtooltip table td {
+  padding: 2px 9px 2px 0;
+  vertical-align: middle;
+}
+
+.nvtooltip table td.key {
+  font-weight: normal;
+}
+
+.nvtooltip table td.key.total {
+  font-weight: bold;
+}
+
+.nvtooltip table td.value {
+  text-align: right;
+  font-weight: bold;
+}
+
+.nvtooltip table td.percent {
+  color: darkgray;
+}
+
+.nvtooltip table tr.highlight td {
+  padding: 1px 9px 1px 0;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+.nvtooltip table td.legend-color-guide div {
+  width: 8px;
+  height: 8px;
+  vertical-align: middle;
+}
+
+.nvtooltip table td.legend-color-guide div {
+  width: 12px;
+  height: 12px;
+  border: 1px solid #999;
+}
+
+.nvtooltip .footer {
+  padding: 3px;
+  text-align: center;
+}
+
+.nvtooltip-pending-removal {
+  pointer-events: none;
+  display: none;
+}
+
+/****
+Interactive Layer
+*/
+.nvd3 .nv-interactiveGuideLine {
+  pointer-events: none;
+}
+
+.nvd3 line.nv-guideline {
+  stroke: #ccc;
+}
diff --git a/services/web/frontend/stylesheets/components/nvd3_override.less b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3_override.scss
similarity index 74%
rename from services/web/frontend/stylesheets/components/nvd3_override.less
rename to services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3_override.scss
index 929a99e9db..72c3e2f99a 100644
--- a/services/web/frontend/stylesheets/components/nvd3_override.less
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/nvd3_override.scss
@@ -5,12 +5,9 @@
         opacity: 0;
       }
     }
+
     path.domain {
       opacity: 0;
     }
   }
 }
-
-svg.nvd3-iddle {
-  &:extend(svg.nvd3-svg);
-}
diff --git a/services/web/frontend/stylesheets/app/publisher-hub.less b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/publisher-hub.scss
similarity index 52%
rename from services/web/frontend/stylesheets/app/publisher-hub.less
rename to services/web/frontend/stylesheets/bootstrap-5/modules/metrics/publisher-hub.scss
index 8d7e5ea7eb..f59b33e6ef 100644
--- a/services/web/frontend/stylesheets/app/publisher-hub.less
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/metrics/publisher-hub.scss
@@ -2,48 +2,66 @@
   .recent-activity {
     .hub-big-number {
       text-align: right;
-      padding-right: 15px;
+      padding-right: var(--spacing-06);
     }
   }
 
   #templates-container {
     width: 100%;
+
     tr {
-      border: 1px solid @ol-blue-gray-0;
+      border: 1px solid var(--bg-light-secondary);
     }
+
     td {
-      padding: 15px;
+      padding: var(--spacing-06);
     }
+
     td:last-child {
       text-align: right;
     }
+
     .title-cell {
       max-width: 300px;
     }
+
     .title-text {
       font-weight: bold;
     }
+
     .hub-big-number {
       width: 60%;
-      padding-right: 10px;
-      padding-top: 10px;
+      padding-right: var(--spacing-04);
+      padding-top: var(--spacing-04);
       text-align: right;
     }
+
     .hub-number-label,
     .since {
       width: 35%;
       float: right;
-      @media screen and (max-width: 940px) {
+
+      @include media-breakpoint-down(md) {
         float: none;
       }
     }
+
     .hub-long-big-number {
-      padding-right: 40px;
+      padding-right: var(--spacing-10);
     }
+
     .created-on {
-      color: @gray-light;
+      @include body-sm;
+
+      color: var(--content-disabled);
       font-style: italic;
-      font-size: 14px;
     }
   }
+
+  .overbox {
+    margin: 0;
+    padding: var(--spacing-10) var(--spacing-07);
+    background: var(--white);
+    border: 1px solid var(--content-disabled);
+  }
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss
index e2c807e928..a4bfa532e3 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss
@@ -91,3 +91,8 @@
     color: var(--yellow-50);
   }
 }
+
+.admin-page summary {
+  // firefox does not show markers for block items
+  display: list-item;
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
index 83b6fbd28a..1bf487eeca 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
@@ -85,7 +85,7 @@
       }
 
       &:hover {
-        background-color: $bg-light-secondary;
+        background-color: var(--bg-light-secondary);
       }
 
       .welcome-message-card-img {
diff --git a/services/web/frontend/stylesheets/components/daterange-picker.less b/services/web/frontend/stylesheets/components/daterange-picker.less
deleted file mode 100644
index 43e0e3ba55..0000000000
--- a/services/web/frontend/stylesheets/components/daterange-picker.less
+++ /dev/null
@@ -1,656 +0,0 @@
-//
-// A stylesheet for use with Bootstrap 3.x
-// @author: Dan Grossman http://www.dangrossman.info/
-// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
-// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
-// @website: https://www.improvely.com/
-//
-
-//
-// VARIABLES
-//
-
-//
-// Settings
-
-// The class name to contain everything within.
-@arrow-size: 7px;
-
-//
-// Colors
-@daterangepicker-color: @brand-primary;
-@daterangepicker-bg-color: #fff;
-
-@daterangepicker-cell-color: @daterangepicker-color;
-@daterangepicker-cell-border-color: transparent;
-@daterangepicker-cell-bg-color: @daterangepicker-bg-color;
-
-@daterangepicker-cell-hover-color: @daterangepicker-color;
-@daterangepicker-cell-hover-border-color: @daterangepicker-cell-border-color;
-@daterangepicker-cell-hover-bg-color: #eee;
-
-@daterangepicker-in-range-color: #000;
-@daterangepicker-in-range-border-color: transparent;
-@daterangepicker-in-range-bg-color: #ebf4f8;
-
-@daterangepicker-active-color: #fff;
-@daterangepicker-active-bg-color: #138a07;
-@daterangepicker-active-border-color: transparent;
-
-@daterangepicker-unselected-color: #999;
-@daterangepicker-unselected-border-color: transparent;
-@daterangepicker-unselected-bg-color: #fff;
-
-//
-// daterangepicker
-@daterangepicker-width: 278px;
-@daterangepicker-padding: 4px;
-@daterangepicker-z-index: 3000;
-
-@daterangepicker-border-size: 1px;
-@daterangepicker-border-color: #ccc;
-@daterangepicker-border-radius: 4px;
-
-//
-// Calendar
-@daterangepicker-calendar-margin: @daterangepicker-padding;
-@daterangepicker-calendar-bg-color: @daterangepicker-bg-color;
-
-@daterangepicker-calendar-border-size: 1px;
-@daterangepicker-calendar-border-color: @daterangepicker-bg-color;
-@daterangepicker-calendar-border-radius: @daterangepicker-border-radius;
-
-//
-// Calendar Cells
-@daterangepicker-cell-size: 20px;
-@daterangepicker-cell-width: @daterangepicker-cell-size;
-@daterangepicker-cell-height: @daterangepicker-cell-size;
-
-@daterangepicker-cell-border-radius: @daterangepicker-calendar-border-radius;
-@daterangepicker-cell-border-size: 1px;
-
-//
-// Dropdowns
-@daterangepicker-dropdown-z-index: @daterangepicker-z-index + 1;
-
-//
-// Controls
-@daterangepicker-control-height: 30px;
-@daterangepicker-control-line-height: @daterangepicker-control-height;
-@daterangepicker-control-color: #555;
-
-@daterangepicker-control-border-size: 1px;
-@daterangepicker-control-border-color: #ccc;
-@daterangepicker-control-border-radius: 4px;
-
-@daterangepicker-control-active-border-size: 1px;
-@daterangepicker-control-active-border-color: @brand-primary;
-@daterangepicker-control-active-border-radius: @daterangepicker-control-border-radius;
-
-@daterangepicker-control-disabled-color: #ccc;
-
-//
-// Ranges
-@daterangepicker-ranges-color: @brand-primary;
-@daterangepicker-ranges-bg-color: daterangepicker-ranges-color;
-
-@daterangepicker-ranges-border-size: 1px;
-@daterangepicker-ranges-border-color: @daterangepicker-ranges-bg-color;
-@daterangepicker-ranges-border-radius: @daterangepicker-border-radius;
-
-@daterangepicker-ranges-hover-color: #fff;
-@daterangepicker-ranges-hover-bg-color: @daterangepicker-ranges-color;
-@daterangepicker-ranges-hover-border-size: @daterangepicker-ranges-border-size;
-@daterangepicker-ranges-hover-border-color: @daterangepicker-ranges-hover-bg-color;
-@daterangepicker-ranges-hover-border-radius: @daterangepicker-border-radius;
-
-@daterangepicker-ranges-active-border-size: @daterangepicker-ranges-border-size;
-@daterangepicker-ranges-active-border-color: @daterangepicker-ranges-bg-color;
-@daterangepicker-ranges-active-border-radius: @daterangepicker-border-radius;
-
-//
-// STYLESHEETS
-//
-.daterangepicker {
-  position: absolute;
-  color: @daterangepicker-color;
-  background-color: @daterangepicker-bg-color;
-  border-radius: @daterangepicker-border-radius;
-  width: @daterangepicker-width;
-  padding: @daterangepicker-padding;
-  margin-top: @daterangepicker-border-size;
-
-  // TODO: Should these be parameterized??
-  // top: 100px;
-  // left: 20px;
-
-  @arrow-prefix-size: @arrow-size;
-  @arrow-suffix-size: (@arrow-size - @daterangepicker-border-size);
-
-  &:before,
-  &:after {
-    position: absolute;
-    display: inline-block;
-
-    border-bottom-color: rgba(0, 0, 0, 0.2);
-    content: '';
-  }
-
-  &:before {
-    top: -@arrow-prefix-size;
-
-    border-right: @arrow-prefix-size solid transparent;
-    border-left: @arrow-prefix-size solid transparent;
-    border-bottom: @arrow-prefix-size solid @daterangepicker-border-color;
-  }
-
-  &:after {
-    top: -@arrow-suffix-size;
-
-    border-right: @arrow-suffix-size solid transparent;
-    border-bottom: @arrow-suffix-size solid @daterangepicker-bg-color;
-    border-left: @arrow-suffix-size solid transparent;
-  }
-
-  &.opensleft {
-    &:before {
-      // TODO: Make this relative to prefix size.
-      right: @arrow-prefix-size + 2px;
-    }
-
-    &:after {
-      // TODO: Make this relative to suffix size.
-      right: @arrow-suffix-size + 4px;
-    }
-  }
-
-  &.openscenter {
-    &:before {
-      left: 0;
-      right: 0;
-      width: 0;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    &:after {
-      left: 0;
-      right: 0;
-      width: 0;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-
-  &.opensright {
-    &:before {
-      // TODO: Make this relative to prefix size.
-      left: @arrow-prefix-size + 2px;
-    }
-
-    &:after {
-      // TODO: Make this relative to suffix size.
-      left: @arrow-suffix-size + 4px;
-    }
-  }
-
-  &.dropup {
-    margin-top: -5px;
-
-    // NOTE: Note sure why these are special-cased.
-    &:before {
-      top: initial;
-      bottom: -@arrow-prefix-size;
-      border-bottom: initial;
-      border-top: @arrow-prefix-size solid @daterangepicker-border-color;
-    }
-
-    &:after {
-      top: initial;
-      bottom: -@arrow-suffix-size;
-      border-bottom: initial;
-      border-top: @arrow-suffix-size solid @daterangepicker-bg-color;
-    }
-  }
-
-  &.dropdown-menu {
-    max-width: none;
-    z-index: @daterangepicker-dropdown-z-index;
-  }
-
-  &.single {
-    .ranges,
-    .calendar {
-      float: none;
-    }
-  }
-
-  /* Calendars */
-  &.show-calendar {
-    .calendar {
-      display: block;
-    }
-  }
-
-  .calendar {
-    display: none;
-    max-width: @daterangepicker-width - (@daterangepicker-calendar-margin * 2);
-    margin: @daterangepicker-calendar-margin;
-
-    &.single {
-      .calendar-table {
-        border: none;
-      }
-    }
-
-    th,
-    td {
-      white-space: nowrap;
-      text-align: center;
-
-      // TODO: Should this actually be hard-coded?
-      min-width: 32px;
-    }
-  }
-
-  .calendar-table {
-    border: @daterangepicker-calendar-border-size solid
-      @daterangepicker-calendar-border-color;
-    padding: @daterangepicker-calendar-margin;
-    border-radius: @daterangepicker-calendar-border-radius;
-    background-color: @daterangepicker-calendar-bg-color;
-  }
-
-  table {
-    width: 100%;
-    margin: 0;
-  }
-
-  td,
-  th {
-    text-align: center;
-    width: @daterangepicker-cell-width;
-    height: @daterangepicker-cell-height;
-    border-radius: @daterangepicker-cell-border-radius;
-    border: @daterangepicker-cell-border-size solid
-      @daterangepicker-cell-border-color;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &.available {
-      &:hover {
-        background-color: @daterangepicker-cell-hover-bg-color;
-        border-color: @daterangepicker-cell-hover-border-color;
-        color: @daterangepicker-cell-hover-color;
-      }
-    }
-
-    &.week {
-      font-size: 80%;
-      color: #ccc;
-    }
-  }
-
-  td {
-    &.off {
-      &,
-      &.in-range,
-      &.start-date,
-      &.end-date {
-        background-color: @daterangepicker-unselected-bg-color;
-        border-color: @daterangepicker-unselected-border-color;
-        color: @daterangepicker-unselected-color;
-      }
-    }
-
-    //
-    // Date Range
-    &.in-range {
-      background-color: @daterangepicker-in-range-bg-color;
-      border-color: @daterangepicker-in-range-border-color;
-      color: @daterangepicker-in-range-color;
-
-      // TODO: Should this be static or should it be parameterized?
-      border-radius: 0;
-    }
-
-    &.start-date {
-      border-radius: @daterangepicker-cell-border-radius 0 0
-        @daterangepicker-cell-border-radius;
-    }
-
-    &.end-date {
-      border-radius: 0 @daterangepicker-cell-border-radius
-        @daterangepicker-cell-border-radius 0;
-    }
-
-    &.start-date.end-date {
-      border-radius: @daterangepicker-cell-border-radius;
-    }
-
-    &.active {
-      &,
-      &:hover {
-        background-color: @daterangepicker-active-bg-color;
-        border-color: @daterangepicker-active-border-color;
-        color: @daterangepicker-active-color;
-      }
-    }
-  }
-
-  th {
-    &.month {
-      width: auto;
-    }
-  }
-
-  //
-  // Disabled Controls
-  //
-  td,
-  option {
-    &.disabled {
-      color: #999;
-      cursor: not-allowed;
-      text-decoration: line-through;
-    }
-  }
-
-  select {
-    &.monthselect,
-    &.yearselect {
-      font-size: 12px;
-      padding: 1px;
-      height: auto;
-      margin: 0;
-      cursor: default;
-    }
-
-    &.monthselect {
-      margin-right: 2%;
-      width: 56%;
-    }
-
-    &.yearselect {
-      width: 40%;
-    }
-
-    &.hourselect,
-    &.minuteselect,
-    &.secondselect,
-    &.ampmselect {
-      width: 50px;
-      margin-bottom: 0;
-    }
-  }
-
-  //
-  // Text Input Controls (above calendar)
-  //
-  .input-mini {
-    border: @daterangepicker-control-border-size solid
-      @daterangepicker-control-border-color;
-    border-radius: @daterangepicker-control-border-radius;
-    color: @daterangepicker-control-color;
-    height: @daterangepicker-control-line-height;
-    line-height: @daterangepicker-control-height;
-    display: block;
-    vertical-align: middle;
-
-    // TODO: Should these all be static, too??
-    margin: 0 0 5px 0;
-    padding: 0 6px 0 28px;
-    width: 100%;
-
-    &.active {
-      border: @daterangepicker-control-active-border-size solid
-        @daterangepicker-control-active-border-color;
-      border-radius: @daterangepicker-control-active-border-radius;
-    }
-  }
-
-  .daterangepicker_input {
-    position: relative;
-    padding-left: 0;
-
-    i {
-      position: absolute;
-
-      // NOTE: These appear to be eyeballed to me...
-      left: 8px;
-      top: 10px;
-    }
-  }
-  &.rtl {
-    .input-mini {
-      padding-right: 28px;
-      padding-left: 6px;
-    }
-    .daterangepicker_input i {
-      left: auto;
-      right: 8px;
-    }
-  }
-
-  //
-  // Time Picker
-  //
-  .calendar-time {
-    text-align: center;
-    margin: 5px auto;
-    line-height: @daterangepicker-control-line-height;
-    position: relative;
-    padding-left: 28px;
-
-    select {
-      &.disabled {
-        color: @daterangepicker-control-disabled-color;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-//
-// Predefined Ranges
-//
-
-.ranges {
-  font-size: 11px;
-  float: none;
-  margin: 4px;
-  text-align: left;
-
-  ul {
-    list-style: none;
-    margin: 0 auto;
-    padding: 0;
-    width: 100%;
-  }
-
-  li {
-    font-size: 13px;
-    background-color: @daterangepicker-ranges-bg-color;
-    border: @daterangepicker-ranges-border-size solid
-      @daterangepicker-ranges-border-color;
-    border-radius: @daterangepicker-ranges-border-radius;
-    color: @daterangepicker-ranges-color;
-    padding: 3px 12px;
-    margin-bottom: 8px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: @daterangepicker-ranges-hover-bg-color;
-      color: @daterangepicker-ranges-hover-color;
-    }
-
-    &.active {
-      background-color: @daterangepicker-ranges-hover-bg-color;
-      border: @daterangepicker-ranges-hover-border-size solid
-        @daterangepicker-ranges-hover-border-color;
-      color: @daterangepicker-ranges-hover-color;
-    }
-  }
-}
-
-/*  Larger Screen Styling */
-@media (min-width: 564px) {
-  .daterangepicker {
-    .glyphicon {
-      font-family: FontAwesome;
-    }
-    .glyphicon-chevron-left:before {
-      content: '\f053';
-    }
-    .glyphicon-chevron-right:before {
-      content: '\f054';
-    }
-    .glyphicon-calendar:before {
-      content: '\f073';
-    }
-
-    width: auto;
-
-    .ranges {
-      ul {
-        width: 160px;
-      }
-    }
-
-    &.single {
-      .ranges {
-        ul {
-          width: 100%;
-        }
-      }
-
-      .calendar.left {
-        clear: none;
-      }
-
-      &.ltr {
-        .ranges,
-        .calendar {
-          float: left;
-        }
-      }
-      &.rtl {
-        .ranges,
-        .calendar {
-          float: right;
-        }
-      }
-    }
-
-    &.ltr {
-      direction: ltr;
-      text-align: left;
-      .calendar {
-        &.left {
-          clear: left;
-          margin-right: 0;
-
-          .calendar-table {
-            border-right: none;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &.right {
-          margin-left: 0;
-
-          .calendar-table {
-            border-left: none;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
-        }
-      }
-
-      .left .daterangepicker_input {
-        padding-right: 12px;
-      }
-
-      .calendar.left .calendar-table {
-        padding-right: 12px;
-      }
-
-      .ranges,
-      .calendar {
-        float: left;
-      }
-    }
-    &.rtl {
-      direction: rtl;
-      text-align: right;
-      .calendar {
-        &.left {
-          clear: right;
-          margin-left: 0;
-
-          .calendar-table {
-            border-left: none;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
-        }
-
-        &.right {
-          margin-right: 0;
-
-          .calendar-table {
-            border-right: none;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-        }
-      }
-
-      .left .daterangepicker_input {
-        padding-left: 12px;
-      }
-
-      .calendar.left .calendar-table {
-        padding-left: 12px;
-      }
-
-      .ranges,
-      .calendar {
-        text-align: right;
-        float: right;
-      }
-    }
-  }
-}
-
-@media (min-width: 730px) {
-  /* force the calendar to display on one row */
-  &.show-calendar {
-    min-width: 658px; /* width of all contained elements, IE/Edge fallback */
-    width: -moz-max-content;
-    width: -webkit-max-content;
-    width: max-content;
-  }
-
-  .daterangepicker {
-    .ranges {
-      width: auto;
-    }
-    &.ltr {
-      .ranges {
-        float: left;
-        clear: none !important;
-      }
-    }
-    &.rtl {
-      .ranges {
-        float: right;
-      }
-    }
-
-    .calendar {
-      clear: none !important;
-    }
-  }
-}
diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less
index d42a2ab502..fd8c308117 100644
--- a/services/web/frontend/stylesheets/main-style.less
+++ b/services/web/frontend/stylesheets/main-style.less
@@ -61,8 +61,6 @@
 @import 'components/hover.less';
 @import 'components/ui-select.less';
 @import 'components/input-suggestions.less';
-@import 'components/nvd3.less';
-@import 'components/nvd3_override.less';
 @import 'components/infinite-scroll.less';
 @import 'components/expand-collapse.less';
 @import 'components/beta-badges.less';
@@ -82,7 +80,6 @@
 @import 'components/modals.less';
 @import 'components/tooltip.less';
 @import 'components/popovers.less';
-@import 'components/daterange-picker';
 @import 'components/lists.less';
 @import 'components/overbox.less';
 @import 'components/embed-responsive.less';
@@ -118,7 +115,6 @@
 @import 'app/invite.less';
 @import 'app/error-pages.less';
 @import 'app/editor/history-v2.less';
-@import 'app/metrics.less';
 @import 'app/open-in-overleaf.less';
 @import 'app/primary-email-check';
 @import 'app/grammarly';
@@ -126,9 +122,6 @@
 @import 'app/ol-chat.less';
 @import 'app/templates-v2.less';
 @import 'app/login-register.less';
-@import 'app/institution-hub.less';
-@import 'app/publisher-hub.less';
-@import 'app/admin-hub.less';
 @import 'app/import.less';
 @import 'app/website-redesign.less';
 @import 'app/add-secondary-email-prompt.less';