From 2846821526f89fa4b9b13eece8fc5ca86cc0e8ba Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 28 Feb 2024 15:30:36 -0500
Subject: [PATCH 01/12] change base font size to 16 in spectre.css overrides

---
 client/src/styles/spectre.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/styles/spectre.scss b/client/src/styles/spectre.scss
index f60cf045f..1b9eda550 100644
--- a/client/src/styles/spectre.scss
+++ b/client/src/styles/spectre.scss
@@ -9,6 +9,10 @@
 @import "spectre.scss/spectre-icons.scss";
 
 // various overwrites
+html {
+  font-size: 16px;
+}
+
 a {
   text-decoration: underline;
   color: darken($justfix-blue, 10%);
@@ -18,12 +22,12 @@ a:focus,
 .form-input:focus,
 .btn:focus {
   // @include control-shadow($gray);
-  box-shadow: 0 0 0 0.1rem fade-in($gray-light, 0.15);
+  box-shadow: 0 0 0 0.06rem fade-in($gray-light, 0.15);
   border-color: $gray-dark;
 }
 
 .menu {
-  box-shadow: 0 0.1rem (0.1rem+0.1rem) * 2 fade-in($gray-light, 0.3);
+  box-shadow: 0 0.06rem (0.06rem+0.06rem) * 2 fade-in($gray-light, 0.3);
 }
 
 p {

From 062cd8675192f7f19573d7238be3ab6a915eaf8c Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Wed, 28 Feb 2024 15:31:20 -0500
Subject: [PATCH 02/12] update all rem sizes with `Math.round($1 / 1.6 * 100) /
 100`

---
 client/src/components/CloseButton.tsx       |  12 +-
 client/src/containers/PrivacyPolicyPage.tsx |   2 +-
 client/src/containers/TermsOfUsePage.tsx    |   2 +-
 client/src/styles/AboutPage.scss            |   2 +-
 client/src/styles/Accordion.scss            |   4 +-
 client/src/styles/AccountSettingsPage.scss  |  30 ++--
 client/src/styles/AddressPage.scss          |   4 +-
 client/src/styles/AddressSearch.scss        |   2 +-
 client/src/styles/AddressToolbar.scss       |   6 +-
 client/src/styles/App.scss                  |  36 ++---
 client/src/styles/DetailView.scss           |  48 +++---
 client/src/styles/Dropdown.scss             |  16 +-
 client/src/styles/EmailAlertSignup.scss     |  20 +--
 client/src/styles/FeatureCalloutWidget.scss |   6 +-
 client/src/styles/ForgotPasswordPage.scss   |  18 +--
 client/src/styles/HomePage.scss             |  38 ++---
 client/src/styles/Indicators.scss           |  42 ++---
 client/src/styles/LandlordSearch.scss       |   4 +-
 client/src/styles/LegalFooter.scss          |   2 +-
 client/src/styles/Login.scss                |  40 ++---
 client/src/styles/Modal.scss                |   8 +-
 client/src/styles/NotRegisteredPage.scss    |  14 +-
 client/src/styles/Password.scss             |  10 +-
 client/src/styles/PortfolioFilters.scss     | 166 ++++++++++----------
 client/src/styles/PortfolioTable.scss       |  46 +++---
 client/src/styles/PropertiesList.scss       |   2 +-
 client/src/styles/PropertiesMap.scss        |  34 ++--
 client/src/styles/PropertiesSummary.scss    |  28 ++--
 client/src/styles/Subscribe.scss            |   2 +-
 client/src/styles/UserSetting.scss          |   2 +-
 client/src/styles/_alert.scss               |  30 ++--
 client/src/styles/_button.scss              |  30 ++--
 client/src/styles/_datatable.scss           |  14 +-
 client/src/styles/_input.scss               |   2 +-
 client/src/styles/_minmaxselect.scss        |  44 +++---
 client/src/styles/_modal.scss               |  10 +-
 client/src/styles/_multiselect.scss         |  56 +++----
 client/src/styles/_scrollbar.scss           |   2 +-
 client/src/styles/_tabs.scss                |   4 +-
 client/src/styles/_typography.scss          |  26 +--
 client/src/styles/_vars.scss                |  26 +--
 41 files changed, 445 insertions(+), 445 deletions(-)

diff --git a/client/src/components/CloseButton.tsx b/client/src/components/CloseButton.tsx
index edce2e32f..0858b2461 100644
--- a/client/src/components/CloseButton.tsx
+++ b/client/src/components/CloseButton.tsx
@@ -7,15 +7,15 @@ import classNames from "classnames";
 type CloseButtonProps = withI18nProps & {
   onClick: () => void;
   /**
-   * Stroke width for the X svg (Default: "0.1rem")
+   * Stroke width for the X svg (Default: "0.06rem")
    */
   strokeWidth?: number | string;
   /**
-   * Width for the X svg (Default: "1.6rem")
+   * Width for the X svg (Default: "1rem")
    */
   width?: number | string;
   /**
-   * Height for the X svg (Default: "1.6rem")
+   * Height for the X svg (Default: "1rem")
    */
   height?: number | string;
   className?: string;
@@ -29,9 +29,9 @@ export const CloseButton = withI18n()(
   ({
     i18n,
     onClick,
-    strokeWidth = "0.1rem",
-    height = "1.6rem",
-    width = "1.6rem",
+    strokeWidth = "0.06rem",
+    height = "1rem",
+    width = "1rem",
     className,
   }: CloseButtonProps) => (
     <button
diff --git a/client/src/containers/PrivacyPolicyPage.tsx b/client/src/containers/PrivacyPolicyPage.tsx
index 44f413cb9..a751c1cf4 100644
--- a/client/src/containers/PrivacyPolicyPage.tsx
+++ b/client/src/containers/PrivacyPolicyPage.tsx
@@ -10,7 +10,7 @@ const PrivacyPolicyPage = withI18n()((props: withI18nProps) => {
     <Page title={i18n._(t`Privacy policy`)}>
       <div className="PrivacyPolicy Page">
         <div className="Page__content">
-          <h4 style={{ fontSize: "3.2rem" }}>WhoOwnsWhat — Privacy Policy</h4>
+          <h4 style={{ fontSize: "2rem" }}>WhoOwnsWhat — Privacy Policy</h4>
           <p>Effective Date: October 18th, 2018 </p>
           <h4> Introduction </h4>
           <p>
diff --git a/client/src/containers/TermsOfUsePage.tsx b/client/src/containers/TermsOfUsePage.tsx
index 631c5531f..df49eab0d 100644
--- a/client/src/containers/TermsOfUsePage.tsx
+++ b/client/src/containers/TermsOfUsePage.tsx
@@ -10,7 +10,7 @@ const TermsOfUsePage = withI18n()((props: withI18nProps) => {
     <Page title={i18n._(t`Terms of use`)}>
       <div className="TermsOfUse Page">
         <div className="Page__content">
-          <h4 style={{ fontSize: "3.2rem" }}>WhoOwnsWhat — Terms of Use</h4>
+          <h4 style={{ fontSize: "2rem" }}>WhoOwnsWhat — Terms of Use</h4>
           <p> Effective Date: October 18th, 2018 </p>
           <p>
             <b>
diff --git a/client/src/styles/AboutPage.scss b/client/src/styles/AboutPage.scss
index 0449e9503..73b41e7c2 100644
--- a/client/src/styles/AboutPage.scss
+++ b/client/src/styles/AboutPage.scss
@@ -5,7 +5,7 @@
     max-width: 60%;
     margin-left: 0;
     margin-right: 0;
-    margin-bottom: 1.25rem;
+    margin-bottom: 0.78rem;
 
     @include for-phone-only() {
       max-width: 100%;
diff --git a/client/src/styles/Accordion.scss b/client/src/styles/Accordion.scss
index f8f931919..115087703 100644
--- a/client/src/styles/Accordion.scss
+++ b/client/src/styles/Accordion.scss
@@ -1,7 +1,7 @@
 @import "_vars.scss";
 
 details.accordion {
-  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+  padding: 1rem 1rem 1rem 0.5rem;
   @include for-phone-only() {
     padding-left: 0;
     padding-right: 0;
@@ -35,7 +35,7 @@ details.accordion {
   }
 
   > div {
-    margin-top: 1.8rem;
+    margin-top: 1.13rem;
   }
 
   summary {
diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 6f20e130c..ba9b310ce 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -6,8 +6,8 @@
     text-decoration: none;
     text-align: left !important;
     font-weight: 700;
-    padding-top: 0.6rem;
-    margin: 5.6rem 1.6rem 2.6rem;
+    padding-top: 0.37rem;
+    margin: 3.5rem 1rem 1.63rem;
   }
 
   h4.settings-section {
@@ -16,25 +16,25 @@
   }
 
   label {
-    font-size: 1.3rem;
+    font-size: 0.81rem;
     font-weight: 600;
   }
 
   p {
-    font-size: 1.3rem;
+    font-size: 0.81rem;
     font-weight: 500;
   }
 
   .settings-contact {
-    margin: 6rem 2rem 5rem;
+    margin: 3.75rem 1.25rem 3.13rem;
     text-align: center;
   }
 
   .settings-no-subscriptions {
-    padding: 1.6rem;
+    padding: 1rem;
     background-color: $justfix-grey-50;
     border-radius: 4px;
-    margin: auto 1.6rem;
+    margin: auto 1rem;
   }
 }
 
@@ -42,10 +42,10 @@
   form {
     display: flex;
     flex-direction: column;
-    margin: 3.2rem 1.6rem;
+    margin: 2rem 1rem;
 
     p {
-      margin: -1rem 0 0.6rem 0;
+      margin: -0.63rem 0 0.37rem 0;
     }
   }
 
@@ -60,14 +60,14 @@
   .user-setting-actions {
     display: flex;
     justify-content: right;
-    margin-top: 1.6rem;
+    margin-top: 1rem;
 
     @include for-phone-only() {
       justify-content: center;
     }
 
     input[type="submit"] {
-      margin: 0 1.6rem 0 0 !important;
+      margin: 0 1rem 0 0 !important;
     }
   }
 
@@ -76,14 +76,14 @@
     // vars marked !important bc typography mixin is not available for inconsolata
     font-weight: 600 !important;
     font-family: $wow-font !important;
-    font-size: 1.3rem !important;
+    font-size: 0.81rem !important;
 
     text-align: left;
-    margin-bottom: 1.6rem;
+    margin-bottom: 1rem;
   }
 
   .password-input-label {
-    margin-bottom: -1rem !important;
+    margin-bottom: -0.63rem !important;
   }
 
   .password-input-rules {
@@ -91,7 +91,7 @@
     flex-direction: column;
 
     span:last-child {
-      margin-bottom: 0.6rem !important;
+      margin-bottom: 0.37rem !important;
     }
   }
 }
diff --git a/client/src/styles/AddressPage.scss b/client/src/styles/AddressPage.scss
index 88e031958..28cdd8a68 100644
--- a/client/src/styles/AddressPage.scss
+++ b/client/src/styles/AddressPage.scss
@@ -21,14 +21,14 @@
 
     h1 {
       margin-bottom: 0;
-      font-size: 2rem;
+      font-size: 1.25rem;
 
       &.primary {
         line-height: 20px;
         margin-bottom: 20px;
 
         @include for-phone-only() {
-          font-size: 1.8rem;
+          font-size: 1.13rem;
         }
 
         a {
diff --git a/client/src/styles/AddressSearch.scss b/client/src/styles/AddressSearch.scss
index 104435d89..a4e8a2975 100644
--- a/client/src/styles/AddressSearch.scss
+++ b/client/src/styles/AddressSearch.scss
@@ -45,7 +45,7 @@
 
         .geosuggest__item {
           margin-top: 0;
-          padding: 0.75rem 1rem;
+          padding: 0.47rem 0.63rem;
           list-style-type: none;
 
           &:hover {
diff --git a/client/src/styles/AddressToolbar.scss b/client/src/styles/AddressToolbar.scss
index 5a8f90dd4..b2657e3f8 100644
--- a/client/src/styles/AddressToolbar.scss
+++ b/client/src/styles/AddressToolbar.scss
@@ -7,14 +7,14 @@
 
   .btn-group {
     flex-wrap: nowrap;
-    min-width: 19rem;
-    padding-left: 0.8rem;
+    min-width: 11.88rem;
+    padding-left: 0.5rem;
   }
 
   ul.menu {
     border: 1px solid $gray-dark;
     padding: 0;
-    width: 24rem;
+    width: 15rem;
     right: 0;
     left: inherit;
     list-style: disc inside none;
diff --git a/client/src/styles/App.scss b/client/src/styles/App.scss
index 78c4c9016..cd0591fb8 100644
--- a/client/src/styles/App.scss
+++ b/client/src/styles/App.scss
@@ -32,17 +32,17 @@
 }
 
 .App__banner {
-  padding: 0.5rem 1.5rem;
+  padding: 0.31rem 0.94rem;
   color: $wowza-dark;
   position: relative;
 
   .close-button {
     color: $wowza-dark;
     position: absolute;
-    right: 0.5rem;
+    right: 0.31rem;
     top: 0rem;
-    padding: 0 1rem;
-    font-size: 2rem;
+    padding: 0 0.63rem;
+    font-size: 1.25rem;
     height: 100%;
     cursor: pointer;
     &:hover {
@@ -123,7 +123,7 @@
     margin-top: 0rem;
     height: min-content;
     @include for-phone-only {
-      font-size: 1rem;
+      font-size: 0.63rem;
       width: min-content;
     }
   }
@@ -133,10 +133,10 @@
     color: $justfix-white;
     line-height: 1.2;
     font-weight: bold;
-    font-size: 1.8rem;
+    font-size: 1.13rem;
 
     @include for-tablet-portrait-up() {
-      font-size: 2.4rem;
+      font-size: 1.5rem;
     }
   }
 
@@ -155,7 +155,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    margin: 0 -1rem 0;
+    margin: 0 -0.63rem 0;
   }
 
   nav {
@@ -190,8 +190,8 @@
       text-decoration: none;
       color: inherit;
       display: inline;
-      margin: 0 -0.8rem;
-      padding: 0.6rem 0.8rem;
+      margin: 0 -0.5rem;
+      padding: 0.37rem 0.5rem;
     }
 
     .language-toggle a {
@@ -232,7 +232,7 @@ div.Page {
   }
   p {
     // line-height: 1.6;
-    margin-bottom: 1.25rem;
+    margin-bottom: 0.78rem;
   }
 
   .page-container {
@@ -241,9 +241,9 @@ div.Page {
       text-align: center;
     }
 
-    width: min(calc(100vw - 4rem), 60rem);
-    max-width: 60rem;
-    margin: 4rem auto;
+    width: min(calc(100vw - 2.5rem), 37.5rem);
+    max-width: 37.5rem;
+    margin: 2.5rem auto;
 
     form {
       display: flex;
@@ -254,7 +254,7 @@ div.Page {
       }
 
       input[type="submit"] {
-        margin: 1rem auto;
+        margin: 0.63rem auto;
       }
     }
   }
@@ -272,7 +272,7 @@ div.Page {
   // mobile
   @include for-tablet-landscape-down() {
     h5 {
-      margin-top: 4rem;
+      margin-top: 2.5rem;
     }
     aside {
       margin-top: 48px;
@@ -299,8 +299,8 @@ div.Page {
       }
       figcaption {
         max-width: 300px;
-        margin: 1rem auto;
-        font-size: 1.25rem;
+        margin: 0.63rem auto;
+        font-size: 0.78rem;
         line-height: 1.1;
       }
     }
diff --git a/client/src/styles/DetailView.scss b/client/src/styles/DetailView.scss
index 19f28a42b..fa1126e63 100644
--- a/client/src/styles/DetailView.scss
+++ b/client/src/styles/DetailView.scss
@@ -101,7 +101,7 @@
     border: none;
 
     p {
-      line-height: 1.8rem;
+      line-height: 1.13rem;
       margin-bottom: 15px;
 
       &.text-danger {
@@ -110,10 +110,10 @@
     }
 
     ul {
-      margin: 1rem 0.5rem;
+      margin: 0.63rem 0.31rem;
 
       li {
-        margin-top: 0.5rem;
+        margin-top: 0.31rem;
       }
     }
 
@@ -123,7 +123,7 @@
     }
 
     .DetailView__mobilePortfolioView {
-      padding: 1.3rem 2rem;
+      padding: 0.81rem 1.25rem;
 
       display: none;
       @include for-phone-only() {
@@ -140,9 +140,9 @@
     }
 
     .card-header {
-      padding-bottom: 1.5rem;
+      padding-bottom: 0.94rem;
       @include for-phone-only {
-        padding: 1.5rem 1rem;
+        padding: 0.94rem 0.63rem;
       }
 
       .card-title {
@@ -151,7 +151,7 @@
 
       // how is this bldg assoc
       a {
-        margin-top: 0.3rem;
+        margin-top: 0.19rem;
         margin-bottom: 0;
         text-decoration: underline;
         cursor: pointer;
@@ -181,10 +181,10 @@
       figcaption {
         margin: 0;
         @include for-tablet-landscape-down {
-          padding-left: 2.5rem;
+          padding-left: 1.56rem;
         }
         @include for-phone-only {
-          padding-right: 2rem;
+          padding-right: 1.25rem;
           text-align: right;
         }
       }
@@ -195,12 +195,12 @@
 
       &:last-child {
         @include for-phone-only() {
-          padding: 1rem;
+          padding: 0.63rem;
         }
       }
 
       @include for-tablet-portrait-up() {
-        padding-right: 3rem;
+        padding-right: 1.88rem;
       }
 
       &.column-right {
@@ -223,11 +223,11 @@
     .card-body-landlord,
     .card-body-complaints,
     .card-body-links {
-      margin-top: 2.4rem;
+      margin-top: 1.5rem;
     }
 
     .card-body-timeline-link {
-      padding-top: 1rem;
+      padding-top: 0.63rem;
     }
 
     .card-body-complaints,
@@ -237,13 +237,13 @@
         border-bottom: 1px solid $gray-dark;
       }
       li {
-        line-height: 1.8rem;
+        line-height: 1.13rem;
       }
     }
 
     .card-body-landlord {
       .landlord-contact-info:not(:last-child) {
-        margin-bottom: 1.8rem;
+        margin-bottom: 1.13rem;
       }
       .card-title-landlord {
         @include for-tablet-portrait-up {
@@ -263,7 +263,7 @@
 
           div {
             margin: 0;
-            padding: 0 0.8rem;
+            padding: 0 0.5rem;
           }
           summary {
             width: fit-content;
@@ -290,7 +290,7 @@
           display: none;
         }
         details.accordion {
-          padding: 0.5rem 0 0 0;
+          padding: 0.31rem 0 0 0;
           div {
             margin: 0;
           }
@@ -306,7 +306,7 @@
     }
 
     .card-body-registration {
-      margin-top: 2.5rem;
+      margin-top: 1.56rem;
 
       b {
         display: inline;
@@ -322,13 +322,13 @@
 
     .card-body-prompt,
     .card-body-social {
-      margin-top: 2.4rem;
-      margin-bottom: 2.4rem;
+      margin-top: 1.5rem;
+      margin-bottom: 1.5rem;
     }
 
     h6.DetailView__subtitle {
       font-weight: bold;
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.47rem;
     }
   }
 }
@@ -349,7 +349,7 @@
 
     em {
       font-weight: normal;
-      font-size: 1rem;
+      font-size: 0.63rem;
     }
   }
 
@@ -373,10 +373,10 @@
     }
 
     ul {
-      margin: 0.5rem;
+      margin: 0.31rem;
 
       li {
-        margin-top: 0.5rem;
+        margin-top: 0.31rem;
       }
     }
   }
diff --git a/client/src/styles/Dropdown.scss b/client/src/styles/Dropdown.scss
index 7bc9e00db..34b0debcf 100644
--- a/client/src/styles/Dropdown.scss
+++ b/client/src/styles/Dropdown.scss
@@ -34,11 +34,11 @@
       }
 
       &.dropdown-selector-panel {
-        font-size: 2rem;
+        font-size: 1.25rem;
         outline: 1px solid $dark;
         border: none;
         background-color: $gray-light;
-        height: 4.4rem;
+        height: 2.75rem;
         padding: 0px;
 
         display: flex;
@@ -48,7 +48,7 @@
         .float-left,
         .float-right {
           height: 100%;
-          padding: 1.2rem;
+          padding: 0.75rem;
         }
 
         .float-left {
@@ -76,8 +76,8 @@
 
     .menu {
       z-index: 110;
-      padding: 0.25rem 0.5rem;
-      font-size: 1.6rem;
+      padding: 0.16rem 0.31rem;
+      font-size: 1rem;
 
       .menu-item a {
         &:focus {
@@ -99,14 +99,14 @@
   }
 
   .dropdown-selector-panel + .menu {
-    padding: 1.25rem 0.5rem;
-    font-size: 2rem;
+    padding: 0.78rem 0.31rem;
+    font-size: 1.25rem;
     box-shadow: none;
     // Override default translation so it lies flush with toggle button outline:
     transform: translateY(1px);
     .menu-item {
       display: inline-block;
-      margin: 1rem 0;
+      margin: 0.63rem 0;
     }
   }
 }
diff --git a/client/src/styles/EmailAlertSignup.scss b/client/src/styles/EmailAlertSignup.scss
index f8f60bc48..7adb98cfe 100644
--- a/client/src/styles/EmailAlertSignup.scss
+++ b/client/src/styles/EmailAlertSignup.scss
@@ -2,7 +2,7 @@
 @import "_typography.scss";
 
 .EmailAlertSignup {
-  margin-top: 2rem;
+  margin-top: 1.25rem;
 
   // overrides datatable mixin
   label:hover,
@@ -11,7 +11,7 @@
   }
 
   .data-updates-label-container {
-    min-height: 3.8rem;
+    min-height: 2.37rem;
     display: flex !important;
     justify-content: center;
     align-items: center;
@@ -20,10 +20,10 @@
       font-family: $body-font;
       letter-spacing: 0.02em;
       background: $justfix-yellow;
-      padding: 0.4rem 0.8rem;
-      border-radius: 1.6rem;
+      padding: 0.25rem 0.5rem;
+      border-radius: 1rem;
       width: fit-content;
-      margin-right: 0.8rem !important;
+      margin-right: 0.5rem !important;
     }
 
     @include for-phone-only() {
@@ -36,12 +36,12 @@
   }
 
   .table-content {
-    margin: 1rem 1rem 1.7rem 1rem !important;
+    margin: 0.63rem 0.63rem 1.06rem 0.63rem !important;
   }
 
   .email-description {
     text-align: left;
-    margin: 1rem 0 !important;
+    margin: 0.63rem 0 !important;
     line-height: 117%;
   }
 
@@ -63,15 +63,15 @@
     .status-title {
       display: flex;
       align-items: center;
-      margin-bottom: 2rem;
+      margin-bottom: 1.25rem;
 
       svg {
-        margin-right: 1rem;
+        margin-right: 0.63rem;
       }
     }
 
     .status-description {
-      margin-bottom: 2rem;
+      margin-bottom: 1.25rem;
     }
   }
 }
diff --git a/client/src/styles/FeatureCalloutWidget.scss b/client/src/styles/FeatureCalloutWidget.scss
index bab41546f..3282cdda1 100644
--- a/client/src/styles/FeatureCalloutWidget.scss
+++ b/client/src/styles/FeatureCalloutWidget.scss
@@ -17,7 +17,7 @@
     vertical-align: middle;
     z-index: 51;
     border-radius: 100%;
-    line-height: 1.5rem;
+    line-height: 0.94rem;
     margin: -2px 2px 0px 2px;
   }
 
@@ -90,7 +90,7 @@
 
   .widget-button-cancel {
     text-shadow: 1.5px 1.5px #333a46;
-    font-size: 2rem;
+    font-size: 1.25rem;
   }
 
   .widget-button-cancel:hover {
@@ -137,7 +137,7 @@
     display: flex;
     position: relative;
     outline: none;
-    font-size: 1rem;
+    font-size: 0.63rem;
     font-weight: bold;
     position: relative;
     font-size: 0.9em;
diff --git a/client/src/styles/ForgotPasswordPage.scss b/client/src/styles/ForgotPasswordPage.scss
index 46ab9dabc..e23bdb800 100644
--- a/client/src/styles/ForgotPasswordPage.scss
+++ b/client/src/styles/ForgotPasswordPage.scss
@@ -3,29 +3,29 @@
 
 .ForgotPasswordPage {
   .page-title {
-    margin-top: 1.5rem;
+    margin-top: 0.94rem;
   }
 
   h4 {
-    font-size: 2.4rem;
+    font-size: 1.5rem;
   }
 
   h5 {
-    font-size: 1.6rem;
+    font-size: 1rem;
   }
 
   label {
     @include desktop-eyebrow();
 
     text-align: left;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
+    margin-top: 0.63rem;
+    margin-bottom: 0.31rem;
   }
 
   input[type="submit"] {
-    padding: 1.6rem 3.2rem !important;
+    padding: 1rem 2rem !important;
     align-self: center;
-    margin: 2.6rem auto 0.6rem auto !important;
+    margin: 1.63rem auto 0.37rem auto !important;
   }
 
   .request-sent-success {
@@ -34,11 +34,11 @@
     align-items: center;
 
     svg {
-      margin: 1rem 0 2.5rem 0;
+      margin: 0.63rem 0 1.56rem 0;
     }
 
     .button.is-text {
-      margin-top: 1rem;
+      margin-top: 0.63rem;
       display: block !important;
       color: $justfix-black;
     }
diff --git a/client/src/styles/HomePage.scss b/client/src/styles/HomePage.scss
index 01394d985..52ff7b628 100644
--- a/client/src/styles/HomePage.scss
+++ b/client/src/styles/HomePage.scss
@@ -2,7 +2,7 @@
 
 .HomePage {
   .HomePage__banner {
-    padding: 1rem 1.5rem;
+    padding: 0.63rem 0.94rem;
 
     b {
       color: $dark;
@@ -44,7 +44,7 @@
     flex-grow: 1;
 
     h1 {
-      font-size: 2rem;
+      font-size: 1.25rem;
     }
 
     @include for-tablet-portrait-up() {
@@ -71,57 +71,57 @@
 
       h1 {
         text-align: left;
-        font-size: 3.6rem;
+        font-size: 2.25rem;
         font-weight: 600;
       }
       h2 {
-        font-size: 1.6rem;
-        margin-bottom: 1.2rem;
+        font-size: 1rem;
+        margin-bottom: 0.75rem;
       }
 
       label {
-        margin-left: 0.7rem;
+        margin-left: 0.44rem;
       }
 
       i.form-icon {
         transform: scale(1.5);
         background: transparent;
         border-color: $wowza-dark;
-        margin-left: -0.2rem;
+        margin-left: -0.13rem;
 
         &::before {
           background: $wowza-dark;
-          border-radius: 1rem;
+          border-radius: 0.63rem;
           transform: scale(2);
         }
       }
 
       .chip {
-        border-radius: 1.5rem;
-        height: 1.8rem;
-        padding: 0 1.1rem;
-        margin-left: 0.6rem;
-        box-shadow: 0 0 0.4rem $wowza-dark;
+        border-radius: 0.94rem;
+        height: 1.13rem;
+        padding: 0 0.69rem;
+        margin-left: 0.37rem;
+        box-shadow: 0 0 0.25rem $wowza-dark;
         transform: rotate(-12deg);
         background-color: $wowza-dark;
         color: $wowza-background;
         text-transform: uppercase;
-        font-size: 1.2rem;
+        font-size: 0.75rem;
       }
 
       .AddressSearch,
       .LandlordSearch {
-        margin-top: 1.5rem;
-        margin-bottom: 1.5rem;
+        margin-top: 0.94rem;
+        margin-bottom: 0.94rem;
         input.form-input {
           background: inherit;
           color: $wowza-dark;
-          border-radius: 0.5rem;
-          height: 4.5rem;
+          border-radius: 0.31rem;
+          height: 2.81rem;
           border: 1px solid $wowza-dark;
 
           &:focus {
-            box-shadow: 0 0 0 0.2rem $dark;
+            box-shadow: 0 0 0 0.13rem $dark;
           }
 
           &::placeholder {
diff --git a/client/src/styles/Indicators.scss b/client/src/styles/Indicators.scss
index 520197e9c..0e792ba45 100644
--- a/client/src/styles/Indicators.scss
+++ b/client/src/styles/Indicators.scss
@@ -4,38 +4,38 @@
 
 .Indicators {
   .Indicators__content {
-    padding: 1.6rem;
+    padding: 1rem;
 
     @include for-tablet-portrait-up() {
-      padding: 2.6rem;
+      padding: 1.63rem;
       .title-card,
       .Indicators__links {
-        padding-left: 2.6rem;
+        padding-left: 1.63rem;
       }
     }
 
     & > div > h6 {
-      font-size: 1.4rem;
-      margin-bottom: 0.6rem;
+      font-size: 0.87rem;
+      margin-bottom: 0.37rem;
       text-decoration: underline;
       font-weight: bold;
     }
 
     p {
-      font-size: 1.6rem;
-      margin-bottom: 2.4rem;
+      font-size: 1rem;
+      margin-bottom: 1.5rem;
     }
 
     .columns {
       .column.column-context:last-child {
         @include for-tablet-landscape-up() {
-          padding-left: 3rem;
+          padding-left: 1.88rem;
         }
       }
     }
 
     .title {
-      font-size: 2rem;
+      font-size: 1.25rem;
       text-decoration: none;
       margin-bottom: 0px;
 
@@ -46,11 +46,11 @@
     }
 
     .title-card {
-      padding-bottom: 1.4rem;
+      padding-bottom: 0.87rem;
     }
 
     .card {
-      margin-bottom: 3rem;
+      margin-bottom: 1.88rem;
     }
 
     .card-body-links {
@@ -59,10 +59,10 @@
         border-bottom: 1px solid $gray-dark;
       }
       ul {
-        margin: 1rem 0.5rem;
+        margin: 0.63rem 0.31rem;
         li {
-          margin-top: 0.5rem;
-          line-height: 1.8rem;
+          margin-top: 0.31rem;
+          line-height: 1.13rem;
         }
       }
     }
@@ -78,14 +78,14 @@
   }
 
   .Indicators__links {
-    padding: 0rem 1.5rem 2.5rem 0rem;
+    padding: 0rem 0.94rem 1.56rem 0rem;
     position: relative;
 
     @include for-tablet-portrait-up() {
       display: flex;
 
       .Indicators__linksContainer:first-child {
-        padding-right: 3rem;
+        padding-right: 1.88rem;
       }
     }
 
@@ -93,13 +93,13 @@
       // Make sure links container doesn't extend beyond viewport
       max-width: 100%;
       &:first-child {
-        padding-bottom: 1rem;
+        padding-bottom: 0.63rem;
       }
 
       .Indicators__linksTitle {
         display: inline-block;
-        font-size: 1.5rem;
-        margin: 0 2rem 0.4rem 0;
+        font-size: 0.94rem;
+        margin: 0 1.25rem 0.25rem 0;
       }
     }
   }
@@ -107,8 +107,8 @@
   .Indicators__viz {
     display: flex;
     flex-direction: row;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
+    margin-top: 0.63rem;
+    margin-bottom: 0.31rem;
 
     .Indicators__chart {
       width: 95%;
diff --git a/client/src/styles/LandlordSearch.scss b/client/src/styles/LandlordSearch.scss
index 6f87a7ef0..f0475692c 100644
--- a/client/src/styles/LandlordSearch.scss
+++ b/client/src/styles/LandlordSearch.scss
@@ -18,7 +18,7 @@
 
       .result__snippet {
         display: block;
-        padding: 0.75rem 1rem;
+        padding: 0.47rem 0.63rem;
         color: $dark;
       }
 
@@ -35,6 +35,6 @@
   }
 
   .search-by {
-    margin-top: 0.75rem;
+    margin-top: 0.47rem;
   }
 }
diff --git a/client/src/styles/LegalFooter.scss b/client/src/styles/LegalFooter.scss
index 1b975f249..7a5c8e65e 100644
--- a/client/src/styles/LegalFooter.scss
+++ b/client/src/styles/LegalFooter.scss
@@ -37,7 +37,7 @@
 
     nav {
       @media screen and (min-width: 841px) {
-        margin-bottom: 1.25rem;
+        margin-bottom: 0.78rem;
       }
       a {
         display: inline-block;
diff --git a/client/src/styles/Login.scss b/client/src/styles/Login.scss
index 329d42a90..ebbe9396f 100644
--- a/client/src/styles/Login.scss
+++ b/client/src/styles/Login.scss
@@ -8,27 +8,27 @@
   .input-group {
     display: flex;
     flex-direction: column;
-    margin-top: 1rem;
+    margin-top: 0.63rem;
 
     #input-field-error {
       display: flex;
       align-items: center;
-      font-size: 1.3rem;
+      font-size: 0.81rem;
       color: #ba4300;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.31rem;
 
       svg {
-        margin-right: 0.75rem;
+        margin-right: 0.47rem;
       }
     }
 
     input[type="email"],
     .password-input {
-      margin-bottom: 2rem;
+      margin-bottom: 1.25rem;
     }
 
     input[type="submit"] {
-      padding: 1.6rem 3.2rem !important;
+      padding: 1rem 2rem !important;
       align-self: center;
       margin: 0 auto !important;
     }
@@ -45,7 +45,7 @@
   }
 
   .page-title {
-    margin-top: 1.5rem;
+    margin-top: 0.94rem;
   }
 
   label {
@@ -53,11 +53,11 @@
     // vars marked !important bc typography mixin is not available for inconsolata
     font-weight: 600 !important;
     font-family: $wow-font !important;
-    font-size: 1.3rem !important;
+    font-size: 0.81rem !important;
 
     text-align: left;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
+    margin-top: 0.63rem;
+    margin-bottom: 0.31rem;
   }
 
   .building-page-footer {
@@ -69,10 +69,10 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      margin: 2rem 0 2rem 0;
+      margin: 1.25rem 0 1.25rem 0;
 
       .info-icon {
-        margin-left: 0.4rem;
+        margin-left: 0.25rem;
         width: 18px;
         &:focus-visible {
           outline: 2px solid $focus-outline-color;
@@ -84,12 +84,12 @@
     .login-type-toggle {
       display: flex;
       justify-content: center;
-      font-size: 1.5rem;
+      font-size: 0.94rem;
     }
   }
 
   .login-response-text {
-    margin: 1rem 0 1rem;
+    margin: 0.63rem 0 0.63rem;
   }
 
   .login-password-label {
@@ -103,19 +103,19 @@
   }
 
   h4 {
-    font-size: 2.4rem;
+    font-size: 1.5rem;
   }
   h5 {
-    font-size: 1.6rem;
+    font-size: 1rem;
   }
 
   .password-input {
-    margin-top: 0.5rem;
+    margin-top: 0.31rem;
   }
 
   .jf-alert {
     width: auto;
-    font-size: 1.3rem;
+    font-size: 0.81rem;
 
     .button.is-text {
       display: block !important;
@@ -134,11 +134,11 @@
     align-items: center;
 
     svg {
-      margin: 1rem 0 2.5rem 0;
+      margin: 0.63rem 0 1.56rem 0;
     }
 
     .button.is-text {
-      margin-top: 1rem;
+      margin-top: 0.63rem;
       display: block !important;
       color: $justfix-black;
     }
diff --git a/client/src/styles/Modal.scss b/client/src/styles/Modal.scss
index 51b867b3f..1e2e1d570 100644
--- a/client/src/styles/Modal.scss
+++ b/client/src/styles/Modal.scss
@@ -5,8 +5,8 @@
 
   .ReactModal__Close {
     position: absolute;
-    top: 1.8rem;
-    right: 2.4rem;
+    top: 1.13rem;
+    right: 1.5rem;
     transition: none;
   }
 
@@ -16,8 +16,8 @@
     max-height: 90%;
 
     h5 {
-      margin-bottom: 1.5rem;
-      margin-top: 2.5rem;
+      margin-bottom: 0.94rem;
+      margin-top: 1.56rem;
     }
 
     .first-header {
diff --git a/client/src/styles/NotRegisteredPage.scss b/client/src/styles/NotRegisteredPage.scss
index 28e8b42e2..194123b06 100644
--- a/client/src/styles/NotRegisteredPage.scss
+++ b/client/src/styles/NotRegisteredPage.scss
@@ -12,7 +12,7 @@
   @include for-tablet-portrait-up() {
     max-width: 700px;
     padding: 35px;
-    margin: 4rem auto;
+    margin: 2.5rem auto;
   }
 
   @include for-phone-only() {
@@ -75,7 +75,7 @@
       @include datatable();
 
       .nycha-addresses {
-        margin-top: 2rem;
+        margin-top: 1.25rem;
 
         b {
           display: block;
@@ -87,7 +87,7 @@
         }
 
         ul {
-          margin-top: 1rem;
+          margin-top: 0.63rem;
           margin-left: 0;
           list-style-type: none;
         }
@@ -97,17 +97,17 @@
     .card-body-links {
       ul,
       ol {
-        margin: 1rem 0.5rem;
+        margin: 0.63rem 0.31rem;
 
         li {
-          margin-top: 0.5rem;
-          line-height: 1.8rem;
+          margin-top: 0.31rem;
+          line-height: 1.13rem;
         }
       }
     }
     .justfix-cta,
     .social-share {
-      margin-top: 2rem;
+      margin-top: 1.25rem;
     }
 
     .btn-group {
diff --git a/client/src/styles/Password.scss b/client/src/styles/Password.scss
index d42606e30..52239d9f2 100644
--- a/client/src/styles/Password.scss
+++ b/client/src/styles/Password.scss
@@ -9,12 +9,12 @@
 
   a {
     color: $justfix-black;
-    font-size: 1.3rem;
+    font-size: 0.81rem;
   }
 }
 
 .password-input {
-  margin-bottom: 1rem;
+  margin-bottom: 0.63rem;
   display: flex;
 
   input {
@@ -31,7 +31,7 @@
     background-color: $justfix-black;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
-    width: 4rem;
+    width: 2.5rem;
   }
 }
 
@@ -44,7 +44,7 @@
   @include desktop-eyebrow();
 
   font-family: $wow-font !important;
-  font-size: 1.3rem !important;
+  font-size: 0.81rem !important;
   font-weight: 500 !important;
   text-transform: none !important;
   color: $justfix-black;
@@ -53,7 +53,7 @@
   &::before {
     content: "•";
     display: inline-block;
-    margin-right: 0.5rem;
+    margin-right: 0.31rem;
     vertical-align: top;
   }
 
diff --git a/client/src/styles/PortfolioFilters.scss b/client/src/styles/PortfolioFilters.scss
index 8291ef7e4..28183280c 100644
--- a/client/src/styles/PortfolioFilters.scss
+++ b/client/src/styles/PortfolioFilters.scss
@@ -21,13 +21,13 @@
 }
 
 .PortfolioFilters {
-  --filter-bar-row-gap: 1.2rem;
-  --checkbox-height: 2.4rem;
+  --filter-bar-row-gap: 0.75rem;
+  --checkbox-height: 1.5rem;
   // height based on filter toggle checkbox + border + padding
-  --filter-height: calc(var(--checkbox-height) + ((0.1rem + 1rem) * 2));
+  --filter-height: calc(var(--checkbox-height) + ((0.06rem + 0.63rem) * 2));
   display: flex;
   flex-wrap: wrap;
-  padding: 1.4rem;
+  padding: 0.87rem;
   background-color: $justfix-white;
   border-bottom: 1px solid $justfix-black;
   text-transform: uppercase;
@@ -38,36 +38,36 @@
   @include browser("Firefox") {
     font-weight: 500;
   }
-  font-size: 1.4rem;
+  font-size: 0.87rem;
   line-height: 100%;
   letter-spacing: 0.02em;
 
-  gap: 1.8rem;
+  gap: 1.13rem;
   @include for-phone-only() {
-    gap: 1.2rem;
+    gap: 0.75rem;
   }
 
   .filters-container {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--filter-bar-row-gap) 1.8rem;
+    gap: var(--filter-bar-row-gap) 1.13rem;
     @include for-phone-only {
-      gap: var(--filter-bar-row-gap) 1.2rem;
+      gap: var(--filter-bar-row-gap) 0.75rem;
     }
 
     .view-type-toggle-container {
       display: flex;
       // adjust for border difference with filters
-      height: calc(var(--filter-height) + (0.1rem * 2));
+      height: calc(var(--filter-height) + (0.06rem * 2));
       .view-type-toggle {
         display: flex;
         align-items: center;
         text-transform: uppercase;
-        border: 0.1rem solid $justfix-black;
-        border-radius: 0.8rem;
-        width: 6.1rem;
+        border: 0.06rem solid $justfix-black;
+        border-radius: 0.5rem;
+        width: 3.81rem;
         @include for-phone-only {
-          width: 5rem;
+          width: 3.13rem;
         }
         justify-content: center;
         &[aria-pressed="true"] {
@@ -75,10 +75,10 @@
           border-color: $justfix-black;
         }
         &:nth-child(1) {
-          border-radius: 0.8rem 0 0 0.8rem;
+          border-radius: 0.5rem 0 0 0.5rem;
         }
         &:nth-child(2) {
-          border-radius: 0 0.8rem 0.8rem 0;
+          border-radius: 0 0.5rem 0.5rem 0;
         }
       }
     }
@@ -86,11 +86,11 @@
     .filters {
       display: flex;
       flex-grow: 1;
-      gap: 1.8rem;
+      gap: 1.13rem;
 
       .filter {
-        border: 0.1rem solid $justfix-black;
-        border-radius: 0.8rem;
+        border: 0.06rem solid $justfix-black;
+        border-radius: 0.5rem;
         text-transform: uppercase;
         display: flex;
         align-items: center;
@@ -100,7 +100,7 @@
             border-radius: 0;
             box-sizing: border-box;
             border: none;
-            border-bottom: 0.1rem solid $justfix-grey-400;
+            border-bottom: 0.06rem solid $justfix-grey-400;
             text-align: left;
           }
           &.active:not([open]):not(.filter-toggle):not(.filters-mobile-wrapper) {
@@ -130,14 +130,14 @@
       }
 
       .filter-toggle {
-        gap: 1rem;
-        padding: 1rem;
+        gap: 0.63rem;
+        padding: 0.63rem;
         letter-spacing: 0.02em;
         @include for-phone-only {
           height: var(--filter-bar-height);
           min-height: var(--filter-bar-height);
-          padding: 0 2.4rem;
-          font-size: 1.8rem;
+          padding: 0 1.5rem;
+          font-size: 1.13rem;
           &[aria-pressed="false"]:hover {
             text-decoration: none;
           }
@@ -148,8 +148,8 @@
         }
         .checkbox {
           box-sizing: border-box;
-          border: 0.1rem solid $justfix-black;
-          border-radius: 0.4rem;
+          border: 0.06rem solid $justfix-black;
+          border-radius: 0.25rem;
           width: var(--checkbox-height);
           height: var(--checkbox-height);
           display: flex;
@@ -173,7 +173,7 @@
 
         summary:not(.minmaxselect__custom-range-summary) {
           height: var(--filter-height);
-          padding: 0 1rem 0 1rem;
+          padding: 0 0.63rem 0 0.63rem;
           display: flex;
           align-items: center;
           position: relative;
@@ -188,8 +188,8 @@
             stroke-width: 2px;
           }
           .chevronIcon {
-            height: 1.1rem;
-            margin-left: 0.8rem;
+            height: 0.69rem;
+            margin-left: 0.5rem;
           }
           .closeIcon {
             margin-left: auto;
@@ -198,8 +198,8 @@
         &:not(.filters-mobile-wrapper) summary:not(.minmaxselect__custom-range-summary) {
           @include for-phone-only {
             height: var(--filter-bar-height);
-            padding: 0 2.4rem;
-            font-size: 1.8rem;
+            padding: 0 1.5rem;
+            font-size: 1.13rem;
             .chevronIcon {
               margin-left: auto;
             }
@@ -207,15 +207,15 @@
         }
         .filter-selection-count {
           @include for-tablet-portrait-up() {
-            margin-left: 0.5rem;
+            margin-left: 0.31rem;
             @include wrap-with-parentheses();
           }
           @include for-phone-only() {
             @include white-on-black();
-            padding: 0.4rem 0.8rem;
-            border-radius: 1.5rem;
-            margin-left: 0.5rem;
-            font-size: 1.4rem;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.94rem;
+            margin-left: 0.31rem;
+            font-size: 0.87rem;
           }
         }
         &[open] {
@@ -227,32 +227,32 @@
 
           @include for-tablet-portrait-up {
             &.ownernames-accordion .dropdown-container {
-              width: 25.2rem;
+              width: 15.75rem;
             }
             &.unitsres-accordion .dropdown-container {
-              width: 26rem;
+              width: 16.25rem;
             }
             &.zip-accordion .dropdown-container {
-              width: 24rem;
+              width: 15rem;
             }
           }
 
           .dropdown-container {
             position: absolute;
-            top: 5rem;
-            left: -0.1rem;
+            top: 3.13rem;
+            left: -0.06rem;
             z-index: 10;
             overflow-y: auto;
             background-color: $justfix-white;
             box-sizing: border-box;
-            border: 0.1rem solid $justfix-black;
-            border-radius: 0.8rem;
+            border: 0.06rem solid $justfix-black;
+            border-radius: 0.5rem;
             @include for-tablet-portrait-up {
               max-height: 65vh;
               @include scrollbar_wowza();
             }
             @include for-phone-only {
-              padding: 0 2.4rem 2.4rem 2.4rem;
+              padding: 0 1.5rem 1.5rem 1.5rem;
               display: flex;
               flex-direction: column;
               width: 100%;
@@ -268,24 +268,24 @@
               display: flex;
               align-items: center;
               width: 100%;
-              font-size: 1.2rem;
-              padding: 1.2rem;
+              font-size: 0.75rem;
+              padding: 0.75rem;
               @include for-phone-only {
-                padding: 0 0 1.2rem 0;
-                font-size: 1.6rem;
+                padding: 0 0 0.75rem 0;
+                font-size: 1rem;
                 .filter-info {
-                  font-size: 1.4rem;
+                  font-size: 0.87rem;
                 }
               }
               @include for-tablet-portrait-up() {
-                border-bottom: 0.1rem solid $justfix-grey;
+                border-bottom: 0.06rem solid $justfix-grey;
               }
               &,
               .filter-info {
                 color: $justfix-grey-700;
               }
               .filter-subtitle {
-                margin-right: 0.5rem;
+                margin-right: 0.31rem;
               }
               .filter-info {
                 width: 18px;
@@ -310,7 +310,7 @@
                 }
 
                 .button.is-primary {
-                  padding: 1.6rem 3.2rem;
+                  padding: 1rem 2rem;
                 }
               }
             }
@@ -322,44 +322,44 @@
 
                 .multiselect__input-container,
                 .multiselect__placeholder {
-                  font-size: 1.8rem;
+                  font-size: 1.13rem;
                   line-height: 100%;
-                  height: 5rem;
-                  padding-left: 1.2rem;
+                  height: 3.13rem;
+                  padding-left: 0.75rem;
                 }
                 .multiselect__menu {
-                  font-size: 1.6rem;
+                  font-size: 1rem;
                 }
               }
               @include for-tablet-portrait-up {
                 .multiselect__selected-value-control-container {
-                  font-size: 1.2rem;
+                  font-size: 0.75rem;
                 }
               }
             }
             .minmaxselect-container {
               @include for-phone-only {
                 .minmaxselect__presets-container {
-                  grid-template-rows: 4.5rem 4.5rem;
+                  grid-template-rows: 2.81rem 2.81rem;
                   .minmaxselect__preset-value {
-                    font-size: 1.6rem;
+                    font-size: 1rem;
                   }
                 }
                 .minmaxselect__custom-range-summary span,
                 .minmaxselect__clear-value-button {
-                  font-size: 1.4rem;
+                  font-size: 0.87rem;
                 }
                 .chevronIcon {
-                  height: 1.1rem;
-                  stroke-width: 0.2rem;
+                  height: 0.69rem;
+                  stroke-width: 0.13rem;
                 }
                 .minmaxselect__label-input-container {
                   width: fit-content;
-                  font-size: 1.6rem;
+                  font-size: 1rem;
                   input {
-                    font-size: 1.8rem;
-                    width: 4.8rem;
-                    height: 4.8rem;
+                    font-size: 1.13rem;
+                    width: 3rem;
+                    height: 3rem;
                   }
                 }
               }
@@ -371,13 +371,13 @@
         &.active:not([open]) {
           @include white-on-black();
           .active-filter-count {
-            margin-left: 0.5rem;
+            margin-left: 0.31rem;
             @include wrap-with-parentheses();
           }
         }
         &[open] {
-          --filter-bar-top-height: 4.6rem;
-          --filter-bar-height: 6.6rem;
+          --filter-bar-top-height: 2.87rem;
+          --filter-bar-height: 4.12rem;
           position: absolute;
           top: 0;
           left: 0;
@@ -385,7 +385,7 @@
           z-index: 11;
           height: 100%;
           background-color: $justfix-white;
-          border-radius: 0.8rem 0.8rem 0 0;
+          border-radius: 0.5rem 0.5rem 0 0;
           box-sizing: border-box;
           border: none;
 
@@ -406,7 +406,7 @@
           // Hide page from showing through around rounded corners
           // Sadly outline+offset doesn't work since in safari is doesn't follow border-radius
           &::before {
-            --border-size: 0.5rem;
+            --border-size: 0.31rem;
             content: "";
             position: absolute;
             top: calc(0rem - var(--border-size));
@@ -415,7 +415,7 @@
             left: calc(0rem - var(--border-size));
             border: var(--border-size) solid $justfix-black;
             border-bottom: none;
-            border-radius: 1.25rem 1.25rem 0 0;
+            border-radius: 0.78rem 0.78rem 0 0;
 
             @keyframes fade-in {
               0% {
@@ -436,8 +436,8 @@
           }
 
           & > summary {
-            padding: 0 2.4rem;
-            border-bottom: 0.2rem solid $justfix-grey-700;
+            padding: 0 1.5rem;
+            border-bottom: 0.13rem solid $justfix-grey-700;
           }
           & > .dropdown-container {
             height: calc(100% - var(--filter-bar-top-height));
@@ -455,13 +455,13 @@
               background-color: $justfix-white;
               background-repeat: no-repeat;
               background-attachment: local, local, scroll;
-              background-size: 100% 6rem, 100% 6rem, 100% 1rem, 100% 1rem;
+              background-size: 100% 3.75rem, 100% 3.75rem, 100% 0.63rem, 100% 0.63rem;
             }
 
             & > .button.is-primary {
               align-self: center;
-              padding: 1.6rem 3.2rem;
-              margin: 2.4rem 0;
+              padding: 1rem 2rem;
+              margin: 1.5rem 0;
               letter-spacing: 0.02em;
               .view-results-count {
                 margin-left: 1em;
@@ -470,7 +470,7 @@
             }
             .zero-results-alert {
               align-self: center;
-              margin: 0 2.45rem;
+              margin: 0 1.53rem;
             }
           }
         }
@@ -480,14 +480,14 @@
       display: flex;
       flex-direction: column;
       flex: 0 0 100%;
-      gap: 1rem;
+      gap: 0.63rem;
       .filter-status-info {
         display: flex;
         text-transform: none;
         color: $justfix-grey-700;
         .results-count {
-          font-size: 1.6rem;
-          padding-right: 0.5rem;
+          font-size: 1rem;
+          padding-right: 0.31rem;
         }
         .results-info {
           width: 18px;
@@ -499,11 +499,11 @@
         .clear-filters {
           color: $justfix-grey-700;
           align-self: start;
-          margin-left: 1.8rem;
+          margin-left: 1.13rem;
         }
       }
       .filter-results-alert {
-        max-width: 50rem;
+        max-width: 31.25rem;
       }
     }
   }
diff --git a/client/src/styles/PortfolioTable.scss b/client/src/styles/PortfolioTable.scss
index 80cf2a40c..24da8dfa7 100644
--- a/client/src/styles/PortfolioTable.scss
+++ b/client/src/styles/PortfolioTable.scss
@@ -56,11 +56,11 @@ $table-border-dark: 1px solid $dark;
     position: relative;
 
     th[class^="col-Evictions"] div {
-      min-width: 15rem;
+      min-width: 9.38rem;
     }
 
     tr {
-      padding: 0rem 0.5rem;
+      padding: 0rem 0.31rem;
     }
 
     table {
@@ -79,7 +79,7 @@ $table-border-dark: 1px solid $dark;
       .arrow-icon {
         cursor: pointer;
         display: inline-block;
-        margin-left: 0.5rem;
+        margin-left: 0.31rem;
         .arrow-2 {
           // This small adjustment aligns second arrow in icon with first
           transform: translateY(0.5px);
@@ -166,9 +166,9 @@ $table-border-dark: 1px solid $dark;
           }
 
           .contacts-expand {
-            border-radius: 5rem;
-            padding: 0.1rem 0.4rem;
-            margin-left: 0.5rem;
+            border-radius: 3.13rem;
+            padding: 0.06rem 0.25rem;
+            margin-left: 0.31rem;
             color: $justfix-grey-700;
             border: 1px solid $justfix-grey-700;
           }
@@ -176,9 +176,9 @@ $table-border-dark: 1px solid $dark;
             text-align: left;
             position: relative;
             list-style-type: none;
-            left: 130.5rem;
+            left: 81.56rem;
             &.lang-es {
-              left: 152.5rem;
+              left: 95.31rem;
             }
           }
         }
@@ -186,11 +186,11 @@ $table-border-dark: 1px solid $dark;
         td {
           &.col-address {
             text-align: left;
-            padding: 0.75rem;
+            padding: 0.47rem;
           }
           &.col-ownernames {
             text-align: left;
-            padding: 0 0.5rem;
+            padding: 0 0.31rem;
             .col-ownernames-last-word {
               white-space: nowrap;
             }
@@ -211,26 +211,26 @@ $table-border-dark: 1px solid $dark;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    padding: 1.4rem 1.7rem;
+    padding: 0.87rem 1.06rem;
     background-color: $justfix-white;
-    border-top: 0.1rem solid $gray-light;
+    border-top: 0.06rem solid $gray-light;
     text-align: center;
     margin: 0;
 
     .page-size {
       select {
-        padding: 0.45rem 2.7rem 0.45rem 0.9rem;
+        padding: 0.28rem 1.69rem 0.28rem 0.56rem;
         color: $justfix-black;
         cursor: pointer;
         appearance: none;
         // custom arrow, same as chevronIcon
         background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 1L5.25 5.25L1 1' stroke='%23242323' stroke-width='2'/%3E%3C/svg%3E%0A");
         background-repeat: no-repeat;
-        background-position: right 0.9rem top 50%;
-        background-size: 0.8rem auto;
+        background-position: right 0.56rem top 50%;
+        background-size: 0.5rem auto;
         &:focus,
         &:focus-visible {
-          outline: 0.2rem solid $focus-outline-color;
+          outline: 0.13rem solid $focus-outline-color;
         }
       }
     }
@@ -238,11 +238,11 @@ $table-border-dark: 1px solid $dark;
     .page-info {
       display: flex;
       justify-content: end;
-      font-size: 1.2rem;
+      font-size: 0.75rem;
       flex: 1;
-      margin-right: 3.2rem;
+      margin-right: 2rem;
       @include for-phone-only {
-        margin-right: 1.6rem;
+        margin-right: 1rem;
       }
     }
 
@@ -250,12 +250,12 @@ $table-border-dark: 1px solid $dark;
     .prev {
       .page-btn {
         color: $justfix-black;
-        width: 4.8rem;
-        height: 4.8rem;
-        border-radius: 4rem;
+        width: 3rem;
+        height: 3rem;
+        border-radius: 2.5rem;
 
         .chevronIcon {
-          height: 1.2rem;
+          height: 0.75rem;
           stroke-width: 2px;
           &.left {
             transform: rotate(90deg);
diff --git a/client/src/styles/PropertiesList.scss b/client/src/styles/PropertiesList.scss
index 7e9d68f5b..f141d293d 100644
--- a/client/src/styles/PropertiesList.scss
+++ b/client/src/styles/PropertiesList.scss
@@ -6,7 +6,7 @@
   font-family: "Inconsolata";
   font-style: normal;
   font-weight: 600;
-  font-size: 1.4rem;
+  font-size: 0.87rem;
   line-height: 100%;
   letter-spacing: 0.02em;
 }
diff --git a/client/src/styles/PropertiesMap.scss b/client/src/styles/PropertiesMap.scss
index 090f6e014..5b9e9a917 100644
--- a/client/src/styles/PropertiesMap.scss
+++ b/client/src/styles/PropertiesMap.scss
@@ -24,7 +24,7 @@
     .mapboxgl-ctrl-bottom-right,
     .mapboxgl-ctrl-bottom-left {
       bottom: 98px;
-      transform: translateY(5.2rem); // height of hidden part of legend
+      transform: translateY(3.25rem); // height of hidden part of legend
       transition: transform 250ms ease-in-out;
     }
     &:has(.PropertiesMap__legend--slide) {
@@ -50,10 +50,10 @@
       top: 0;
       left: 0;
       right: 0;
-      margin: 1rem 2.2rem 0 4.5rem;
+      margin: 0.63rem 1.38rem 0 2.81rem;
       display: flex;
       flex-direction: column;
-      gap: 0.4rem;
+      gap: 0.25rem;
     }
   }
 
@@ -68,7 +68,7 @@
     z-index: 30;
 
     h4 {
-      padding: 3rem;
+      padding: 1.88rem;
     }
   }
 
@@ -80,13 +80,13 @@
     bottom: 0;
     border-left: 1px solid #000;
     border-top: 1px solid #000;
-    padding: 1.6rem;
+    padding: 1rem;
 
     p {
-      font-size: 1.4rem;
+      font-size: 0.87rem;
       line-height: 100%;
       text-align: center;
-      padding: 0 0 2rem 0;
+      padding: 0 0 1.25rem 0;
       margin: 0;
 
       span {
@@ -107,13 +107,13 @@
     .legend-entry-container {
       display: flex;
       flex-direction: column;
-      gap: 1rem;
+      gap: 0.63rem;
       padding: 0;
 
       div {
         display: flex;
         align-items: center;
-        font-size: 1.2rem;
+        font-size: 0.75rem;
         line-height: 100%;
 
         &:before {
@@ -124,7 +124,7 @@
           width: 16px;
           border-radius: 16px;
           position: relative;
-          margin-right: 0.5rem;
+          margin-right: 0.31rem;
           background-color: black;
           border: 1px solid #111;
         }
@@ -147,10 +147,10 @@
     @include for-phone-only() {
       width: 100%;
       border-right: 1px solid #000;
-      gap: 1.5rem;
+      gap: 0.94rem;
       padding: 0;
 
-      transform: translateY(calc(100% - 4.8rem));
+      transform: translateY(calc(100% - 3rem));
       transition: transform 250ms ease-in-out;
 
       &.PropertiesMap__legend--slide {
@@ -158,7 +158,7 @@
       }
 
       p {
-        padding: 1.7rem;
+        padding: 1.06rem;
         span {
           font-weight: 700;
           text-decoration: underline;
@@ -166,7 +166,7 @@
       }
 
       .legend-entry-container {
-        padding: 0 1rem 1rem 1rem;
+        padding: 0 0.63rem 0.63rem 0.63rem;
       }
     }
   }
@@ -186,7 +186,7 @@
         width: fit-content;
       }
       .selected-addr-alert {
-        width: 36.4rem;
+        width: 22.75rem;
         @include for-phone-only() {
           width: 100%;
         }
@@ -198,7 +198,7 @@
           }
         }
         .selected-addr-alert__address {
-          font-size: 1.6rem;
+          font-size: 1rem;
         }
         a {
           text-underline-position: under;
@@ -213,7 +213,7 @@
       }
 
       .PropertiesMap__legend {
-        margin: 0 1rem 2.9rem 0;
+        margin: 0 0.63rem 1.81rem 0;
       }
     }
   }
diff --git a/client/src/styles/PropertiesSummary.scss b/client/src/styles/PropertiesSummary.scss
index e491c46ec..7988bf559 100644
--- a/client/src/styles/PropertiesSummary.scss
+++ b/client/src/styles/PropertiesSummary.scss
@@ -16,8 +16,8 @@
     }
 
     & > div > h6 {
-      font-size: 1.4rem;
-      margin-bottom: 0.6rem;
+      font-size: 0.87rem;
+      margin-bottom: 0.37rem;
       text-decoration: underline;
       font-weight: bold;
       // Override default styling in App.scss
@@ -27,8 +27,8 @@
     }
 
     p {
-      font-size: 1.6rem;
-      margin-bottom: 2.4rem;
+      font-size: 1rem;
+      margin-bottom: 1.5rem;
     }
 
     aside {
@@ -42,12 +42,12 @@
     .portfolio-graph-container {
       position: relative;
       .Loader-map {
-        height: calc(55vh + 6.25rem);
+        height: calc(55vh + 3.91rem);
       }
       .portfolio-graph {
         position: relative;
-        padding: 1rem;
-        margin-bottom: 2rem;
+        padding: 0.63rem;
+        margin-bottom: 1.25rem;
         border: 1px dashed $wowza-dark;
 
         div:not(.float-left) {
@@ -63,12 +63,12 @@
         .btn-group {
           position: absolute;
           flex-direction: column;
-          margin-top: 3.5rem;
+          margin-top: 2.19rem;
           z-index: 10;
           .btn {
             flex-grow: 0;
             margin-left: 0;
-            font-size: 2rem;
+            font-size: 1.25rem;
           }
         }
       }
@@ -77,10 +77,10 @@
         @include for-tablet-portrait-up {
           position: absolute;
           z-index: 100;
-          bottom: 1rem;
-          left: 1rem;
+          bottom: 0.63rem;
+          left: 0.63rem;
           margin-bottom: 0;
-          width: 37.5rem;
+          width: 23.44rem;
         }
       }
     }
@@ -88,7 +88,7 @@
 
   .PropertiesSummary__links {
     border: 1px solid $gray;
-    padding: 2rem 1.5rem;
+    padding: 1.25rem 0.94rem;
     position: relative;
 
     .btn {
@@ -105,7 +105,7 @@
 
     h6.PropertiesSummary__linksSubtitle {
       font-weight: bold;
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.47rem;
       width: 100%;
     }
 
diff --git a/client/src/styles/Subscribe.scss b/client/src/styles/Subscribe.scss
index d92ef017a..07d219532 100644
--- a/client/src/styles/Subscribe.scss
+++ b/client/src/styles/Subscribe.scss
@@ -8,5 +8,5 @@
 }
 
 .response-text {
-  margin: 1rem 0 1rem;
+  margin: 0.63rem 0 0.63rem;
 }
diff --git a/client/src/styles/UserSetting.scss b/client/src/styles/UserSetting.scss
index b8e9baa71..48bcb2241 100644
--- a/client/src/styles/UserSetting.scss
+++ b/client/src/styles/UserSetting.scss
@@ -3,7 +3,7 @@
 .subscription-field {
   display: flex;
   border-top: 1px solid #e5e5e5;
-  padding: 1.6rem;
+  padding: 1rem;
 }
 
 .subscription-field:last-child {
diff --git a/client/src/styles/_alert.scss b/client/src/styles/_alert.scss
index 8a24b8496..8cd44f63b 100644
--- a/client/src/styles/_alert.scss
+++ b/client/src/styles/_alert.scss
@@ -1,14 +1,14 @@
 @import "_vars.scss";
 
 .jf-alert {
-  --color-bar-width: 1.5rem;
+  --color-bar-width: 0.94rem;
   display: flex;
   position: relative;
-  padding: 0 0 1rem calc(var(--color-bar-width) + 1rem);
+  padding: 0 0 0.63rem calc(var(--color-bar-width) + 0.63rem);
   width: fit-content;
-  border-radius: 0.4rem;
+  border-radius: 0.25rem;
   font-family: "Inconsolata", monospace;
-  font-size: 1.4rem;
+  font-size: 0.87rem;
   font-weight: 500;
   text-transform: none;
 
@@ -19,27 +19,27 @@
     top: 0;
     left: 0;
     bottom: 0;
-    border-radius: 0.3rem 0 0 0.3rem;
+    border-radius: 0.19rem 0 0 0.19rem;
   }
 
   .jf-alert__content {
     margin-right: auto;
-    padding-top: 1rem;
+    padding-top: 0.63rem;
     &:last-child {
-      padding-right: 1rem;
+      padding-right: 0.63rem;
     }
   }
 
   .jf-alert__close {
     align-self: flex-start;
-    padding: 1rem 1rem 1.2rem 1.2rem;
+    padding: 0.63rem 0.63rem 0.75rem 0.75rem;
     &:focus-visible {
       outline: 2px solid $focus-outline-color;
     }
     .closeIcon {
-      height: 1.2rem;
-      width: 1.2rem;
-      stroke-width: 0.2rem;
+      height: 0.75rem;
+      width: 0.75rem;
+      stroke-width: 0.13rem;
     }
   }
 
@@ -60,14 +60,14 @@
   }
 
   &.is-error {
-    padding: 0 0 0.7rem calc(var(--color-bar-width) + 0.8rem);
+    padding: 0 0 0.44rem calc(var(--color-bar-width) + 0.5rem);
     &::before {
       background-color: $justfix-orange;
     }
     .jf-alert__content {
-      padding-top: 0.7rem;
+      padding-top: 0.44rem;
       &:last-child {
-        padding-right: 0.6rem;
+        padding-right: 0.37rem;
       }
     }
   }
@@ -76,7 +76,7 @@
   }
   &.is-info {
     &.is-secondary {
-      border: 0.1rem solid $justfix-grey-400;
+      border: 0.06rem solid $justfix-grey-400;
       &,
       p,
       a,
diff --git a/client/src/styles/_button.scss b/client/src/styles/_button.scss
index 5daf8cdeb..18a161514 100644
--- a/client/src/styles/_button.scss
+++ b/client/src/styles/_button.scss
@@ -47,7 +47,7 @@
 .btn:not(.btn-link) {
   @include button();
 
-  padding: 0.7rem 0.8rem;
+  padding: 0.44rem 0.5rem;
   height: auto;
 }
 
@@ -123,7 +123,7 @@
 }
 
 .icon-mail:before {
-  border-radius: 0.1rem;
+  border-radius: 0.06rem;
 }
 
 // WHO ARE OUR USERS SURVEY BUTTON
@@ -133,7 +133,7 @@
   text-align: center;
   color: $justfix-black;
   background-color: $justfix-pink;
-  height: 4rem;
+  height: 2.5rem;
 }
 
 .waou-survey-button:hover,
@@ -152,20 +152,20 @@
 
   @if $color ==$justfix-white {
     color: $justfix-black;
-    border: 0.1rem solid $justfix-black;
+    border: 0.06rem solid $justfix-black;
   } @else {
     color: $justfix-white;
-    border: 0.1rem solid $justfix-white;
+    border: 0.06rem solid $justfix-white;
   }
 
   $button-shadow: #d4d5d0;
-  border-radius: 10rem;
-  padding: 1.6rem 3.2rem;
+  border-radius: 6.25rem;
+  padding: 1rem 2rem;
   width: fit-content;
   height: fit-content;
   display: inline-block;
   flex: none;
-  box-shadow: 0.4rem 0.4rem 0rem $button-shadow;
+  box-shadow: 0.25rem 0.25rem 0rem $button-shadow;
   max-width: 100%;
   white-space: normal;
   word-wrap: break-word;
@@ -183,8 +183,8 @@
 
   &:hover {
     transition: all 0.1s linear;
-    box-shadow: 0rem 0.4rem 0rem 0rem $button-shadow;
-    transform: translateX(0.7rem);
+    box-shadow: 0rem 0.25rem 0rem 0rem $button-shadow;
+    transform: translateX(0.44rem);
   }
 
   &:focus-visible {
@@ -203,13 +203,13 @@
 
     border-style: solid;
     background-color: $color;
-    box-shadow: 0rem -0.4rem 0rem 0rem $button-shadow;
+    box-shadow: 0rem -0.25rem 0rem 0rem $button-shadow;
   }
 
   &:disabled {
     background-color: $justfix-grey-600;
     border: 1px solid $justfix-white;
-    border-radius: 10rem;
+    border-radius: 6.25rem;
     box-shadow: none;
   }
 }
@@ -237,14 +237,14 @@
   text-underline-position: under;
   &:focus,
   &:focus-visible {
-    outline: 0.2rem solid $justfix-grey;
-    outline-offset: 0.2rem;
+    outline: 0.13rem solid $justfix-grey;
+    outline-offset: 0.13rem;
   }
 }
 
 .buttons.has-addons {
   width: fit-content;
-  border-radius: 0.4rem;
+  border-radius: 0.25rem;
   border: 1px solid $justfix-white;
 
   .button {
diff --git a/client/src/styles/_datatable.scss b/client/src/styles/_datatable.scss
index 6a7f1de47..017ae288c 100644
--- a/client/src/styles/_datatable.scss
+++ b/client/src/styles/_datatable.scss
@@ -38,20 +38,20 @@
         }
 
         text-align: center;
-        font-size: 2rem;
+        font-size: 1.25rem;
 
         @include for-tablet-landscape-down() {
-          font-size: 1.6rem;
+          font-size: 1rem;
         }
 
         @include for-phone-only() {
-          font-size: 1.3rem;
+          font-size: 0.81rem;
         }
 
         > label {
           display: block;
           line-height: 1.1;
-          font-size: 1.3rem;
+          font-size: 0.81rem;
           padding: 1px 0;
           // background-color: $background;
           border-bottom: 1px solid $gray-dark;
@@ -74,12 +74,12 @@
       }
 
       .table-content {
-        margin: 1rem 0.75rem;
-        line-height: 1.3rem;
+        margin: 0.63rem 0.47rem;
+        line-height: 0.81rem;
       }
 
       .table-small-font {
-        font-size: 1.3rem;
+        font-size: 0.81rem;
       }
     }
   }
diff --git a/client/src/styles/_input.scss b/client/src/styles/_input.scss
index 69b839e3c..b0c9fe9e4 100644
--- a/client/src/styles/_input.scss
+++ b/client/src/styles/_input.scss
@@ -4,7 +4,7 @@
   display: inline-block;
   border: 1px solid $justfix-black;
   background: $justfix-white;
-  padding: 1rem;
+  padding: 0.63rem;
   font-size: inherit;
   border-radius: 4px;
   font-weight: 400;
diff --git a/client/src/styles/_minmaxselect.scss b/client/src/styles/_minmaxselect.scss
index 98894dfdf..779d5133e 100644
--- a/client/src/styles/_minmaxselect.scss
+++ b/client/src/styles/_minmaxselect.scss
@@ -5,8 +5,8 @@
 .minmaxselect-container {
   display: flex;
   flex-direction: column;
-  padding: 1.2rem;
-  gap: 1.2rem;
+  padding: 0.75rem;
+  gap: 0.75rem;
   font-weight: 600;
   @include browser("Firefox") {
     font-weight: 500;
@@ -15,12 +15,12 @@
     display: grid;
     width: 100%;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 4rem 4rem;
-    gap: 0.1rem;
+    grid-template-rows: 2.5rem 2.5rem;
+    gap: 0.06rem;
     .minmaxselect__preset-value {
       position: relative;
       display: flex;
-      box-shadow: 0 0 0 0.1rem $justfix-grey-700;
+      box-shadow: 0 0 0 0.06rem $justfix-grey-700;
       color: $justfix-black;
       background-color: $justfix-white;
       &:has(> input[disabled]) {
@@ -32,7 +32,7 @@
         color: $justfix-white;
       }
       &:focus-within {
-        outline: 0.2rem solid $justfix-black;
+        outline: 0.13rem solid $justfix-black;
         z-index: 1;
       }
       input[type="checkbox"] {
@@ -41,8 +41,8 @@
         opacity: 0;
         width: 1em;
         height: 1em;
-        top: 0.5rem;
-        left: 1.5rem;
+        top: 0.31rem;
+        left: 0.94rem;
       }
       label {
         display: flex;
@@ -60,7 +60,7 @@
     .minmaxselect__clear-value-button,
     .minmaxselect__custom-range-summary span {
       text-transform: none;
-      font-size: 1.2rem;
+      font-size: 0.75rem;
       text-decoration: underline;
       text-underline-position: under;
       color: $justfix-grey-700;
@@ -74,8 +74,8 @@
         display: none;
       }
       svg {
-        height: 1.1rem;
-        margin-left: 0.2rem;
+        height: 0.69rem;
+        margin-left: 0.13rem;
       }
     }
     details[open] > summary svg {
@@ -87,15 +87,15 @@
     .minmaxselect__custom-range-container {
       display: flex;
       flex-direction: column;
-      padding-top: 1.2rem;
-      gap: 1.2rem;
+      padding-top: 0.75rem;
+      gap: 0.75rem;
       .minmaxselect__label-input-container {
         display: flex;
         flex-direction: column;
         width: fit-content;
-        gap: 0.4rem;
+        gap: 0.25rem;
         color: $justfix-grey-700;
-        font-size: 1.2rem;
+        font-size: 0.75rem;
         .minmaxselect__labels-container {
           display: flex;
           label:first-child {
@@ -104,19 +104,19 @@
         }
         .minmaxselect__inputs-container {
           display: flex;
-          gap: 1rem;
+          gap: 0.63rem;
           align-items: center;
           input {
-            --input-size: 4.4rem;
-            --input-padding: 0.8rem;
+            --input-size: 2.75rem;
+            --input-padding: 0.5rem;
             width: calc(var(--input-size) - (var(--input-padding) * 2));
             height: calc(var(--input-size) - (var(--input-padding) * 2));
             padding: var(--input-padding);
             background-color: $justfix-white;
             color: $justfix-black;
-            font-size: 1.6rem;
-            border: 0.1rem solid $justfix-grey-600;
-            border-radius: 0.2rem;
+            font-size: 1rem;
+            border: 0.06rem solid $justfix-grey-600;
+            border-radius: 0.13rem;
             appearance: textfield;
             // remove increment arrows
             &::-webkit-outer-spin-button,
@@ -128,7 +128,7 @@
               outline: none;
             }
             &.hasError {
-              outline: 0.3rem solid $justfix-orange;
+              outline: 0.19rem solid $justfix-orange;
             }
           }
         }
diff --git a/client/src/styles/_modal.scss b/client/src/styles/_modal.scss
index 93a766ef7..cc29fb63e 100644
--- a/client/src/styles/_modal.scss
+++ b/client/src/styles/_modal.scss
@@ -44,13 +44,13 @@ $sticky-modal-zindex: 20;
   position: absolute;
   right: 0;
   top: 0;
-  height: 3.5rem;
-  width: 3.5rem;
+  height: 2.19rem;
+  width: 2.19rem;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  font-size: 1.8rem;
+  font-size: 1.13rem;
 }
 
 .sticky-modal-body {
@@ -60,13 +60,13 @@ $sticky-modal-zindex: 20;
 
 .App__body:has(.AddressPage__viz.AddressPage__content-active) + .sticky-modal,
 .App__body:has(.AddressPage__table.AddressPage__content-active) + .sticky-modal {
-  margin-bottom: 5rem;
+  margin-bottom: 3.13rem;
 }
 
 @include for-tablet-landscape-up() {
   .sticky-modal {
     font-weight: 400;
-    width: 31rem;
+    width: 19.38rem;
     margin-right: $spacing-07;
   }
 }
diff --git a/client/src/styles/_multiselect.scss b/client/src/styles/_multiselect.scss
index 68f608275..17383d099 100644
--- a/client/src/styles/_multiselect.scss
+++ b/client/src/styles/_multiselect.scss
@@ -14,23 +14,23 @@
   }
   line-height: 100%;
   letter-spacing: 0.02em;
-  padding: 1.2rem;
-  gap: 1.2rem;
+  padding: 0.75rem;
+  gap: 0.75rem;
 
   .multiselect__selected-value-container {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.6rem;
+    gap: 0.37rem;
     padding: 0;
     margin: 0;
 
     .multiselect__multi-value,
     .multiselect__show-more-button {
-      border-radius: 0.8rem;
-      padding: 0.8rem 1.4rem;
+      border-radius: 0.5rem;
+      padding: 0.5rem 0.87rem;
       margin: 0;
       white-space: pre-line;
-      gap: 0.5rem;
+      gap: 0.31rem;
       width: fit-content;
     }
 
@@ -42,7 +42,7 @@
       }
       .multiselect__multi-value__label {
         text-transform: uppercase;
-        font-size: 1.4rem;
+        font-size: 0.87rem;
         padding: 0;
         white-space: normal;
       }
@@ -53,23 +53,23 @@
           background-color: inherit;
         }
         svg {
-          width: 1rem;
-          height: 1rem;
-          stroke-width: 0.3rem;
+          width: 0.63rem;
+          height: 0.63rem;
+          stroke-width: 0.19rem;
         }
       }
     }
 
     .multiselect__show-more-button {
-      border: 0.1rem solid $justfix-black;
-      padding: 0.8rem 0.6rem;
+      border: 0.06rem solid $justfix-black;
+      padding: 0.5rem 0.37rem;
     }
   }
   .multiselect__selected-value-control-container {
     display: flex;
     .button.is-text {
       color: $justfix-grey-700;
-      padding: 0.8rem 0;
+      padding: 0.5rem 0;
       &.multiselect__clear-value-button {
         margin-left: auto;
       }
@@ -93,7 +93,7 @@
 
       .multiselect__input-container,
       .multiselect__placeholder {
-        padding: 0.5rem;
+        padding: 0.31rem;
         margin: 0;
       }
       .multiselect__placeholder {
@@ -104,9 +104,9 @@
       }
 
       .multiselect__input-container {
-        border: 0.1rem solid $justfix-black;
-        border-radius: 0.2rem 0.2rem 0 0;
-        font-size: 1.6rem;
+        border: 0.06rem solid $justfix-black;
+        border-radius: 0.13rem 0.13rem 0 0;
+        font-size: 1rem;
         color: $justfix-black;
 
         &::placeholder,
@@ -120,25 +120,25 @@
   }
   .multiselect__menu {
     margin: 0;
-    border-radius: 0 0 0.2rem 0.2rem;
+    border-radius: 0 0 0.13rem 0.13rem;
     position: relative;
-    border: 0.1rem solid $justfix-grey-400;
+    border: 0.06rem solid $justfix-grey-400;
     border-top: none;
     box-shadow: none;
     color: $justfix-black;
     background-color: $justfix-white;
 
     .multiselect__menu-list {
-      max-height: 25rem;
+      max-height: 15.63rem;
       @include for-tablet-portrait-up() {
-        @include scrollbar_wowza(inherit, 0.8rem, $justfix-grey-50);
+        @include scrollbar_wowza(inherit, 0.5rem, $justfix-grey-50);
       }
 
       .multiselect__option {
         background-color: unset;
         display: flex;
         align-items: center;
-        gap: 1.6rem;
+        gap: 1rem;
         cursor: pointer;
 
         &.multiselect__option--is-focused {
@@ -154,19 +154,19 @@
           }
         }
         .multiselect__option-checkbox {
-          --box-size: 1.8rem;
+          --box-size: 1.13rem;
           height: var(--box-size);
           width: var(--box-size);
           min-height: var(--box-size);
           min-width: var(--box-size);
-          border-radius: 0.4rem;
-          border: 0.1rem solid $justfix-black;
+          border-radius: 0.25rem;
+          border: 0.06rem solid $justfix-black;
           display: flex;
           align-items: center;
           justify-content: center;
           svg {
-            height: 1rem;
-            width: 1.4rem;
+            height: 0.63rem;
+            width: 0.87rem;
           }
         }
       }
@@ -183,5 +183,5 @@
   .multiselect__control
   .multiselect__value-container
   .multiselect__input-container {
-  border: 0.3rem solid $justfix-orange;
+  border: 0.19rem solid $justfix-orange;
 }
diff --git a/client/src/styles/_scrollbar.scss b/client/src/styles/_scrollbar.scss
index c44817c39..0229b97d1 100644
--- a/client/src/styles/_scrollbar.scss
+++ b/client/src/styles/_scrollbar.scss
@@ -57,7 +57,7 @@ $scroll-body: darken($background, 15%);
   &::-webkit-scrollbar {
     border-radius: $track-radius;
     background-color: $bg-color;
-    width: 1.8rem;
+    width: 1.13rem;
   }
   &::-webkit-scrollbar-track {
     border-radius: $track-radius;
diff --git a/client/src/styles/_tabs.scss b/client/src/styles/_tabs.scss
index 2b9f34759..c8224b0a9 100644
--- a/client/src/styles/_tabs.scss
+++ b/client/src/styles/_tabs.scss
@@ -157,11 +157,11 @@
       }
 
       a {
-        font-size: 1.3rem;
+        font-size: 0.81rem;
         line-height: 1.5;
 
         border-bottom: none;
-        padding: 0.3rem 0.2rem;
+        padding: 0.19rem 0.13rem;
 
         position: relative;
 
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index 1a4f04b17..340208268 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -11,7 +11,7 @@ $eyebrow-font: "Suisse Int'l Mono", "Courier New", Courier, monospace;
 
 @mixin body-standard {
   font-family: $body-font;
-  font-size: 1.125rem;
+  font-size: 0.7rem;
   line-height: 100%;
   font-weight: 400;
   font-style: normal;
@@ -22,14 +22,14 @@ $eyebrow-font: "Suisse Int'l Mono", "Courier New", Courier, monospace;
 @mixin desktop-h1 {
   @include body-standard();
   font-family: $title-font;
-  font-size: 6rem;
+  font-size: 3.75rem;
   letter-spacing: 0.03em;
 }
 
 @mixin desktop-h2 {
   @include body-standard();
   font-family: $title-font;
-  font-size: 4rem;
+  font-size: 2.5rem;
   line-height: 90%;
   letter-spacing: 0.03em;
 }
@@ -37,19 +37,19 @@ $eyebrow-font: "Suisse Int'l Mono", "Courier New", Courier, monospace;
 @mixin desktop-h3 {
   @include body-standard();
   font-weight: 600;
-  font-size: 2.25rem;
+  font-size: 1.41rem;
 }
 
 @mixin desktop-h4 {
   @include body-standard();
   font-weight: 600;
-  font-size: 1.8rem;
+  font-size: 1.13rem;
   line-height: 120%;
 }
 
 @mixin desktop-text-small {
   @include body-standard();
-  font-size: 0.875rem;
+  font-size: 0.55rem;
 }
 
 @mixin desktop-text-small-bold {
@@ -68,40 +68,40 @@ $eyebrow-font: "Suisse Int'l Mono", "Courier New", Courier, monospace;
 
 @mixin desktop-eyebrow-small {
   @include desktop-eyebrow();
-  font-size: 1rem;
+  font-size: 0.63rem;
 }
 
 // TYPOGRAPHY-MOBILE:
 @mixin mobile-body-standard {
   @include body-standard();
   line-height: 125%;
-  font-size: 2rem;
+  font-size: 1.25rem;
 }
 
 @mixin mobile-h1 {
   @include body-standard();
   font-weight: 600;
-  font-size: 3.6rem;
+  font-size: 2.25rem;
 }
 
 @mixin mobile-h2 {
   @include body-standard();
   font-weight: 600;
-  font-size: 1.8rem;
+  font-size: 1.13rem;
   letter-spacing: 0.02em;
   font-variant: all-small-caps;
 }
 
 @mixin mobile-h3 {
   @include body-standard();
-  font-size: 2.4rem;
+  font-size: 1.5rem;
   line-height: 110%;
 }
 
 @mixin mobile-eyebrow {
   @include body-standard();
   font-family: $eyebrow-font;
-  font-size: 1.4rem;
+  font-size: 0.87rem;
   line-height: 115%;
   letter-spacing: 0.03em;
   text-transform: uppercase;
@@ -109,7 +109,7 @@ $eyebrow-font: "Suisse Int'l Mono", "Courier New", Courier, monospace;
 
 @mixin mobile-text-small {
   @include body-standard();
-  font-size: 1.4rem;
+  font-size: 0.87rem;
 }
 
 @mixin mobile-text-small-bold {
diff --git a/client/src/styles/_vars.scss b/client/src/styles/_vars.scss
index a6ce57c68..547b2572d 100644
--- a/client/src/styles/_vars.scss
+++ b/client/src/styles/_vars.scss
@@ -128,16 +128,16 @@ $justfix-orange: #ff813a;
 $justfix-blue: #5188ff;
 
 // SPACING:
-$spacing-01: 0.125rem;
-$spacing-02: 0.25rem;
-$spacing-03: 0.5rem;
-$spacing-04: 0.75rem;
-$spacing-05: 1rem; // 10px
-$spacing-06: 1.5rem;
-$spacing-07: 2rem;
-$spacing-08: 2.5rem;
-$spacing-09: 3rem;
-$spacing-10: 4rem;
-$spacing-11: 5rem;
-$spacing-12: 6rem;
-$spacing-13: 10rem;
+$spacing-01: 0.08rem;
+$spacing-02: 0.16rem;
+$spacing-03: 0.31rem;
+$spacing-04: 0.47rem;
+$spacing-05: 0.63rem; // 10px
+$spacing-06: 0.94rem;
+$spacing-07: 1.25rem;
+$spacing-08: 1.56rem;
+$spacing-09: 1.88rem;
+$spacing-10: 2.5rem;
+$spacing-11: 3.13rem;
+$spacing-12: 3.75rem;
+$spacing-13: 6.25rem;

From 00b5700034dc5780fc91708a7b2792898d8789c3 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 13:35:50 -0500
Subject: [PATCH 03/12] copy spectre files, remove from package.json

---
 client/package.json                           |   5 +-
 client/src/styles/spectre.scss                |  76 +--
 client/src/styles/spectre/spectre-exp.scss    |  16 +
 client/src/styles/spectre/spectre-icons.scss  |   6 +
 client/src/styles/spectre/spectre.scss        |  50 ++
 .../src/styles/spectre/src/_animations.scss   |  20 +
 client/src/styles/spectre/src/_asian.scss     |  28 +
 .../src/styles/spectre/src/_autocomplete.scss |  40 ++
 client/src/styles/spectre/src/_avatars.scss   |  65 ++
 client/src/styles/spectre/src/_badges.scss    |  70 ++
 client/src/styles/spectre/src/_bars.scss      |  72 +++
 client/src/styles/spectre/src/_base.scss      |  40 ++
 .../src/styles/spectre/src/_breadcrumbs.scss  |  20 +
 client/src/styles/spectre/src/_buttons.scss   | 173 +++++
 client/src/styles/spectre/src/_calendars.scss | 206 ++++++
 client/src/styles/spectre/src/_cards.scss     |  47 ++
 client/src/styles/spectre/src/_carousels.scss | 124 ++++
 client/src/styles/spectre/src/_chips.scss     |  24 +
 client/src/styles/spectre/src/_codes.scss     |  31 +
 .../spectre/src/_comparison-sliders.scss      | 115 ++++
 client/src/styles/spectre/src/_dropdowns.scss |  34 +
 client/src/styles/spectre/src/_empty.scss     |  21 +
 client/src/styles/spectre/src/_filters.scss   |  29 +
 client/src/styles/spectre/src/_forms.scss     | 419 ++++++++++++
 client/src/styles/spectre/src/_icons.scss     | 608 ++++++++++++++++++
 client/src/styles/spectre/src/_labels.scss    |  21 +
 client/src/styles/spectre/src/_layout.scss    | 409 ++++++++++++
 client/src/styles/spectre/src/_media.scss     |  69 ++
 client/src/styles/spectre/src/_menus.scss     |  46 ++
 client/src/styles/spectre/src/_meters.scss    |  57 ++
 client/src/styles/spectre/src/_mixins.scss    |  42 ++
 client/src/styles/spectre/src/_modals.scss    |  74 +++
 client/src/styles/spectre/src/_navbar.scss    |  29 +
 .../src/styles/spectre/src/_navigation.scss   |  13 +
 client/src/styles/spectre/src/_navs.scss      |  35 +
 client/src/styles/spectre/src/_normalize.scss | 439 +++++++++++++
 .../src/styles/spectre/src/_pagination.scss   |  56 ++
 client/src/styles/spectre/src/_panels.scss    |  31 +
 client/src/styles/spectre/src/_parallax.scss  | 142 ++++
 client/src/styles/spectre/src/_popovers.scss  |  70 ++
 client/src/styles/spectre/src/_progress.scss  |  46 ++
 client/src/styles/spectre/src/_sliders.scss   |  93 +++
 client/src/styles/spectre/src/_steps.scss     |  69 ++
 client/src/styles/spectre/src/_tables.scss    |  46 ++
 client/src/styles/spectre/src/_tabs.scss      |  56 ++
 client/src/styles/spectre/src/_tiles.scss     |  43 ++
 client/src/styles/spectre/src/_timelines.scss |  55 ++
 client/src/styles/spectre/src/_toasts.scss    |  37 ++
 client/src/styles/spectre/src/_tooltips.scss  |  77 +++
 .../src/styles/spectre/src/_typography.scss   | 102 +++
 client/src/styles/spectre/src/_utilities.scss | 245 +++++++
 client/src/styles/spectre/src/_variables.scss |  74 +++
 52 files changed, 4776 insertions(+), 39 deletions(-)
 create mode 100644 client/src/styles/spectre/spectre-exp.scss
 create mode 100644 client/src/styles/spectre/spectre-icons.scss
 create mode 100644 client/src/styles/spectre/spectre.scss
 create mode 100755 client/src/styles/spectre/src/_animations.scss
 create mode 100755 client/src/styles/spectre/src/_asian.scss
 create mode 100755 client/src/styles/spectre/src/_autocomplete.scss
 create mode 100755 client/src/styles/spectre/src/_avatars.scss
 create mode 100755 client/src/styles/spectre/src/_badges.scss
 create mode 100755 client/src/styles/spectre/src/_bars.scss
 create mode 100755 client/src/styles/spectre/src/_base.scss
 create mode 100755 client/src/styles/spectre/src/_breadcrumbs.scss
 create mode 100755 client/src/styles/spectre/src/_buttons.scss
 create mode 100755 client/src/styles/spectre/src/_calendars.scss
 create mode 100755 client/src/styles/spectre/src/_cards.scss
 create mode 100755 client/src/styles/spectre/src/_carousels.scss
 create mode 100755 client/src/styles/spectre/src/_chips.scss
 create mode 100755 client/src/styles/spectre/src/_codes.scss
 create mode 100755 client/src/styles/spectre/src/_comparison-sliders.scss
 create mode 100755 client/src/styles/spectre/src/_dropdowns.scss
 create mode 100755 client/src/styles/spectre/src/_empty.scss
 create mode 100755 client/src/styles/spectre/src/_filters.scss
 create mode 100755 client/src/styles/spectre/src/_forms.scss
 create mode 100755 client/src/styles/spectre/src/_icons.scss
 create mode 100755 client/src/styles/spectre/src/_labels.scss
 create mode 100755 client/src/styles/spectre/src/_layout.scss
 create mode 100755 client/src/styles/spectre/src/_media.scss
 create mode 100755 client/src/styles/spectre/src/_menus.scss
 create mode 100755 client/src/styles/spectre/src/_meters.scss
 create mode 100755 client/src/styles/spectre/src/_mixins.scss
 create mode 100755 client/src/styles/spectre/src/_modals.scss
 create mode 100755 client/src/styles/spectre/src/_navbar.scss
 create mode 100755 client/src/styles/spectre/src/_navigation.scss
 create mode 100755 client/src/styles/spectre/src/_navs.scss
 create mode 100755 client/src/styles/spectre/src/_normalize.scss
 create mode 100755 client/src/styles/spectre/src/_pagination.scss
 create mode 100755 client/src/styles/spectre/src/_panels.scss
 create mode 100755 client/src/styles/spectre/src/_parallax.scss
 create mode 100755 client/src/styles/spectre/src/_popovers.scss
 create mode 100755 client/src/styles/spectre/src/_progress.scss
 create mode 100755 client/src/styles/spectre/src/_sliders.scss
 create mode 100755 client/src/styles/spectre/src/_steps.scss
 create mode 100755 client/src/styles/spectre/src/_tables.scss
 create mode 100755 client/src/styles/spectre/src/_tabs.scss
 create mode 100755 client/src/styles/spectre/src/_tiles.scss
 create mode 100755 client/src/styles/spectre/src/_timelines.scss
 create mode 100755 client/src/styles/spectre/src/_toasts.scss
 create mode 100755 client/src/styles/spectre/src/_tooltips.scss
 create mode 100755 client/src/styles/spectre/src/_typography.scss
 create mode 100755 client/src/styles/spectre/src/_utilities.scss
 create mode 100755 client/src/styles/spectre/src/_variables.scss

diff --git a/client/package.json b/client/package.json
index ad1154c6b..f3116f1d9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -75,7 +75,6 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollbar": "^2.14.4",
     "sass": "^1.49.9",
-    "spectre.scss": "0.0.2",
     "typescript": "^4.9.3",
     "widont": "^0.3.3",
     "xstate": "^4.11.0"
@@ -88,8 +87,8 @@
     "contentful": "node pull-contentful-data.js",
     "contentful-common-strings": "contentful-common-strings fetch -o src/data/common-strings.json",
     "typecheck": "tsc",
-    "build-css": "sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --load-path node_modules/spectre.scss/src/",
-    "watch-css": "yarn build-css && sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --load-path node_modules/spectre.scss/src/ --watch",
+    "build-css": "sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/",
+    "watch-css": "yarn build-css && sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --watch",
     "start-js": "lingui compile && react-scripts start",
     "start": "yarn contentful-common-strings --dev && npm-run-all -p watch-css start-js",
     "build": "yarn contentful-common-strings && node write-version.js && yarn build-css && lingui compile && react-scripts build",
diff --git a/client/src/styles/spectre.scss b/client/src/styles/spectre.scss
index 1b9eda550..82e05b805 100644
--- a/client/src/styles/spectre.scss
+++ b/client/src/styles/spectre.scss
@@ -1,12 +1,16 @@
 /*! Spectre.css | MIT License | github.com/picturepan2/spectre */
 
+// JUSTFIX: we manually copied over these files from node_modules and changed
+// all the rem units for 16px base font size instead of 10px, so that WOW aligns
+// with tenant platform and component-library. We were using version 0.0.2
+
 // Include our variables to overwrite the default ones
 @import "styles/_vars.scss";
 @import "styles/_button.scss";
 @import "styles/_modal.scss";
 
-@import "spectre.scss/spectre.scss";
-@import "spectre.scss/spectre-icons.scss";
+@import "styles/spectre/spectre.scss";
+@import "styles/spectre/spectre-icons.scss";
 
 // various overwrites
 html {
@@ -109,48 +113,48 @@ sup .tooltip:after {
 }
 
 // Core variables and mixins
-// @import 'spectre.scss/src/_variables.scss';
+// @import 'styles/spectre/src/_variables.scss';
 //
-// @import 'spectre.scss/src/_mixins.scss';
+// @import 'styles/spectre/src/_mixins.scss';
 //
 // // Reset and dependencies
-// @import 'spectre.scss/src/_normalize.scss';
-// @import 'spectre.scss/src/_base.scss';
+// @import 'styles/spectre/src/_normalize.scss';
+// @import 'styles/spectre/src/_base.scss';
 //
 // // Core classes
-// @import 'spectre.scss/src/_typography.scss';
-// // @import 'spectre.scss/src/_asian.scss';
-// @import 'spectre.scss/src/_tables.scss';
-// @import 'spectre.scss/src/_buttons.scss';
-// @import 'spectre.scss/src/_forms.scss';
-// @import 'spectre.scss/src/_labels.scss';
-// @import 'spectre.scss/src/_codes.scss';
-// @import 'spectre.scss/src/_media.scss';
+// @import 'styles/spectre/src/_typography.scss';
+// // @import 'styles/spectre/src/_asian.scss';
+// @import 'styles/spectre/src/_tables.scss';
+// @import 'styles/spectre/src/_buttons.scss';
+// @import 'styles/spectre/src/_forms.scss';
+// @import 'styles/spectre/src/_labels.scss';
+// @import 'styles/spectre/src/_codes.scss';
+// @import 'styles/spectre/src/_media.scss';
 //
 // // Layout
-@import "spectre.scss/src/_layout.scss";
-// @import 'spectre.scss/src/_navbar.scss';
-// @import 'spectre.scss/src/_panels.scss';
-// @import 'spectre.scss/src/_empty.scss';
+@import "styles/spectre/src/_layout.scss";
+// @import 'styles/spectre/src/_navbar.scss';
+// @import 'styles/spectre/src/_panels.scss';
+// @import 'styles/spectre/src/_empty.scss';
 //
 // // Components
-// @import 'spectre.scss/src/_autocomplete.scss';
-// @import 'spectre.scss/src/_avatars.scss';
-// @import 'spectre.scss/src/_badges.scss';
-// @import 'spectre.scss/src/_bars.scss';
-// @import 'spectre.scss/src/_cards.scss';
-// @import 'spectre.scss/src/_chips.scss';
-// @import 'spectre.scss/src/_dropdowns.scss';
-// @import 'spectre.scss/src/_menus.scss';
-// @import 'spectre.scss/src/_modals.scss';
-// @import 'spectre.scss/src/_navigation.scss';
-// @import 'spectre.scss/src/_popovers.scss';
-// @import 'spectre.scss/src/_steps.scss';
-// @import 'spectre.scss/src/_tiles.scss';
-// @import 'spectre.scss/src/_toasts.scss';
-// @import 'spectre.scss/src/_tooltips.scss';
-// @import 'spectre.scss/src/_icons.scss';
+// @import 'styles/spectre/src/_autocomplete.scss';
+// @import 'styles/spectre/src/_avatars.scss';
+// @import 'styles/spectre/src/_badges.scss';
+// @import 'styles/spectre/src/_bars.scss';
+// @import 'styles/spectre/src/_cards.scss';
+// @import 'styles/spectre/src/_chips.scss';
+// @import 'styles/spectre/src/_dropdowns.scss';
+// @import 'styles/spectre/src/_menus.scss';
+// @import 'styles/spectre/src/_modals.scss';
+// @import 'styles/spectre/src/_navigation.scss';
+// @import 'styles/spectre/src/_popovers.scss';
+// @import 'styles/spectre/src/_steps.scss';
+// @import 'styles/spectre/src/_tiles.scss';
+// @import 'styles/spectre/src/_toasts.scss';
+// @import 'styles/spectre/src/_tooltips.scss';
+// @import 'styles/spectre/src/_icons.scss';
 //
 // // Utility classes
-// @import 'spectre.scss/src/_animations.scss';
-@import "spectre.scss/src/_utilities.scss";
+// @import 'styles/spectre/src/_animations.scss';
+@import "styles/spectre/src/_utilities.scss";
diff --git a/client/src/styles/spectre/spectre-exp.scss b/client/src/styles/spectre/spectre-exp.scss
new file mode 100644
index 000000000..da74b2379
--- /dev/null
+++ b/client/src/styles/spectre/spectre-exp.scss
@@ -0,0 +1,16 @@
+/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
+
+// Core variables and mixins
+@import "src/_variables.scss";
+@import "src/_mixins.scss";
+
+// Experimentals
+@import "src/_calendars.scss";
+@import "src/_carousels.scss";
+@import "src/_comparison-sliders.scss";
+@import "src/_filters.scss";
+@import "src/_meters.scss";
+@import "src/_parallax.scss";
+@import "src/_progress.scss";
+@import "src/_sliders.scss";
+@import "src/_timelines.scss";
diff --git a/client/src/styles/spectre/spectre-icons.scss b/client/src/styles/spectre/spectre-icons.scss
new file mode 100644
index 000000000..96e6886c5
--- /dev/null
+++ b/client/src/styles/spectre/spectre-icons.scss
@@ -0,0 +1,6 @@
+// Core variables and mixins
+@import "src/_variables.scss";
+@import "src/_mixins.scss";
+
+// Icons
+@import "src/_icons.scss";
diff --git a/client/src/styles/spectre/spectre.scss b/client/src/styles/spectre/spectre.scss
new file mode 100644
index 000000000..e8db8e0f6
--- /dev/null
+++ b/client/src/styles/spectre/spectre.scss
@@ -0,0 +1,50 @@
+/*! Spectre.css | MIT License | github.com/picturepan2/spectre */
+
+// JUSTFIX: we manually copied over these files from node_modules and changed
+// all the rem units for 16px base font size instead of 10px, so that WOW aligns
+// with tenant platform and component-library. We were using version 0.0.2
+
+// Core variables and mixins
+@import "src/_variables.scss";
+@import "src/_mixins.scss";
+
+// Reset and dependencies
+@import "src/_normalize.scss";
+@import "src/_base.scss";
+
+// Core classes
+@import "src/_typography.scss";
+@import "src/_asian.scss";
+@import "src/_tables.scss";
+@import "src/_buttons.scss";
+@import "src/_forms.scss";
+@import "src/_labels.scss";
+@import "src/_codes.scss";
+@import "src/_media.scss";
+
+// Layout
+@import "src/_layout.scss";
+@import "src/_navbar.scss";
+@import "src/_panels.scss";
+@import "src/_empty.scss";
+
+// Components
+@import "src/_autocomplete.scss";
+@import "src/_avatars.scss";
+@import "src/_badges.scss";
+@import "src/_bars.scss";
+@import "src/_cards.scss";
+@import "src/_chips.scss";
+@import "src/_dropdowns.scss";
+@import "src/_menus.scss";
+@import "src/_modals.scss";
+@import "src/_navigation.scss";
+@import "src/_popovers.scss";
+@import "src/_steps.scss";
+@import "src/_tiles.scss";
+@import "src/_toasts.scss";
+@import "src/_tooltips.scss";
+
+// Utility classes
+@import "src/_animations.scss";
+@import "src/_utilities.scss";
diff --git a/client/src/styles/spectre/src/_animations.scss b/client/src/styles/spectre/src/_animations.scss
new file mode 100755
index 000000000..594c51d63
--- /dev/null
+++ b/client/src/styles/spectre/src/_animations.scss
@@ -0,0 +1,20 @@
+// Animations
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/client/src/styles/spectre/src/_asian.scss b/client/src/styles/spectre/src/_asian.scss
new file mode 100755
index 000000000..d714a601e
--- /dev/null
+++ b/client/src/styles/spectre/src/_asian.scss
@@ -0,0 +1,28 @@
+// Optimized for East Asian CJK
+:lang(zh),
+:lang(ja),
+:lang(ko),
+.cjk {
+  font-family: $cjk-font-family;
+}
+
+:lang(zh),
+:lang(ja),
+.cjk {
+  ins,
+  u {
+    border-bottom: 0.1rem solid;
+    text-decoration: none;
+  }
+  // Credit: https://github.com/ethantw/Han
+  del + del,
+  del + s,
+  ins + ins,
+  ins + u,
+  s + del,
+  s + s,
+  u + ins,
+  u + u {
+    margin-left: 0.125em;
+  }
+}
diff --git a/client/src/styles/spectre/src/_autocomplete.scss b/client/src/styles/spectre/src/_autocomplete.scss
new file mode 100755
index 000000000..a722be1df
--- /dev/null
+++ b/client/src/styles/spectre/src/_autocomplete.scss
@@ -0,0 +1,40 @@
+// Autocomplete
+.form-autocomplete {
+  position: relative;
+
+  .form-autocomplete-input {
+    align-content: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: 3.2rem;
+    padding: 0.1rem 0 0 0.1rem;
+
+    &.is-focused {
+      border-color: $primary-color;
+      @include control-shadow();
+    }
+
+    .form-input {
+      border-color: transparent;
+      box-shadow: none;
+      display: inline-block;
+      flex: 1 0 auto;
+      height: 2.8rem;
+      padding: 0.3rem 0.8rem;
+      width: auto;
+    }
+  }
+
+  mark {
+    font-size: 1;
+    padding: 0.1em 0;
+  }
+
+  .menu {
+    left: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+}
diff --git a/client/src/styles/spectre/src/_avatars.scss b/client/src/styles/spectre/src/_avatars.scss
new file mode 100755
index 000000000..954748f61
--- /dev/null
+++ b/client/src/styles/spectre/src/_avatars.scss
@@ -0,0 +1,65 @@
+// Avatars
+.avatar {
+  background: $primary-color;
+  border-radius: 50%;
+  color: fade-in($light-color, 0.85);
+  display: inline-block;
+  font-size: $font-size;
+  font-weight: 300;
+  height: 3.2rem;
+  line-height: 1;
+  margin: 0;
+  position: relative;
+  vertical-align: middle;
+  width: 3.2rem;
+
+  &.avatar-xs {
+    font-size: 0.8rem;
+    height: 1.6rem;
+    width: 1.6rem;
+  }
+  &.avatar-sm {
+    font-size: 1rem;
+    height: 2.4rem;
+    width: 2.4rem;
+  }
+  &.avatar-lg {
+    font-size: 2rem;
+    height: 4.8rem;
+    width: 4.8rem;
+  }
+  &.avatar-xl {
+    font-size: 2.6rem;
+    height: 6.4rem;
+    width: 6.4rem;
+  }
+
+  img {
+    border-radius: 50%;
+    height: 100%;
+    position: relative;
+    width: 100%;
+    z-index: $zindex-1;
+  }
+
+  .avatar-icon {
+    background: $bg-color-light;
+    bottom: 14.64%;
+    height: 50%;
+    padding: 0.2rem;
+    position: absolute;
+    right: 14.64%;
+    transform: translate(50%, 50%);
+    width: 50%;
+  }
+
+  &[data-initial]::before {
+    color: currentColor;
+    content: attr(data-initial);
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: $zindex-0;
+  }
+}
diff --git a/client/src/styles/spectre/src/_badges.scss b/client/src/styles/spectre/src/_badges.scss
new file mode 100755
index 000000000..4b5e24ac8
--- /dev/null
+++ b/client/src/styles/spectre/src/_badges.scss
@@ -0,0 +1,70 @@
+// Badges
+.badge {
+  position: relative;
+  white-space: nowrap;
+
+  &[data-badge],
+  &:not([data-badge]) {
+    &::after {
+      background: $primary-color;
+      background-clip: padding-box;
+      border: $border-width solid $bg-color-light;
+      border-radius: 1rem;
+      color: $light-color;
+      content: attr(data-badge);
+      display: inline-block;
+      transform: translate(-0.2rem, -1rem);
+    }
+  }
+  &[data-badge] {
+    &::after {
+      font-size: $font-size-sm;
+      height: 2rem;
+      line-height: 1;
+      min-width: 2rem;
+      padding: 0.3rem 0.5rem;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+  &:not([data-badge]),
+  &[data-badge=""] {
+    &::after {
+      height: 0.8rem;
+      min-width: 0.8rem;
+      padding: 0;
+      width: 0.8rem;
+    }
+  }
+
+  // Badges for Buttons
+  &.btn {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+
+  // Badges for Avatars
+  &.avatar {
+    &::after {
+      position: absolute;
+      top: 14.64%;
+      right: 14.64%;
+      transform: translate(50%, -50%);
+      z-index: $zindex-1;
+    }
+  }
+
+  &.avatar-xs {
+    &::after {
+      content: "";
+      height: 0.8rem;
+      min-width: 0.8rem;
+      padding: 0;
+      width: 0.8rem;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_bars.scss b/client/src/styles/spectre/src/_bars.scss
new file mode 100755
index 000000000..7dee841ac
--- /dev/null
+++ b/client/src/styles/spectre/src/_bars.scss
@@ -0,0 +1,72 @@
+// Bars
+.bar {
+  background: $bg-color-dark;
+  border-radius: $border-radius;
+  display: flex;
+  flex-wrap: nowrap;
+  height: 1.6rem;
+  width: 100%;
+
+  &.bar-sm {
+    height: 0.4rem;
+  }
+
+  // TODO: attr() support
+  .bar-item {
+    background: $primary-color;
+    color: $light-color;
+    display: block;
+    font-size: $font-size-sm;
+    flex-shrink: 0;
+    line-height: 1;
+    height: 100%;
+    padding: 0.2rem 0;
+    position: relative;
+    text-align: center;
+    width: 0;
+
+    &:first-child {
+      border-bottom-left-radius: $border-radius;
+      border-top-left-radius: $border-radius;
+    }
+    &:last-child {
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+      flex-shrink: 1;
+    }
+  }
+}
+
+// Slider bar
+.bar-slider {
+  height: 0.2rem;
+  margin: 1rem 0;
+  position: relative;
+
+  .bar-item {
+    left: 0;
+    padding: 0;
+    position: absolute;
+    &:not(:last-child):first-child {
+      background: $bg-color-dark;
+      z-index: $zindex-0;
+    }
+  }
+
+  .bar-slider-btn {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: 1.2rem;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: 1.2rem;
+
+    &:active {
+      box-shadow: 0 0 0 0.2rem $primary-color;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_base.scss b/client/src/styles/spectre/src/_base.scss
new file mode 100755
index 000000000..5f5a8d084
--- /dev/null
+++ b/client/src/styles/spectre/src/_base.scss
@@ -0,0 +1,40 @@
+// Base
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: $html-font-size;
+  line-height: $html-line-height;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  background: $body-bg;
+  color: $body-font-color;
+  font-family: $body-font-family;
+  font-size: $font-size;
+  overflow-x: hidden;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: $link-color;
+  outline: none;
+  text-decoration: none;
+
+  &:focus {
+    @include control-shadow();
+  }
+
+  &:focus,
+  &:hover,
+  &:active,
+  &.active {
+    color: $link-color-dark;
+    text-decoration: underline;
+  }
+}
diff --git a/client/src/styles/spectre/src/_breadcrumbs.scss b/client/src/styles/spectre/src/_breadcrumbs.scss
new file mode 100755
index 000000000..415b2bc8e
--- /dev/null
+++ b/client/src/styles/spectre/src/_breadcrumbs.scss
@@ -0,0 +1,20 @@
+// Breadcrumbs
+.breadcrumb {
+  padding: 1.2rem;
+
+  .breadcrumb-item {
+    display: inline-block;
+    margin: 0;
+
+    &:last-child {
+      color: $gray-color;
+    }
+    &:not(:first-child) {
+      &::before {
+        color: $gray-color-light;
+        content: "/";
+        padding: 0 0.4rem;
+      }
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_buttons.scss b/client/src/styles/spectre/src/_buttons.scss
new file mode 100755
index 000000000..e2e15734f
--- /dev/null
+++ b/client/src/styles/spectre/src/_buttons.scss
@@ -0,0 +1,173 @@
+// Buttons
+.btn {
+  appearance: none;
+  background: $bg-color-light;
+  border: $border-width solid $primary-color;
+  border-radius: $border-radius;
+  color: $link-color;
+  @include control-transition();
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size;
+  height: 3.2rem;
+  line-height: 2rem;
+  outline: none;
+  padding: 0.5rem 0.8rem;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  &:focus {
+    background: $secondary-color-light;
+    @include control-shadow();
+    text-decoration: none;
+  }
+  &:hover {
+    background: $primary-color;
+    border-color: $primary-color-dark;
+    color: $light-color;
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    background: $primary-color-dark;
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
+    text-decoration: none;
+  }
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  // Button Primary
+  &.btn-primary {
+    background: $primary-color;
+    border-color: $primary-color-dark;
+    color: $light-color;
+    &:focus,
+    &:hover {
+      background: darken($primary-color-dark, 2%);
+      border-color: darken($primary-color-dark, 5%);
+      color: $light-color;
+    }
+    &:active,
+    &.active {
+      background: darken($primary-color-dark, 4%);
+      border-color: darken($primary-color-dark, 7%);
+      color: $light-color;
+    }
+    &.loading {
+      &::after {
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
+      }
+    }
+  }
+
+  // Button Link
+  &.btn-link {
+    background: transparent;
+    border-color: transparent;
+    color: $link-color;
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      color: $link-color-dark;
+    }
+  }
+
+  // Button Sizes
+  &.btn-sm {
+    font-size: $font-size-sm;
+    height: 2.4rem;
+    padding: 0.1rem 0.8rem;
+  }
+
+  &.btn-lg {
+    font-size: $font-size-lg;
+    height: 4rem;
+    padding: 0.9rem 0.8rem;
+  }
+
+  // Button Block
+  &.btn-block {
+    display: block;
+    width: 100%;
+  }
+
+  // Button Action
+  &.btn-action {
+    width: 3.2rem;
+    padding-left: 0;
+    padding-right: 0;
+
+    &.btn-sm {
+      width: 2.4rem;
+    }
+
+    &.btn-lg {
+      width: 4rem;
+    }
+  }
+
+  // Button Clear
+  &.btn-clear {
+    background: transparent;
+    border: 0;
+    color: currentColor;
+    height: 1.6rem;
+    line-height: 1.6rem;
+    margin: 0.2rem -0.2rem 0.2rem 0.4rem;
+    opacity: 0.45;
+    padding: 0 0.2rem;
+    text-decoration: none;
+    width: 1.6rem;
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    &::before {
+      content: "\2715";
+    }
+  }
+}
+
+// Button groups
+.btn-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  .btn {
+    flex: 1 0 auto;
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: -0.1rem;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -0.1rem;
+    }
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      z-index: $zindex-0;
+    }
+  }
+
+  &.btn-group-block {
+    display: flex;
+  }
+}
diff --git a/client/src/styles/spectre/src/_calendars.scss b/client/src/styles/spectre/src/_calendars.scss
new file mode 100755
index 000000000..bc3590d5e
--- /dev/null
+++ b/client/src/styles/spectre/src/_calendars.scss
@@ -0,0 +1,206 @@
+// Calendars
+.calendar {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: block;
+  min-width: 28rem;
+  text-align: center;
+
+  .calendar-nav {
+    align-items: center;
+    background: $bg-color;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    display: flex;
+    font-size: $font-size-lg;
+    padding: 1rem;
+  }
+
+  .calendar-header,
+  .calendar-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 1rem 0;
+
+    .calendar-date {
+      flex: 0 0 14.28%; // 7 calendar-items each row
+      max-width: 14.28%;
+    }
+  }
+
+  .calendar-header {
+    background: $bg-color;
+    border-bottom: $border-width solid $border-color;
+    color: $gray-color;
+    font-size: $font-size-sm;
+  }
+
+  .calendar-body {
+    color: $gray-color-dark;
+  }
+
+  .calendar-date {
+    border: 0;
+    padding: 0.4rem;
+
+    .date-item {
+      appearance: none;
+      background: transparent;
+      border: $border-width solid transparent;
+      border-radius: 50%;
+      color: $gray-color-dark;
+      @include control-transition();
+      cursor: pointer;
+      height: 2.8rem;
+      line-height: 2rem;
+      outline: none;
+      padding: 0.3rem;
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      vertical-align: middle;
+      white-space: nowrap;
+      width: 2.8rem;
+
+      &.date-today {
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+      }
+
+      &:focus {
+        @include control-shadow();
+      }
+
+      &:focus,
+      &:hover {
+        background: $secondary-color-light;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+        text-decoration: none;
+      }
+      &:active,
+      &.active {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+
+      // Calendar badge support
+      &.badge {
+        &::after {
+          position: absolute;
+          top: 0.3rem;
+          right: 0.3rem;
+          transform: translate(50%, -50%);
+        }
+      }
+    }
+
+    &.disabled .date-item,
+    &.disabled .calendar-event,
+    .date-item:disabled,
+    .calendar-event:disabled {
+      cursor: default;
+      opacity: 0.25;
+      pointer-events: none;
+    }
+  }
+
+  .calendar-range {
+    position: relative;
+
+    &::before {
+      background: $secondary-color;
+      content: "";
+      height: 2.8rem;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &.range-start {
+      &::before {
+        left: 50%;
+      }
+    }
+    &.range-end {
+      &::before {
+        right: 50%;
+      }
+    }
+
+    .date-item {
+      color: $primary-color;
+    }
+  }
+
+  &.calendar-lg {
+    .calendar-body {
+      padding: 0;
+
+      .calendar-date {
+        border-bottom: $border-width solid $border-color;
+        border-right: $border-width solid $border-color;
+        display: flex;
+        flex-direction: column;
+        height: 11rem;
+        padding: 0;
+
+        &:nth-child(7n) {
+          border-right: 0;
+        }
+        &:nth-last-child(-n + 7) {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .date-item {
+      align-self: flex-end;
+      height: 2.8rem;
+      margin-right: 0.5rem;
+      margin-top: 0.5rem;
+    }
+
+    .calendar-range {
+      &::before {
+        top: 1.9rem;
+      }
+      &.range-start {
+        &::before {
+          left: auto;
+          width: 1.9rem;
+        }
+      }
+      &.range-end {
+        &::before {
+          right: 1.9rem;
+        }
+      }
+    }
+
+    .calendar-events {
+      flex-grow: 1;
+      line-height: 1;
+      overflow-y: auto;
+      padding: 0.5rem;
+    }
+
+    .calendar-event {
+      background: $secondary-color;
+      border-radius: $border-radius;
+      color: $primary-color;
+      font-size: $font-size-sm;
+      display: block;
+      margin: 0.2rem auto;
+      overflow: hidden;
+      padding: 0.3rem 0.4rem;
+      text-align: left;
+      text-overflow: ellipsis;
+      vertical-align: baseline;
+      white-space: nowrap;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_cards.scss b/client/src/styles/spectre/src/_cards.scss
new file mode 100755
index 000000000..4e5e45df9
--- /dev/null
+++ b/client/src/styles/spectre/src/_cards.scss
@@ -0,0 +1,47 @@
+// Cards
+.card {
+  background: $bg-color-light;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: block;
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding: $layout-padding-lg;
+    padding-bottom: 0;
+
+    &:last-child {
+      padding-bottom: $layout-padding-lg;
+    }
+  }
+
+  .card-image {
+    padding-top: $layout-padding-lg;
+
+    &:first-child {
+      padding-top: 0;
+
+      img {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      img {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+
+  .card-title {
+    font-size: 2rem;
+  }
+
+  .card-subtitle {
+    color: lighten($body-font-color, 40%);
+    font-size: $font-size-sm;
+  }
+}
diff --git a/client/src/styles/spectre/src/_carousels.scss b/client/src/styles/spectre/src/_carousels.scss
new file mode 100755
index 000000000..7ecd74f09
--- /dev/null
+++ b/client/src/styles/spectre/src/_carousels.scss
@@ -0,0 +1,124 @@
+// Carousels
+.carousel {
+  background: $bg-color;
+  display: block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .carousel-container {
+    height: 100%;
+    left: 0;
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      padding-bottom: 56.25%;
+    }
+
+    .carousel-item {
+      animation: carousel-slideout 1s ease-in-out 1;
+      height: 100%;
+      left: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+      &:hover {
+        .item-prev,
+        .item-next {
+          opacity: 1;
+        }
+      }
+    }
+
+    .item-prev,
+    .item-next {
+      background: fade-in($gray-color-light, 0.25);
+      border-color: fade-in($gray-color-light, 0.5);
+      color: $gray-color-light;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transition: all 0.4s ease;
+      transform: translateY(-50%);
+      z-index: $zindex-2;
+    }
+    .item-prev {
+      left: 2rem;
+    }
+    .item-next {
+      right: 2rem;
+    }
+  }
+
+  .carousel-locator {
+    &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
+    &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
+    &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
+    &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
+      animation: carousel-slidein 0.75s ease-in-out 1;
+      opacity: 1;
+      z-index: $zindex-1;
+    }
+    &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
+    &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
+    &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
+    &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
+      color: $gray-color-light;
+    }
+  }
+
+  .carousel-nav {
+    bottom: 1rem;
+    display: flex;
+    justify-content: center;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 20rem;
+    z-index: $zindex-2;
+
+    .nav-item {
+      color: fade-in($gray-color-light, 0.5);
+      display: block;
+      flex: 1 0 auto;
+      height: 4rem;
+      margin: 0.4rem;
+      max-width: 5rem;
+      position: relative;
+
+      &::before {
+        background: currentColor;
+        content: "";
+        display: block;
+        height: 0.3rem;
+        position: absolute;
+        top: 2rem;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@keyframes carousel-slidein {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes carousel-slideout {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
diff --git a/client/src/styles/spectre/src/_chips.scss b/client/src/styles/spectre/src/_chips.scss
new file mode 100755
index 000000000..697f71133
--- /dev/null
+++ b/client/src/styles/spectre/src/_chips.scss
@@ -0,0 +1,24 @@
+// Chips
+.chip {
+  align-items: center;
+  background: $bg-color-dark;
+  border-radius: $border-radius;
+  color: $gray-color-dark;
+  display: inline-flex;
+  height: 2.8rem;
+  margin: 0 0.1rem 0.1rem 0;
+  max-width: 100%;
+  padding: 0.1rem 0.8rem;
+  text-decoration: none;
+  vertical-align: middle;
+
+  &.active {
+    background: $primary-color;
+    color: $light-color;
+  }
+
+  .avatar {
+    margin-left: -0.4rem;
+    margin-right: 0.4rem;
+  }
+}
diff --git a/client/src/styles/spectre/src/_codes.scss b/client/src/styles/spectre/src/_codes.scss
new file mode 100755
index 000000000..ac0d6653f
--- /dev/null
+++ b/client/src/styles/spectre/src/_codes.scss
@@ -0,0 +1,31 @@
+// Codes
+code {
+  @include label-base();
+  @include label-variant($code-color, lighten($code-color, 33%));
+}
+
+.code {
+  border-radius: $border-radius;
+  color: $body-font-color;
+  line-height: 2rem;
+  position: relative;
+
+  &::before {
+    content: attr(data-lang);
+    color: $gray-color;
+    font-size: $font-size-sm;
+    position: absolute;
+    right: 1rem;
+    top: 0.2rem;
+  }
+
+  code {
+    background: $bg-color;
+    color: inherit;
+    display: block;
+    line-height: inherit;
+    overflow-x: auto;
+    padding: 2rem;
+    width: 100%;
+  }
+}
diff --git a/client/src/styles/spectre/src/_comparison-sliders.scss b/client/src/styles/spectre/src/_comparison-sliders.scss
new file mode 100755
index 000000000..e43d457ff
--- /dev/null
+++ b/client/src/styles/spectre/src/_comparison-sliders.scss
@@ -0,0 +1,115 @@
+// Image comparison slider
+// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
+.comparison-slider {
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .comparison-before,
+  .comparison-after {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+
+    img {
+      height: 100%;
+      object-fit: none;
+      object-position: left top;
+      position: absolute;
+      width: 100%;
+      z-index: -1;
+    }
+  }
+
+  .comparison-before {
+    width: 100%;
+
+    .comparison-label {
+      right: 1.6rem;
+    }
+  }
+
+  .comparison-after {
+    max-width: 100%;
+    min-width: 0;
+    z-index: $zindex-0;
+
+    &::before {
+      background: transparent;
+      content: "";
+      cursor: default;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: 1.6rem;
+      top: 0;
+      z-index: $zindex-0;
+    }
+
+    &::after {
+      background: currentColor;
+      border-radius: 50%;
+      box-shadow: 0 -0.5rem, 0 0.5rem;
+      color: $light-color;
+      content: "";
+      height: 0.3rem;
+      position: absolute;
+      right: 0.8rem;
+      top: 50%;
+      transform: translate(50%, -50%);
+      width: 0.3rem;
+      z-index: -$zindex-0;
+    }
+
+    .comparison-label {
+      left: 1.6rem;
+    }
+  }
+
+  .comparison-resizer {
+    animation: first-run 1.5s 1 ease-in-out;
+    cursor: ew-resize;
+    height: 1.5rem;
+    left: 0;
+    max-width: 100%;
+    min-width: 1.6rem;
+    opacity: 0;
+    outline: none;
+    position: relative;
+    resize: horizontal;
+    top: 50%;
+    transform: translateY(-50%) scaleY(30);
+    width: 0;
+  }
+
+  .comparison-label {
+    background: fade-in($dark-color, 0.5);
+    bottom: 1.6rem;
+    color: $light-color;
+    padding: 0.3rem 0.8rem;
+    position: absolute;
+    user-select: none;
+  }
+}
+
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: 4.8rem;
+  }
+  50% {
+    width: 1.6rem;
+  }
+  75% {
+    width: 2.4rem;
+  }
+  100% {
+    width: 0;
+  }
+}
diff --git a/client/src/styles/spectre/src/_dropdowns.scss b/client/src/styles/spectre/src/_dropdowns.scss
new file mode 100755
index 000000000..a135279d3
--- /dev/null
+++ b/client/src/styles/spectre/src/_dropdowns.scss
@@ -0,0 +1,34 @@
+// Dropdown
+.dropdown {
+  display: inline-block;
+  position: relative;
+
+  .menu {
+    animation: slide-down 0.2s ease 1;
+    display: none;
+    left: 0;
+    position: absolute;
+    top: 100%;
+  }
+
+  &.dropdown-right {
+    .menu {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &.active .menu,
+  .dropdown-toggle:focus + .menu,
+  .menu:hover {
+    display: block;
+  }
+
+  // Fix dropdown-toggle border radius in button groups
+  .btn-group {
+    .dropdown-toggle:nth-last-child(2) {
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_empty.scss b/client/src/styles/spectre/src/_empty.scss
new file mode 100755
index 000000000..0280ba0fb
--- /dev/null
+++ b/client/src/styles/spectre/src/_empty.scss
@@ -0,0 +1,21 @@
+// Empty states (or Blank slates)
+.empty {
+  background: $bg-color;
+  border-radius: $border-radius;
+  color: $gray-color-dark;
+  text-align: center;
+  padding: 4 * $layout-padding;
+
+  .empty-title,
+  .empty-subtitle {
+    margin: 1rem auto;
+  }
+
+  .empty-subtitle {
+    color: lighten($body-font-color, 40%);
+  }
+
+  .empty-action {
+    margin-top: 1.5rem;
+  }
+}
diff --git a/client/src/styles/spectre/src/_filters.scss b/client/src/styles/spectre/src/_filters.scss
new file mode 100755
index 000000000..a02d562cf
--- /dev/null
+++ b/client/src/styles/spectre/src/_filters.scss
@@ -0,0 +1,29 @@
+// Filters
+.filter {
+  .filter-nav {
+    margin: 1rem 0;
+  }
+
+  .filter-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .filter-tag {
+    &#tag-all:checked ~ .filter-nav .chip[for="tag-all"],
+    &#tag-action:checked ~ .filter-nav .chip[for="tag-action"],
+    &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
+    &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"],
+    &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] {
+      background: $primary-color;
+      color: $light-color;
+    }
+
+    &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
+    &#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]),
+    &#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]),
+    &#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) {
+      display: none;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_forms.scss b/client/src/styles/spectre/src/_forms.scss
new file mode 100755
index 000000000..000cf4e17
--- /dev/null
+++ b/client/src/styles/spectre/src/_forms.scss
@@ -0,0 +1,419 @@
+// Forms
+.form-group {
+  &:not(:last-child) {
+    margin-bottom: $layout-padding;
+  }
+}
+
+// Form element: Label
+.form-label {
+  display: block;
+  padding: 0.6rem 0;
+
+  &.label-sm {
+    padding: 0.2rem 0;
+  }
+
+  &.label-lg {
+    padding: 1rem 0;
+  }
+}
+
+// Form element: Input
+.form-input {
+  appearance: none;
+  background: $bg-color-light;
+  background-image: none;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: $body-font-color;
+  @include control-transition();
+  display: block;
+  font-size: $font-size;
+  height: 3.2rem;
+  line-height: 2rem;
+  max-width: 100%;
+  outline: none;
+  padding: 0.5rem 0.8rem;
+  position: relative;
+  width: 100%;
+  &:focus {
+    border-color: $primary-color;
+    @include control-shadow();
+  }
+  &::placeholder {
+    color: $gray-color;
+  }
+
+  // Input sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    height: 2.4rem;
+    padding: 0.1rem 0.8rem;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    height: 4rem;
+    padding: 0.9rem 0.8rem;
+  }
+
+  &.input-inline {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  // Textarea
+  &textarea {
+    height: auto;
+  }
+
+  // Input types
+  &[type="file"] {
+    height: auto;
+  }
+}
+
+// Form element: Input hint
+.form-input-hint {
+  color: $gray-color;
+  margin-top: 0.4rem;
+
+  .has-success &,
+  .is-success + & {
+    color: $control-color-success;
+  }
+
+  .has-error &,
+  .is-error + & {
+    color: $control-color-error;
+  }
+}
+
+// Form element: Select
+.form-select {
+  appearance: none;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: inherit;
+  font-size: $font-size;
+  line-height: 2rem;
+  outline: none;
+  padding: 0.5rem 0.8rem;
+  vertical-align: middle;
+
+  &[multiple] {
+    width: 100%;
+
+    option {
+      padding: 0.2rem 0.4rem;
+    }
+  }
+  &:not([multiple]) {
+    background: $bg-color-light
+      url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
+      no-repeat right 0.75rem center / 0.8rem 1rem;
+    height: 3.2rem;
+    padding-right: 2.4rem;
+  }
+  &:focus {
+    border-color: $primary-color;
+    @include control-shadow();
+  }
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Select sizes
+  &.select-sm {
+    font-size: $font-size-sm;
+    height: 2.4rem;
+    padding: 0.1rem 2rem 0.1rem 0.6rem;
+  }
+
+  &.select-lg {
+    font-size: $font-size-lg;
+    height: 4rem;
+    padding: 0.9rem 2.4rem 0.9rem 0.8rem;
+  }
+}
+
+// Form validation states
+.form-input,
+.form-select {
+  .has-success &,
+  &.is-success {
+    border-color: $control-color-success;
+    &:focus {
+      @include control-shadow($control-color-success);
+    }
+  }
+
+  .has-error &,
+  &.is-error {
+    border-color: $control-color-error;
+    &:focus {
+      @include control-shadow($control-color-error);
+    }
+  }
+}
+
+// Form element: Checkbox and Radio
+.form-checkbox,
+.form-radio,
+.form-switch {
+  display: inline-block;
+  line-height: 2rem;
+  position: relative;
+
+  input {
+    clip: rect(0, 0, 0, 0);
+    height: 0.1rem;
+    margin: -0.1rem;
+    overflow: hidden;
+    position: absolute;
+    width: 0.1rem;
+    &:focus + .form-icon {
+      border-color: $primary-color;
+      @include control-shadow();
+    }
+    &:checked + .form-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  .form-icon {
+    border: $border-width solid $border-color-dark;
+    @include control-transition();
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+  }
+}
+
+.form-checkbox,
+.form-radio {
+  padding: 0.2rem 2rem;
+
+  .form-icon {
+    height: 1.4rem;
+    left: 0;
+    top: 0.5rem;
+    width: 1.4rem;
+  }
+
+  input {
+    &:active + .form-icon {
+      background: $bg-color-dark;
+    }
+  }
+}
+.form-checkbox {
+  .form-icon {
+    border-radius: $border-radius;
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background-clip: padding-box;
+        border: 0.2rem solid $light-color;
+        border-left-width: 0;
+        border-top-width: 0;
+        content: "";
+        height: 1rem;
+        left: 50%;
+        margin-left: -0.3rem;
+        margin-top: -0.6rem;
+        position: absolute;
+        top: 50%;
+        transform: rotate(45deg);
+        width: 0.6rem;
+      }
+    }
+    &:indeterminate + .form-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+      &::before {
+        background: $bg-color-light;
+        content: "";
+        height: 0.2rem;
+        left: 50%;
+        margin-left: -0.5rem;
+        margin-top: -0.1rem;
+        position: absolute;
+        top: 50%;
+        width: 1rem;
+      }
+    }
+  }
+}
+.form-radio {
+  .form-icon {
+    border-radius: 0.7rem;
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background: $bg-color-light;
+        border-radius: $border-radius;
+        content: "";
+        height: 0.4rem;
+        left: 50%;
+        margin-left: -0.2rem;
+        margin-top: -0.2rem;
+        position: absolute;
+        top: 50%;
+        width: 0.4rem;
+      }
+    }
+  }
+}
+
+// Form element: Switch
+.form-switch {
+  padding: 0.2rem 2rem 0.2rem 3.6rem;
+
+  .form-icon {
+    background: $gray-color-light;
+    background-clip: padding-box;
+    border-radius: 0.9rem;
+    height: 1.8rem;
+    left: 0;
+    top: 0.3rem;
+    width: 3rem;
+    &::before {
+      background: $bg-color-light;
+      border-radius: 0.8rem;
+      content: "";
+      display: block;
+      height: 1.6rem;
+      left: 0;
+      position: absolute;
+      top: 0;
+      @include control-transition();
+      width: 1.6rem;
+    }
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        left: 1.2rem;
+      }
+    }
+    &:active + .form-icon {
+      &::before {
+        background: $bg-color;
+      }
+    }
+  }
+}
+
+// Form element: Input groups
+.input-group {
+  display: flex;
+
+  .input-group-addon {
+    background: $bg-color;
+    border: $border-width solid $border-color-dark;
+    border-radius: $border-radius;
+    line-height: 2rem;
+    padding: 0.5rem 0.8rem;
+
+    &.addon-sm {
+      font-size: $font-size-sm;
+      padding: 0.1rem 0.8rem;
+    }
+    &.addon-lg {
+      font-size: $font-size-lg;
+      padding: 0.9rem 0.8rem;
+    }
+  }
+  .input-group-addon,
+  .input-group-btn {
+    flex: 1 0 auto;
+  }
+
+  .form-input,
+  .input-group-addon,
+  .input-group-btn {
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: -0.1rem;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -0.1rem;
+    }
+    &:focus {
+      z-index: $zindex-0;
+    }
+  }
+
+  &.input-inline {
+    display: inline-flex;
+  }
+}
+
+// Form disabled and readonly
+.form-input,
+.form-select {
+  &:disabled,
+  &.disabled {
+    background-color: $bg-color-dark;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.form-input {
+  &[readonly] {
+    background-color: $bg-color;
+  }
+}
+
+input {
+  &:disabled,
+  &.disabled {
+    & + .form-icon {
+      background: $bg-color-dark;
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}
+
+.form-switch {
+  input {
+    &:disabled,
+    &.disabled {
+      & + .form-icon::before {
+        background: $bg-color-light;
+      }
+    }
+  }
+}
+
+// Form Horizontal
+.form-horizontal {
+  padding: $layout-padding;
+
+  .form-group {
+    display: flex;
+  }
+
+  .form-checkbox,
+  .form-radio,
+  .form-switch {
+    margin: 0.4rem 0;
+  }
+}
diff --git a/client/src/styles/spectre/src/_icons.scss b/client/src/styles/spectre/src/_icons.scss
new file mode 100755
index 000000000..514693940
--- /dev/null
+++ b/client/src/styles/spectre/src/_icons.scss
@@ -0,0 +1,608 @@
+// CSS Icons
+$icon-border-width: 0.2rem;
+
+.icon {
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: inherit;
+  font-style: normal;
+  height: 1em;
+  position: relative;
+  text-indent: -999rem;
+  vertical-align: middle;
+  width: 1em;
+  &::before,
+  &::after {
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+// Icon arrows
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up,
+.icon-downward,
+.icon-back,
+.icon-forward,
+.icon-upward {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: 0.65em;
+    transform: translate(-25%, -50%) rotate(-45deg);
+    width: 0.65em;
+  }
+}
+
+.icon-arrow-down,
+.icon-downward {
+  transform: rotate(-90deg);
+}
+
+.icon-arrow-right,
+.icon-forward {
+  transform: rotate(180deg);
+}
+
+.icon-arrow-up,
+.icon-upward {
+  transform: rotate(90deg);
+}
+
+.icon-downward,
+.icon-back,
+.icon-forward,
+.icon-upward {
+  &::before {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    left: 55%;
+    width: 0.8em;
+  }
+}
+
+// Icon caret
+.icon-caret {
+  &::before {
+    border-top: 0.3em solid currentColor;
+    border-right: 0.3em solid transparent;
+    border-left: 0.3em solid transparent;
+    content: "";
+    height: 0;
+    width: 0;
+    transform: translate(-50%, -25%);
+  }
+}
+
+// Icon menu
+.icon-menu {
+  &::before {
+    background: currentColor;
+    box-shadow: 0 -0.35em, 0 0.35em;
+    content: "";
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+// Icon apps
+.icon-apps {
+  &::before {
+    background: currentColor;
+    box-shadow: -0.35em -0.35em, -0.35em 0, -0.35em 0.35em, 0 -0.35em, 0 0.35em, 0.35em -0.35em,
+      0.35em 0, 0.35em 0.35em;
+    content: "";
+    height: 0.3rem;
+    width: 0.3rem;
+  }
+}
+
+// Icon resize
+.icon-resize-horiz,
+.icon-resize-vert {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: 0.45em;
+    width: 0.45em;
+  }
+  &::before {
+    transform: translate(-50%, -90%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -10%) rotate(225deg);
+  }
+}
+
+.icon-resize-horiz {
+  &::before {
+    transform: translate(-90%, -50%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-10%, -50%) rotate(135deg);
+  }
+}
+
+// Icon more
+.icon-more-horiz,
+.icon-more-vert {
+  &::before {
+    background: currentColor;
+    box-shadow: -0.4em 0, 0.4em 0;
+    border-radius: 50%;
+    content: "";
+    height: 0.3rem;
+    width: 0.3rem;
+  }
+}
+.icon-more-vert {
+  &::before {
+    box-shadow: 0 -0.4em, 0 0.4em;
+  }
+}
+
+// Icon plus, minus, cross
+.icon-plus,
+.icon-minus,
+.icon-cross {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+.icon-plus,
+.icon-cross {
+  &::after {
+    background: currentColor;
+    content: "";
+    height: 100%;
+    width: $icon-border-width;
+  }
+}
+.icon-cross {
+  &::before {
+    width: 100%;
+  }
+  &::after {
+    height: 100%;
+  }
+  &::before,
+  &::after {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon check
+.icon-check {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    content: "";
+    height: 0.5em;
+    width: 0.9em;
+    transform: translate(-50%, -75%) rotate(-45deg);
+  }
+}
+
+// Icon stop
+.icon-stop {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 1em;
+  }
+}
+
+// Icon shutdown
+.icon-shutdown {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: 0.5em;
+    top: 0.1em;
+    width: $icon-border-width;
+  }
+}
+
+// Icon refresh
+.icon-refresh {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+    content: "";
+    height: 1em;
+    width: 1em;
+  }
+  &::after {
+    border: 0.2em solid currentColor;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    content: "";
+    height: 0;
+    left: 80%;
+    top: 20%;
+    width: 0;
+  }
+}
+
+// Icon search
+.icon-search {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: 0.75em;
+    left: 5%;
+    top: 5%;
+    transform: translate(0, 0) rotate(45deg);
+    width: 0.75em;
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    left: 80%;
+    top: 80%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 0.4em;
+  }
+}
+
+// Icon edit
+.icon-edit {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    content: "";
+    height: 0.4em;
+    transform: translate(-40%, -60%) rotate(-45deg);
+    width: 0.85em;
+  }
+  &::after {
+    border: 0.15em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    content: "";
+    height: 0;
+    left: 5%;
+    top: 95%;
+    transform: translate(0, -100%);
+    width: 0;
+  }
+}
+
+// Icon delete
+.icon-delete {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    border-top: 0;
+    content: "";
+    height: 0.75em;
+    top: 60%;
+    width: 0.75em;
+  }
+  &::after {
+    background: currentColor;
+    box-shadow: -0.25em 0.2em, 0.25em 0.2em;
+    content: "";
+    height: $icon-border-width;
+    top: $icon-border-width/2;
+    width: 0.5em;
+  }
+}
+
+// Icon share
+.icon-share {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  border-right: 0;
+  border-top: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-left: 0;
+    border-top: 0;
+    content: "";
+    height: 0.4em;
+    left: 100%;
+    top: 0.25em;
+    transform: translate(-125%, -50%) rotate(-45deg);
+    width: 0.4em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    border-radius: 75% 0;
+    content: "";
+    height: 0.5em;
+    width: 0.6em;
+  }
+}
+
+// Icon flag
+.icon-flag {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: 1em;
+    left: 15%;
+    width: $icon-border-width;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top-right-radius: $border-radius;
+    content: "";
+    height: 0.65em;
+    top: 35%;
+    left: 60%;
+    width: 0.8em;
+  }
+}
+
+// Icon bookmark
+.icon-bookmark {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    content: "";
+    height: 0.9em;
+    width: 0.8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: $border-radius;
+    content: "";
+    height: 0.5em;
+    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+    width: 0.5em;
+  }
+}
+
+// Icon download & upload
+.icon-download,
+.icon-upload {
+  border-bottom: $icon-border-width solid currentColor;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: 0.5em;
+    width: 0.5em;
+    transform: translate(-50%, -60%) rotate(-135deg);
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: 0.6em;
+    top: 40%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-upload {
+  &::before {
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+  &::after {
+    top: 50%;
+  }
+}
+
+// Icon time
+.icon-time {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: 0.4em;
+    transform: translate(-50%, -75%);
+    width: $icon-border-width;
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: 0.3em;
+    transform: translate(-50%, -75%) rotate(90deg);
+    transform-origin: 50% 90%;
+    width: $icon-border-width;
+  }
+}
+
+// Icon mail
+.icon-mail {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    content: "";
+    height: 0.8em;
+    width: 1em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    content: "";
+    height: 0.5em;
+    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
+    width: 0.5em;
+  }
+}
+
+// Icon people
+.icon-people {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: 0.45em;
+    top: 25%;
+    width: 0.45em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 0 0;
+    content: "";
+    height: 0.4em;
+    top: 75%;
+    width: 0.9em;
+  }
+}
+
+// Icon message
+.icon-message {
+  border: $icon-border-width solid currentColor;
+  border-bottom: 0;
+  border-radius: $border-radius;
+  border-right: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-left: 0;
+    border-bottom-right-radius: $border-radius;
+    border-top: 0;
+    content: "";
+    height: 0.8em;
+    left: 65%;
+    top: 40%;
+    width: 0.7em;
+  }
+  &::after {
+    background: currentColor;
+    border-radius: $border-radius;
+    content: "";
+    height: 0.3em;
+    left: 10%;
+    top: 100%;
+    transform: translate(0, -90%) rotate(45deg);
+    width: $icon-border-width;
+  }
+}
+
+// Icon photo
+.icon-photo {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: 0.25em;
+    left: 35%;
+    top: 35%;
+    width: 0.25em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    content: "";
+    height: 0.5em;
+    left: 60%;
+    transform: translate(-50%, 25%) rotate(-45deg);
+    width: 0.5em;
+  }
+}
+
+// Icon link
+.icon-link {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 5em 0 0 5em;
+    border-right: 0;
+    content: "";
+    height: 0.5em;
+    width: 0.75em;
+  }
+  &::before {
+    transform: translate(-70%, -45%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-30%, -55%) rotate(135deg);
+  }
+}
+
+// Icon location
+.icon-location {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 50% 0;
+    content: "";
+    height: 0.8em;
+    transform: translate(-50%, -60%) rotate(-45deg);
+    width: 0.8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: 0.2em;
+    transform: translate(-50%, -80%);
+    width: 0.2em;
+  }
+}
+
+// Icon emoji
+.icon-emoji {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    border-radius: 50%;
+    box-shadow: -0.17em -0.15em, 0.17em -0.15em;
+    content: "";
+    height: 0.1em;
+    width: 0.1em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    border-right-color: transparent;
+    content: "";
+    height: 0.5em;
+    transform: translate(-50%, -40%) rotate(-135deg);
+    width: 0.5em;
+  }
+}
+
+// Component icon support
+.btn,
+.toast,
+.menu {
+  .icon {
+    vertical-align: -10%;
+  }
+}
diff --git a/client/src/styles/spectre/src/_labels.scss b/client/src/styles/spectre/src/_labels.scss
new file mode 100755
index 000000000..fb13f71c0
--- /dev/null
+++ b/client/src/styles/spectre/src/_labels.scss
@@ -0,0 +1,21 @@
+// Labels
+.label {
+  @include label-base();
+  @include label-variant(lighten($body-font-color, 12%), $bg-color);
+
+  &.label-primary {
+    @include label-variant($light-color, $primary-color);
+  }
+
+  &.label-success {
+    @include label-variant($light-color, $control-color-success);
+  }
+
+  &.label-warning {
+    @include label-variant($light-color, $control-color-warning);
+  }
+
+  &.label-error {
+    @include label-variant($light-color, $control-color-error);
+  }
+}
diff --git a/client/src/styles/spectre/src/_layout.scss b/client/src/styles/spectre/src/_layout.scss
new file mode 100755
index 000000000..773a23370
--- /dev/null
+++ b/client/src/styles/spectre/src/_layout.scss
@@ -0,0 +1,409 @@
+// Layout
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $layout-padding;
+  padding-right: $layout-padding;
+  width: 100%;
+  zoom: 1;
+  &:after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+
+  &.grid-960 {
+    max-width: 96rem + 2 * $layout-padding;
+  }
+
+  &.grid-480 {
+    max-width: 48rem + 2 * $layout-padding;
+  }
+}
+
+// Responsive grid system
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -$layout-padding;
+  margin-right: -$layout-padding;
+
+  &.col-gapless {
+    margin-left: 0;
+    margin-right: 0;
+
+    .column {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  &.col-oneline {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+}
+.column {
+  flex: 1;
+  max-width: 100%;
+  padding: $layout-padding;
+
+  &.col-12,
+  &.col-11,
+  &.col-10,
+  &.col-9,
+  &.col-8,
+  &.col-7,
+  &.col-6,
+  &.col-5,
+  &.col-4,
+  &.col-3,
+  &.col-2,
+  &.col-1 {
+    flex: none;
+  }
+}
+.col-12 {
+  width: 100%;
+}
+.col-11 {
+  width: 91.66666667%;
+}
+.col-10 {
+  width: 83.33333333%;
+}
+.col-9 {
+  width: 75%;
+}
+.col-8 {
+  width: 66.66666667%;
+}
+.col-7 {
+  width: 58.33333333%;
+}
+.col-6 {
+  width: 50%;
+}
+.col-5 {
+  width: 41.66666667%;
+}
+.col-4 {
+  width: 33.33333333%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-2 {
+  width: 16.66666667%;
+}
+.col-1 {
+  width: 8.33333333%;
+}
+@media screen and (max-width: $size-xl) {
+  .col-xl-12,
+  .col-xl-11,
+  .col-xl-10,
+  .col-xl-9,
+  .col-xl-8,
+  .col-xl-7,
+  .col-xl-6,
+  .col-xl-5,
+  .col-xl-4,
+  .col-xl-3,
+  .col-xl-2,
+  .col-xl-1 {
+    flex: none;
+  }
+  .col-xl-12 {
+    width: 100%;
+  }
+  .col-xl-11 {
+    width: 91.66666667%;
+  }
+  .col-xl-10 {
+    width: 83.33333333%;
+  }
+  .col-xl-9 {
+    width: 75%;
+  }
+  .col-xl-8 {
+    width: 66.66666667%;
+  }
+  .col-xl-7 {
+    width: 58.33333333%;
+  }
+  .col-xl-6 {
+    width: 50%;
+  }
+  .col-xl-5 {
+    width: 41.66666667%;
+  }
+  .col-xl-4 {
+    width: 33.33333333%;
+  }
+  .col-xl-3 {
+    width: 25%;
+  }
+  .col-xl-2 {
+    width: 16.66666667%;
+  }
+  .col-xl-1 {
+    width: 8.33333333%;
+  }
+}
+@media screen and (max-width: $size-lg) {
+  .col-lg-12,
+  .col-lg-11,
+  .col-lg-10,
+  .col-lg-9,
+  .col-lg-8,
+  .col-lg-7,
+  .col-lg-6,
+  .col-lg-5,
+  .col-lg-4,
+  .col-lg-3,
+  .col-lg-2,
+  .col-lg-1 {
+    flex: none;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+  .col-lg-11 {
+    width: 91.66666667%;
+  }
+  .col-lg-10 {
+    width: 83.33333333%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-8 {
+    width: 66.66666667%;
+  }
+  .col-lg-7 {
+    width: 58.33333333%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-5 {
+    width: 41.66666667%;
+  }
+  .col-lg-4 {
+    width: 33.33333333%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-2 {
+    width: 16.66666667%;
+  }
+  .col-lg-1 {
+    width: 8.33333333%;
+  }
+}
+@media screen and (max-width: $size-md) {
+  .col-md-12,
+  .col-md-11,
+  .col-md-10,
+  .col-md-9,
+  .col-md-8,
+  .col-md-7,
+  .col-md-6,
+  .col-md-5,
+  .col-md-4,
+  .col-md-3,
+  .col-md-2,
+  .col-md-1 {
+    flex: none;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+}
+@media screen and (max-width: $size-sm) {
+  .col-sm-12,
+  .col-sm-11,
+  .col-sm-10,
+  .col-sm-9,
+  .col-sm-8,
+  .col-sm-7,
+  .col-sm-6,
+  .col-sm-5,
+  .col-sm-4,
+  .col-sm-3,
+  .col-sm-2,
+  .col-sm-1 {
+    flex: none;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width: 8.33333333%;
+  }
+}
+@media screen and (max-width: $size-xs) {
+  .col-xs-12,
+  .col-xs-11,
+  .col-xs-10,
+  .col-xs-9,
+  .col-xs-8,
+  .col-xs-7,
+  .col-xs-6,
+  .col-xs-5,
+  .col-xs-4,
+  .col-xs-3,
+  .col-xs-2,
+  .col-xs-1 {
+    flex: none;
+  }
+  .col-xs-12 {
+    width: 100%;
+  }
+  .col-xs-11 {
+    width: 91.66666667%;
+  }
+  .col-xs-10 {
+    width: 83.33333333%;
+  }
+  .col-xs-9 {
+    width: 75%;
+  }
+  .col-xs-8 {
+    width: 66.66666667%;
+  }
+  .col-xs-7 {
+    width: 58.33333333%;
+  }
+  .col-xs-6 {
+    width: 50%;
+  }
+  .col-xs-5 {
+    width: 41.66666667%;
+  }
+  .col-xs-4 {
+    width: 33.33333333%;
+  }
+  .col-xs-3 {
+    width: 25%;
+  }
+  .col-xs-2 {
+    width: 16.66666667%;
+  }
+  .col-xs-1 {
+    width: 8.33333333%;
+  }
+}
+
+// Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
+@media screen and (max-width: $size-xs) {
+  .hide-xs {
+    display: none !important;
+  }
+  .show-xs {
+    display: block !important;
+  }
+}
+@media screen and (max-width: $size-sm) {
+  .hide-sm {
+    display: none !important;
+  }
+  .show-sm {
+    display: block !important;
+  }
+}
+@media screen and (max-width: $size-md) {
+  .hide-md {
+    display: none !important;
+  }
+  .show-md {
+    display: block !important;
+  }
+}
+@media screen and (max-width: $size-lg) {
+  .hide-lg {
+    display: none !important;
+  }
+  .show-lg {
+    display: block !important;
+  }
+}
+@media screen and (max-width: $size-xl) {
+  .hide-xl {
+    display: none !important;
+  }
+  .show-xl {
+    display: block !important;
+  }
+}
diff --git a/client/src/styles/spectre/src/_media.scss b/client/src/styles/spectre/src/_media.scss
new file mode 100755
index 000000000..40a696124
--- /dev/null
+++ b/client/src/styles/spectre/src/_media.scss
@@ -0,0 +1,69 @@
+// Media
+.img-responsive {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+// object-fit support is coming to Microsoft Edge
+// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
+.img-fit-cover {
+  object-fit: cover;
+}
+
+.img-fit-contain {
+  object-fit: contain;
+}
+
+// Video responsive
+.video-responsive {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+
+  &::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
+  }
+
+  iframe,
+  object,
+  embed {
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+  video {
+    height: auto;
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.video-responsive-4-3 {
+  &::before {
+    padding-bottom: 75%; // Ratio 4:3
+  }
+}
+
+.video-responsive-1-1 {
+  &::before {
+    padding-bottom: 100%; // Ratio 1:1
+  }
+}
+
+.figure {
+  margin: 0 0 $layout-padding 0;
+
+  .figure-caption {
+    color: $gray-color-dark;
+    margin-top: $layout-padding;
+  }
+}
diff --git a/client/src/styles/spectre/src/_menus.scss b/client/src/styles/spectre/src/_menus.scss
new file mode 100755
index 000000000..572d3718f
--- /dev/null
+++ b/client/src/styles/spectre/src/_menus.scss
@@ -0,0 +1,46 @@
+// Menus
+.menu {
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  list-style: none;
+  margin: 0;
+  min-width: $control-min-width;
+  padding: 1rem;
+  @include shadow-variant(0.1rem);
+  transform: translateY(0.5rem);
+  z-index: $zindex-1;
+
+  .menu-item {
+    margin-top: 0;
+    padding: 0 0.8rem;
+    text-decoration: none;
+    user-select: none;
+
+    & > a {
+      border-radius: $border-radius;
+      color: inherit;
+      display: block;
+      margin: 0 -0.8rem;
+      padding: 0.6rem 0.8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $primary-color;
+      }
+      &:active,
+      &.active {
+        background: $secondary-color-light;
+        color: $primary-color;
+      }
+    }
+  }
+
+  .menu-badge {
+    float: right;
+    padding: 0.6rem 0;
+
+    .btn {
+      margin-top: -0.2rem;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_meters.scss b/client/src/styles/spectre/src/_meters.scss
new file mode 100755
index 000000000..6338c46c6
--- /dev/null
+++ b/client/src/styles/spectre/src/_meters.scss
@@ -0,0 +1,57 @@
+// Meters
+// Credit: https://css-tricks.com/html5-meter-element/
+.meter {
+  appearance: none;
+  background: $bg-color;
+  border: 0;
+  border-radius: $border-radius;
+  display: block;
+  width: 100%;
+  height: 1.6rem;
+
+  &::-webkit-meter-inner-element {
+    display: block;
+  }
+
+  &::-webkit-meter-bar,
+  &::-webkit-meter-optimum-value,
+  &::-webkit-meter-suboptimum-value,
+  &::-webkit-meter-even-less-good-value {
+    border-radius: $border-radius;
+  }
+
+  &::-webkit-meter-bar {
+    background: $bg-color;
+  }
+
+  &::-webkit-meter-optimum-value {
+    background: $control-color-success;
+  }
+
+  &::-webkit-meter-suboptimum-value {
+    background: $control-color-warning;
+  }
+
+  &::-webkit-meter-even-less-good-value {
+    background: $control-color-error;
+  }
+
+  &::-moz-meter-bar,
+  &:-moz-meter-optimum,
+  &:-moz-meter-sub-optimum,
+  &:-moz-meter-sub-sub-optimum {
+    border-radius: $border-radius;
+  }
+
+  &:-moz-meter-optimum::-moz-meter-bar {
+    background: $control-color-success;
+  }
+
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: $control-color-warning;
+  }
+
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: $control-color-error;
+  }
+}
diff --git a/client/src/styles/spectre/src/_mixins.scss b/client/src/styles/spectre/src/_mixins.scss
new file mode 100755
index 000000000..2cc93cca1
--- /dev/null
+++ b/client/src/styles/spectre/src/_mixins.scss
@@ -0,0 +1,42 @@
+// Core mixins
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
+// Component focus shadow
+@mixin control-shadow($color: $primary-color) {
+  box-shadow: 0 0 0 0.2rem fade-in($color, 0.15);
+}
+
+// Component transition
+@mixin control-transition() {
+  transition: all 0.2s ease;
+}
+
+// Toast variant
+@mixin toast-variant($color: $dark-color) {
+  background: fade-in($color, 0.9);
+  border-color: $color;
+}
+
+// Label base style
+@mixin label-base() {
+  border-radius: $border-radius;
+  display: inline-block;
+  line-height: 1;
+  padding: 0.3rem 0.4rem;
+  vertical-align: baseline;
+}
+
+@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+  background: $bg-color;
+  color: $color;
+}
+
+@mixin shadow-variant($offset) {
+  box-shadow: 0 $offset ($offset + 0.1rem) * 2 fade-in($dark-color, 0.3);
+}
diff --git a/client/src/styles/spectre/src/_modals.scss b/client/src/styles/spectre/src/_modals.scss
new file mode 100755
index 000000000..de54e1361
--- /dev/null
+++ b/client/src/styles/spectre/src/_modals.scss
@@ -0,0 +1,74 @@
+// Modals
+.modal {
+  align-items: center;
+  bottom: 0;
+  display: none;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: $layout-padding;
+  position: fixed;
+  right: 0;
+  top: 0;
+
+  &:target,
+  &.active {
+    display: flex;
+    opacity: 1;
+    z-index: $zindex-4;
+
+    .modal-overlay {
+      background: fade-in($dark-color, 0.5);
+      bottom: 0;
+      cursor: default;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .modal-container {
+      animation: slide-down 0.2s ease 1;
+      max-width: 64rem;
+      z-index: $zindex-0;
+    }
+  }
+
+  &.modal-sm {
+    .modal-container {
+      max-width: 32rem;
+    }
+  }
+}
+
+.modal-container {
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  display: block;
+  padding: 0;
+  @include shadow-variant(0.4rem);
+  text-align: left;
+
+  .modal-header {
+    padding: $layout-padding-lg;
+
+    .modal-title {
+      font-size: $font-size-lg;
+      margin: 0;
+    }
+  }
+
+  .modal-body {
+    max-height: 50vh;
+    overflow-y: auto;
+    padding: $layout-padding-lg;
+    position: relative;
+  }
+
+  .modal-footer {
+    padding: $layout-padding-lg;
+    text-align: right;
+  }
+}
diff --git a/client/src/styles/spectre/src/_navbar.scss b/client/src/styles/spectre/src/_navbar.scss
new file mode 100755
index 000000000..a90b6e6c1
--- /dev/null
+++ b/client/src/styles/spectre/src/_navbar.scss
@@ -0,0 +1,29 @@
+// Navbar
+.navbar {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .navbar-section {
+    align-items: center;
+    display: flex;
+    flex: 1 0 0;
+
+    &:last-child {
+      justify-content: flex-end;
+    }
+  }
+
+  .navbar-center {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  .navbar-brand {
+    font-size: $font-size-lg;
+    font-weight: 500;
+    text-decoration: none;
+  }
+}
diff --git a/client/src/styles/spectre/src/_navigation.scss b/client/src/styles/spectre/src/_navigation.scss
new file mode 100755
index 000000000..dbca50007
--- /dev/null
+++ b/client/src/styles/spectre/src/_navigation.scss
@@ -0,0 +1,13 @@
+// Navigation
+.breadcrumb,
+.tab,
+.pagination,
+.nav {
+  list-style: none;
+  margin: 0.5rem 0;
+}
+
+@import "_breadcrumbs.scss";
+@import "_tabs.scss";
+@import "_pagination.scss";
+@import "_navs.scss";
diff --git a/client/src/styles/spectre/src/_navs.scss b/client/src/styles/spectre/src/_navs.scss
new file mode 100755
index 000000000..d9923ac7f
--- /dev/null
+++ b/client/src/styles/spectre/src/_navs.scss
@@ -0,0 +1,35 @@
+// Navs
+.nav {
+  display: flex;
+  flex-direction: column;
+
+  .nav-item {
+    a {
+      color: $gray-color-dark;
+      padding: 0.6rem 0.8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $primary-color;
+      }
+    }
+    &.active {
+      & > a {
+        font-weight: bold;
+        &:focus,
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  & .nav {
+    margin-bottom: 1rem;
+    margin-left: 2rem;
+
+    a {
+      color: $gray-color;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_normalize.scss b/client/src/styles/spectre/src/_normalize.scss
new file mode 100755
index 000000000..f05c28bcd
--- /dev/null
+++ b/client/src/styles/spectre/src/_normalize.scss
@@ -0,0 +1,439 @@
+/* Manually forked from Normalize.css */
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  line-height: 1.15; /* 2 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main {
+  /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8 (removed).
+ */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
+ */
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-. (Removed)
+ */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 (changed) */
+  font-size: inherit; /* 1 (changed) */
+  line-height: inherit; /* 1 (changed) */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule (removed).
+ */
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated) (changed).
+ */
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/client/src/styles/spectre/src/_pagination.scss b/client/src/styles/spectre/src/_pagination.scss
new file mode 100755
index 000000000..4eac26c96
--- /dev/null
+++ b/client/src/styles/spectre/src/_pagination.scss
@@ -0,0 +1,56 @@
+// Pagination
+.pagination {
+  display: flex;
+
+  .page-item {
+    margin: 1rem 0.1rem;
+
+    span {
+      display: inline-block;
+      padding: 0.6rem 0.4rem;
+    }
+
+    a {
+      border-radius: $border-radius;
+      color: $gray-color-dark;
+      display: inline-block;
+      padding: 0.6rem 0.8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $primary-color;
+      }
+      &[disabled],
+      &.disabled {
+        cursor: default;
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    }
+
+    &.active {
+      a {
+        background: $primary-color;
+        color: $light-color;
+      }
+    }
+
+    &.page-prev,
+    &.page-next {
+      flex: 1 0 50%;
+    }
+
+    &.page-next {
+      text-align: right;
+    }
+
+    .page-item-title {
+      margin: 0;
+    }
+
+    .page-item-subtitle {
+      margin: 0;
+      opacity: 0.5;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_panels.scss b/client/src/styles/spectre/src/_panels.scss
new file mode 100755
index 000000000..4ca27c6f0
--- /dev/null
+++ b/client/src/styles/spectre/src/_panels.scss
@@ -0,0 +1,31 @@
+// Panels
+.panel {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .panel-header,
+  .panel-footer {
+    flex: 0 0 auto;
+    padding: $layout-padding-lg;
+  }
+
+  .panel-nav {
+    flex: 0 0 auto;
+  }
+
+  .panel-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 0 $layout-padding-lg;
+  }
+
+  .panel-title {
+    font-size: 2rem;
+  }
+
+  .panel-subtitle {
+    color: lighten($body-font-color, 40%);
+  }
+}
diff --git a/client/src/styles/spectre/src/_parallax.scss b/client/src/styles/spectre/src/_parallax.scss
new file mode 100755
index 000000000..27fe78188
--- /dev/null
+++ b/client/src/styles/spectre/src/_parallax.scss
@@ -0,0 +1,142 @@
+// Parallax
+$parallax-deg: 3deg;
+$parallax-offset: 0.65rem;
+$parallax-offset-z: 10rem;
+
+@mixin parallax-dir() {
+  height: 50%;
+  position: absolute;
+  width: 50%;
+  z-index: $zindex-3;
+}
+
+.parallax {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+
+  .parallax-content {
+    height: auto;
+    @include shadow-variant(2rem);
+    transform: perspective(100rem);
+    transform-style: preserve-3d;
+    transition: all 0.4s ease;
+    width: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .parallax-front {
+    align-items: center;
+    color: $light-color;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 0 3rem fade-in($dark-color, 0.95);
+    top: 0;
+    transform: translateZ($parallax-offset-z);
+    transition: all 0.4s ease;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .parallax-top-left {
+    @include parallax-dir();
+    left: 0;
+    top: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective(100rem) rotateX(-$parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0.25) 0%,
+          rgba(255, 255, 255, 0) 50%
+        );
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z);
+      }
+    }
+  }
+
+  .parallax-top-right {
+    @include parallax-dir();
+    right: 0;
+    top: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective(100rem) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(
+          -135deg,
+          rgba(255, 255, 255, 0.25) 0%,
+          rgba(255, 255, 255, 0) 50%
+        );
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z);
+      }
+    }
+  }
+
+  .parallax-bottom-left {
+    @include parallax-dir();
+    bottom: 0;
+    left: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective(100rem) rotateX($parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(
+          45deg,
+          rgba(255, 255, 255, 0.25) 0%,
+          rgba(255, 255, 255, 0) 50%
+        );
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z);
+      }
+    }
+  }
+
+  .parallax-bottom-right {
+    @include parallax-dir();
+    bottom: 0;
+    right: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective(100rem) rotateX($parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(
+          -45deg,
+          rgba(255, 255, 255, 0.25) 0%,
+          rgba(255, 255, 255, 0) 50%
+        );
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z);
+      }
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_popovers.scss b/client/src/styles/spectre/src/_popovers.scss
new file mode 100755
index 000000000..2e60292b8
--- /dev/null
+++ b/client/src/styles/spectre/src/_popovers.scss
@@ -0,0 +1,70 @@
+// Popovers
+.popover {
+  display: inline-block;
+  position: relative;
+
+  .popover-container {
+    content: attr(data-tooltip);
+    opacity: 0;
+    left: 50%;
+    padding: $layout-padding;
+    position: absolute;
+    top: 0;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.2s ease;
+    width: 32rem;
+    z-index: $zindex-4;
+  }
+
+  :focus + .popover-container,
+  &:hover .popover-container,
+  .popover-container:hover {
+    display: block;
+    opacity: 1;
+    transform: translate(-50%, -100%) scale(1);
+  }
+
+  &.popover-right {
+    .popover-container {
+      left: 100%;
+      top: 50%;
+    }
+
+    :focus + .popover-container,
+    &:hover .popover-container,
+    .popover-container:hover {
+      transform: translate(0, -50%) scale(1);
+    }
+  }
+
+  &.popover-bottom {
+    .popover-container {
+      left: 50%;
+      top: 100%;
+    }
+
+    :focus + .popover-container,
+    &:hover .popover-container,
+    .popover-container:hover {
+      transform: translate(-50%, 0) scale(1);
+    }
+  }
+
+  &.popover-left {
+    .popover-container {
+      left: 0;
+      top: 50%;
+    }
+
+    :focus + .popover-container,
+    &:hover .popover-container,
+    .popover-container:hover {
+      transform: translate(-100%, -50%) scale(1);
+    }
+  }
+
+  .card {
+    border: 0;
+    @include shadow-variant(0.4rem);
+  }
+}
diff --git a/client/src/styles/spectre/src/_progress.scss b/client/src/styles/spectre/src/_progress.scss
new file mode 100755
index 000000000..c34cc20e7
--- /dev/null
+++ b/client/src/styles/spectre/src/_progress.scss
@@ -0,0 +1,46 @@
+// Progress
+// Credit: https://css-tricks.com/html5-progress-element/
+.progress {
+  appearance: none;
+  background: $bg-color-dark;
+  border: 0;
+  border-radius: $border-radius;
+  color: $primary-color;
+  height: 0.4rem;
+  position: relative;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+    border-radius: $border-radius;
+  }
+
+  &::-webkit-progress-value {
+    background: $primary-color;
+    border-radius: $border-radius;
+  }
+
+  &::-moz-progress-bar {
+    background: $primary-color;
+    border-radius: $border-radius;
+  }
+
+  &:indeterminate {
+    animation: progress-indeterminate 1.5s linear infinite;
+    background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top
+      left / 150% 150% no-repeat;
+
+    &::-moz-progress-bar {
+      background: transparent;
+    }
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
diff --git a/client/src/styles/spectre/src/_sliders.scss b/client/src/styles/spectre/src/_sliders.scss
new file mode 100755
index 000000000..66128e0c3
--- /dev/null
+++ b/client/src/styles/spectre/src/_sliders.scss
@@ -0,0 +1,93 @@
+// Sliders
+// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+.slider {
+  appearance: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  height: 2.4rem;
+
+  &:focus {
+    @include control-shadow();
+    outline: none;
+  }
+
+  // Slider Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: 1.2rem;
+    margin-top: -0.5rem;
+    transition: transform 0.2s ease;
+    width: 1.2rem;
+  }
+  &::-moz-range-thumb {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: 1.2rem;
+    transition: transform 0.2s ease;
+    width: 1.2rem;
+  }
+  &::-ms-thumb {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: 1.2rem;
+    transition: transform 0.2s ease;
+    width: 1.2rem;
+  }
+
+  &:active {
+    &::-webkit-slider-thumb {
+      transform: scale(1.25);
+    }
+    &::-moz-range-thumb {
+      transform: scale(1.25);
+    }
+    &::-ms-thumb {
+      transform: scale(1.25);
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    &::-webkit-slider-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+    &::-moz-range-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+    &::-ms-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+  }
+
+  // Slider Track
+  &::-webkit-slider-runnable-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: 0.2rem;
+    width: 100%;
+  }
+  &::-moz-range-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: 0.2rem;
+    width: 100%;
+  }
+  &::-ms-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: 0.2rem;
+    width: 100%;
+  }
+  &::-ms-fill-lower {
+    background: $primary-color;
+  }
+}
diff --git a/client/src/styles/spectre/src/_steps.scss b/client/src/styles/spectre/src/_steps.scss
new file mode 100755
index 000000000..a74565093
--- /dev/null
+++ b/client/src/styles/spectre/src/_steps.scss
@@ -0,0 +1,69 @@
+// Steps
+.step {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: 0.5rem 0;
+  width: 100%;
+
+  .step-item {
+    flex: 1 1 0;
+    margin-top: 0;
+    min-height: 2rem;
+    text-align: center;
+    position: relative;
+
+    &:not(:first-child)::before {
+      background: $primary-color;
+      content: "";
+      height: 0.2rem;
+      left: -50%;
+      position: absolute;
+      top: 0.9rem;
+      width: 100%;
+    }
+
+    a {
+      color: $gray-color;
+      display: inline-block;
+      padding: 2rem 1rem 0;
+      text-decoration: none;
+
+      &::before {
+        background: $primary-color;
+        border: 0.2rem solid $light-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: 1.2rem;
+        left: 50%;
+        position: absolute;
+        top: 0.4rem;
+        transform: translateX(-50%);
+        width: 1.2rem;
+        z-index: $zindex-0;
+      }
+    }
+
+    &.active {
+      a {
+        &::before {
+          background: $light-color;
+          border: 0.2rem solid $primary-color;
+        }
+      }
+
+      & ~ .step-item {
+        &::before {
+          background: $border-color;
+        }
+
+        a {
+          &::before {
+            background: $gray-color-light;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_tables.scss b/client/src/styles/spectre/src/_tables.scss
new file mode 100755
index 000000000..0c486ec57
--- /dev/null
+++ b/client/src/styles/spectre/src/_tables.scss
@@ -0,0 +1,46 @@
+// Tables
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-align: left;
+  width: 100%;
+
+  &.table-striped {
+    tbody {
+      tr:nth-of-type(odd) {
+        background: $bg-color;
+      }
+    }
+  }
+
+  &.table-hover {
+    tbody {
+      tr {
+        &:hover {
+          background: $bg-color-dark;
+        }
+      }
+    }
+  }
+
+  &,
+  &.table-striped {
+    tbody {
+      tr {
+        &.active {
+          background: $bg-color-dark;
+        }
+      }
+    }
+  }
+
+  td {
+    border-bottom: $border-width solid $border-color;
+    padding: 1.5rem 1rem;
+  }
+
+  th {
+    border-bottom: $border-width solid $gray-color-dark;
+    padding: 1.5rem 1rem;
+  }
+}
diff --git a/client/src/styles/spectre/src/_tabs.scss b/client/src/styles/spectre/src/_tabs.scss
new file mode 100755
index 000000000..3085db0cb
--- /dev/null
+++ b/client/src/styles/spectre/src/_tabs.scss
@@ -0,0 +1,56 @@
+// Tabs
+.tab {
+  align-items: center;
+  border-bottom: $border-width solid $border-color;
+  display: flex;
+  flex-wrap: wrap;
+
+  .tab-item {
+    margin-top: 0;
+
+    &.tab-action {
+      flex: 1 0 auto;
+      text-align: right;
+    }
+
+    a {
+      border-bottom: 0.2rem solid transparent;
+      color: inherit;
+      display: block;
+      margin-top: 0;
+      padding: 0.5rem 1.2rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $link-color;
+      }
+    }
+    &.active a,
+    a.active {
+      border-bottom-color: $primary-color;
+      color: $link-color;
+    }
+  }
+
+  &.tab-block {
+    .tab-item {
+      flex: 1 0 0;
+      text-align: center;
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: -0.4rem;
+          top: -0.4rem;
+          transform: translate(0, 0);
+        }
+      }
+    }
+  }
+
+  &:not(.tab-block) {
+    .badge {
+      padding-right: 0;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_tiles.scss b/client/src/styles/spectre/src/_tiles.scss
new file mode 100755
index 000000000..82e64b957
--- /dev/null
+++ b/client/src/styles/spectre/src/_tiles.scss
@@ -0,0 +1,43 @@
+// Tiles
+.tile {
+  align-content: space-between;
+  align-items: flex-start;
+  display: flex;
+
+  .tile-icon,
+  .tile-action {
+    flex: 0 0 auto;
+  }
+  .tile-content {
+    flex: 1 1 auto;
+    &:not(:first-child) {
+      padding-left: 1rem;
+    }
+    &:not(:last-child) {
+      padding-right: 1rem;
+    }
+  }
+  .tile-title {
+    line-height: 2rem;
+  }
+  .tile-subtitle {
+    color: lighten($body-font-color, 40%);
+    line-height: 2rem;
+  }
+
+  &.tile-centered {
+    align-items: center;
+
+    .tile-content {
+      overflow: hidden;
+    }
+
+    .tile-title,
+    .tile-subtitle {
+      margin-bottom: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_timelines.scss b/client/src/styles/spectre/src/_timelines.scss
new file mode 100755
index 000000000..031b45e49
--- /dev/null
+++ b/client/src/styles/spectre/src/_timelines.scss
@@ -0,0 +1,55 @@
+// Timelines
+.timeline {
+  .timeline-item {
+    display: flex;
+    margin-bottom: 2.4rem;
+    position: relative;
+    &::before {
+      background: $border-color;
+      content: "";
+      height: 100%;
+      left: 1.1rem;
+      position: absolute;
+      top: 2.4rem;
+      width: 0.2rem;
+    }
+
+    .timeline-left {
+      flex: 0 0 auto;
+    }
+
+    .timeline-content {
+      flex: 1 1 auto;
+      padding: 0.2rem 0 0.2rem $layout-padding-lg;
+    }
+
+    .timeline-icon {
+      border-radius: 50%;
+      color: $light-color;
+      display: block;
+      height: 2.4rem;
+      text-align: center;
+      width: 2.4rem;
+      &::before {
+        border: 0.2rem solid $primary-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: 0.8rem;
+        left: 0.8rem;
+        position: absolute;
+        top: 0.8rem;
+        width: 0.8rem;
+      }
+
+      &.icon-lg {
+        background: $primary-color;
+        font-size: 1.6rem;
+        line-height: 2rem;
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_toasts.scss b/client/src/styles/spectre/src/_toasts.scss
new file mode 100755
index 000000000..8b6376812
--- /dev/null
+++ b/client/src/styles/spectre/src/_toasts.scss
@@ -0,0 +1,37 @@
+// Toasts
+.toast {
+  border: $border-width solid $dark-color;
+  border-radius: $border-radius;
+  color: $light-color;
+  display: block;
+  padding: $layout-padding;
+  @include toast-variant($dark-color);
+  width: 100%;
+
+  &.toast-primary {
+    @include toast-variant($primary-color);
+  }
+
+  &.toast-success {
+    @include toast-variant($control-color-success);
+  }
+
+  &.toast-warning {
+    @include toast-variant($control-color-warning);
+  }
+
+  &.toast-error {
+    @include toast-variant($control-color-error);
+  }
+
+  a {
+    color: $light-color;
+    text-decoration: underline;
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      opacity: 0.75;
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_tooltips.scss b/client/src/styles/spectre/src/_tooltips.scss
new file mode 100755
index 000000000..160a5699a
--- /dev/null
+++ b/client/src/styles/spectre/src/_tooltips.scss
@@ -0,0 +1,77 @@
+// Tooltips
+.tooltip {
+  position: relative;
+  &::after {
+    background: fade-in($dark-color, 0.9);
+    border-radius: $border-radius;
+    bottom: 100%;
+    color: $light-color;
+    content: attr(data-tooltip);
+    display: block;
+    font-size: $font-size-sm;
+    left: 50%;
+    max-width: 32rem;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0.4rem 0.8rem;
+    pointer-events: none;
+    position: absolute;
+    text-overflow: ellipsis;
+    transform: translate(-50%, 1rem);
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    z-index: $zindex-2;
+  }
+  &:focus,
+  &:hover {
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, -0.5rem);
+    }
+  }
+  &[disabled],
+  &.disabled {
+    pointer-events: auto;
+  }
+
+  &.tooltip-right {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      transform: translate(-1rem, 50%);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(0.5rem, 50%);
+      }
+    }
+  }
+  &.tooltip-bottom {
+    &::after {
+      bottom: auto;
+      top: 100%;
+      transform: translate(-50%, -1rem);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(-50%, 0.5rem);
+      }
+    }
+  }
+  &.tooltip-left {
+    &::after {
+      bottom: 50%;
+      left: auto;
+      right: 100%;
+      transform: translate(1rem, 50%);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(-0.5rem, 50%);
+      }
+    }
+  }
+}
diff --git a/client/src/styles/spectre/src/_typography.scss b/client/src/styles/spectre/src/_typography.scss
new file mode 100755
index 000000000..54bcc2832
--- /dev/null
+++ b/client/src/styles/spectre/src/_typography.scss
@@ -0,0 +1,102 @@
+// Typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: inherit;
+  font-weight: 300;
+  line-height: 1.2;
+  margin-bottom: 1.5rem;
+  margin-top: 0;
+}
+h1 {
+  font-size: 5rem;
+}
+h2 {
+  font-size: 4rem;
+}
+h3 {
+  font-size: 3rem;
+}
+h4 {
+  font-size: 2.4rem;
+}
+h5 {
+  font-size: 2rem;
+}
+h6 {
+  font-size: 1.6rem;
+}
+p {
+  line-height: 2.4rem;
+  margin: 0 0 1rem;
+}
+a,
+ins,
+u {
+  text-decoration-skip: ink edges;
+}
+blockquote {
+  border-left: 0.2rem solid $border-color;
+  margin-left: 0;
+  padding: 1rem 2rem;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  cite {
+    color: $gray-color;
+  }
+}
+ul,
+ol {
+  margin: 2rem 0 2rem 2rem;
+  padding: 0;
+
+  ul,
+  ol {
+    margin: 1.5rem 0 1.5rem 2rem;
+  }
+
+  li {
+    margin-top: 1rem;
+  }
+}
+ul {
+  list-style: disc inside;
+
+  ul {
+    list-style-type: circle;
+  }
+}
+ol {
+  list-style: decimal inside;
+
+  ol {
+    list-style-type: lower-alpha;
+  }
+}
+dl {
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin: 0.5rem 0 1.5rem 0;
+  }
+}
+mark {
+  @include label-base();
+  @include label-variant($body-font-color, $highlight-color);
+}
+kbd {
+  @include label-base();
+  @include label-variant($light-color, $dark-color);
+}
+abbr[title] {
+  border-bottom: 0.1rem dotted;
+  cursor: help;
+  text-decoration: none;
+}
diff --git a/client/src/styles/spectre/src/_utilities.scss b/client/src/styles/spectre/src/_utilities.scss
new file mode 100755
index 000000000..940f73181
--- /dev/null
+++ b/client/src/styles/spectre/src/_utilities.scss
@@ -0,0 +1,245 @@
+// Divider
+.divider {
+  border-top: $border-width solid $border-color;
+  display: block;
+  height: 0.1rem;
+  margin: 1rem 0;
+  position: relative;
+
+  &[data-content]::before {
+    background: $light-color;
+    color: $gray-color-light;
+    content: attr(data-content);
+    display: inline-block;
+    font-size: $font-size-sm;
+    padding: 0 0.8rem;
+    transform: translateY(-1.1rem);
+  }
+}
+
+// Loading
+.loading {
+  color: transparent !important;
+  min-height: 1.6rem;
+  pointer-events: none;
+  position: relative;
+  &::after {
+    animation: loading 500ms infinite linear;
+    border: 0.2rem solid $primary-color;
+    border-radius: 0.8rem;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1.6rem;
+    left: 50%;
+    margin-left: -0.8rem;
+    margin-top: -0.8rem;
+    position: absolute;
+    top: 50%;
+    width: 1.6rem;
+    z-index: $zindex-0;
+  }
+}
+
+// Position
+.clearfix {
+  @include clearfix();
+}
+.float-left {
+  float: left !important;
+}
+.float-right {
+  float: right !important;
+}
+
+.rel {
+  position: relative;
+}
+.abs {
+  position: absolute;
+}
+.fixed {
+  position: fixed;
+}
+.centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Spacing
+.mt-10 {
+  margin-top: 1rem;
+}
+.mr-10 {
+  margin-right: 1rem;
+}
+.mb-10 {
+  margin-bottom: 1rem;
+}
+.ml-10 {
+  margin-left: 1rem;
+}
+.mt-5 {
+  margin-top: 0.5rem;
+}
+.mr-5 {
+  margin-right: 0.5rem;
+}
+.mb-5 {
+  margin-bottom: 0.5rem;
+}
+.ml-5 {
+  margin-left: 0.5rem;
+}
+
+.pt-10 {
+  padding-top: 1rem;
+}
+.pr-10 {
+  padding-right: 1rem;
+}
+.pb-10 {
+  padding-bottom: 1rem;
+}
+.pl-10 {
+  padding-left: 1rem;
+}
+.pt-5 {
+  padding-top: 0.5rem;
+}
+.pr-5 {
+  padding-right: 0.5rem;
+}
+.pb-5 {
+  padding-bottom: 0.5rem;
+}
+.pl-5 {
+  padding-left: 0.5rem;
+}
+
+// Display
+.block {
+  display: block;
+}
+.inline {
+  display: inline;
+}
+.inline-block {
+  display: inline-block;
+}
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.hide {
+  display: none !important;
+}
+.visible {
+  visibility: visible;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  background: transparent;
+  border: 0;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  text-shadow: none;
+}
+.text-assistive {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 0.1rem;
+  margin: -0.1rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 0.1rem;
+}
+// Text
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+.text-center {
+  text-align: center;
+}
+.text-justify {
+  text-align: justify;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.text-normal {
+  font-weight: normal;
+}
+.text-bold {
+  font-weight: bold;
+}
+.text-italic {
+  font-style: italic;
+}
+.text-large {
+  font-size: 1.2em;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-clip {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+.text-break {
+  hyphens: auto;
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.hand {
+  cursor: pointer;
+}
+
+// Shadow
+.shadow-0 {
+  @include shadow-variant(0);
+}
+.shadow-1 {
+  @include shadow-variant(0.1rem);
+}
+.shadow-2 {
+  @include shadow-variant(0.2rem);
+}
+.shadow-3 {
+  @include shadow-variant(0.3rem);
+}
+.shadow-4 {
+  @include shadow-variant(0.4rem);
+}
+
+// Shapes
+.rounded {
+  border-radius: $border-radius;
+}
+.circle {
+  border-radius: 50%;
+}
diff --git a/client/src/styles/spectre/src/_variables.scss b/client/src/styles/spectre/src/_variables.scss
new file mode 100755
index 000000000..3bc669e7c
--- /dev/null
+++ b/client/src/styles/spectre/src/_variables.scss
@@ -0,0 +1,74 @@
+// Core variables
+
+// Fonts
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
+$fallback-font-family: "Helvetica Neue", sans-serif !default;
+$cjk-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+  "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", $fallback-font-family !default;
+$body-font-family: $base-font-family, $fallback-font-family !default;
+
+// Sizes
+$layout-padding: 1rem !default;
+$layout-padding-lg: 1.5rem !default;
+$control-min-width: 18rem !default;
+$border-radius: 0.2rem !default;
+$border-width: 0.1rem !default;
+
+// Colors
+// Core colors
+$primary-color: #5764c6 !default;
+$primary-color-dark: darken($primary-color, 3%) !default;
+$primary-color-light: lighten($primary-color, 3%) !default;
+$secondary-color: lighten($primary-color, 40%) !default;
+$secondary-color-dark: darken($secondary-color, 3%) !default;
+$secondary-color-light: lighten($secondary-color, 3%) !default;
+
+$link-color: $primary-color !default;
+$link-color-dark: darken($link-color, 10%) !default;
+
+// Gray colors
+$dark-color: #454d5d !default;
+$light-color: #fff !default;
+$gray-color: lighten($dark-color, 40%) !default;
+$gray-color-dark: darken($gray-color, 20%) !default;
+$gray-color-light: lighten($gray-color, 20%) !default;
+
+$border-color: lighten($gray-color-light, 3%) !default;
+$border-color-dark: darken($border-color, 15%) !default;
+$bg-color: lighten($dark-color, 66%) !default;
+$bg-color-dark: darken($bg-color, 3%) !default;
+$bg-color-light: $light-color !default;
+
+// Control colors
+$control-color-success: #32b643 !default;
+$control-color-warning: #ffb700 !default;
+$control-color-error: #e85600 !default;
+
+// Other colors
+$code-color: #e06870 !default;
+$highlight-color: #ffe9b3 !default;
+
+// Global
+$html-font-size: 10px !default;
+$html-line-height: 1.428571429 !default;
+$body-bg: $bg-color-light !default;
+$body-font-color: lighten($dark-color, 5%) !default;
+$font-size: 1.4rem !default;
+$font-size-sm: 1.2rem !default;
+$font-size-lg: 1.6rem !default;
+
+// Responsive breakpoints
+$size-xs: 480px !default;
+$size-sm: 600px !default;
+$size-md: 840px !default;
+$size-lg: 960px !default;
+$size-xl: 1280px !default;
+$size-2x: 1440px !default;
+
+// Z-index
+$zindex-0: 1 !default;
+$zindex-1: 100 !default;
+$zindex-2: 200 !default;
+$zindex-3: 300 !default;
+$zindex-4: 400 !default;

From 078e9607efaa5f075940d560835e4c5f00d64450 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 13:38:42 -0500
Subject: [PATCH 04/12] convert all spectre rem values for 10px to 16px base
 size

---
 .../src/styles/spectre/src/_animations.scss   |   2 +-
 client/src/styles/spectre/src/_asian.scss     |   2 +-
 .../src/styles/spectre/src/_autocomplete.scss |   8 +-
 client/src/styles/spectre/src/_avatars.scss   |  30 ++---
 client/src/styles/spectre/src/_badges.scss    |  22 ++--
 client/src/styles/spectre/src/_bars.scss      |  16 +--
 .../src/styles/spectre/src/_breadcrumbs.scss  |   4 +-
 client/src/styles/spectre/src/_buttons.scss   |  34 ++---
 client/src/styles/spectre/src/_calendars.scss |  42 +++----
 client/src/styles/spectre/src/_cards.scss     |   2 +-
 client/src/styles/spectre/src/_carousels.scss |  18 +--
 client/src/styles/spectre/src/_chips.scss     |  10 +-
 client/src/styles/spectre/src/_codes.scss     |   8 +-
 .../spectre/src/_comparison-sliders.scss      |  28 ++---
 client/src/styles/spectre/src/_empty.scss     |   4 +-
 client/src/styles/spectre/src/_filters.scss   |   2 +-
 client/src/styles/spectre/src/_forms.scss     | 118 +++++++++---------
 client/src/styles/spectre/src/_icons.scss     |  12 +-
 client/src/styles/spectre/src/_layout.scss    |   4 +-
 client/src/styles/spectre/src/_menus.scss     |  16 +--
 client/src/styles/spectre/src/_meters.scss    |   2 +-
 client/src/styles/spectre/src/_mixins.scss    |   6 +-
 client/src/styles/spectre/src/_modals.scss    |   6 +-
 .../src/styles/spectre/src/_navigation.scss   |   2 +-
 client/src/styles/spectre/src/_navs.scss      |   6 +-
 .../src/styles/spectre/src/_pagination.scss   |   6 +-
 client/src/styles/spectre/src/_panels.scss    |   2 +-
 client/src/styles/spectre/src/_parallax.scss  |  18 +--
 client/src/styles/spectre/src/_popovers.scss  |   4 +-
 client/src/styles/spectre/src/_progress.scss  |   2 +-
 client/src/styles/spectre/src/_sliders.scss   |  22 ++--
 client/src/styles/spectre/src/_steps.scss     |  20 +--
 client/src/styles/spectre/src/_tables.scss    |   4 +-
 client/src/styles/spectre/src/_tabs.scss      |   8 +-
 client/src/styles/spectre/src/_tiles.scss     |   8 +-
 client/src/styles/spectre/src/_timelines.scss |  28 ++---
 client/src/styles/spectre/src/_tooltips.scss  |  20 +--
 .../src/styles/spectre/src/_typography.scss   |  32 ++---
 client/src/styles/spectre/src/_utilities.scss |  68 +++++-----
 client/src/styles/spectre/src/_variables.scss |  16 +--
 40 files changed, 331 insertions(+), 331 deletions(-)

diff --git a/client/src/styles/spectre/src/_animations.scss b/client/src/styles/spectre/src/_animations.scss
index 594c51d63..6450c77de 100755
--- a/client/src/styles/spectre/src/_animations.scss
+++ b/client/src/styles/spectre/src/_animations.scss
@@ -11,7 +11,7 @@
 @keyframes slide-down {
   0% {
     opacity: 0;
-    transform: translateY(-3rem);
+    transform: translateY(-1.88rem);
   }
   100% {
     opacity: 1;
diff --git a/client/src/styles/spectre/src/_asian.scss b/client/src/styles/spectre/src/_asian.scss
index d714a601e..51a152edc 100755
--- a/client/src/styles/spectre/src/_asian.scss
+++ b/client/src/styles/spectre/src/_asian.scss
@@ -11,7 +11,7 @@
 .cjk {
   ins,
   u {
-    border-bottom: 0.1rem solid;
+    border-bottom: 0.06rem solid;
     text-decoration: none;
   }
   // Credit: https://github.com/ethantw/Han
diff --git a/client/src/styles/spectre/src/_autocomplete.scss b/client/src/styles/spectre/src/_autocomplete.scss
index a722be1df..d9b0451b4 100755
--- a/client/src/styles/spectre/src/_autocomplete.scss
+++ b/client/src/styles/spectre/src/_autocomplete.scss
@@ -7,8 +7,8 @@
     display: flex;
     flex-wrap: wrap;
     height: auto;
-    min-height: 3.2rem;
-    padding: 0.1rem 0 0 0.1rem;
+    min-height: 2rem;
+    padding: 0.06rem 0 0 0.06rem;
 
     &.is-focused {
       border-color: $primary-color;
@@ -20,8 +20,8 @@
       box-shadow: none;
       display: inline-block;
       flex: 1 0 auto;
-      height: 2.8rem;
-      padding: 0.3rem 0.8rem;
+      height: 1.75rem;
+      padding: 0.19rem 0.5rem;
       width: auto;
     }
   }
diff --git a/client/src/styles/spectre/src/_avatars.scss b/client/src/styles/spectre/src/_avatars.scss
index 954748f61..cc689724e 100755
--- a/client/src/styles/spectre/src/_avatars.scss
+++ b/client/src/styles/spectre/src/_avatars.scss
@@ -6,32 +6,32 @@
   display: inline-block;
   font-size: $font-size;
   font-weight: 300;
-  height: 3.2rem;
+  height: 2rem;
   line-height: 1;
   margin: 0;
   position: relative;
   vertical-align: middle;
-  width: 3.2rem;
+  width: 2rem;
 
   &.avatar-xs {
-    font-size: 0.8rem;
-    height: 1.6rem;
-    width: 1.6rem;
+    font-size: 0.5rem;
+    height: 1rem;
+    width: 1rem;
   }
   &.avatar-sm {
-    font-size: 1rem;
-    height: 2.4rem;
-    width: 2.4rem;
+    font-size: 0.63rem;
+    height: 1.5rem;
+    width: 1.5rem;
   }
   &.avatar-lg {
-    font-size: 2rem;
-    height: 4.8rem;
-    width: 4.8rem;
+    font-size: 1.25rem;
+    height: 3rem;
+    width: 3rem;
   }
   &.avatar-xl {
-    font-size: 2.6rem;
-    height: 6.4rem;
-    width: 6.4rem;
+    font-size: 1.63rem;
+    height: 4rem;
+    width: 4rem;
   }
 
   img {
@@ -46,7 +46,7 @@
     background: $bg-color-light;
     bottom: 14.64%;
     height: 50%;
-    padding: 0.2rem;
+    padding: 0.13rem;
     position: absolute;
     right: 14.64%;
     transform: translate(50%, 50%);
diff --git a/client/src/styles/spectre/src/_badges.scss b/client/src/styles/spectre/src/_badges.scss
index 4b5e24ac8..bc54210ff 100755
--- a/client/src/styles/spectre/src/_badges.scss
+++ b/client/src/styles/spectre/src/_badges.scss
@@ -9,20 +9,20 @@
       background: $primary-color;
       background-clip: padding-box;
       border: $border-width solid $bg-color-light;
-      border-radius: 1rem;
+      border-radius: 0.63rem;
       color: $light-color;
       content: attr(data-badge);
       display: inline-block;
-      transform: translate(-0.2rem, -1rem);
+      transform: translate(-0.13rem, -0.63rem);
     }
   }
   &[data-badge] {
     &::after {
       font-size: $font-size-sm;
-      height: 2rem;
+      height: 1.25rem;
       line-height: 1;
-      min-width: 2rem;
-      padding: 0.3rem 0.5rem;
+      min-width: 1.25rem;
+      padding: 0.19rem 0.31rem;
       text-align: center;
       white-space: nowrap;
     }
@@ -30,10 +30,10 @@
   &:not([data-badge]),
   &[data-badge=""] {
     &::after {
-      height: 0.8rem;
-      min-width: 0.8rem;
+      height: 0.5rem;
+      min-width: 0.5rem;
       padding: 0;
-      width: 0.8rem;
+      width: 0.5rem;
     }
   }
 
@@ -61,10 +61,10 @@
   &.avatar-xs {
     &::after {
       content: "";
-      height: 0.8rem;
-      min-width: 0.8rem;
+      height: 0.5rem;
+      min-width: 0.5rem;
       padding: 0;
-      width: 0.8rem;
+      width: 0.5rem;
     }
   }
 }
diff --git a/client/src/styles/spectre/src/_bars.scss b/client/src/styles/spectre/src/_bars.scss
index 7dee841ac..968db4c38 100755
--- a/client/src/styles/spectre/src/_bars.scss
+++ b/client/src/styles/spectre/src/_bars.scss
@@ -4,11 +4,11 @@
   border-radius: $border-radius;
   display: flex;
   flex-wrap: nowrap;
-  height: 1.6rem;
+  height: 1rem;
   width: 100%;
 
   &.bar-sm {
-    height: 0.4rem;
+    height: 0.25rem;
   }
 
   // TODO: attr() support
@@ -20,7 +20,7 @@
     flex-shrink: 0;
     line-height: 1;
     height: 100%;
-    padding: 0.2rem 0;
+    padding: 0.13rem 0;
     position: relative;
     text-align: center;
     width: 0;
@@ -39,8 +39,8 @@
 
 // Slider bar
 .bar-slider {
-  height: 0.2rem;
-  margin: 1rem 0;
+  height: 0.13rem;
+  margin: 0.63rem 0;
   position: relative;
 
   .bar-item {
@@ -57,16 +57,16 @@
     background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: 1.2rem;
+    height: 0.75rem;
     padding: 0;
     position: absolute;
     right: 0;
     top: 50%;
     transform: translate(50%, -50%);
-    width: 1.2rem;
+    width: 0.75rem;
 
     &:active {
-      box-shadow: 0 0 0 0.2rem $primary-color;
+      box-shadow: 0 0 0 0.13rem $primary-color;
     }
   }
 }
diff --git a/client/src/styles/spectre/src/_breadcrumbs.scss b/client/src/styles/spectre/src/_breadcrumbs.scss
index 415b2bc8e..8e7bc1eab 100755
--- a/client/src/styles/spectre/src/_breadcrumbs.scss
+++ b/client/src/styles/spectre/src/_breadcrumbs.scss
@@ -1,6 +1,6 @@
 // Breadcrumbs
 .breadcrumb {
-  padding: 1.2rem;
+  padding: 0.75rem;
 
   .breadcrumb-item {
     display: inline-block;
@@ -13,7 +13,7 @@
       &::before {
         color: $gray-color-light;
         content: "/";
-        padding: 0 0.4rem;
+        padding: 0 0.25rem;
       }
     }
   }
diff --git a/client/src/styles/spectre/src/_buttons.scss b/client/src/styles/spectre/src/_buttons.scss
index e2e15734f..0a1947efc 100755
--- a/client/src/styles/spectre/src/_buttons.scss
+++ b/client/src/styles/spectre/src/_buttons.scss
@@ -9,10 +9,10 @@
   cursor: pointer;
   display: inline-block;
   font-size: $font-size;
-  height: 3.2rem;
-  line-height: 2rem;
+  height: 2rem;
+  line-height: 1.25rem;
   outline: none;
-  padding: 0.5rem 0.8rem;
+  padding: 0.31rem 0.5rem;
   text-align: center;
   text-decoration: none;
   user-select: none;
@@ -85,14 +85,14 @@
   // Button Sizes
   &.btn-sm {
     font-size: $font-size-sm;
-    height: 2.4rem;
-    padding: 0.1rem 0.8rem;
+    height: 1.5rem;
+    padding: 0.06rem 0.5rem;
   }
 
   &.btn-lg {
     font-size: $font-size-lg;
-    height: 4rem;
-    padding: 0.9rem 0.8rem;
+    height: 2.5rem;
+    padding: 0.56rem 0.5rem;
   }
 
   // Button Block
@@ -103,16 +103,16 @@
 
   // Button Action
   &.btn-action {
-    width: 3.2rem;
+    width: 2rem;
     padding-left: 0;
     padding-right: 0;
 
     &.btn-sm {
-      width: 2.4rem;
+      width: 1.5rem;
     }
 
     &.btn-lg {
-      width: 4rem;
+      width: 2.5rem;
     }
   }
 
@@ -121,13 +121,13 @@
     background: transparent;
     border: 0;
     color: currentColor;
-    height: 1.6rem;
-    line-height: 1.6rem;
-    margin: 0.2rem -0.2rem 0.2rem 0.4rem;
+    height: 1rem;
+    line-height: 1rem;
+    margin: 0.13rem -0.13rem 0.13rem 0.25rem;
     opacity: 0.45;
-    padding: 0 0.2rem;
+    padding: 0 0.13rem;
     text-decoration: none;
-    width: 1.6rem;
+    width: 1rem;
 
     &:hover {
       opacity: 0.85;
@@ -152,12 +152,12 @@
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -0.1rem;
+      margin-left: -0.06rem;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -0.1rem;
+      margin-left: -0.06rem;
     }
     &:focus,
     &:hover,
diff --git a/client/src/styles/spectre/src/_calendars.scss b/client/src/styles/spectre/src/_calendars.scss
index bc3590d5e..b8b1e9897 100755
--- a/client/src/styles/spectre/src/_calendars.scss
+++ b/client/src/styles/spectre/src/_calendars.scss
@@ -3,7 +3,7 @@
   border: $border-width solid $border-color;
   border-radius: $border-radius;
   display: block;
-  min-width: 28rem;
+  min-width: 17.5rem;
   text-align: center;
 
   .calendar-nav {
@@ -13,7 +13,7 @@
     border-top-right-radius: $border-radius;
     display: flex;
     font-size: $font-size-lg;
-    padding: 1rem;
+    padding: 0.63rem;
   }
 
   .calendar-header,
@@ -21,7 +21,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    padding: 1rem 0;
+    padding: 0.63rem 0;
 
     .calendar-date {
       flex: 0 0 14.28%; // 7 calendar-items each row
@@ -42,7 +42,7 @@
 
   .calendar-date {
     border: 0;
-    padding: 0.4rem;
+    padding: 0.25rem;
 
     .date-item {
       appearance: none;
@@ -52,16 +52,16 @@
       color: $gray-color-dark;
       @include control-transition();
       cursor: pointer;
-      height: 2.8rem;
-      line-height: 2rem;
+      height: 1.75rem;
+      line-height: 1.25rem;
       outline: none;
-      padding: 0.3rem;
+      padding: 0.19rem;
       position: relative;
       text-align: center;
       text-decoration: none;
       vertical-align: middle;
       white-space: nowrap;
-      width: 2.8rem;
+      width: 1.75rem;
 
       &.date-today {
         border-color: $secondary-color-dark;
@@ -90,8 +90,8 @@
       &.badge {
         &::after {
           position: absolute;
-          top: 0.3rem;
-          right: 0.3rem;
+          top: 0.19rem;
+          right: 0.19rem;
           transform: translate(50%, -50%);
         }
       }
@@ -113,7 +113,7 @@
     &::before {
       background: $secondary-color;
       content: "";
-      height: 2.8rem;
+      height: 1.75rem;
       left: 0;
       position: absolute;
       right: 0;
@@ -145,7 +145,7 @@
         border-right: $border-width solid $border-color;
         display: flex;
         flex-direction: column;
-        height: 11rem;
+        height: 6.88rem;
         padding: 0;
 
         &:nth-child(7n) {
@@ -159,24 +159,24 @@
 
     .date-item {
       align-self: flex-end;
-      height: 2.8rem;
-      margin-right: 0.5rem;
-      margin-top: 0.5rem;
+      height: 1.75rem;
+      margin-right: 0.31rem;
+      margin-top: 0.31rem;
     }
 
     .calendar-range {
       &::before {
-        top: 1.9rem;
+        top: 1.19rem;
       }
       &.range-start {
         &::before {
           left: auto;
-          width: 1.9rem;
+          width: 1.19rem;
         }
       }
       &.range-end {
         &::before {
-          right: 1.9rem;
+          right: 1.19rem;
         }
       }
     }
@@ -185,7 +185,7 @@
       flex-grow: 1;
       line-height: 1;
       overflow-y: auto;
-      padding: 0.5rem;
+      padding: 0.31rem;
     }
 
     .calendar-event {
@@ -194,9 +194,9 @@
       color: $primary-color;
       font-size: $font-size-sm;
       display: block;
-      margin: 0.2rem auto;
+      margin: 0.13rem auto;
       overflow: hidden;
-      padding: 0.3rem 0.4rem;
+      padding: 0.19rem 0.25rem;
       text-align: left;
       text-overflow: ellipsis;
       vertical-align: baseline;
diff --git a/client/src/styles/spectre/src/_cards.scss b/client/src/styles/spectre/src/_cards.scss
index 4e5e45df9..79ccb7c32 100755
--- a/client/src/styles/spectre/src/_cards.scss
+++ b/client/src/styles/spectre/src/_cards.scss
@@ -37,7 +37,7 @@
   }
 
   .card-title {
-    font-size: 2rem;
+    font-size: 1.25rem;
   }
 
   .card-subtitle {
diff --git a/client/src/styles/spectre/src/_carousels.scss b/client/src/styles/spectre/src/_carousels.scss
index 7ecd74f09..9cff7330c 100755
--- a/client/src/styles/spectre/src/_carousels.scss
+++ b/client/src/styles/spectre/src/_carousels.scss
@@ -47,10 +47,10 @@
       z-index: $zindex-2;
     }
     .item-prev {
-      left: 2rem;
+      left: 1.25rem;
     }
     .item-next {
-      right: 2rem;
+      right: 1.25rem;
     }
   }
 
@@ -72,31 +72,31 @@
   }
 
   .carousel-nav {
-    bottom: 1rem;
+    bottom: 0.63rem;
     display: flex;
     justify-content: center;
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
-    width: 20rem;
+    width: 12.5rem;
     z-index: $zindex-2;
 
     .nav-item {
       color: fade-in($gray-color-light, 0.5);
       display: block;
       flex: 1 0 auto;
-      height: 4rem;
-      margin: 0.4rem;
-      max-width: 5rem;
+      height: 2.5rem;
+      margin: 0.25rem;
+      max-width: 3.13rem;
       position: relative;
 
       &::before {
         background: currentColor;
         content: "";
         display: block;
-        height: 0.3rem;
+        height: 0.19rem;
         position: absolute;
-        top: 2rem;
+        top: 1.25rem;
         width: 100%;
       }
     }
diff --git a/client/src/styles/spectre/src/_chips.scss b/client/src/styles/spectre/src/_chips.scss
index 697f71133..c218f7fa5 100755
--- a/client/src/styles/spectre/src/_chips.scss
+++ b/client/src/styles/spectre/src/_chips.scss
@@ -5,10 +5,10 @@
   border-radius: $border-radius;
   color: $gray-color-dark;
   display: inline-flex;
-  height: 2.8rem;
-  margin: 0 0.1rem 0.1rem 0;
+  height: 1.75rem;
+  margin: 0 0.06rem 0.06rem 0;
   max-width: 100%;
-  padding: 0.1rem 0.8rem;
+  padding: 0.06rem 0.5rem;
   text-decoration: none;
   vertical-align: middle;
 
@@ -18,7 +18,7 @@
   }
 
   .avatar {
-    margin-left: -0.4rem;
-    margin-right: 0.4rem;
+    margin-left: -0.25rem;
+    margin-right: 0.25rem;
   }
 }
diff --git a/client/src/styles/spectre/src/_codes.scss b/client/src/styles/spectre/src/_codes.scss
index ac0d6653f..de94722af 100755
--- a/client/src/styles/spectre/src/_codes.scss
+++ b/client/src/styles/spectre/src/_codes.scss
@@ -7,7 +7,7 @@ code {
 .code {
   border-radius: $border-radius;
   color: $body-font-color;
-  line-height: 2rem;
+  line-height: 1.25rem;
   position: relative;
 
   &::before {
@@ -15,8 +15,8 @@ code {
     color: $gray-color;
     font-size: $font-size-sm;
     position: absolute;
-    right: 1rem;
-    top: 0.2rem;
+    right: 0.63rem;
+    top: 0.13rem;
   }
 
   code {
@@ -25,7 +25,7 @@ code {
     display: block;
     line-height: inherit;
     overflow-x: auto;
-    padding: 2rem;
+    padding: 1.25rem;
     width: 100%;
   }
 }
diff --git a/client/src/styles/spectre/src/_comparison-sliders.scss b/client/src/styles/spectre/src/_comparison-sliders.scss
index e43d457ff..4572602f0 100755
--- a/client/src/styles/spectre/src/_comparison-sliders.scss
+++ b/client/src/styles/spectre/src/_comparison-sliders.scss
@@ -29,7 +29,7 @@
     width: 100%;
 
     .comparison-label {
-      right: 1.6rem;
+      right: 1rem;
     }
   }
 
@@ -45,7 +45,7 @@
       height: 100%;
       left: 0;
       position: absolute;
-      right: 1.6rem;
+      right: 1rem;
       top: 0;
       z-index: $zindex-0;
     }
@@ -53,30 +53,30 @@
     &::after {
       background: currentColor;
       border-radius: 50%;
-      box-shadow: 0 -0.5rem, 0 0.5rem;
+      box-shadow: 0 -0.31rem, 0 0.31rem;
       color: $light-color;
       content: "";
-      height: 0.3rem;
+      height: 0.19rem;
       position: absolute;
-      right: 0.8rem;
+      right: 0.5rem;
       top: 50%;
       transform: translate(50%, -50%);
-      width: 0.3rem;
+      width: 0.19rem;
       z-index: -$zindex-0;
     }
 
     .comparison-label {
-      left: 1.6rem;
+      left: 1rem;
     }
   }
 
   .comparison-resizer {
     animation: first-run 1.5s 1 ease-in-out;
     cursor: ew-resize;
-    height: 1.5rem;
+    height: 0.94rem;
     left: 0;
     max-width: 100%;
-    min-width: 1.6rem;
+    min-width: 1rem;
     opacity: 0;
     outline: none;
     position: relative;
@@ -88,9 +88,9 @@
 
   .comparison-label {
     background: fade-in($dark-color, 0.5);
-    bottom: 1.6rem;
+    bottom: 1rem;
     color: $light-color;
-    padding: 0.3rem 0.8rem;
+    padding: 0.19rem 0.5rem;
     position: absolute;
     user-select: none;
   }
@@ -101,13 +101,13 @@
     width: 0;
   }
   25% {
-    width: 4.8rem;
+    width: 3rem;
   }
   50% {
-    width: 1.6rem;
+    width: 1rem;
   }
   75% {
-    width: 2.4rem;
+    width: 1.5rem;
   }
   100% {
     width: 0;
diff --git a/client/src/styles/spectre/src/_empty.scss b/client/src/styles/spectre/src/_empty.scss
index 0280ba0fb..0cdececff 100755
--- a/client/src/styles/spectre/src/_empty.scss
+++ b/client/src/styles/spectre/src/_empty.scss
@@ -8,7 +8,7 @@
 
   .empty-title,
   .empty-subtitle {
-    margin: 1rem auto;
+    margin: 0.63rem auto;
   }
 
   .empty-subtitle {
@@ -16,6 +16,6 @@
   }
 
   .empty-action {
-    margin-top: 1.5rem;
+    margin-top: 0.94rem;
   }
 }
diff --git a/client/src/styles/spectre/src/_filters.scss b/client/src/styles/spectre/src/_filters.scss
index a02d562cf..88d1e123f 100755
--- a/client/src/styles/spectre/src/_filters.scss
+++ b/client/src/styles/spectre/src/_filters.scss
@@ -1,7 +1,7 @@
 // Filters
 .filter {
   .filter-nav {
-    margin: 1rem 0;
+    margin: 0.63rem 0;
   }
 
   .filter-body {
diff --git a/client/src/styles/spectre/src/_forms.scss b/client/src/styles/spectre/src/_forms.scss
index 000cf4e17..40d6d222f 100755
--- a/client/src/styles/spectre/src/_forms.scss
+++ b/client/src/styles/spectre/src/_forms.scss
@@ -8,14 +8,14 @@
 // Form element: Label
 .form-label {
   display: block;
-  padding: 0.6rem 0;
+  padding: 0.37rem 0;
 
   &.label-sm {
-    padding: 0.2rem 0;
+    padding: 0.13rem 0;
   }
 
   &.label-lg {
-    padding: 1rem 0;
+    padding: 0.63rem 0;
   }
 }
 
@@ -30,11 +30,11 @@
   @include control-transition();
   display: block;
   font-size: $font-size;
-  height: 3.2rem;
-  line-height: 2rem;
+  height: 2rem;
+  line-height: 1.25rem;
   max-width: 100%;
   outline: none;
-  padding: 0.5rem 0.8rem;
+  padding: 0.31rem 0.5rem;
   position: relative;
   width: 100%;
   &:focus {
@@ -48,14 +48,14 @@
   // Input sizes
   &.input-sm {
     font-size: $font-size-sm;
-    height: 2.4rem;
-    padding: 0.1rem 0.8rem;
+    height: 1.5rem;
+    padding: 0.06rem 0.5rem;
   }
 
   &.input-lg {
     font-size: $font-size-lg;
-    height: 4rem;
-    padding: 0.9rem 0.8rem;
+    height: 2.5rem;
+    padding: 0.56rem 0.5rem;
   }
 
   &.input-inline {
@@ -78,7 +78,7 @@
 // Form element: Input hint
 .form-input-hint {
   color: $gray-color;
-  margin-top: 0.4rem;
+  margin-top: 0.25rem;
 
   .has-success &,
   .is-success + & {
@@ -98,24 +98,24 @@
   border-radius: $border-radius;
   color: inherit;
   font-size: $font-size;
-  line-height: 2rem;
+  line-height: 1.25rem;
   outline: none;
-  padding: 0.5rem 0.8rem;
+  padding: 0.31rem 0.5rem;
   vertical-align: middle;
 
   &[multiple] {
     width: 100%;
 
     option {
-      padding: 0.2rem 0.4rem;
+      padding: 0.13rem 0.25rem;
     }
   }
   &:not([multiple]) {
     background: $bg-color-light
       url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
-      no-repeat right 0.75rem center / 0.8rem 1rem;
-    height: 3.2rem;
-    padding-right: 2.4rem;
+      no-repeat right 0.47rem center / 0.5rem 0.63rem;
+    height: 2rem;
+    padding-right: 1.5rem;
   }
   &:focus {
     border-color: $primary-color;
@@ -128,14 +128,14 @@
   // Select sizes
   &.select-sm {
     font-size: $font-size-sm;
-    height: 2.4rem;
-    padding: 0.1rem 2rem 0.1rem 0.6rem;
+    height: 1.5rem;
+    padding: 0.06rem 1.25rem 0.06rem 0.37rem;
   }
 
   &.select-lg {
     font-size: $font-size-lg;
-    height: 4rem;
-    padding: 0.9rem 2.4rem 0.9rem 0.8rem;
+    height: 2.5rem;
+    padding: 0.56rem 1.5rem 0.56rem 0.5rem;
   }
 }
 
@@ -164,16 +164,16 @@
 .form-radio,
 .form-switch {
   display: inline-block;
-  line-height: 2rem;
+  line-height: 1.25rem;
   position: relative;
 
   input {
     clip: rect(0, 0, 0, 0);
-    height: 0.1rem;
-    margin: -0.1rem;
+    height: 0.06rem;
+    margin: -0.06rem;
     overflow: hidden;
     position: absolute;
-    width: 0.1rem;
+    width: 0.06rem;
     &:focus + .form-icon {
       border-color: $primary-color;
       @include control-shadow();
@@ -195,13 +195,13 @@
 
 .form-checkbox,
 .form-radio {
-  padding: 0.2rem 2rem;
+  padding: 0.13rem 1.25rem;
 
   .form-icon {
-    height: 1.4rem;
+    height: 0.87rem;
     left: 0;
-    top: 0.5rem;
-    width: 1.4rem;
+    top: 0.31rem;
+    width: 0.87rem;
   }
 
   input {
@@ -219,18 +219,18 @@
     &:checked + .form-icon {
       &::before {
         background-clip: padding-box;
-        border: 0.2rem solid $light-color;
+        border: 0.13rem solid $light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
-        height: 1rem;
+        height: 0.63rem;
         left: 50%;
-        margin-left: -0.3rem;
-        margin-top: -0.6rem;
+        margin-left: -0.19rem;
+        margin-top: -0.37rem;
         position: absolute;
         top: 50%;
         transform: rotate(45deg);
-        width: 0.6rem;
+        width: 0.37rem;
       }
     }
     &:indeterminate + .form-icon {
@@ -239,20 +239,20 @@
       &::before {
         background: $bg-color-light;
         content: "";
-        height: 0.2rem;
+        height: 0.13rem;
         left: 50%;
-        margin-left: -0.5rem;
-        margin-top: -0.1rem;
+        margin-left: -0.31rem;
+        margin-top: -0.06rem;
         position: absolute;
         top: 50%;
-        width: 1rem;
+        width: 0.63rem;
       }
     }
   }
 }
 .form-radio {
   .form-icon {
-    border-radius: 0.7rem;
+    border-radius: 0.44rem;
   }
 
   input {
@@ -261,13 +261,13 @@
         background: $bg-color-light;
         border-radius: $border-radius;
         content: "";
-        height: 0.4rem;
+        height: 0.25rem;
         left: 50%;
-        margin-left: -0.2rem;
-        margin-top: -0.2rem;
+        margin-left: -0.13rem;
+        margin-top: -0.13rem;
         position: absolute;
         top: 50%;
-        width: 0.4rem;
+        width: 0.25rem;
       }
     }
   }
@@ -275,34 +275,34 @@
 
 // Form element: Switch
 .form-switch {
-  padding: 0.2rem 2rem 0.2rem 3.6rem;
+  padding: 0.13rem 1.25rem 0.13rem 2.25rem;
 
   .form-icon {
     background: $gray-color-light;
     background-clip: padding-box;
-    border-radius: 0.9rem;
-    height: 1.8rem;
+    border-radius: 0.56rem;
+    height: 1.13rem;
     left: 0;
-    top: 0.3rem;
-    width: 3rem;
+    top: 0.19rem;
+    width: 1.88rem;
     &::before {
       background: $bg-color-light;
-      border-radius: 0.8rem;
+      border-radius: 0.5rem;
       content: "";
       display: block;
-      height: 1.6rem;
+      height: 1rem;
       left: 0;
       position: absolute;
       top: 0;
       @include control-transition();
-      width: 1.6rem;
+      width: 1rem;
     }
   }
 
   input {
     &:checked + .form-icon {
       &::before {
-        left: 1.2rem;
+        left: 0.75rem;
       }
     }
     &:active + .form-icon {
@@ -321,16 +321,16 @@
     background: $bg-color;
     border: $border-width solid $border-color-dark;
     border-radius: $border-radius;
-    line-height: 2rem;
-    padding: 0.5rem 0.8rem;
+    line-height: 1.25rem;
+    padding: 0.31rem 0.5rem;
 
     &.addon-sm {
       font-size: $font-size-sm;
-      padding: 0.1rem 0.8rem;
+      padding: 0.06rem 0.5rem;
     }
     &.addon-lg {
       font-size: $font-size-lg;
-      padding: 0.9rem 0.8rem;
+      padding: 0.56rem 0.5rem;
     }
   }
   .input-group-addon,
@@ -347,12 +347,12 @@
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -0.1rem;
+      margin-left: -0.06rem;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -0.1rem;
+      margin-left: -0.06rem;
     }
     &:focus {
       z-index: $zindex-0;
@@ -414,6 +414,6 @@ input {
   .form-checkbox,
   .form-radio,
   .form-switch {
-    margin: 0.4rem 0;
+    margin: 0.25rem 0;
   }
 }
diff --git a/client/src/styles/spectre/src/_icons.scss b/client/src/styles/spectre/src/_icons.scss
index 514693940..52afac157 100755
--- a/client/src/styles/spectre/src/_icons.scss
+++ b/client/src/styles/spectre/src/_icons.scss
@@ -1,5 +1,5 @@
 // CSS Icons
-$icon-border-width: 0.2rem;
+$icon-border-width: 0.13rem;
 
 .icon {
   box-sizing: border-box;
@@ -8,7 +8,7 @@ $icon-border-width: 0.2rem;
   font-style: normal;
   height: 1em;
   position: relative;
-  text-indent: -999rem;
+  text-indent: -624.38rem;
   vertical-align: middle;
   width: 1em;
   &::before,
@@ -103,8 +103,8 @@ $icon-border-width: 0.2rem;
     box-shadow: -0.35em -0.35em, -0.35em 0, -0.35em 0.35em, 0 -0.35em, 0 0.35em, 0.35em -0.35em,
       0.35em 0, 0.35em 0.35em;
     content: "";
-    height: 0.3rem;
-    width: 0.3rem;
+    height: 0.19rem;
+    width: 0.19rem;
   }
 }
 
@@ -145,8 +145,8 @@ $icon-border-width: 0.2rem;
     box-shadow: -0.4em 0, 0.4em 0;
     border-radius: 50%;
     content: "";
-    height: 0.3rem;
-    width: 0.3rem;
+    height: 0.19rem;
+    width: 0.19rem;
   }
 }
 .icon-more-vert {
diff --git a/client/src/styles/spectre/src/_layout.scss b/client/src/styles/spectre/src/_layout.scss
index 773a23370..c935a66af 100755
--- a/client/src/styles/spectre/src/_layout.scss
+++ b/client/src/styles/spectre/src/_layout.scss
@@ -13,11 +13,11 @@
   }
 
   &.grid-960 {
-    max-width: 96rem + 2 * $layout-padding;
+    max-width: 60rem + 2 * $layout-padding;
   }
 
   &.grid-480 {
-    max-width: 48rem + 2 * $layout-padding;
+    max-width: 30rem + 2 * $layout-padding;
   }
 }
 
diff --git a/client/src/styles/spectre/src/_menus.scss b/client/src/styles/spectre/src/_menus.scss
index 572d3718f..992aeb30f 100755
--- a/client/src/styles/spectre/src/_menus.scss
+++ b/client/src/styles/spectre/src/_menus.scss
@@ -5,14 +5,14 @@
   list-style: none;
   margin: 0;
   min-width: $control-min-width;
-  padding: 1rem;
-  @include shadow-variant(0.1rem);
-  transform: translateY(0.5rem);
+  padding: 0.63rem;
+  @include shadow-variant(0.06rem);
+  transform: translateY(0.31rem);
   z-index: $zindex-1;
 
   .menu-item {
     margin-top: 0;
-    padding: 0 0.8rem;
+    padding: 0 0.5rem;
     text-decoration: none;
     user-select: none;
 
@@ -20,8 +20,8 @@
       border-radius: $border-radius;
       color: inherit;
       display: block;
-      margin: 0 -0.8rem;
-      padding: 0.6rem 0.8rem;
+      margin: 0 -0.5rem;
+      padding: 0.37rem 0.5rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -37,10 +37,10 @@
 
   .menu-badge {
     float: right;
-    padding: 0.6rem 0;
+    padding: 0.37rem 0;
 
     .btn {
-      margin-top: -0.2rem;
+      margin-top: -0.13rem;
     }
   }
 }
diff --git a/client/src/styles/spectre/src/_meters.scss b/client/src/styles/spectre/src/_meters.scss
index 6338c46c6..a98faaa64 100755
--- a/client/src/styles/spectre/src/_meters.scss
+++ b/client/src/styles/spectre/src/_meters.scss
@@ -7,7 +7,7 @@
   border-radius: $border-radius;
   display: block;
   width: 100%;
-  height: 1.6rem;
+  height: 1rem;
 
   &::-webkit-meter-inner-element {
     display: block;
diff --git a/client/src/styles/spectre/src/_mixins.scss b/client/src/styles/spectre/src/_mixins.scss
index 2cc93cca1..4914f9fd7 100755
--- a/client/src/styles/spectre/src/_mixins.scss
+++ b/client/src/styles/spectre/src/_mixins.scss
@@ -9,7 +9,7 @@
 
 // Component focus shadow
 @mixin control-shadow($color: $primary-color) {
-  box-shadow: 0 0 0 0.2rem fade-in($color, 0.15);
+  box-shadow: 0 0 0 0.13rem fade-in($color, 0.15);
 }
 
 // Component transition
@@ -28,7 +28,7 @@
   border-radius: $border-radius;
   display: inline-block;
   line-height: 1;
-  padding: 0.3rem 0.4rem;
+  padding: 0.19rem 0.25rem;
   vertical-align: baseline;
 }
 
@@ -38,5 +38,5 @@
 }
 
 @mixin shadow-variant($offset) {
-  box-shadow: 0 $offset ($offset + 0.1rem) * 2 fade-in($dark-color, 0.3);
+  box-shadow: 0 $offset ($offset + 0.06rem) * 2 fade-in($dark-color, 0.3);
 }
diff --git a/client/src/styles/spectre/src/_modals.scss b/client/src/styles/spectre/src/_modals.scss
index de54e1361..cb6e56639 100755
--- a/client/src/styles/spectre/src/_modals.scss
+++ b/client/src/styles/spectre/src/_modals.scss
@@ -31,14 +31,14 @@
 
     .modal-container {
       animation: slide-down 0.2s ease 1;
-      max-width: 64rem;
+      max-width: 40rem;
       z-index: $zindex-0;
     }
   }
 
   &.modal-sm {
     .modal-container {
-      max-width: 32rem;
+      max-width: 20rem;
     }
   }
 }
@@ -48,7 +48,7 @@
   border-radius: $border-radius;
   display: block;
   padding: 0;
-  @include shadow-variant(0.4rem);
+  @include shadow-variant(0.25rem);
   text-align: left;
 
   .modal-header {
diff --git a/client/src/styles/spectre/src/_navigation.scss b/client/src/styles/spectre/src/_navigation.scss
index dbca50007..eca02629a 100755
--- a/client/src/styles/spectre/src/_navigation.scss
+++ b/client/src/styles/spectre/src/_navigation.scss
@@ -4,7 +4,7 @@
 .pagination,
 .nav {
   list-style: none;
-  margin: 0.5rem 0;
+  margin: 0.31rem 0;
 }
 
 @import "_breadcrumbs.scss";
diff --git a/client/src/styles/spectre/src/_navs.scss b/client/src/styles/spectre/src/_navs.scss
index d9923ac7f..901873308 100755
--- a/client/src/styles/spectre/src/_navs.scss
+++ b/client/src/styles/spectre/src/_navs.scss
@@ -6,7 +6,7 @@
   .nav-item {
     a {
       color: $gray-color-dark;
-      padding: 0.6rem 0.8rem;
+      padding: 0.37rem 0.5rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -25,8 +25,8 @@
   }
 
   & .nav {
-    margin-bottom: 1rem;
-    margin-left: 2rem;
+    margin-bottom: 0.63rem;
+    margin-left: 1.25rem;
 
     a {
       color: $gray-color;
diff --git a/client/src/styles/spectre/src/_pagination.scss b/client/src/styles/spectre/src/_pagination.scss
index 4eac26c96..a8dccdd29 100755
--- a/client/src/styles/spectre/src/_pagination.scss
+++ b/client/src/styles/spectre/src/_pagination.scss
@@ -3,18 +3,18 @@
   display: flex;
 
   .page-item {
-    margin: 1rem 0.1rem;
+    margin: 0.63rem 0.06rem;
 
     span {
       display: inline-block;
-      padding: 0.6rem 0.4rem;
+      padding: 0.37rem 0.25rem;
     }
 
     a {
       border-radius: $border-radius;
       color: $gray-color-dark;
       display: inline-block;
-      padding: 0.6rem 0.8rem;
+      padding: 0.37rem 0.5rem;
       text-decoration: none;
       &:focus,
       &:hover {
diff --git a/client/src/styles/spectre/src/_panels.scss b/client/src/styles/spectre/src/_panels.scss
index 4ca27c6f0..0f9b5a199 100755
--- a/client/src/styles/spectre/src/_panels.scss
+++ b/client/src/styles/spectre/src/_panels.scss
@@ -22,7 +22,7 @@
   }
 
   .panel-title {
-    font-size: 2rem;
+    font-size: 1.25rem;
   }
 
   .panel-subtitle {
diff --git a/client/src/styles/spectre/src/_parallax.scss b/client/src/styles/spectre/src/_parallax.scss
index 27fe78188..98266d741 100755
--- a/client/src/styles/spectre/src/_parallax.scss
+++ b/client/src/styles/spectre/src/_parallax.scss
@@ -1,7 +1,7 @@
 // Parallax
 $parallax-deg: 3deg;
-$parallax-offset: 0.65rem;
-$parallax-offset-z: 10rem;
+$parallax-offset: 0.41rem;
+$parallax-offset-z: 6.25rem;
 
 @mixin parallax-dir() {
   height: 50%;
@@ -18,8 +18,8 @@ $parallax-offset-z: 10rem;
 
   .parallax-content {
     height: auto;
-    @include shadow-variant(2rem);
-    transform: perspective(100rem);
+    @include shadow-variant(1.25rem);
+    transform: perspective(62.5rem);
     transform-style: preserve-3d;
     transition: all 0.4s ease;
     width: 100%;
@@ -44,7 +44,7 @@ $parallax-offset-z: 10rem;
     left: 0;
     position: absolute;
     text-align: center;
-    text-shadow: 0 0 3rem fade-in($dark-color, 0.95);
+    text-shadow: 0 0 1.88rem fade-in($dark-color, 0.95);
     top: 0;
     transform: translateZ($parallax-offset-z);
     transition: all 0.4s ease;
@@ -58,7 +58,7 @@ $parallax-offset-z: 10rem;
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(-$parallax-deg) rotateY($parallax-deg);
+      transform: perspective(62.5rem) rotateX(-$parallax-deg) rotateY($parallax-deg);
 
       &::before {
         background: linear-gradient(
@@ -80,7 +80,7 @@ $parallax-offset-z: 10rem;
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+      transform: perspective(62.5rem) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
 
       &::before {
         background: linear-gradient(
@@ -102,7 +102,7 @@ $parallax-offset-z: 10rem;
     left: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX($parallax-deg) rotateY($parallax-deg);
+      transform: perspective(62.5rem) rotateX($parallax-deg) rotateY($parallax-deg);
 
       &::before {
         background: linear-gradient(
@@ -124,7 +124,7 @@ $parallax-offset-z: 10rem;
     right: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX($parallax-deg) rotateY(-$parallax-deg);
+      transform: perspective(62.5rem) rotateX($parallax-deg) rotateY(-$parallax-deg);
 
       &::before {
         background: linear-gradient(
diff --git a/client/src/styles/spectre/src/_popovers.scss b/client/src/styles/spectre/src/_popovers.scss
index 2e60292b8..905d4be42 100755
--- a/client/src/styles/spectre/src/_popovers.scss
+++ b/client/src/styles/spectre/src/_popovers.scss
@@ -12,7 +12,7 @@
     top: 0;
     transform: translate(-50%, -50%) scale(0);
     transition: transform 0.2s ease;
-    width: 32rem;
+    width: 20rem;
     z-index: $zindex-4;
   }
 
@@ -65,6 +65,6 @@
 
   .card {
     border: 0;
-    @include shadow-variant(0.4rem);
+    @include shadow-variant(0.25rem);
   }
 }
diff --git a/client/src/styles/spectre/src/_progress.scss b/client/src/styles/spectre/src/_progress.scss
index c34cc20e7..67dca33d3 100755
--- a/client/src/styles/spectre/src/_progress.scss
+++ b/client/src/styles/spectre/src/_progress.scss
@@ -6,7 +6,7 @@
   border: 0;
   border-radius: $border-radius;
   color: $primary-color;
-  height: 0.4rem;
+  height: 0.25rem;
   position: relative;
   width: 100%;
 
diff --git a/client/src/styles/spectre/src/_sliders.scss b/client/src/styles/spectre/src/_sliders.scss
index 66128e0c3..2b1ce3d71 100755
--- a/client/src/styles/spectre/src/_sliders.scss
+++ b/client/src/styles/spectre/src/_sliders.scss
@@ -5,7 +5,7 @@
   background: transparent;
   display: block;
   width: 100%;
-  height: 2.4rem;
+  height: 1.5rem;
 
   &:focus {
     @include control-shadow();
@@ -18,26 +18,26 @@
     background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: 1.2rem;
-    margin-top: -0.5rem;
+    height: 0.75rem;
+    margin-top: -0.31rem;
     transition: transform 0.2s ease;
-    width: 1.2rem;
+    width: 0.75rem;
   }
   &::-moz-range-thumb {
     background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: 1.2rem;
+    height: 0.75rem;
     transition: transform 0.2s ease;
-    width: 1.2rem;
+    width: 0.75rem;
   }
   &::-ms-thumb {
     background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: 1.2rem;
+    height: 0.75rem;
     transition: transform 0.2s ease;
-    width: 1.2rem;
+    width: 0.75rem;
   }
 
   &:active {
@@ -72,19 +72,19 @@
   &::-webkit-slider-runnable-track {
     background: $bg-color-dark;
     border-radius: $border-radius;
-    height: 0.2rem;
+    height: 0.13rem;
     width: 100%;
   }
   &::-moz-range-track {
     background: $bg-color-dark;
     border-radius: $border-radius;
-    height: 0.2rem;
+    height: 0.13rem;
     width: 100%;
   }
   &::-ms-track {
     background: $bg-color-dark;
     border-radius: $border-radius;
-    height: 0.2rem;
+    height: 0.13rem;
     width: 100%;
   }
   &::-ms-fill-lower {
diff --git a/client/src/styles/spectre/src/_steps.scss b/client/src/styles/spectre/src/_steps.scss
index a74565093..bf5da9de2 100755
--- a/client/src/styles/spectre/src/_steps.scss
+++ b/client/src/styles/spectre/src/_steps.scss
@@ -3,44 +3,44 @@
   display: flex;
   flex-wrap: nowrap;
   list-style: none;
-  margin: 0.5rem 0;
+  margin: 0.31rem 0;
   width: 100%;
 
   .step-item {
     flex: 1 1 0;
     margin-top: 0;
-    min-height: 2rem;
+    min-height: 1.25rem;
     text-align: center;
     position: relative;
 
     &:not(:first-child)::before {
       background: $primary-color;
       content: "";
-      height: 0.2rem;
+      height: 0.13rem;
       left: -50%;
       position: absolute;
-      top: 0.9rem;
+      top: 0.56rem;
       width: 100%;
     }
 
     a {
       color: $gray-color;
       display: inline-block;
-      padding: 2rem 1rem 0;
+      padding: 1.25rem 0.63rem 0;
       text-decoration: none;
 
       &::before {
         background: $primary-color;
-        border: 0.2rem solid $light-color;
+        border: 0.13rem solid $light-color;
         border-radius: 50%;
         content: "";
         display: block;
-        height: 1.2rem;
+        height: 0.75rem;
         left: 50%;
         position: absolute;
-        top: 0.4rem;
+        top: 0.25rem;
         transform: translateX(-50%);
-        width: 1.2rem;
+        width: 0.75rem;
         z-index: $zindex-0;
       }
     }
@@ -49,7 +49,7 @@
       a {
         &::before {
           background: $light-color;
-          border: 0.2rem solid $primary-color;
+          border: 0.13rem solid $primary-color;
         }
       }
 
diff --git a/client/src/styles/spectre/src/_tables.scss b/client/src/styles/spectre/src/_tables.scss
index 0c486ec57..c9fcdb103 100755
--- a/client/src/styles/spectre/src/_tables.scss
+++ b/client/src/styles/spectre/src/_tables.scss
@@ -36,11 +36,11 @@
 
   td {
     border-bottom: $border-width solid $border-color;
-    padding: 1.5rem 1rem;
+    padding: 0.94rem 0.63rem;
   }
 
   th {
     border-bottom: $border-width solid $gray-color-dark;
-    padding: 1.5rem 1rem;
+    padding: 0.94rem 0.63rem;
   }
 }
diff --git a/client/src/styles/spectre/src/_tabs.scss b/client/src/styles/spectre/src/_tabs.scss
index 3085db0cb..2c4fb84a2 100755
--- a/client/src/styles/spectre/src/_tabs.scss
+++ b/client/src/styles/spectre/src/_tabs.scss
@@ -14,11 +14,11 @@
     }
 
     a {
-      border-bottom: 0.2rem solid transparent;
+      border-bottom: 0.13rem solid transparent;
       color: inherit;
       display: block;
       margin-top: 0;
-      padding: 0.5rem 1.2rem;
+      padding: 0.31rem 0.75rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -40,8 +40,8 @@
       .badge {
         &[data-badge]::after {
           position: absolute;
-          right: -0.4rem;
-          top: -0.4rem;
+          right: -0.25rem;
+          top: -0.25rem;
           transform: translate(0, 0);
         }
       }
diff --git a/client/src/styles/spectre/src/_tiles.scss b/client/src/styles/spectre/src/_tiles.scss
index 82e64b957..1c8112d11 100755
--- a/client/src/styles/spectre/src/_tiles.scss
+++ b/client/src/styles/spectre/src/_tiles.scss
@@ -11,18 +11,18 @@
   .tile-content {
     flex: 1 1 auto;
     &:not(:first-child) {
-      padding-left: 1rem;
+      padding-left: 0.63rem;
     }
     &:not(:last-child) {
-      padding-right: 1rem;
+      padding-right: 0.63rem;
     }
   }
   .tile-title {
-    line-height: 2rem;
+    line-height: 1.25rem;
   }
   .tile-subtitle {
     color: lighten($body-font-color, 40%);
-    line-height: 2rem;
+    line-height: 1.25rem;
   }
 
   &.tile-centered {
diff --git a/client/src/styles/spectre/src/_timelines.scss b/client/src/styles/spectre/src/_timelines.scss
index 031b45e49..e511890d5 100755
--- a/client/src/styles/spectre/src/_timelines.scss
+++ b/client/src/styles/spectre/src/_timelines.scss
@@ -2,16 +2,16 @@
 .timeline {
   .timeline-item {
     display: flex;
-    margin-bottom: 2.4rem;
+    margin-bottom: 1.5rem;
     position: relative;
     &::before {
       background: $border-color;
       content: "";
       height: 100%;
-      left: 1.1rem;
+      left: 0.69rem;
       position: absolute;
-      top: 2.4rem;
-      width: 0.2rem;
+      top: 1.5rem;
+      width: 0.13rem;
     }
 
     .timeline-left {
@@ -20,32 +20,32 @@
 
     .timeline-content {
       flex: 1 1 auto;
-      padding: 0.2rem 0 0.2rem $layout-padding-lg;
+      padding: 0.13rem 0 0.13rem $layout-padding-lg;
     }
 
     .timeline-icon {
       border-radius: 50%;
       color: $light-color;
       display: block;
-      height: 2.4rem;
+      height: 1.5rem;
       text-align: center;
-      width: 2.4rem;
+      width: 1.5rem;
       &::before {
-        border: 0.2rem solid $primary-color;
+        border: 0.13rem solid $primary-color;
         border-radius: 50%;
         content: "";
         display: block;
-        height: 0.8rem;
-        left: 0.8rem;
+        height: 0.5rem;
+        left: 0.5rem;
         position: absolute;
-        top: 0.8rem;
-        width: 0.8rem;
+        top: 0.5rem;
+        width: 0.5rem;
       }
 
       &.icon-lg {
         background: $primary-color;
-        font-size: 1.6rem;
-        line-height: 2rem;
+        font-size: 1rem;
+        line-height: 1.25rem;
         &::before {
           content: none;
         }
diff --git a/client/src/styles/spectre/src/_tooltips.scss b/client/src/styles/spectre/src/_tooltips.scss
index 160a5699a..912b678a7 100755
--- a/client/src/styles/spectre/src/_tooltips.scss
+++ b/client/src/styles/spectre/src/_tooltips.scss
@@ -10,14 +10,14 @@
     display: block;
     font-size: $font-size-sm;
     left: 50%;
-    max-width: 32rem;
+    max-width: 20rem;
     opacity: 0;
     overflow: hidden;
-    padding: 0.4rem 0.8rem;
+    padding: 0.25rem 0.5rem;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
-    transform: translate(-50%, 1rem);
+    transform: translate(-50%, 0.63rem);
     transition: all 0.2s ease;
     white-space: nowrap;
     z-index: $zindex-2;
@@ -26,7 +26,7 @@
   &:hover {
     &::after {
       opacity: 1;
-      transform: translate(-50%, -0.5rem);
+      transform: translate(-50%, -0.31rem);
     }
   }
   &[disabled],
@@ -38,12 +38,12 @@
     &::after {
       bottom: 50%;
       left: 100%;
-      transform: translate(-1rem, 50%);
+      transform: translate(-0.63rem, 50%);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(0.5rem, 50%);
+        transform: translate(0.31rem, 50%);
       }
     }
   }
@@ -51,12 +51,12 @@
     &::after {
       bottom: auto;
       top: 100%;
-      transform: translate(-50%, -1rem);
+      transform: translate(-50%, -0.63rem);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(-50%, 0.5rem);
+        transform: translate(-50%, 0.31rem);
       }
     }
   }
@@ -65,12 +65,12 @@
       bottom: 50%;
       left: auto;
       right: 100%;
-      transform: translate(1rem, 50%);
+      transform: translate(0.63rem, 50%);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(-0.5rem, 50%);
+        transform: translate(-0.31rem, 50%);
       }
     }
   }
diff --git a/client/src/styles/spectre/src/_typography.scss b/client/src/styles/spectre/src/_typography.scss
index 54bcc2832..40c2394cd 100755
--- a/client/src/styles/spectre/src/_typography.scss
+++ b/client/src/styles/spectre/src/_typography.scss
@@ -8,30 +8,30 @@ h6 {
   color: inherit;
   font-weight: 300;
   line-height: 1.2;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.94rem;
   margin-top: 0;
 }
 h1 {
-  font-size: 5rem;
+  font-size: 3.13rem;
 }
 h2 {
-  font-size: 4rem;
+  font-size: 2.5rem;
 }
 h3 {
-  font-size: 3rem;
+  font-size: 1.88rem;
 }
 h4 {
-  font-size: 2.4rem;
+  font-size: 1.5rem;
 }
 h5 {
-  font-size: 2rem;
+  font-size: 1.25rem;
 }
 h6 {
-  font-size: 1.6rem;
+  font-size: 1rem;
 }
 p {
-  line-height: 2.4rem;
-  margin: 0 0 1rem;
+  line-height: 1.5rem;
+  margin: 0 0 0.63rem;
 }
 a,
 ins,
@@ -39,9 +39,9 @@ u {
   text-decoration-skip: ink edges;
 }
 blockquote {
-  border-left: 0.2rem solid $border-color;
+  border-left: 0.13rem solid $border-color;
   margin-left: 0;
-  padding: 1rem 2rem;
+  padding: 0.63rem 1.25rem;
 
   p:last-child {
     margin-bottom: 0;
@@ -53,16 +53,16 @@ blockquote {
 }
 ul,
 ol {
-  margin: 2rem 0 2rem 2rem;
+  margin: 1.25rem 0 1.25rem 1.25rem;
   padding: 0;
 
   ul,
   ol {
-    margin: 1.5rem 0 1.5rem 2rem;
+    margin: 0.94rem 0 0.94rem 1.25rem;
   }
 
   li {
-    margin-top: 1rem;
+    margin-top: 0.63rem;
   }
 }
 ul {
@@ -84,7 +84,7 @@ dl {
     font-weight: bold;
   }
   dd {
-    margin: 0.5rem 0 1.5rem 0;
+    margin: 0.31rem 0 0.94rem 0;
   }
 }
 mark {
@@ -96,7 +96,7 @@ kbd {
   @include label-variant($light-color, $dark-color);
 }
 abbr[title] {
-  border-bottom: 0.1rem dotted;
+  border-bottom: 0.06rem dotted;
   cursor: help;
   text-decoration: none;
 }
diff --git a/client/src/styles/spectre/src/_utilities.scss b/client/src/styles/spectre/src/_utilities.scss
index 940f73181..182fcaef2 100755
--- a/client/src/styles/spectre/src/_utilities.scss
+++ b/client/src/styles/spectre/src/_utilities.scss
@@ -2,8 +2,8 @@
 .divider {
   border-top: $border-width solid $border-color;
   display: block;
-  height: 0.1rem;
-  margin: 1rem 0;
+  height: 0.06rem;
+  margin: 0.63rem 0;
   position: relative;
 
   &[data-content]::before {
@@ -12,32 +12,32 @@
     content: attr(data-content);
     display: inline-block;
     font-size: $font-size-sm;
-    padding: 0 0.8rem;
-    transform: translateY(-1.1rem);
+    padding: 0 0.5rem;
+    transform: translateY(-0.69rem);
   }
 }
 
 // Loading
 .loading {
   color: transparent !important;
-  min-height: 1.6rem;
+  min-height: 1rem;
   pointer-events: none;
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
-    border: 0.2rem solid $primary-color;
-    border-radius: 0.8rem;
+    border: 0.13rem solid $primary-color;
+    border-radius: 0.5rem;
     border-right-color: transparent;
     border-top-color: transparent;
     content: "";
     display: block;
-    height: 1.6rem;
+    height: 1rem;
     left: 50%;
-    margin-left: -0.8rem;
-    margin-top: -0.8rem;
+    margin-left: -0.5rem;
+    margin-top: -0.5rem;
     position: absolute;
     top: 50%;
-    width: 1.6rem;
+    width: 1rem;
     z-index: $zindex-0;
   }
 }
@@ -71,53 +71,53 @@
 
 // Spacing
 .mt-10 {
-  margin-top: 1rem;
+  margin-top: 0.63rem;
 }
 .mr-10 {
-  margin-right: 1rem;
+  margin-right: 0.63rem;
 }
 .mb-10 {
-  margin-bottom: 1rem;
+  margin-bottom: 0.63rem;
 }
 .ml-10 {
-  margin-left: 1rem;
+  margin-left: 0.63rem;
 }
 .mt-5 {
-  margin-top: 0.5rem;
+  margin-top: 0.31rem;
 }
 .mr-5 {
-  margin-right: 0.5rem;
+  margin-right: 0.31rem;
 }
 .mb-5 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.31rem;
 }
 .ml-5 {
-  margin-left: 0.5rem;
+  margin-left: 0.31rem;
 }
 
 .pt-10 {
-  padding-top: 1rem;
+  padding-top: 0.63rem;
 }
 .pr-10 {
-  padding-right: 1rem;
+  padding-right: 0.63rem;
 }
 .pb-10 {
-  padding-bottom: 1rem;
+  padding-bottom: 0.63rem;
 }
 .pl-10 {
-  padding-left: 1rem;
+  padding-left: 0.63rem;
 }
 .pt-5 {
-  padding-top: 0.5rem;
+  padding-top: 0.31rem;
 }
 .pr-5 {
-  padding-right: 0.5rem;
+  padding-right: 0.31rem;
 }
 .pb-5 {
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.31rem;
 }
 .pl-5 {
-  padding-left: 0.5rem;
+  padding-left: 0.31rem;
 }
 
 // Display
@@ -156,12 +156,12 @@
 .text-assistive {
   border: 0;
   clip: rect(0, 0, 0, 0);
-  height: 0.1rem;
-  margin: -0.1rem;
+  height: 0.06rem;
+  margin: -0.06rem;
   overflow: hidden;
   padding: 0;
   position: absolute;
-  width: 0.1rem;
+  width: 0.06rem;
 }
 // Text
 .text-left {
@@ -224,16 +224,16 @@
   @include shadow-variant(0);
 }
 .shadow-1 {
-  @include shadow-variant(0.1rem);
+  @include shadow-variant(0.06rem);
 }
 .shadow-2 {
-  @include shadow-variant(0.2rem);
+  @include shadow-variant(0.13rem);
 }
 .shadow-3 {
-  @include shadow-variant(0.3rem);
+  @include shadow-variant(0.19rem);
 }
 .shadow-4 {
-  @include shadow-variant(0.4rem);
+  @include shadow-variant(0.25rem);
 }
 
 // Shapes
diff --git a/client/src/styles/spectre/src/_variables.scss b/client/src/styles/spectre/src/_variables.scss
index 3bc669e7c..d87fdd47d 100755
--- a/client/src/styles/spectre/src/_variables.scss
+++ b/client/src/styles/spectre/src/_variables.scss
@@ -9,11 +9,11 @@ $cjk-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microso
 $body-font-family: $base-font-family, $fallback-font-family !default;
 
 // Sizes
-$layout-padding: 1rem !default;
-$layout-padding-lg: 1.5rem !default;
-$control-min-width: 18rem !default;
-$border-radius: 0.2rem !default;
-$border-width: 0.1rem !default;
+$layout-padding: 0.63rem !default;
+$layout-padding-lg: 0.94rem !default;
+$control-min-width: 11.25rem !default;
+$border-radius: 0.13rem !default;
+$border-width: 0.06rem !default;
 
 // Colors
 // Core colors
@@ -54,9 +54,9 @@ $html-font-size: 10px !default;
 $html-line-height: 1.428571429 !default;
 $body-bg: $bg-color-light !default;
 $body-font-color: lighten($dark-color, 5%) !default;
-$font-size: 1.4rem !default;
-$font-size-sm: 1.2rem !default;
-$font-size-lg: 1.6rem !default;
+$font-size: 0.87rem !default;
+$font-size-sm: 0.75rem !default;
+$font-size-lg: 1rem !default;
 
 // Responsive breakpoints
 $size-xs: 480px !default;

From 4830ef4208d86921a2593b6b903fdef6e6f9f470 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 13:59:18 -0500
Subject: [PATCH 05/12] update yarn lock to remove spectre

---
 client/yarn.lock | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/client/yarn.lock b/client/yarn.lock
index 8aa131055..2d1945a4d 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -13996,11 +13996,6 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-spectre.scss@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/spectre.scss/-/spectre.scss-0.0.2.tgz#f80aacafd3002fb636062eeda7b66f17a9cc5aec"
-  integrity sha1-+Aqsr9MAL7Y2Bi7tp7ZvF6nMWuw=
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"

From 6a6268996d8075cbcf703c3b7601db10b357f908 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 13:59:51 -0500
Subject: [PATCH 06/12] update import path

---
 client/src/styles/_vars.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/styles/_vars.scss b/client/src/styles/_vars.scss
index 547b2572d..88dea0537 100644
--- a/client/src/styles/_vars.scss
+++ b/client/src/styles/_vars.scss
@@ -1,4 +1,4 @@
-@import "spectre.scss/src/_variables.scss";
+@import "styles/spectre/src/_variables.scss";
 
 $primary: #5764c6;
 $secondary: #eff1fa;

From fbaa927bc2c1ac69e76e81ef762ce9414737e603 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 14:00:00 -0500
Subject: [PATCH 07/12] set new base font size to 16px

---
 client/src/styles/spectre.scss                | 3 ---
 client/src/styles/spectre/src/_variables.scss | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/styles/spectre.scss b/client/src/styles/spectre.scss
index 82e05b805..c278bb6cb 100644
--- a/client/src/styles/spectre.scss
+++ b/client/src/styles/spectre.scss
@@ -13,9 +13,6 @@
 @import "styles/spectre/spectre-icons.scss";
 
 // various overwrites
-html {
-  font-size: 16px;
-}
 
 a {
   text-decoration: underline;
diff --git a/client/src/styles/spectre/src/_variables.scss b/client/src/styles/spectre/src/_variables.scss
index d87fdd47d..1096fd79b 100755
--- a/client/src/styles/spectre/src/_variables.scss
+++ b/client/src/styles/spectre/src/_variables.scss
@@ -50,7 +50,7 @@ $code-color: #e06870 !default;
 $highlight-color: #ffe9b3 !default;
 
 // Global
-$html-font-size: 10px !default;
+$html-font-size: 16px !default; // JUSTFIX: changed from 10px 
 $html-line-height: 1.428571429 !default;
 $body-bg: $bg-color-light !default;
 $body-font-color: lighten($dark-color, 5%) !default;

From 22b7606bf9cbdbc5c1b0f2bcd7cbb67c8e5e8864 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 14:08:59 -0500
Subject: [PATCH 08/12] prettier

---
 client/src/styles/spectre/src/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/styles/spectre/src/_variables.scss b/client/src/styles/spectre/src/_variables.scss
index 1096fd79b..719f4463a 100755
--- a/client/src/styles/spectre/src/_variables.scss
+++ b/client/src/styles/spectre/src/_variables.scss
@@ -50,7 +50,7 @@ $code-color: #e06870 !default;
 $highlight-color: #ffe9b3 !default;
 
 // Global
-$html-font-size: 16px !default; // JUSTFIX: changed from 10px 
+$html-font-size: 16px !default; // JUSTFIX: changed from 10px
 $html-line-height: 1.428571429 !default;
 $body-bg: $bg-color-light !default;
 $body-font-color: lighten($dark-color, 5%) !default;

From 2addbc555819a76a33c28fee4589b2039489ba5f Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 14:40:45 -0500
Subject: [PATCH 09/12] change borders from rem px (1px, 2px, 3px)

---
 client/src/components/CloseButton.tsx          |  4 ++--
 client/src/styles/PortfolioFilters.scss        | 12 ++++++------
 client/src/styles/PortfolioTable.scss          |  2 +-
 client/src/styles/_alert.scss                  |  2 +-
 client/src/styles/_button.scss                 |  6 +++---
 client/src/styles/_minmaxselect.scss           |  8 ++++----
 client/src/styles/_multiselect.scss            | 12 ++++++------
 client/src/styles/spectre/src/_typography.scss |  2 +-
 client/src/styles/spectre/src/_utilities.scss  |  2 +-
 client/src/styles/spectre/src/_variables.scss  |  2 +-
 10 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/client/src/components/CloseButton.tsx b/client/src/components/CloseButton.tsx
index 0858b2461..15defd0e5 100644
--- a/client/src/components/CloseButton.tsx
+++ b/client/src/components/CloseButton.tsx
@@ -7,7 +7,7 @@ import classNames from "classnames";
 type CloseButtonProps = withI18nProps & {
   onClick: () => void;
   /**
-   * Stroke width for the X svg (Default: "0.06rem")
+   * Stroke width for the X svg (Default: "1px")
    */
   strokeWidth?: number | string;
   /**
@@ -29,7 +29,7 @@ export const CloseButton = withI18n()(
   ({
     i18n,
     onClick,
-    strokeWidth = "0.06rem",
+    strokeWidth = "1px",
     height = "1rem",
     width = "1rem",
     className,
diff --git a/client/src/styles/PortfolioFilters.scss b/client/src/styles/PortfolioFilters.scss
index 28183280c..a99df62b9 100644
--- a/client/src/styles/PortfolioFilters.scss
+++ b/client/src/styles/PortfolioFilters.scss
@@ -63,7 +63,7 @@
         display: flex;
         align-items: center;
         text-transform: uppercase;
-        border: 0.06rem solid $justfix-black;
+        border: 1px solid $justfix-black;
         border-radius: 0.5rem;
         width: 3.81rem;
         @include for-phone-only {
@@ -89,7 +89,7 @@
       gap: 1.13rem;
 
       .filter {
-        border: 0.06rem solid $justfix-black;
+        border: 1px solid $justfix-black;
         border-radius: 0.5rem;
         text-transform: uppercase;
         display: flex;
@@ -100,7 +100,7 @@
             border-radius: 0;
             box-sizing: border-box;
             border: none;
-            border-bottom: 0.06rem solid $justfix-grey-400;
+            border-bottom: 1px solid $justfix-grey-400;
             text-align: left;
           }
           &.active:not([open]):not(.filter-toggle):not(.filters-mobile-wrapper) {
@@ -148,7 +148,7 @@
         }
         .checkbox {
           box-sizing: border-box;
-          border: 0.06rem solid $justfix-black;
+          border: 1px solid $justfix-black;
           border-radius: 0.25rem;
           width: var(--checkbox-height);
           height: var(--checkbox-height);
@@ -245,7 +245,7 @@
             overflow-y: auto;
             background-color: $justfix-white;
             box-sizing: border-box;
-            border: 0.06rem solid $justfix-black;
+            border: 1px solid $justfix-black;
             border-radius: 0.5rem;
             @include for-tablet-portrait-up {
               max-height: 65vh;
@@ -278,7 +278,7 @@
                 }
               }
               @include for-tablet-portrait-up() {
-                border-bottom: 0.06rem solid $justfix-grey;
+                border-bottom: 1px solid $justfix-grey;
               }
               &,
               .filter-info {
diff --git a/client/src/styles/PortfolioTable.scss b/client/src/styles/PortfolioTable.scss
index 24da8dfa7..76269dcd9 100644
--- a/client/src/styles/PortfolioTable.scss
+++ b/client/src/styles/PortfolioTable.scss
@@ -213,7 +213,7 @@ $table-border-dark: 1px solid $dark;
     flex-wrap: wrap;
     padding: 0.87rem 1.06rem;
     background-color: $justfix-white;
-    border-top: 0.06rem solid $gray-light;
+    border-top: 1px solid $gray-light;
     text-align: center;
     margin: 0;
 
diff --git a/client/src/styles/_alert.scss b/client/src/styles/_alert.scss
index 8cd44f63b..d2977b852 100644
--- a/client/src/styles/_alert.scss
+++ b/client/src/styles/_alert.scss
@@ -76,7 +76,7 @@
   }
   &.is-info {
     &.is-secondary {
-      border: 0.06rem solid $justfix-grey-400;
+      border: 1px solid $justfix-grey-400;
       &,
       p,
       a,
diff --git a/client/src/styles/_button.scss b/client/src/styles/_button.scss
index 18a161514..993e4b637 100644
--- a/client/src/styles/_button.scss
+++ b/client/src/styles/_button.scss
@@ -123,7 +123,7 @@
 }
 
 .icon-mail:before {
-  border-radius: 0.06rem;
+  border-radius: 1px;
 }
 
 // WHO ARE OUR USERS SURVEY BUTTON
@@ -152,10 +152,10 @@
 
   @if $color ==$justfix-white {
     color: $justfix-black;
-    border: 0.06rem solid $justfix-black;
+    border: 1px solid $justfix-black;
   } @else {
     color: $justfix-white;
-    border: 0.06rem solid $justfix-white;
+    border: 1px solid $justfix-white;
   }
 
   $button-shadow: #d4d5d0;
diff --git a/client/src/styles/_minmaxselect.scss b/client/src/styles/_minmaxselect.scss
index 779d5133e..aa53d5916 100644
--- a/client/src/styles/_minmaxselect.scss
+++ b/client/src/styles/_minmaxselect.scss
@@ -16,11 +16,11 @@
     width: 100%;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 2.5rem 2.5rem;
-    gap: 0.06rem;
+    gap: 1px;
     .minmaxselect__preset-value {
       position: relative;
       display: flex;
-      box-shadow: 0 0 0 0.06rem $justfix-grey-700;
+      box-shadow: 0 0 0 1px $justfix-grey-700;
       color: $justfix-black;
       background-color: $justfix-white;
       &:has(> input[disabled]) {
@@ -115,7 +115,7 @@
             background-color: $justfix-white;
             color: $justfix-black;
             font-size: 1rem;
-            border: 0.06rem solid $justfix-grey-600;
+            border: 1px solid $justfix-grey-600;
             border-radius: 0.13rem;
             appearance: textfield;
             // remove increment arrows
@@ -128,7 +128,7 @@
               outline: none;
             }
             &.hasError {
-              outline: 0.19rem solid $justfix-orange;
+              outline: 3px solid $justfix-orange;
             }
           }
         }
diff --git a/client/src/styles/_multiselect.scss b/client/src/styles/_multiselect.scss
index 17383d099..8647a0f8e 100644
--- a/client/src/styles/_multiselect.scss
+++ b/client/src/styles/_multiselect.scss
@@ -55,13 +55,13 @@
         svg {
           width: 0.63rem;
           height: 0.63rem;
-          stroke-width: 0.19rem;
+          stroke-width: 3px;
         }
       }
     }
 
     .multiselect__show-more-button {
-      border: 0.06rem solid $justfix-black;
+      border: 1px solid $justfix-black;
       padding: 0.5rem 0.37rem;
     }
   }
@@ -104,7 +104,7 @@
       }
 
       .multiselect__input-container {
-        border: 0.06rem solid $justfix-black;
+        border: 1px solid $justfix-black;
         border-radius: 0.13rem 0.13rem 0 0;
         font-size: 1rem;
         color: $justfix-black;
@@ -122,7 +122,7 @@
     margin: 0;
     border-radius: 0 0 0.13rem 0.13rem;
     position: relative;
-    border: 0.06rem solid $justfix-grey-400;
+    border: 1px solid $justfix-grey-400;
     border-top: none;
     box-shadow: none;
     color: $justfix-black;
@@ -160,7 +160,7 @@
           min-height: var(--box-size);
           min-width: var(--box-size);
           border-radius: 0.25rem;
-          border: 0.06rem solid $justfix-black;
+          border: 1px solid $justfix-black;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -183,5 +183,5 @@
   .multiselect__control
   .multiselect__value-container
   .multiselect__input-container {
-  border: 0.19rem solid $justfix-orange;
+  border: 3px solid $justfix-orange;
 }
diff --git a/client/src/styles/spectre/src/_typography.scss b/client/src/styles/spectre/src/_typography.scss
index 40c2394cd..372c07f53 100755
--- a/client/src/styles/spectre/src/_typography.scss
+++ b/client/src/styles/spectre/src/_typography.scss
@@ -96,7 +96,7 @@ kbd {
   @include label-variant($light-color, $dark-color);
 }
 abbr[title] {
-  border-bottom: 0.06rem dotted;
+  border-bottom: 1px dotted;
   cursor: help;
   text-decoration: none;
 }
diff --git a/client/src/styles/spectre/src/_utilities.scss b/client/src/styles/spectre/src/_utilities.scss
index 182fcaef2..34fb30900 100755
--- a/client/src/styles/spectre/src/_utilities.scss
+++ b/client/src/styles/spectre/src/_utilities.scss
@@ -25,7 +25,7 @@
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
-    border: 0.13rem solid $primary-color;
+    border: 2px solid $primary-color;
     border-radius: 0.5rem;
     border-right-color: transparent;
     border-top-color: transparent;
diff --git a/client/src/styles/spectre/src/_variables.scss b/client/src/styles/spectre/src/_variables.scss
index 719f4463a..326e78489 100755
--- a/client/src/styles/spectre/src/_variables.scss
+++ b/client/src/styles/spectre/src/_variables.scss
@@ -13,7 +13,7 @@ $layout-padding: 0.63rem !default;
 $layout-padding-lg: 0.94rem !default;
 $control-min-width: 11.25rem !default;
 $border-radius: 0.13rem !default;
-$border-width: 0.06rem !default;
+$border-width: 1px !default;
 
 // Colors
 // Core colors

From 83357bdd855d7e782497cf2808cedb4f52450139 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 15:02:14 -0500
Subject: [PATCH 10/12] changing more borders to px within spectre

---
 client/src/styles/spectre/src/_forms.scss     | 2 +-
 client/src/styles/spectre/src/_steps.scss     | 4 ++--
 client/src/styles/spectre/src/_timelines.scss | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/styles/spectre/src/_forms.scss b/client/src/styles/spectre/src/_forms.scss
index 40d6d222f..2ad1149ef 100755
--- a/client/src/styles/spectre/src/_forms.scss
+++ b/client/src/styles/spectre/src/_forms.scss
@@ -219,7 +219,7 @@
     &:checked + .form-icon {
       &::before {
         background-clip: padding-box;
-        border: 0.13rem solid $light-color;
+        border: 2px solid $light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
diff --git a/client/src/styles/spectre/src/_steps.scss b/client/src/styles/spectre/src/_steps.scss
index bf5da9de2..d37ec6e6d 100755
--- a/client/src/styles/spectre/src/_steps.scss
+++ b/client/src/styles/spectre/src/_steps.scss
@@ -31,7 +31,7 @@
 
       &::before {
         background: $primary-color;
-        border: 0.13rem solid $light-color;
+        border: 2px solid $light-color;
         border-radius: 50%;
         content: "";
         display: block;
@@ -49,7 +49,7 @@
       a {
         &::before {
           background: $light-color;
-          border: 0.13rem solid $primary-color;
+          border: 2px solid $primary-color;
         }
       }
 
diff --git a/client/src/styles/spectre/src/_timelines.scss b/client/src/styles/spectre/src/_timelines.scss
index e511890d5..214fe1302 100755
--- a/client/src/styles/spectre/src/_timelines.scss
+++ b/client/src/styles/spectre/src/_timelines.scss
@@ -31,7 +31,7 @@
       text-align: center;
       width: 1.5rem;
       &::before {
-        border: 0.13rem solid $primary-color;
+        border: 2px solid $primary-color;
         border-radius: 50%;
         content: "";
         display: block;

From 41de2f86125d4c73a7ab1907dbf4b0144669ab92 Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 15:02:52 -0500
Subject: [PATCH 11/12] remove explicit font sze in html to use default 16px

---
 client/src/styles/spectre/src/_base.scss      | 3 ++-
 client/src/styles/spectre/src/_variables.scss | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/styles/spectre/src/_base.scss b/client/src/styles/spectre/src/_base.scss
index 5f5a8d084..0ed96474d 100755
--- a/client/src/styles/spectre/src/_base.scss
+++ b/client/src/styles/spectre/src/_base.scss
@@ -7,7 +7,8 @@
 
 html {
   box-sizing: border-box;
-  font-size: $html-font-size;
+  // JUSTFIX: removing this so that it uses default 16px and allows a11y tools to scale
+  // font-size: $html-font-size;
   line-height: $html-line-height;
   -webkit-tap-highlight-color: transparent;
 }
diff --git a/client/src/styles/spectre/src/_variables.scss b/client/src/styles/spectre/src/_variables.scss
index 326e78489..4050fb4b0 100755
--- a/client/src/styles/spectre/src/_variables.scss
+++ b/client/src/styles/spectre/src/_variables.scss
@@ -50,7 +50,8 @@ $code-color: #e06870 !default;
 $highlight-color: #ffe9b3 !default;
 
 // Global
-$html-font-size: 16px !default; // JUSTFIX: changed from 10px
+// JUSTFIX: removing this so that it uses default 16px and allows a11y tools to scale
+// $html-font-size: 16px !default; 
 $html-line-height: 1.428571429 !default;
 $body-bg: $bg-color-light !default;
 $body-font-color: lighten($dark-color, 5%) !default;

From 5dbcf28c1cf82227accc94941f7ada19ca75403d Mon Sep 17 00:00:00 2001
From: Maxwell Austensen <m.austensen@gmail.com>
Date: Thu, 29 Feb 2024 15:17:56 -0500
Subject: [PATCH 12/12] prettier

---
 client/src/styles/spectre/src/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/styles/spectre/src/_variables.scss b/client/src/styles/spectre/src/_variables.scss
index 4050fb4b0..51df237e3 100755
--- a/client/src/styles/spectre/src/_variables.scss
+++ b/client/src/styles/spectre/src/_variables.scss
@@ -51,7 +51,7 @@ $highlight-color: #ffe9b3 !default;
 
 // Global
 // JUSTFIX: removing this so that it uses default 16px and allows a11y tools to scale
-// $html-font-size: 16px !default; 
+// $html-font-size: 16px !default;
 $html-line-height: 1.428571429 !default;
 $body-bg: $bg-color-light !default;
 $body-font-color: lighten($dark-color, 5%) !default;