diff --git a/app/assets/stylesheets/_utilities.scss b/app/assets/stylesheets/_utilities.scss
new file mode 100644
index 00000000..249b170d
--- /dev/null
+++ b/app/assets/stylesheets/_utilities.scss
@@ -0,0 +1,15 @@
+.ios-web-app {
+  padding-top: 1em;
+}
+
+.fs-10 {
+  font-size: 10em;
+}
+
+.pe-none {
+  pointer-events: none;
+}
+
+.empty:not(:only-child) {
+  display: none;
+}
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
new file mode 100644
index 00000000..7c950fbf
--- /dev/null
+++ b/app/assets/stylesheets/_variables.scss
@@ -0,0 +1,105 @@
+// Font settings
+$lexend-font-path: "/assets";
+$lexend-weights: 500, 600;
+$fa-font-path: "/assets";
+
+$font-family-sans-serif: "Lexend", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-serif: Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
+$font-family-monospace: "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
+$font-family-base: $font-family-sans-serif;
+
+$font-size-base: 1rem;
+$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
+$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
+
+$font-size-h1: floor(($font-size-base * 2.6)); // ~36px
+$font-size-h2: floor(($font-size-base * 2.15)); // ~30px
+$font-size-h3: ceil(($font-size-base * 1.7)); // ~24px
+$font-size-h4: ceil(($font-size-base * 1.25)); // ~18px
+$font-size-h5: $font-size-base;
+$font-size-h6: ceil(($font-size-base * 0.85)); // ~12px
+
+// Usual navbar height
+$navbar-height: 56px;
+
+// Color overrides for Bootstrap
+$primary: #5e35b1;
+
+// Cards
+$card-border-width: 0;
+
+// List Groups
+$list-group-border-width: 0;
+
+// nProgress
+$nprogress-color: lighten($primary, 25%);
+
+// Color names for theme generation
+$color-names: (
+  "primary",
+  "danger",
+  "warning",
+  "info",
+  "success",
+  "dark",
+  "light"
+);
+
+// Avatar variables
+$avatar-border-radius: 4px;
+
+$avatar-sizes: (
+  "xs": 20px,
+  "sm": 30px,
+  "md": 40px,
+  "lg": 80px,
+  "xl": 120px,
+  "xxl": 160px,
+);
+
+$spacers: (
+  10: (1rem * 6)
+);
+
+:root {
+  --background: #f0edf4;
+  --input-bg: var(--background);
+  --raised-bg: #ffffff;
+  --raised-accent: #f7f7f7;
+
+  /**
+   NOTE for all *-text variables
+   ----------------------------------------------
+   The text-variables are present as triplets
+   because in some places it's required to adjust
+   their transparency.
+
+   So, for general usage, use:
+   color: RGB(var(--*-text));
+
+   And for transparent usage, use:
+   color: rgba(var(--*-text), .7);
+
+   The uppercase RGB is required because internally
+   SassC wants more than one argument for rgb(),
+   hence writing RGB() bypasses that check, but
+   browsers interpret it correctly.
+   */
+
+  --primary-text: 255, 255, 255;
+  --danger-text: 255, 255, 255;
+  --warning-text: 41, 41, 41;
+  --info-text: 255, 255, 255;
+  --success-text: 255, 255, 255;
+  --dark-text: 255, 255, 255;
+  --light-text: 0, 0, 0;
+
+  --body-text: 0, 0, 0;
+  --muted-text: 108, 117, 125;
+  --input-text: 0, 0, 0;
+  --input-placeholder: 108, 117, 125;
+
+  --turbolinks-progress-color: #a58adc; // --primary lightened by 25%
+}
+
+$gray: #e2e2e2;
diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
new file mode 100644
index 00000000..3873ed44
--- /dev/null
+++ b/app/assets/stylesheets/application.sass.scss
@@ -0,0 +1,119 @@
+/**
+ SETTINGS
+ ----------------------------------------------
+ Variable definitions, tools and mixins used
+ across all styling definitions.
+ */
+@use "@fontsource/lexend/scss/mixins" as Lexend;
+
+@import "variables";
+
+/**
+  VENDOR
+  ----------------------------------------------
+  Imported vendor assets used by Retrospring.
+  */
+
+@import "@melloware/coloris/dist/coloris",
+"bootstrap/scss/bootstrap",
+"croppr/dist/croppr",
+"font-awesome/scss/font-awesome",
+"sweetalert/dist/sweetalert",
+"toastify-js/src/toastify";
+
+
+@each $weight in $lexend-weights {
+  @include Lexend.fontFace($weight: $weight,
+    $display: fallback,
+    $fontDir: "assets/"
+  );
+}
+
+// Using Lexend Light (300) as Regular (400) as Regular is quite thick.
+@each $subset,
+$unicodeRangeValues in Lexend.$unicodeMap {
+  @font-face {
+    font-family: Lexend;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: url("/assets/lexend-#{$subset}-300-normal.woff2") format("woff2"),
+    url("/assets/lexend-all-300-normal.woff") format("woff");
+    unicode-range: $unicodeRangeValues;
+  }
+}
+
+/**
+  OVERRIDES
+  ----------------------------------------------
+  The imports from "overrides/" define almost barely
+  any style adjustments but rather override default
+  Bootstrap behaviour.
+
+  The largest change to regular bootstrap is the switch
+  to using the available CSS variables for most elements
+  used on the site, so theming can be done with changing
+  only those.
+  */
+
+@import "overrides/alerts",
+"overrides/badges",
+"overrides/bootstrap-datetimepicker",
+"overrides/buttons",
+"overrides/colors",
+"overrides/card",
+"overrides/dropdown",
+"overrides/inputs",
+"overrides/links",
+"overrides/list-group",
+"overrides/minicolors",
+"overrides/modal",
+"overrides/navbar",
+"overrides/turbolinks",
+"overrides/toasts",
+"overrides/sweet-alert";
+
+/**
+  ELEMENTS
+  ----------------------------------------------
+  Styles directly applied to HTML elements
+  */
+
+@import "elements/body";
+
+/**
+  COMPONENTS
+  ----------------------------------------------
+  Custom components defined for Retrospring.
+  */
+
+@import "components/announcements",
+"components/answerbox",
+"components/avatars",
+"components/buttons",
+"components/comments",
+"components/container",
+"components/entry",
+"components/flags",
+"components/icons",
+"components/inbox-actions",
+"components/inbox-entry",
+"components/jumbotron",
+"components/locales",
+"components/mobile-nav",
+"components/notifications",
+"components/profile",
+"components/push-settings",
+"components/question",
+"components/smiles",
+"components/themes",
+"components/totp-setup",
+"components/userbox";
+
+/**
+  UTILITIES
+  ----------------------------------------------
+  Classes used for very specific cases
+  */
+
+@import "utilities";
diff --git a/app/assets/stylesheets/components/_announcements.scss b/app/assets/stylesheets/components/_announcements.scss
new file mode 100644
index 00000000..f69e2c5b
--- /dev/null
+++ b/app/assets/stylesheets/components/_announcements.scss
@@ -0,0 +1,16 @@
+.announcement {
+  width: 100%;
+  border-radius: 0;
+  text-align: center;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  &__container {
+    position: fixed;
+    top: $navbar-height;
+    width: 100%;
+    z-index: 1024;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_answerbox.scss b/app/assets/stylesheets/components/_answerbox.scss
new file mode 100644
index 00000000..74b33157
--- /dev/null
+++ b/app/assets/stylesheets/components/_answerbox.scss
@@ -0,0 +1,86 @@
+.answerbox {
+  &__question-text, 
+  &__question-user, 
+  &__answer-user, 
+  &__answer-date {
+    margin-bottom: 0;
+    overflow: hidden;
+    word-break: break-word;
+  }
+  
+  &__answer-date {
+    font-size: .8rem;
+    line-height: .8;
+    overflow: visible;
+  }
+
+  &__answer-text {
+    margin-bottom: map-get($spacers, 3);
+  }
+
+  &__question-user-avatar,
+  &__answer-user-avatar {
+    margin-right: map-get($spacers, 2);
+    border-radius: $avatar-border-radius;
+  }
+
+  & .text-muted a, 
+  & .text-muted a:hover {
+    color: var(--muted-text);
+    text-decoration: none;
+  }
+
+  &__action {
+    padding-left: 0;
+    padding-right: map-get($spacers, 1);
+
+    & i {
+      font-size: 1.4rem;
+      vertical-align: top;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+
+    &[name="ab-smile"],
+    &[name="ab-smile-comment"] {
+      color: var(--primary);
+
+      &:hover {
+        color: var(--success);
+      }
+
+      &[data-action="unsmile"] {
+        color: var(--success);
+        
+        &:hover {
+          color: var(--danger);
+        }
+      }
+    }
+  }
+
+  &__actions {
+    text-align: right;
+    justify-content: space-between;
+    padding-top: 10px;
+
+    @include media-breakpoint-up('sm') {
+      justify-content: flex-end;
+      padding-top: 0;
+    }
+  }
+
+  .card-body {
+    padding-bottom: .6rem;
+  }
+}
+
+body:not(.cap-web-share) {
+  [name="ab-share"] {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/components/_avatars.scss b/app/assets/stylesheets/components/_avatars.scss
new file mode 100644
index 00000000..6d2bf1cf
--- /dev/null
+++ b/app/assets/stylesheets/components/_avatars.scss
@@ -0,0 +1,12 @@
+[class^="avatar-"] {
+  border-radius: $avatar-border-radius;
+}
+
+@each $name, $size in $avatar-sizes {
+  .avatar-#{$name} {
+    min-height: $size;
+    min-width: $size;
+    height: $size;
+    width: $size;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_buttons.scss b/app/assets/stylesheets/components/_buttons.scss
new file mode 100644
index 00000000..6550b4d8
--- /dev/null
+++ b/app/assets/stylesheets/components/_buttons.scss
@@ -0,0 +1,19 @@
+.btn-fab {
+  border-radius: 100%;
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12);
+  margin: 0px;
+  padding: 3px 5px 4px 8px;
+  font-size: 26px;
+  width: 56px;
+  height: 56px;
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+  outline: medium none !important;
+  text-transform: uppercase;
+  text-decoration: none;
+  position: fixed;
+  bottom: unquote('calc(#{$navbar-height} + env(safe-area-inset-bottom))');
+  right: 0px;
+  margin-right: 7px;
+  margin-bottom: 7px;
+  z-index: 99;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss
new file mode 100644
index 00000000..1ee43d24
--- /dev/null
+++ b/app/assets/stylesheets/components/_comments.scss
@@ -0,0 +1,39 @@
+.comment {
+  list-style-type: none;
+  margin-bottom: map-get($spacers, 2);
+
+  &__container {
+    padding-left: 0;
+  }
+
+  &__user,
+  &__content {
+    margin-bottom: 0;
+    word-break: break-word;
+  }
+
+  &__user-avatar {
+    margin-right: map-get($spacers, 2);
+    border-radius: $avatar-border-radius;
+  }
+
+  &__input-group {
+    position: relative;
+  }
+
+  &__input {
+    padding-right: 2.5rem;
+
+    &.is-invalid {
+      background-image: none;
+    }
+  }
+
+  &__character-count {
+    position: absolute;
+    z-index: 5;
+    right: .5rem;
+    top: .5rem;
+  }
+}
+
diff --git a/app/assets/stylesheets/components/_container.scss b/app/assets/stylesheets/components/_container.scss
new file mode 100644
index 00000000..701a5517
--- /dev/null
+++ b/app/assets/stylesheets/components/_container.scss
@@ -0,0 +1,10 @@
+.container--main {
+  padding-top: map-get($spacers, 3);
+  padding-bottom: map-get($spacers, 3);
+  // Sass doesn't know about the safe-area-inset-* env vars and throws a syntax error
+  // We can get around this by using unquote()
+  // Sass also has its own built-in max() function which is not the same as the CSS one
+  // In order to use the correct one we can write it as Max() instead
+  padding-left: unquote('Max(15px, env(safe-area-inset-left))');
+  padding-right: unquote('Max(15px, env(safe-area-inset-right))');
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_entry.scss b/app/assets/stylesheets/components/_entry.scss
new file mode 100644
index 00000000..9d3dc03b
--- /dev/null
+++ b/app/assets/stylesheets/components/_entry.scss
@@ -0,0 +1,22 @@
+.entry {
+  $this: &;
+  margin: map-get($spacers, 4) 0;
+
+  &__value {
+    display: block;
+    font-size: 4rem;
+    line-height: 1;
+    margin-bottom: 0;
+    text-align: center;
+  }
+
+  &__description {
+    color: var(--primary);
+    display: block;
+    font-size: .8rem;
+    font-weight: bold;
+    margin-top: 0px;
+    text-align: center;
+    text-transform: uppercase;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_flags.scss b/app/assets/stylesheets/components/_flags.scss
new file mode 100644
index 00000000..766ae6b1
--- /dev/null
+++ b/app/assets/stylesheets/components/_flags.scss
@@ -0,0 +1,758 @@
+.flag {
+  background-image: url("/flags/main.png");
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 11px;
+  background-position: -0px 16px;
+}
+.flag-kz {
+  background-position: -0px -0px;
+}
+.flag-ad {
+  background-position: -0px -11px;
+}
+.flag-af {
+  background-position: -0px -22px;
+}
+.flag-ag {
+  background-position: -0px -33px;
+}
+.flag-ai {
+  background-position: -0px -44px;
+}
+.flag-al {
+  background-position: -0px -55px;
+}
+.flag-am {
+  background-position: -0px -66px;
+}
+.flag-an {
+  background-position: -0px -77px;
+}
+.flag-ao {
+  background-position: -0px -88px;
+}
+.flag-ar {
+  background-position: -0px -99px;
+}
+.flag-as {
+  background-position: -0px -110px;
+}
+.flag-at {
+  background-position: -0px -121px;
+}
+.flag-au {
+  background-position: -0px -132px;
+}
+.flag-aw {
+  background-position: -0px -143px;
+}
+.flag-ax {
+  background-position: -0px -154px;
+}
+.flag-az {
+  background-position: -0px -165px;
+}
+.flag-ba {
+  background-position: -0px -176px;
+}
+.flag-bb {
+  background-position: -0px -187px;
+}
+.flag-bd {
+  background-position: -0px -198px;
+}
+.flag-be {
+  background-position: -0px -209px;
+}
+.flag-bf {
+  background-position: -0px -220px;
+}
+.flag-bg {
+  background-position: -0px -231px;
+}
+.flag-bh {
+  background-position: -0px -242px;
+}
+.flag-bi {
+  background-position: -0px -253px;
+}
+.flag-bj {
+  background-position: -0px -264px;
+}
+.flag-bm {
+  background-position: -0px -275px;
+}
+.flag-bn {
+  background-position: -0px -286px;
+}
+.flag-bo {
+  background-position: -0px -297px;
+}
+.flag-br {
+  background-position: -0px -308px;
+}
+.flag-bs {
+  background-position: -0px -319px;
+}
+.flag-bt {
+  background-position: -0px -330px;
+}
+.flag-bv {
+  background-position: -0px -341px;
+}
+.flag-bw {
+  background-position: -0px -352px;
+}
+.flag-by {
+  background-position: -0px -363px;
+}
+.flag-bz {
+  background-position: -0px -374px;
+}
+.flag-ca {
+  background-position: -0px -385px;
+}
+.flag-catalonia {
+  background-position: -0px -396px;
+}
+.flag-cc {
+  background-position: -0px -407px;
+}
+.flag-cd {
+  background-position: -0px -418px;
+}
+.flag-cf {
+  background-position: -0px -429px;
+}
+.flag-cg {
+  background-position: -0px -440px;
+}
+.flag-ch {
+  background-position: -0px -451px;
+}
+.flag-ci {
+  background-position: -0px -462px;
+}
+.flag-ck {
+  background-position: -0px -473px;
+}
+.flag-cl {
+  background-position: -0px -484px;
+}
+.flag-cm {
+  background-position: -0px -495px;
+}
+.flag-cn {
+  background-position: -0px -506px;
+}
+.flag-co {
+  background-position: -0px -517px;
+}
+.flag-cr {
+  background-position: -0px -528px;
+}
+.flag-cs {
+  background-position: -0px -539px;
+}
+.flag-cu {
+  background-position: -0px -550px;
+}
+.flag-cv {
+  background-position: -0px -561px;
+}
+.flag-cx {
+  background-position: -0px -572px;
+}
+.flag-cy {
+  background-position: -0px -583px;
+}
+.flag-cz {
+  background-position: -0px -594px;
+}
+.flag-de {
+  background-position: -0px -605px;
+}
+.flag-dj {
+  background-position: -0px -616px;
+}
+.flag-dk {
+  background-position: -0px -627px;
+}
+.flag-dm {
+  background-position: -0px -638px;
+}
+.flag-do {
+  background-position: -0px -649px;
+}
+.flag-dz {
+  background-position: -0px -660px;
+}
+.flag-ec {
+  background-position: -0px -671px;
+}
+.flag-ee {
+  background-position: -0px -682px;
+}
+.flag-eg {
+  background-position: -0px -693px;
+}
+.flag-eh {
+  background-position: -0px -704px;
+}
+.flag-england {
+  background-position: -0px -715px;
+}
+.flag-er {
+  background-position: -0px -726px;
+}
+.flag-es {
+  background-position: -0px -737px;
+}
+.flag-et {
+  background-position: -0px -748px;
+}
+.flag-europeanunion {
+  background-position: -0px -759px;
+}
+.flag-fam {
+  background-position: -0px -770px;
+}
+.flag-fi {
+  background-position: -0px -781px;
+}
+.flag-fj {
+  background-position: -0px -792px;
+}
+.flag-fk {
+  background-position: -0px -803px;
+}
+.flag-fm {
+  background-position: -0px -814px;
+}
+.flag-fo {
+  background-position: -0px -825px;
+}
+.flag-fr {
+  background-position: -0px -836px;
+}
+.flag-ga {
+  background-position: -0px -847px;
+}
+.flag-gb {
+  background-position: -0px -858px;
+}
+.flag-gd {
+  background-position: -0px -869px;
+}
+.flag-ge {
+  background-position: -0px -880px;
+}
+.flag-gf {
+  background-position: -0px -891px;
+}
+.flag-gh {
+  background-position: -0px -902px;
+}
+.flag-gi {
+  background-position: -0px -913px;
+}
+.flag-gl {
+  background-position: -0px -924px;
+}
+.flag-gm {
+  background-position: -0px -935px;
+}
+.flag-gn {
+  background-position: -0px -946px;
+}
+.flag-gp {
+  background-position: -0px -957px;
+}
+.flag-gq {
+  background-position: -0px -968px;
+}
+.flag-gr {
+  background-position: -0px -979px;
+}
+.flag-gs {
+  background-position: -0px -990px;
+}
+.flag-gt {
+  background-position: -0px -1001px;
+}
+.flag-gu {
+  background-position: -0px -1012px;
+}
+.flag-gw {
+  background-position: -0px -1023px;
+}
+.flag-gy {
+  background-position: -0px -1034px;
+}
+.flag-hk {
+  background-position: -0px -1045px;
+}
+.flag-hm {
+  background-position: -0px -1056px;
+}
+.flag-hn {
+  background-position: -0px -1067px;
+}
+.flag-hr {
+  background-position: -0px -1078px;
+}
+.flag-ht {
+  background-position: -0px -1089px;
+}
+.flag-hu {
+  background-position: -0px -1100px;
+}
+.flag-id {
+  background-position: -0px -1111px;
+}
+.flag-ie {
+  background-position: -0px -1122px;
+}
+.flag-il {
+  background-position: -0px -1133px;
+}
+.flag-in {
+  background-position: -0px -1144px;
+}
+.flag-io {
+  background-position: -0px -1155px;
+}
+.flag-iq {
+  background-position: -0px -1166px;
+}
+.flag-ir {
+  background-position: -0px -1177px;
+}
+.flag-is {
+  background-position: -0px -1188px;
+}
+.flag-it {
+  background-position: -0px -1199px;
+}
+.flag-jm {
+  background-position: -0px -1210px;
+}
+.flag-jo {
+  background-position: -0px -1221px;
+}
+.flag-jp {
+  background-position: -0px -1232px;
+}
+.flag-ke {
+  background-position: -0px -1243px;
+}
+.flag-kg {
+  background-position: -0px -1254px;
+}
+.flag-kh {
+  background-position: -0px -1265px;
+}
+.flag-ki {
+  background-position: -0px -1276px;
+}
+.flag-km {
+  background-position: -0px -1287px;
+}
+.flag-kn {
+  background-position: -0px -1298px;
+}
+.flag-kp {
+  background-position: -0px -1309px;
+}
+.flag-kr {
+  background-position: -0px -1320px;
+}
+.flag-kw {
+  background-position: -0px -1331px;
+}
+.flag-ky {
+  background-position: -0px -1342px;
+}
+.flag-ae {
+  background-position: -0px -1353px;
+}
+.flag-la {
+  background-position: -0px -1364px;
+}
+.flag-lb {
+  background-position: -0px -1375px;
+}
+.flag-lc {
+  background-position: -0px -1386px;
+}
+.flag-li {
+  background-position: -0px -1397px;
+}
+.flag-lk {
+  background-position: -0px -1408px;
+}
+.flag-lr {
+  background-position: -0px -1419px;
+}
+.flag-ls {
+  background-position: -0px -1430px;
+}
+.flag-lt {
+  background-position: -0px -1441px;
+}
+.flag-lu {
+  background-position: -0px -1452px;
+}
+.flag-lv {
+  background-position: -0px -1463px;
+}
+.flag-ly {
+  background-position: -0px -1474px;
+}
+.flag-ma {
+  background-position: -0px -1485px;
+}
+.flag-mc {
+  background-position: -0px -1496px;
+}
+.flag-md {
+  background-position: -0px -1507px;
+}
+.flag-zm {
+  background-position: -0px -1518px;
+}
+.flag-mg {
+  background-position: -0px -1529px;
+}
+.flag-mh {
+  background-position: -0px -1540px;
+}
+.flag-mk {
+  background-position: -0px -1551px;
+}
+.flag-ml {
+  background-position: -0px -1562px;
+}
+.flag-mm {
+  background-position: -0px -1573px;
+}
+.flag-mn {
+  background-position: -0px -1584px;
+}
+.flag-mo {
+  background-position: -0px -1595px;
+}
+.flag-mp {
+  background-position: -0px -1606px;
+}
+.flag-mq {
+  background-position: -0px -1617px;
+}
+.flag-mr {
+  background-position: -0px -1628px;
+}
+.flag-ms {
+  background-position: -0px -1639px;
+}
+.flag-mt {
+  background-position: -0px -1650px;
+}
+.flag-mu {
+  background-position: -0px -1661px;
+}
+.flag-mv {
+  background-position: -0px -1672px;
+}
+.flag-mw {
+  background-position: -0px -1683px;
+}
+.flag-mx {
+  background-position: -0px -1694px;
+}
+.flag-my {
+  background-position: -0px -1705px;
+}
+.flag-mz {
+  background-position: -0px -1716px;
+}
+.flag-na {
+  background-position: -0px -1727px;
+}
+.flag-nc {
+  background-position: -0px -1738px;
+}
+.flag-ne {
+  background-position: -0px -1749px;
+}
+.flag-nf {
+  background-position: -0px -1760px;
+}
+.flag-ng {
+  background-position: -0px -1771px;
+}
+.flag-ni {
+  background-position: -0px -1782px;
+}
+.flag-nl {
+  background-position: -0px -1793px;
+}
+.flag-no {
+  background-position: -0px -1804px;
+}
+.flag-np {
+  background-position: -0px -1815px;
+  width: 9px;
+}
+.flag-nr {
+  background-position: -0px -1826px;
+}
+.flag-nu {
+  background-position: -0px -1837px;
+}
+.flag-nz {
+  background-position: -0px -1848px;
+}
+.flag-om {
+  background-position: -0px -1859px;
+}
+.flag-pa {
+  background-position: -0px -1870px;
+}
+.flag-pe {
+  background-position: -0px -1881px;
+}
+.flag-pf {
+  background-position: -0px -1892px;
+}
+.flag-pg {
+  background-position: -0px -1903px;
+}
+.flag-ph {
+  background-position: -0px -1914px;
+}
+.flag-pk {
+  background-position: -0px -1925px;
+}
+.flag-pl {
+  background-position: -0px -1936px;
+}
+.flag-pm {
+  background-position: -0px -1947px;
+}
+.flag-pn {
+  background-position: -0px -1958px;
+}
+.flag-pr {
+  background-position: -0px -1969px;
+}
+.flag-ps {
+  background-position: -0px -1980px;
+}
+.flag-pt {
+  background-position: -0px -1991px;
+}
+.flag-pw {
+  background-position: -0px -2002px;
+}
+.flag-py {
+  background-position: -0px -2013px;
+}
+.flag-qa {
+  background-position: -0px -2024px;
+}
+.flag-re {
+  background-position: -0px -2035px;
+}
+.flag-ro {
+  background-position: -0px -2046px;
+}
+.flag-rs {
+  background-position: -0px -2057px;
+}
+.flag-ru {
+  background-position: -0px -2068px;
+}
+.flag-rw {
+  background-position: -0px -2079px;
+}
+.flag-sa {
+  background-position: -0px -2090px;
+}
+.flag-sb {
+  background-position: -0px -2101px;
+}
+.flag-sc {
+  background-position: -0px -2112px;
+}
+.flag-scotland {
+  background-position: -0px -2123px;
+}
+.flag-sd {
+  background-position: -0px -2134px;
+}
+.flag-se {
+  background-position: -0px -2145px;
+}
+.flag-sg {
+  background-position: -0px -2156px;
+}
+.flag-sh {
+  background-position: -0px -2167px;
+}
+.flag-si {
+  background-position: -0px -2178px;
+}
+.flag-sj {
+  background-position: -0px -2189px;
+}
+.flag-sk {
+  background-position: -0px -2200px;
+}
+.flag-sl {
+  background-position: -0px -2211px;
+}
+.flag-sm {
+  background-position: -0px -2222px;
+}
+.flag-sn {
+  background-position: -0px -2233px;
+}
+.flag-so {
+  background-position: -0px -2244px;
+}
+.flag-sr {
+  background-position: -0px -2255px;
+}
+.flag-st {
+  background-position: -0px -2266px;
+}
+.flag-sv {
+  background-position: -0px -2277px;
+}
+.flag-sy {
+  background-position: -0px -2288px;
+}
+.flag-sz {
+  background-position: -0px -2299px;
+}
+.flag-tc {
+  background-position: -0px -2310px;
+}
+.flag-td {
+  background-position: -0px -2321px;
+}
+.flag-tf {
+  background-position: -0px -2332px;
+}
+.flag-tg {
+  background-position: -0px -2343px;
+}
+.flag-th {
+  background-position: -0px -2354px;
+}
+.flag-tj {
+  background-position: -0px -2365px;
+}
+.flag-tk {
+  background-position: -0px -2376px;
+}
+.flag-tl {
+  background-position: -0px -2387px;
+}
+.flag-tm {
+  background-position: -0px -2398px;
+}
+.flag-tn {
+  background-position: -0px -2409px;
+}
+.flag-to {
+  background-position: -0px -2420px;
+}
+.flag-tr {
+  background-position: -0px -2431px;
+}
+.flag-tt {
+  background-position: -0px -2442px;
+}
+.flag-tv {
+  background-position: -0px -2453px;
+}
+.flag-tw {
+  background-position: -0px -2464px;
+}
+.flag-tz {
+  background-position: -0px -2475px;
+}
+.flag-ua {
+  background-position: -0px -2486px;
+}
+.flag-ug {
+  background-position: -0px -2497px;
+}
+.flag-um {
+  background-position: -0px -2508px;
+}
+.flag-us {
+  background-position: -0px -2519px;
+}
+.flag-uy {
+  background-position: -0px -2530px;
+}
+.flag-uz {
+  background-position: -0px -2541px;
+}
+.flag-va {
+  background-position: -0px -2552px;
+}
+.flag-vc {
+  background-position: -0px -2563px;
+}
+.flag-ve {
+  background-position: -0px -2574px;
+}
+.flag-vg {
+  background-position: -0px -2585px;
+}
+.flag-vi {
+  background-position: -0px -2596px;
+}
+.flag-vn {
+  background-position: -0px -2607px;
+}
+.flag-vu {
+  background-position: -0px -2618px;
+}
+.flag-wales {
+  background-position: -0px -2629px;
+}
+.flag-wf {
+  background-position: -0px -2640px;
+}
+.flag-ws {
+  background-position: -0px -2651px;
+}
+.flag-ye {
+  background-position: -0px -2662px;
+}
+.flag-yt {
+  background-position: -0px -2673px;
+}
+.flag-za {
+  background-position: -0px -2684px;
+}
+.flag-zw {
+  background-position: -0px -2695px;
+}
+.flag-me {
+  background-position: -0px -2706px;
+  height: 12px;
+}
+.flag-pirate {
+  background-image: url('/flags/pirate.png');
+  background-position: 0 0;
+}
+.flag-dizzle {
+  background-image: url('/flags/dizzle.png');
+  background-position: 0 0;
+}
diff --git a/app/assets/stylesheets/components/_icons.scss b/app/assets/stylesheets/components/_icons.scss
new file mode 100644
index 00000000..ef1db1ef
--- /dev/null
+++ b/app/assets/stylesheets/components/_icons.scss
@@ -0,0 +1,4 @@
+.icon--showcase {
+  text-align: center;
+  font-size: 5rem;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_inbox-actions.scss b/app/assets/stylesheets/components/_inbox-actions.scss
new file mode 100644
index 00000000..ee7b664d
--- /dev/null
+++ b/app/assets/stylesheets/components/_inbox-actions.scss
@@ -0,0 +1,9 @@
+.inbox-actions {
+  .form-group {
+    margin-bottom: 0;
+  }
+
+  .card-body {
+    padding: $card-spacer-y $card-spacer-x;
+  }
+}
diff --git a/app/assets/stylesheets/components/_inbox-entry.scss b/app/assets/stylesheets/components/_inbox-entry.scss
new file mode 100644
index 00000000..38cdf4ba
--- /dev/null
+++ b/app/assets/stylesheets/components/_inbox-entry.scss
@@ -0,0 +1,22 @@
+.inbox-entry {
+  &--new {
+    box-shadow: 0 0.125rem 0.25rem var(--primary);
+
+    .card-header {
+      background-color: var(--primary);
+      color: RGB(var(--primary-text));
+
+      a {
+        color: RGB(var(--primary-text));
+
+        &.dropdown-item {
+          color: inherit;
+        }
+      }
+
+      .text-muted {
+        color: RGBA(var(--primary-text), 0.8) !important;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_jumbotron.scss b/app/assets/stylesheets/components/_jumbotron.scss
new file mode 100644
index 00000000..cb020fa6
--- /dev/null
+++ b/app/assets/stylesheets/components/_jumbotron.scss
@@ -0,0 +1,35 @@
+.jumbotron {
+  $this: &;
+  display: flex;
+  background-color: var(--primary);
+  color: RGB(var(--primary-text));
+  text-align: center;
+  border-radius: 0;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: RGB(var(--primary-text));
+  }
+
+  a:not(.btn) {
+    color: RGB(var(--primary-text));
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .btn {
+      opacity: 1;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    align-self: center;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_locales.scss b/app/assets/stylesheets/components/_locales.scss
new file mode 100644
index 00000000..48a6ff5c
--- /dev/null
+++ b/app/assets/stylesheets/components/_locales.scss
@@ -0,0 +1,32 @@
+.locales {
+  text-align: center;
+
+  &__panel {
+    position: relative;
+    display:  none;
+    padding:  5px;
+
+    ul {
+      margin:          0;
+      padding:         0;
+      padding-top:     map-get($spacers, 3);
+      width:           100%;
+      list-style:      none;
+      display:         inline-flex;
+      flex-direction:  row;
+      flex-wrap:       wrap;
+      align-items:     center;
+      justify-content: center;
+      
+      li {
+        margin:     0 5px 10px 5px;
+        flex:       0 0 auto;
+
+        * {
+          display:        inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
new file mode 100644
index 00000000..f1a87b2e
--- /dev/null
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -0,0 +1,61 @@
+#rs-mobile-nav {
+  .container {
+    padding: 0;
+  }
+
+  padding: 4px 0 unquote('calc(env(safe-area-inset-bottom) + 4px)') 0;
+
+  .navbar-icon-row {
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+
+    .nav-link {
+      padding: 0;
+
+      .fa {
+        padding-top: 8px;
+        font-size: 20px;
+      }
+
+      .badge {
+        position: absolute;
+        top: 4px;
+        transform: translateX(16px);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down("md") {
+  .notification-dropdown,
+  .profile-dropdown {
+    bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})");
+    position: fixed;
+    top: unset;
+  }
+
+  .profile-dropdown {
+    left: unset;
+    right: unquote("calc(env(safe-area-inset-right) + 15px)");
+  }
+
+  .dropdown-menu.notification-dropdown {
+    left: unquote("calc(env(safe-area-inset-left) + 8px)");
+    max-width: unquote("calc(100vw - (8px + env(safe-area-inset-right)) - (8px + env(safe-area-inset-left)))");
+    min-width: unset;
+    right: unquote("calc(env(safe-area-inset-right) + 8px)");
+    width: unquote("calc(100vw - (8px + env(safe-area-inset-right)) - (8px + env(safe-area-inset-left)))");
+    max-height: calc(100% - 40px - 2rem);
+    overflow-y: scroll;
+
+    .dropdown-item {
+      padding: 8px;
+    }
+
+    .notification {
+      padding: 0;
+      white-space: normal;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_notifications.scss b/app/assets/stylesheets/components/_notifications.scss
new file mode 100644
index 00000000..07ce4e23
--- /dev/null
+++ b/app/assets/stylesheets/components/_notifications.scss
@@ -0,0 +1,59 @@
+.notification {
+  word-break: break-word;
+
+  &__user {
+    margin-top: 0;
+  }
+
+  &__user,
+  &__text {
+    margin-bottom: 0;
+    white-space: normal;
+  }
+
+  &__icon {
+    margin-right: map-get($spacers, 2);
+    min-width: 40px;
+  }
+
+  &__heading {
+    margin-bottom: 0;
+  }
+
+  &__list-heading {
+    margin: 0px;
+    text-transform: uppercase;
+    font-weight: bold;
+    color: RGB(var(--muted-text));
+  }
+
+  &__bell-icon:before {
+    font-size: 64px;
+    text-align: center;
+    display: block;
+    margin-bottom: 2px;
+  }
+
+  &-dropdown {
+    min-width: 400px;
+
+    & .dropdown-item:hover,
+    & .dropdown-item:active {
+      background: transparent;
+      color: RGB(var(--body-text));
+    }
+  }
+
+  .dropdown-item > & {
+    padding: 5px 10px;
+  }
+
+  .list-group-item {
+    margin-top: map-get($spacers, 2);
+    background-color: var(--raised-accent);
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_profile.scss b/app/assets/stylesheets/components/_profile.scss
new file mode 100644
index 00000000..6d8a8229
--- /dev/null
+++ b/app/assets/stylesheets/components/_profile.scss
@@ -0,0 +1,97 @@
+.profile {
+  &__avatar {
+    display: block;
+    width: map-get($avatar-sizes, "xl");
+    height: map-get($avatar-sizes, "xl");
+    margin: -(map-get($avatar-sizes, "xl") / 2.5) map-get($spacers, 4) 0;
+    border-radius: $avatar-border-radius;
+    box-shadow: $box-shadow;
+
+    @include media-breakpoint-up(sm) {
+      width: map-get($avatar-sizes, "xxl");
+      height: map-get($avatar-sizes, "xxl");
+      margin: -(map-get($avatar-sizes, "xxl") / 2) auto 0;
+    }
+  }
+
+  &__header-card {
+    margin-top: map-get($spacers, 3);
+    overflow: hidden;
+  }
+
+  &__name-container {
+    align-self: center;
+    max-width: 100%;
+    overflow: hidden;
+
+    @include media-breakpoint-up(sm) {
+      padding: map-get($spacers, 4);
+      padding-bottom: 0;
+    }
+  }
+
+  &__header-container {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.10),
+      rgba(0, 0, 0, 0.10)
+    ) var(--primary);
+    max-height: 440px;
+  }
+
+  &__header-image {
+    display: block;
+    width: 100%;
+  }
+
+  &__biography,
+  &__website,
+  &__location {
+    margin-bottom: map-get($spacers, 3);
+  }
+
+  &__actions,
+  &__biography {
+    margin-top: map-get($spacers, 3);
+  }
+
+  &__display-name {
+    font-weight: bold;
+    font-size: 1.1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include media-breakpoint-up(sm) {
+      white-space: initial;
+    }
+  }
+
+  &__screen-name {
+    &:only-child {
+      @extend .profile__display-name;
+    }
+
+    &:not(:only-child) {
+      font-size: 0.9em;
+      color: RGB(var(--muted-text));
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    &__name {
+      margin-bottom: map-get($spacers, 3);
+    }
+
+    & .card-body {
+      padding-top: 0;
+    }
+  }
+}
+
+.user--banned {
+  text-decoration: line-through !important;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_push-settings.scss b/app/assets/stylesheets/components/_push-settings.scss
new file mode 100644
index 00000000..c5d38d94
--- /dev/null
+++ b/app/assets/stylesheets/components/_push-settings.scss
@@ -0,0 +1,7 @@
+.push-notifications {
+  &-unavailable {
+    body.cap-service-worker.cap-notification & {
+      display: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_question.scss b/app/assets/stylesheets/components/_question.scss
new file mode 100644
index 00000000..7d03e06b
--- /dev/null
+++ b/app/assets/stylesheets/components/_question.scss
@@ -0,0 +1,18 @@
+.question {
+  &--fixed {
+    position: absolute;
+    width: 100%;
+    z-index: 999;
+
+    @include media-breakpoint-up('sm') {
+      position: fixed;
+    }
+  }
+
+  &--hidden {
+    visibility: hidden;
+    position: relative;
+    box-shadow: none;
+    z-index: -1;
+  }
+}
diff --git a/app/assets/stylesheets/components/_smiles.scss b/app/assets/stylesheets/components/_smiles.scss
new file mode 100644
index 00000000..b1725d2c
--- /dev/null
+++ b/app/assets/stylesheets/components/_smiles.scss
@@ -0,0 +1,28 @@
+.smiles {
+  margin-bottom: map-get($spacers, 2);
+
+  &__user-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+    
+  &__user-list-entry {
+    margin-bottom: map-get($spacers, 3);
+    
+    * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  
+    img {
+      height: map-get($avatar-sizes, "lg");
+      width: map-get($avatar-sizes, "lg");
+      border-radius: $avatar-border-radius;
+    }
+  
+    span {
+      margin-left: 5px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_themes.scss b/app/assets/stylesheets/components/_themes.scss
new file mode 100644
index 00000000..1b3cf159
--- /dev/null
+++ b/app/assets/stylesheets/components/_themes.scss
@@ -0,0 +1,15 @@
+.theme-success {
+  --background: #f4fcf6;
+  --primary: var(--success);
+}
+
+.theme-warning {
+  --background: #fcfaf4;
+  --primary: var(--warning);
+  --primary-text: 0, 0, 0;
+}
+
+.theme-danger {
+  --background: #fceff1;
+  --primary: var(--danger);
+}
diff --git a/app/assets/stylesheets/components/_totp-setup.scss b/app/assets/stylesheets/components/_totp-setup.scss
new file mode 100644
index 00000000..2bcf341b
--- /dev/null
+++ b/app/assets/stylesheets/components/_totp-setup.scss
@@ -0,0 +1,76 @@
+%totp-input {
+  font-family: "Monaco", "Inconsolata", "Cascadia Code", "Consolas", monospace;
+  width: 100px;
+}
+
+.totp-setup {
+  &__card {
+    background: var(--primary);
+    padding: 10px;
+    border-radius: 5px;
+
+    min-width: 256px;
+    max-width: 256px;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  &__card-container {
+    min-width: 276px;
+    max-width: 276px;
+    width: 100%;
+    padding: 0;
+  }
+
+  &__qr {
+    background: white;
+    border-radius: 5px;
+  }
+
+  &__text {
+    background: #000;
+    color: #fff;
+    margin: 10px 0 0 0;
+    padding: 5px;
+    border-radius: 5px;
+
+    code {
+      display: block;
+      color: var(--warning);
+    }
+  }
+
+  &__code-field {
+    @extend %totp-input;
+  }
+
+  &__recovery {
+    &-container {
+      max-width: 455px;
+    }
+
+    &-icon {
+      font-size: .75in;
+    }
+
+    &-title {
+      text-align: left;
+    }
+
+    &-codes {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      padding: 0;
+
+      li {
+        list-style-type: none;
+        font-size: 16px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+#user_otp_attempt {
+  @extend %totp-input;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_userbox.scss b/app/assets/stylesheets/components/_userbox.scss
new file mode 100644
index 00000000..09de41ec
--- /dev/null
+++ b/app/assets/stylesheets/components/_userbox.scss
@@ -0,0 +1,37 @@
+.userbox {
+  &__header {
+    width: 100%;
+    height: auto;
+    max-height: 70px;
+
+    @include media-breakpoint-up(sm) { 
+      max-height: 60px;
+    }
+  }
+
+  &__avatar {
+    display: block;
+    width: map-get($avatar-sizes, "lg");
+    height: map-get($avatar-sizes, "lg");
+    margin-top: -(map-get($avatar-sizes, "lg") / 2);
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: $avatar-border-radius;
+    box-shadow: $box-shadow;
+  }
+
+  .profile__name {
+    display: block;
+    margin: map-get($spacers, 3) 0;
+    text-align: center;
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .profile__actions {
+    margin-top: auto;
+  }
+}
diff --git a/app/assets/stylesheets/elements/_body.scss b/app/assets/stylesheets/elements/_body.scss
new file mode 100644
index 00000000..e33a8ebb
--- /dev/null
+++ b/app/assets/stylesheets/elements/_body.scss
@@ -0,0 +1,17 @@
+body {
+  overflow-y: scroll;
+  word-wrap: break-word;
+  color: RGB(var(--body-text));
+  background-color: var(--background);
+  @include media-breakpoint-up('lg') {
+    padding-top: $navbar-height;
+  }
+  @include media-breakpoint-down('md') {
+    padding-bottom: calc($navbar-height + unquote('env(safe-area-inset-bottom, 0)'));
+  }
+
+  &.not-logged-in {
+    padding-top: $navbar-height;
+    padding-bottom: 0;
+  }
+}
diff --git a/app/assets/stylesheets/overrides/_alerts.scss b/app/assets/stylesheets/overrides/_alerts.scss
new file mode 100644
index 00000000..8e9c2073
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_alerts.scss
@@ -0,0 +1,11 @@
+@each $color in $color-names {
+  .alert-#{$color} {
+    color: RGB(var(--#{$color}-text));
+    background-color: var(--#{$color});
+    border-color: var(--#{$color});
+
+    .alert-link {
+      color: RGB(var(--#{$color}-text));
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_badges.scss b/app/assets/stylesheets/overrides/_badges.scss
new file mode 100644
index 00000000..3fa32589
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_badges.scss
@@ -0,0 +1,6 @@
+@each $color in $color-names {
+  .badge-#{$color} {
+    color: var(--#{$color});
+    background-color: RGB(var(--#{$color}-text));
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_bootstrap-datetimepicker.scss b/app/assets/stylesheets/overrides/_bootstrap-datetimepicker.scss
new file mode 100644
index 00000000..c7a66d09
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_bootstrap-datetimepicker.scss
@@ -0,0 +1,3 @@
+.remove-native-picker::-webkit-calendar-picker-indicator{
+  display: none
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_buttons.scss b/app/assets/stylesheets/overrides/_buttons.scss
new file mode 100644
index 00000000..bb33b8d0
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_buttons.scss
@@ -0,0 +1,64 @@
+.btn {
+  color: RGB(var(--body-text));
+}
+
+.btn-link:hover {
+  color: RGB(var(--body-text));
+}
+
+@each $color in $color-names {
+  .btn-#{$color} {
+
+    color: RGB(var(--#{$color}-text));
+    background-color: var(--#{$color});
+    border-color: var(--#{$color});
+    border-width: 0;
+
+    &:hover {
+      background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.10),
+        rgba(0, 0, 0, 0.10)
+      ) var(--#{$color});
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      border: none;
+      background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+      ) var(--#{$color});
+
+      &:focus {
+        background: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0.30),
+          rgba(0, 0, 0, 0.30)
+        ) var(--#{$color});
+        box-shadow: none;
+      }
+    }
+
+    &:focus,
+    &:focus:hover {
+      background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.30),
+        rgba(0, 0, 0, 0.30)
+      ) var(--#{$color});
+      box-shadow: none;
+    }
+  }
+
+  .btn-outline-#{$color} {
+    color: var(--#{$color});
+  }
+}
+
+.btn {
+  .fa {
+    pointer-events: none;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss
new file mode 100644
index 00000000..949c21bb
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_card.scss
@@ -0,0 +1,18 @@
+.card {
+  margin-bottom: map-get($spacers, 3);
+  box-shadow: $box-shadow-sm;
+  background-color: var(--raised-bg);
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  &--fullheight {
+    height: calc(100% - map-get($spacers, 3));
+  }
+}
+
+.card-header,
+.card-footer {
+  background-color: var(--raised-accent);
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_colors.scss b/app/assets/stylesheets/overrides/_colors.scss
new file mode 100644
index 00000000..400c8d0d
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_colors.scss
@@ -0,0 +1,13 @@
+@each $color in $color-names {
+  .bg-#{$color} {
+    background-color: var(--#{$color}) !important;
+  }
+
+  .text-#{$color} {
+    color: var(--#{$color}) !important;
+  }
+}
+
+.text-muted {
+  color: RGB(var(--muted-text)) !important;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_dropdown.scss b/app/assets/stylesheets/overrides/_dropdown.scss
new file mode 100644
index 00000000..5d647c3b
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_dropdown.scss
@@ -0,0 +1,35 @@
+.dropdown-menu {
+  color: RGB(var(--body-text));
+  background-color: var(--raised-bg);
+  box-shadow: $box-shadow-lg;
+  border: none;
+}
+
+.dropdown-item {
+  color: RGB(var(--body-text));
+
+  &.active, 
+  &:active,
+  &:active:hover {
+    color: RGB(var(--primary-text));
+    background-color: var(--primary);
+  }
+
+  &:hover {
+    background-color: var(--raised-accent);
+  }
+}
+
+.dropdown-divider {
+  border-top: 1px solid var(--raised-accent);
+}
+
+.dropdown-toggle {
+  -webkit-appearance: none;
+}
+
+@include media-breakpoint-up('md') {
+  .dropdown-menu--lists {
+    max-width: 275px;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_inputs.scss b/app/assets/stylesheets/overrides/_inputs.scss
new file mode 100644
index 00000000..a1ef2007
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_inputs.scss
@@ -0,0 +1,22 @@
+.form-control {
+  background-color: var(--input-bg);
+  color: RGB(var(--input-text));
+  border: 0;
+
+  &:focus {
+    background-color: var(--input-bg);
+    color: RGB(var(--input-text));
+    border-color: var(--primary);
+    box-shadow: .5px 0 0 0.1rem var(--primary);
+  }
+
+  &::placeholder {
+    color: RGB(var(--input-placeholder));
+  }
+}
+
+.input-group-text {
+  color: RGB(var(--body-text));
+  background-color: var(--raised-accent);
+  border: 0;
+}
diff --git a/app/assets/stylesheets/overrides/_links.scss b/app/assets/stylesheets/overrides/_links.scss
new file mode 100644
index 00000000..34bbae92
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_links.scss
@@ -0,0 +1,7 @@
+a {
+  color: var(--primary);
+
+  &:hover {
+    color: var(--primary);
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_list-group.scss b/app/assets/stylesheets/overrides/_list-group.scss
new file mode 100644
index 00000000..9e1d63b6
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_list-group.scss
@@ -0,0 +1,21 @@
+.list-group-item {
+  background-color: transparent;
+  
+  &.active,
+  &.active:hover {
+    background-color: var(--primary);
+    border-color: var(--primary);
+
+    a {
+      color: var(--primary-text);
+    }
+  }
+}
+
+.list-group-item-action {
+  color: RGB(var(--body-text));
+  
+  &:hover, &:focus {
+    background-color: var(--raised-accent);
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_minicolors.scss b/app/assets/stylesheets/overrides/_minicolors.scss
new file mode 100644
index 00000000..4628eaef
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_minicolors.scss
@@ -0,0 +1,9 @@
+#update_theme .minicolors-theme-bootstrap .minicolors-swatch {
+  top: 0;
+  left: 0;
+  width: 38px;
+  height: 38px;
+  border: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_modal.scss b/app/assets/stylesheets/overrides/_modal.scss
new file mode 100644
index 00000000..04773c30
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_modal.scss
@@ -0,0 +1,13 @@
+.modal-content {
+  background-color: var(--raised-bg);
+  border: 0;
+}
+
+.modal-header {
+  border-bottom: 0;
+}
+
+.modal-footer {
+  background-color: var(--raised-accent);
+  border-top: 0;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_navbar.scss b/app/assets/stylesheets/overrides/_navbar.scss
new file mode 100644
index 00000000..e00e0e81
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_navbar.scss
@@ -0,0 +1,58 @@
+.navbar-themed {
+  .navbar-brand {
+    color: RGB(var(--primary-text));
+
+    &:hover,
+    &:focus {
+      color: RGB(var(--primary-text));
+    }
+
+    /* svg-logo! \o/ */
+    svg {
+      height: $navbar-brand-font-size;
+      path {
+        fill: RGB(var(--primary-text));
+      }
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: rgba(var(--primary-text), .5);
+
+      &:hover,
+      &:focus {
+        color: rgba(var(--primary-text), .75);
+      }
+
+      &.disabled {
+        color: rgba(var(--primary-text), .25);
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: RGB(var(--primary-text));
+    }
+  }
+
+  .navbar-toggler {
+    color: RGB(var(--primary-text));
+    border-color: RGB(var(--primary-text));
+  }
+
+  .navbar-toggler-icon {
+    background-image: escape-svg($navbar-dark-toggler-icon-bg);
+  }
+
+  .navbar-text {
+    color: RGB(var(--primary-text));
+    a,
+    a:hover,
+    a:focus {
+      color: RGB(var(--primary-text));
+    }
+  }
+}
diff --git a/app/assets/stylesheets/overrides/_sweet-alert.scss b/app/assets/stylesheets/overrides/_sweet-alert.scss
new file mode 100644
index 00000000..78bea1b0
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_sweet-alert.scss
@@ -0,0 +1,7 @@
+.sweet-alert {
+  font-family: inherit;
+}
+
+.sweet-overlay {
+  z-index: 1031;
+}
diff --git a/app/assets/stylesheets/overrides/_toasts.scss b/app/assets/stylesheets/overrides/_toasts.scss
new file mode 100644
index 00000000..88d2f2de
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_toasts.scss
@@ -0,0 +1,5 @@
+.toastify {
+  @include media-breakpoint-up('md') {
+    transform: translateY(56px) !important;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_turbolinks.scss b/app/assets/stylesheets/overrides/_turbolinks.scss
new file mode 100644
index 00000000..8161a7ca
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_turbolinks.scss
@@ -0,0 +1,10 @@
+.turbolinks-progress-bar {
+  background: var(--turbolinks-progress-color);
+
+  @include media-breakpoint-down('md') {
+    top: unset !important;
+    bottom: calc(45px + env(safe-area-inset-bottom)) !important;
+    position: fixed;
+    left: 0 !important;
+  }
+}
\ No newline at end of file