diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index e4a3f3fbe..d097abe90 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,4 +1,5 @@
 {
   "*.ts": ["prettier --write", "eslint --format visualstudio --fix"],
-  "*.{json,md}": "prettier --write"
+  "*.{json,md}": "prettier --write",
+  "*.scss": ["prettier --write"]
 }
diff --git a/.prettierrc.js b/.prettierrc.js
index c3d1d164b..ccba36771 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -12,5 +12,11 @@ module.exports = {
       files: '**/*.md',
       options: { parser: 'markdown' },
     },
+    {
+      files: ['**/*.scss'],
+      options: {
+        singleQuote: true,
+      },
+    },
   ],
 };
diff --git a/clients/design-system/.stylelintrc.json b/clients/design-system/.stylelintrc.json
index 410065034..f8b97c963 100644
--- a/clients/design-system/.stylelintrc.json
+++ b/clients/design-system/.stylelintrc.json
@@ -2,6 +2,17 @@
   "extends": "stylelint-config-standard-scss",
   "plugins": ["stylelint-order"],
   "rules": {
+    "color-function-notation": [
+      "legacy",
+      {
+        "ignore": ["with-var-inside"]
+      }
+    ],
+    "no-irregular-whitespace": true,
+    "color-no-invalid-hex": true,
+    "block-no-empty": true,
+    "unit-allowed-list": ["%", "deg", "px", "rem", "s", "ms", "vh", "vw"],
+    "number-max-precision": 3,
     "alpha-value-notation": "number",
     "order/order": [
       "custom-properties",
@@ -10,7 +21,6 @@
       "rules",
       "at-rules"
     ],
-    "order/properties-alphabetical-order": true,
     "order/properties-order": [
       "content",
       "position",
diff --git a/clients/design-system/package.json b/clients/design-system/package.json
index c17cf0b42..79c6fa133 100644
--- a/clients/design-system/package.json
+++ b/clients/design-system/package.json
@@ -24,7 +24,7 @@
     "test:cov": "jest --coverage --runInBand",
     "watch": "tsc -w",
     "lint": "eslint --format visualstudio \"./src/**/*.tsx\" --fix && stylelint \"./src/**/*.scss\" --fix",
-    "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\"  --fix-dry-run",
+    "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\" --fix-dry-run && stylelint \"./src/**/*.scss\" ",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "cdk:bootstrap": "cdk bootstrap",
diff --git a/clients/design-system/src/components/Alert/style.module.scss b/clients/design-system/src/components/Alert/style.module.scss
index 94f5d56e4..c0773ed44 100644
--- a/clients/design-system/src/components/Alert/style.module.scss
+++ b/clients/design-system/src/components/Alert/style.module.scss
@@ -1,37 +1,37 @@
 .alert {
- border: none;
- border-radius: 3px;
- box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0;
+  border: none;
+  border-radius: 3px;
+  box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0;
 
- &.alert-success {
-  background-color: #f9fef9  !important;
+  &.alert-success {
+    background-color: #f9fef9 !important;
 
-  svg {
+    svg {
       color: #59ca97;
-   }
+    }
   }
 
- &.alert-warning {
-  background-color: #fefbf9 !important;
+  &.alert-warning {
+    background-color: #fefbf9 !important;
 
-  svg {
-    color: #f1963b;
-   }
+    svg {
+      color: #f1963b;
+    }
   }
 
- &.alert-info {
-  background-color: #fafdff !important;
+  &.alert-info {
+    background-color: #fafdff !important;
 
-  svg {
-    color: #1174ff;
+    svg {
+      color: #1174ff;
+    }
   }
- }
 
- &.alert-danger {
-  background-color: #fffafb !important;
+  &.alert-danger {
+    background-color: #fffafb !important;
 
-  svg {
-    color: #bf1722;
+    svg {
+      color: #bf1722;
+    }
   }
- }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/AppBar/style.module.scss b/clients/design-system/src/components/AppBar/style.module.scss
index 49bc847ce..6eecb0b14 100644
--- a/clients/design-system/src/components/AppBar/style.module.scss
+++ b/clients/design-system/src/components/AppBar/style.module.scss
@@ -2,15 +2,15 @@
 
 @keyframes pulsate {
   0% {
-    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0);
+    box-shadow: inset 0 -3px 0 rgb(0, 0, 0, 0);
   }
 
   50% {
-    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2);
+    box-shadow: inset 0 -3px 0 rgb(0, 0, 0, 0.2);
   }
 
   100% {
-    box-shadow: inset 0 -3px 0 $color-blue;;
+    box-shadow: inset 0 -3px 0 $color-blue;
   }
 }
 
@@ -18,7 +18,7 @@
   background-color: $color-white;
 
   .navbar-menu {
-    box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0
+    box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0;
   }
 
   .navbar-brand {
@@ -31,8 +31,10 @@
 
 .app-bar-light {
   padding: 0;
-  background-color: rgb(255 253 251);
-  box-shadow: rgb(0 0 0 / 0.12) 0 0 2px 0, rgb(0 0 0 / 0.14) 0 1.008px 2px 0;
+  background-color: rgb(255, 253, 251);
+  box-shadow:
+    rgb(0, 0, 0, 0.12) 0 0 2px 0,
+    rgb(0, 0, 0, 0.14) 0 1.008px 2px 0;
 
   ul {
     margin: 0;
@@ -53,11 +55,11 @@
           color: $color-blue;
           transition: border-color 0.5s ease;
           animation: pulsate 0.5s ease-in-out forwards;
-          box-shadow: inset 0 -4px 0 rgb(0 123 255 / 0.5);
+          box-shadow: inset 0 -4px 0 rgb(0, 123, 255, 0.5);
         }
 
         &.active {
-          box-shadow: inset 0 -4px 0 rgb(0 123 255 / 0.5);
+          box-shadow: inset 0 -4px 0 rgb(0, 123, 255, 0.5);
           color: $color-blue;
         }
       }
diff --git a/clients/design-system/src/components/Article/style.module.scss b/clients/design-system/src/components/Article/style.module.scss
index ceffb1be6..717c7a103 100644
--- a/clients/design-system/src/components/Article/style.module.scss
+++ b/clients/design-system/src/components/Article/style.module.scss
@@ -1,10 +1,10 @@
 @import '../../styles/utils/color-pallette';
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/bootstrap";
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/bootstrap';
 
 // Get the value of $spacer variable (default Bootstrap spacing unit)
 $spacer: spacer();
-$nugde-out-width: 3.0625rem;
+$nugde-out-width: 3.063rem;
 
 .article {
   overflow-x: hidden;
@@ -12,10 +12,10 @@ $nugde-out-width: 3.0625rem;
   background-color: $color-cta-white;
 
   & .container {
-    position:relative;
+    position: relative;
 
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
       left: -1px;
@@ -28,7 +28,7 @@ $nugde-out-width: 3.0625rem;
       position: relative;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         left: -(map-get($spacers, 4)) - ($nugde-out-width);
@@ -38,4 +38,4 @@ $nugde-out-width: 3.0625rem;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/BlurbPair/style.module.scss b/clients/design-system/src/components/BlurbPair/style.module.scss
index da55b51b3..0b2033c90 100644
--- a/clients/design-system/src/components/BlurbPair/style.module.scss
+++ b/clients/design-system/src/components/BlurbPair/style.module.scss
@@ -1,5 +1,5 @@
 @import '../../styles/utils/color-pallette';
-@import "bootstrap/scss/bootstrap";
+@import 'bootstrap/scss/bootstrap';
 
 .blurb {
   .blurb-pair-left,
@@ -24,8 +24,10 @@
   }
 
   @include media-breakpoint-down(md) {
-    .blurb-pair-left, .blurb-pair-right {
-      &.border-end, &.border-start {
+    .blurb-pair-left,
+    .blurb-pair-right {
+      &.border-end,
+      &.border-start {
         border: none !important;
       }
     }
diff --git a/clients/design-system/src/components/Breadcrumb/style.module.scss b/clients/design-system/src/components/Breadcrumb/style.module.scss
index 2ed695f9f..b901dc9da 100644
--- a/clients/design-system/src/components/Breadcrumb/style.module.scss
+++ b/clients/design-system/src/components/Breadcrumb/style.module.scss
@@ -4,4 +4,4 @@
   a {
     color: $color-off-black;
   }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/Button/style.module.scss b/clients/design-system/src/components/Button/style.module.scss
index 054bbb53a..7bfac5348 100644
--- a/clients/design-system/src/components/Button/style.module.scss
+++ b/clients/design-system/src/components/Button/style.module.scss
@@ -38,7 +38,8 @@
       background-color: $color-primary;
       color: $color-white;
 
-      &:focus, &.button-selected {
+      &:focus,
+      &.button-selected {
         outline-color: $color-primary;
       }
 
@@ -56,7 +57,7 @@
       }
 
       &:hover {
-        border-color:  lighten($color-primary, 10%);
+        border-color: lighten($color-primary, 10%);
         background-color: lighten($color-primary, 10%);
 
         > svg {
@@ -70,7 +71,8 @@
       background-color: transparent;
       color: $color-primary;
 
-      &:focus, &.button-selected {
+      &:focus,
+      &.button-selected {
         outline-color: $color-primary;
       }
 
@@ -83,7 +85,7 @@
       }
 
       &:hover {
-        border-color:  lighten($color-primary, 10%);
+        border-color: lighten($color-primary, 10%);
         color: $color-black;
       }
     }
@@ -93,7 +95,8 @@
       background-color: transparent;
       color: $color-primary;
 
-      &:focus, &.button-selected {
+      &:focus,
+      &.button-selected {
         outline-color: $color-primary;
       }
 
@@ -106,7 +109,8 @@
       }
     }
 
-    &:focus, &.button-selected {
+    &:focus,
+    &.button-selected {
       outline-width: 3px;
       outline-style: solid;
       outline-offset: 3px;
@@ -122,7 +126,8 @@
       font-size: 0.8rem;
     }
 
-    &.button-normal, &.button-medium {
+    &.button-normal,
+    &.button-medium {
       padding: 10px 24px;
       font-size: 1rem;
     }
@@ -146,5 +151,4 @@
       }
     }
   }
-
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/Card/style.module.scss b/clients/design-system/src/components/Card/style.module.scss
index 0e959361a..d1878bb6b 100644
--- a/clients/design-system/src/components/Card/style.module.scss
+++ b/clients/design-system/src/components/Card/style.module.scss
@@ -16,14 +16,13 @@ $card-call-out-offset: 16px;
   }
 }
 
-
 .card {
   border-radius: 1rem !important;
   transition: box-shadow 0.5s ease;
 
   .card-thumbnail {
     position: relative;
-    margin:0;
+    margin: 0;
 
     .card-img-top-wrapper {
       overflow: hidden;
@@ -37,7 +36,9 @@ $card-call-out-offset: 16px;
         background-repeat: no-repeat !important;
         background-position: center !important;
         background-size: cover !important;
-        transition: transform 1s ease, box-shadow 1s ease;
+        transition:
+          transform 1s ease,
+          box-shadow 1s ease;
       }
     }
 
@@ -50,7 +51,7 @@ $card-call-out-offset: 16px;
       line-height: 36px;
       text-align: center;
       text-transform: uppercase;
-      box-shadow:  0.7rem 0.7rem .75rem rgb(0 0 0 / 0.2);
+      box-shadow: 0.7rem 0.7rem 0.75rem rgb(0, 0, 0, 0.2);
 
       &::after {
         content: '';
@@ -69,7 +70,8 @@ $card-call-out-offset: 16px;
         background-color: $card-color-primary;
 
         &::after {
-          border-top: $card-call-out-offset solid darken($card-color-primary, 10%);
+          border-top: $card-call-out-offset solid
+            darken($card-color-primary, 10%);
         }
       }
 
@@ -80,7 +82,8 @@ $card-call-out-offset: 16px;
         background-color: $card-color-secondary;
 
         &::after {
-          border-top: $card-call-out-offset solid darken($card-color-secondary, 10%);
+          border-top: $card-call-out-offset solid
+            darken($card-color-secondary, 10%);
         }
       }
 
@@ -91,7 +94,8 @@ $card-call-out-offset: 16px;
         background-color: $card-color-tertiary;
 
         &::after {
-          border-top: $card-call-out-offset solid darken($card-color-tertiary, 10%);
+          border-top: $card-call-out-offset solid
+            darken($card-color-tertiary, 10%);
         }
       }
     }
@@ -131,7 +135,7 @@ $card-call-out-offset: 16px;
   }
 
   &:hover {
-    box-shadow: 0 0 1rem rgb(0 0 0 / 0.3);
+    box-shadow: 0 0 1rem rgb(0, 0, 0, 0.3);
 
     .card-ribbon-text {
       background: linear-gradient(90deg, #eee, #ddd, #fff);
diff --git a/clients/design-system/src/components/Hero/style.module.scss b/clients/design-system/src/components/Hero/style.module.scss
index 6ecf96bb6..183462073 100644
--- a/clients/design-system/src/components/Hero/style.module.scss
+++ b/clients/design-system/src/components/Hero/style.module.scss
@@ -11,10 +11,14 @@
   background-size: cover;
 
   .hero-text-wrapper {
-    background-color: rgb(255 255 255 / 0.4);
+    background-color: rgb(255, 255, 255, 0.4);
 
     h1 {
-      background: linear-gradient(to right, $color-gray, darken($color-gray, 10%)) !important;
+      background: linear-gradient(
+        to right,
+        $color-gray,
+        darken($color-gray, 10%)
+      ) !important;
       background-clip: text !important;
       color: transparent !important ;
       font-weight: bold;
@@ -22,7 +26,7 @@
 
     .lead {
       color: $color-off-black;
-      font-size: 1.2em;
+      font-size: 1.2rem;
     }
 
     p {
@@ -32,10 +36,10 @@
 
   .toolbar {
     min-height: 8rem;
-    margin:0;
+    margin: 0;
     border-bottom-right-radius: 50px;
     border-bottom-left-radius: 50px;
     background-color: $color-blue;
     color: $color-white;
   }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/HeroBanner/style.module.scss b/clients/design-system/src/components/HeroBanner/style.module.scss
index ca638f89f..424ac4008 100644
--- a/clients/design-system/src/components/HeroBanner/style.module.scss
+++ b/clients/design-system/src/components/HeroBanner/style.module.scss
@@ -3,51 +3,56 @@
 $hero-banner-height: 300px;
 
 .hero-banner {
-    position: relative;
-    width: 100%;
-
-    .hero-facet {
-      position: absolute;
-      z-index: -2;
-      width: 100%;
-      height: 100%;
-      background-color: $color-gray;
-      background-position: center;
-      background-size: cover;
-      clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%);
-    }
+  position: relative;
+  width: 100%;
 
-    .hero-gradient-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: -1;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(90deg, rgb(128 80 237 / 0.9) 0%, rgb(128 80 237 / 0.9) 28%, rgb(0 141 184 / 0.5) 100%);
-      clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%);
+  .hero-facet {
+    position: absolute;
+    z-index: -2;
+    width: 100%;
+    height: 100%;
+    background-color: $color-gray;
+    background-position: center;
+    background-size: cover;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%);
+  }
+
+  .hero-gradient-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      rgb(128, 80, 237, 0.9) 0%,
+      rgb(128, 80, 237, 0.9) 28%,
+      rgb(0, 141, 184, 0.5) 100%
+    );
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0% 50%);
+  }
+
+  .hero-text-wrapper {
+    background-color: $color-dark-blue;
+
+    h1 {
+      font-weight: bold;
     }
 
-    .hero-text-wrapper {
-      background-color: $color-dark-blue;
-
-      h1 {
-        font-weight: bold;
-      }
-
-      .lead {
-        color: $color-gray;
-      }
-
-      p {
-        color: $color-gray;
-      }
+    .lead {
+      color: $color-gray;
     }
 
-    .hero-image {
-      background-color: $color-dark-blue;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
+    p {
+      color: $color-gray;
     }
-}
\ No newline at end of file
+  }
+
+  .hero-image {
+    background-color: $color-dark-blue;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+  }
+}
diff --git a/clients/design-system/src/components/Link/style.module.scss b/clients/design-system/src/components/Link/style.module.scss
index 55075723c..233ac2b6f 100644
--- a/clients/design-system/src/components/Link/style.module.scss
+++ b/clients/design-system/src/components/Link/style.module.scss
@@ -4,4 +4,4 @@
   a {
     color: $color-berkeley-blue;
   }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/PageFooter/style.module.scss b/clients/design-system/src/components/PageFooter/style.module.scss
index e8cceccd2..7607e3f69 100644
--- a/clients/design-system/src/components/PageFooter/style.module.scss
+++ b/clients/design-system/src/components/PageFooter/style.module.scss
@@ -25,6 +25,5 @@
       border: 3px solid $color-sky-blue;
       opacity: 0.3;
     }
-
   }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/Paper/style.module.scss b/clients/design-system/src/components/Paper/style.module.scss
index eaa963138..dea44929d 100644
--- a/clients/design-system/src/components/Paper/style.module.scss
+++ b/clients/design-system/src/components/Paper/style.module.scss
@@ -1,20 +1,20 @@
 @import '../../styles/utils/color-pallette';
 
 .paper {
-  $elevations: 1, 2, 3, 4, 5, 6,7,8,9,10;
+  $elevations: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
 
   border-radius: 4px;
   background-color: $color-white;
 
   // padding: 4rem 4.5rem;
-  background-color: rgb(255 255 255);
-  color: rgb(29 29 31);
+  background-color: rgb(255, 255, 255);
+  color: rgb(29, 29, 31);
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0;
+  box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0;
 
   @each $elevation in $elevations {
     &.paper-elevation-#{$elevation} {
       box-shadow: rgba(0, 0, 0, calc($elevation * 0.1)) 0 4px 30px 0;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/SocialMediaBar/style.module.scss b/clients/design-system/src/components/SocialMediaBar/style.module.scss
index c3570f03e..bb5e1ab9a 100644
--- a/clients/design-system/src/components/SocialMediaBar/style.module.scss
+++ b/clients/design-system/src/components/SocialMediaBar/style.module.scss
@@ -24,7 +24,7 @@
         padding: 0;
 
         li {
-          background-color:red;
+          background-color: red;
 
           a {
             color: $color-white;
@@ -41,4 +41,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/Tabs/style.module.scss b/clients/design-system/src/components/Tabs/style.module.scss
index 204e2b134..4db726531 100644
--- a/clients/design-system/src/components/Tabs/style.module.scss
+++ b/clients/design-system/src/components/Tabs/style.module.scss
@@ -1,4 +1,3 @@
-
 .tabs {
   .scrollable {
     --webkit-overflow-scrolling: touch;
diff --git a/clients/design-system/src/components/TextField/style.scss b/clients/design-system/src/components/TextField/style.scss
index 472c6d256..3af8a4131 100644
--- a/clients/design-system/src/components/TextField/style.scss
+++ b/clients/design-system/src/components/TextField/style.scss
@@ -3,10 +3,10 @@
 .form-label {
   color: lighten($color-off-black, 30%);
   font-weight: bold;
-  font-size: 	0.875rem;
+  font-size: 0.875rem;
   text-transform: uppercase;
 }
 
 .form-control {
   letter-spacing: 0.1rem;
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/components/Typography/style.module.scss b/clients/design-system/src/components/Typography/style.module.scss
index f25c10c48..0153046d0 100644
--- a/clients/design-system/src/components/Typography/style.module.scss
+++ b/clients/design-system/src/components/Typography/style.module.scss
@@ -8,7 +8,7 @@
 
   .center {
     text-align: center;
-  };
+  }
 
   h1 {
     padding: 12px 0;
@@ -22,7 +22,7 @@
       border-radius: 5px;
       background-color: $color-primary;
       color: $color-white;
-    };
+    }
 
     &.border {
       position: relative;
@@ -36,7 +36,7 @@
       vertical-align: center;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         bottom: 0;
@@ -45,7 +45,7 @@
         height: 100%;
         margin: auto;
         border-radius: 3px;
-        background: linear-gradient(180deg, #31aaff  0%, #2cd0ff 100%);
+        background: linear-gradient(180deg, #31aaff 0%, #2cd0ff 100%);
       }
     }
   }
@@ -65,11 +65,11 @@
       padding-left: 15px;
       border-bottom: none;
       font-weight: 600;
-      font-size:  2rem;
+      font-size: 2rem;
       vertical-align: center;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         bottom: 0;
@@ -78,9 +78,9 @@
         height: 100%;
         margin: auto;
         border-radius: 3px;
-        background: linear-gradient(180deg, #31aaff  0%, #2cd0ff 100%);
-      };
-    };
+        background: linear-gradient(180deg, #31aaff 0%, #2cd0ff 100%);
+      }
+    }
 
     &.fill {
       padding: 20px 13px;
@@ -89,44 +89,44 @@
       background-color: $color-primary;
       color: $color-white;
       font-weight: bold;
-    };
-  };
+    }
+  }
 
   h3 {
     font-weight: 400;
-    font-size:  1.7rem;
+    font-size: 1.7rem;
     font-family: $font-family-serif;
-  };
+  }
 
   h4 {
     font-weight: 400;
-    font-size:  1.6rem;
+    font-size: 1.6rem;
     font-family: $font-family-serif;
-  };
+  }
 
   h5 {
     font-weight: 400;
-    font-size:  1.4rem;
+    font-size: 1.4rem;
     font-family: $font-family-serif;
-  };
+  }
 
   h6 {
     font-weight: 400;
-    font-size:  1.2rem;
+    font-size: 1.2rem;
     font-family: $font-family-serif;
   }
 
   p.body1 {
     font-weight: 400;
-    font-size:  1rem;
+    font-size: 1rem;
     line-height: 1.8rem;
     font-family: $font-family-sans-serif;
   }
 
   p.intro {
     font-weight: 400;
-    font-size:  1.5rem;
+    font-size: 1.5rem;
     line-height: 2rem;
     font-family: $font-family-sans-serif;
   }
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/index.scss b/clients/design-system/src/index.scss
index 309a5df1a..7614d4651 100644
--- a/clients/design-system/src/index.scss
+++ b/clients/design-system/src/index.scss
@@ -13,66 +13,66 @@
 // Toggle global options
 $enable-gradients: true;
 $enable-shadows: true;
-$offcanvas-box-shadow: 0 1rem 3rem rgb(0 0 0 / .175);
+$offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
 
 // Include functions first
-@import "bootstrap/scss/functions";
+@import 'bootstrap/scss/functions';
 
 // Customize some defaults
 $body-color: #333;
 $body-bg: #fff;
-$border-radius: .4rem;
+$border-radius: 0.4rem;
 $success: #7952b3;
 
 // Bootstrap required
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
 
 // Bootstrap optional
-@import "bootstrap/scss/type";
+@import 'bootstrap/scss/type';
 
 // @import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
+@import 'bootstrap/scss/containers';
+@import 'bootstrap/scss/grid';
 
 // @import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar"; // Requires nav
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/accordion";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar'; // Requires nav
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/breadcrumb';
+@import 'bootstrap/scss/accordion';
+@import 'bootstrap/scss/pagination';
+@import 'bootstrap/scss/badge';
+@import 'bootstrap/scss/alert';
 
 // @import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal"; // Requires transitions
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/toasts';
+@import 'bootstrap/scss/modal'; // Requires transitions
 // @import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
+@import 'bootstrap/scss/popover';
 
 // @import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas"; // Requires transitions
-@import "bootstrap/scss/placeholders";
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/offcanvas'; // Requires transitions
+@import 'bootstrap/scss/placeholders';
 
 // Helpers
-@import "bootstrap/scss/helpers";
+@import 'bootstrap/scss/helpers';
 
 // Utilities
-@import "bootstrap/scss/utilities/api";
+@import 'bootstrap/scss/utilities/api';
 
 // Custom styles
 @import './styles/utils/color-pallette';
@@ -93,7 +93,13 @@ $success: #7952b3;
 @import './components/Breadcrumb/style.module';
 
 body {
-  background-image: linear-gradient(to bottom, #fff 0%, #fff 300px, #fff 301px, $color-off-white 400px);
+  background-image: linear-gradient(
+    to bottom,
+    #fff 0%,
+    #fff 300px,
+    #fff 301px,
+    $color-off-white 400px
+  );
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: $color-off-black;
diff --git a/clients/design-system/src/styles/_fonts.scss b/clients/design-system/src/styles/_fonts.scss
index 993d69f34..e0434d5e6 100644
--- a/clients/design-system/src/styles/_fonts.scss
+++ b/clients/design-system/src/styles/_fonts.scss
@@ -1,5 +1,5 @@
-$font-family-sans-serif: "Roboto", sans-serif;
-$font-family-serif: "Playfair Display", serif;
+$font-family-sans-serif: 'Roboto', sans-serif;
+$font-family-serif: 'Playfair Display', serif;
 
 .font-serif {
   font-family: $font-family-serif;
@@ -7,4 +7,4 @@ $font-family-serif: "Playfair Display", serif;
 
 .font-sans-serif {
   font-family: $font-family-sans-serif;
-}
\ No newline at end of file
+}
diff --git a/clients/design-system/src/styles/utils/_bg-color.scss b/clients/design-system/src/styles/utils/_bg-color.scss
index d2d1c60f7..0e75c82f0 100644
--- a/clients/design-system/src/styles/utils/_bg-color.scss
+++ b/clients/design-system/src/styles/utils/_bg-color.scss
@@ -25,5 +25,5 @@
 }
 
 .text-white {
-  color: $color-white !important
-}
\ No newline at end of file
+  color: $color-white !important;
+}
diff --git a/clients/design-system/src/styles/utils/_color-pallette.scss b/clients/design-system/src/styles/utils/_color-pallette.scss
index 8482aa83f..8562c83ee 100644
--- a/clients/design-system/src/styles/utils/_color-pallette.scss
+++ b/clients/design-system/src/styles/utils/_color-pallette.scss
@@ -2,7 +2,7 @@
 $color-gold: #ffd700;
 $color-sgbus-green: #71cd2f;
 $color-murrey: #b3105c;
-$color-white: #FFF;
+$color-white: #fff;
 $color-off-white: #f5f5fa; // #f4fafd; #f1f4f9;
 $color-cta-white: #e4f2ff;
 $color-light-gray: #dddde5;
@@ -10,7 +10,7 @@ $color-gray: #9697a6;
 $color-off-black: #1e1e1f;
 $color-black: #000;
 $color-sky-blue: #87ceeb;
-$color-blue: #0090BA;
+$color-blue: #0090ba;
 $color-berkeley-blue: #094581;
 $color-dark-blue: #08062a;
 $color-orange: #fdb913;
@@ -23,16 +23,15 @@ $color-secondary: $color-murrey;
 $color-tertiary: $color-gold;
 $color-inherit: $color-gray;
 
-
 :root {
-  --color-berkeley-blue: $color-berkeley-blue:
+  --color-berkeley-blue: $color-berkeley-blue;
   --color-gold: $color-gold;
   --color-sky-blue: $color-sky-blue;
   --color-sgbus-green: $color-sgbus-green;
   --color-murrey: $color-murrey;
   --color-white: $color-white;
   --color-black: $color-black;
-  --color-primary:  $color-primary:
+  --color-primary: $color-primary;
   --color-secondary: $color-secondary;
   --color-tertiary: $color-tertiary;
   --color-gray: $color-gray;
diff --git a/libraries/promare-gradients/src/scss/_variables.scss b/libraries/promare-gradients/src/scss/_variables.scss
index 87acd2ca6..9b78b1d86 100644
--- a/libraries/promare-gradients/src/scss/_variables.scss
+++ b/libraries/promare-gradients/src/scss/_variables.scss
@@ -49,9 +49,13 @@ $base-colors: (
 $phi: (square-root(5) + 1)/2;
 
 // shades
-$shade: '0' percentage(1 - 1/ ($phi * 3)), '25' percentage(1 / $phi);
+$shade:
+  '0' percentage(1 - 1/ ($phi * 3)),
+  '25' percentage(1 / $phi);
 // tints
-$tints: '75' percentage(1 / $phi), '100' percentage(1 - 1/ ($phi * 3));
+$tints:
+  '75' percentage(1 / $phi),
+  '100' percentage(1 - 1/ ($phi * 3));
 
 // degrees make use of compass ratios using golden ratio / phi
 $degrees: (