diff --git a/app/styles/about.scss b/app/styles/about.scss
index 7c8ed6f45..c7a0a039a 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -625,7 +625,7 @@ $small-breakpoint: 960px;
   }
 
   .static-icon-button {
-    color: #0482d8;
+    color: var(--brand-color);
     font-size: 18px;
 
     & > span {
@@ -1367,6 +1367,7 @@ $small-breakpoint: 960px;
         &:hover,
         &:focus,
         &:active {
+          color: #fff;
           opacity: 0.9;
         }
       }
@@ -1703,6 +1704,7 @@ $small-breakpoint: 960px;
 
 .public-layout__top {
   position: relative;
+  flex: 1;
 
   .header,
   .container {
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index b37dbddf4..f54595588 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -118,7 +118,7 @@
   .current {
     background: var(--foreground-color);
     border-radius: 100px;
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
     cursor: default;
     margin: 0 10px;
   }
@@ -155,7 +155,7 @@
 
   .disabled {
     cursor: default;
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
   }
 
   @media screen and (max-width: 700px) {
diff --git a/app/styles/components.scss b/app/styles/components.scss
index 8a9b28696..8f10df23e 100644
--- a/app/styles/components.scss
+++ b/app/styles/components.scss
@@ -68,7 +68,7 @@
   }
 
   &.button-alternative {
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
     background: var(--brand-color);
 
     &:active,
@@ -575,7 +575,7 @@
 
     .display-name {
       strong {
-        color: var(--inverted-text-color);
+        color: var(--primary-text-color);
       }
 
       span {
@@ -584,7 +584,7 @@
     }
 
     .status__content {
-      color: var(--inverted-text-color);
+      color: var(--primary-text-color);
 
       a {
         color: var(--highlight-text-color);
@@ -622,7 +622,7 @@
     background: transparent;
 
     .icon-button.disabled {
-      color: lighten(#0482d8, 13%);
+      color: rgba(var(--brand-color-rgb), 0.2);
     }
   }
 }
@@ -724,7 +724,7 @@
       width: 14px;
       font-size: 12px;
       font-weight: 500;
-      color: #0482d8;
+      color: var(--brand-color);
     }
   }
 }
@@ -1090,7 +1090,7 @@ a.account__display-name {
 
   a.status__content__spoiler-link {
     background: var(--brand-color-med);
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
 
     &:hover {
       background: var(--brand-color-faint);
@@ -1562,6 +1562,7 @@ a.account__display-name {
   font-size: 30px;
   align-items: center;
   justify-content: center;
+  transition: 0.2s;
 
   @media screen and (max-width: 895px) {
     display: flex;
@@ -2820,7 +2821,7 @@ a.status-card.compact:hover {
     }
 
     &__option {
-      color: var(--inverted-text-color);
+      color: var(--primary-text-color);
       border-radius: 4px;
       font-size: 14px;
 
@@ -3166,6 +3167,7 @@ a.status-card.compact:hover {
 }
 
 .privacy-dropdown__dropdown {
+  font-size: 14px;
   position: absolute;
   background: var(--foreground-color);
   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
@@ -3184,14 +3186,14 @@ a.status-card.compact:hover {
 }
 
 .privacy-dropdown__option {
-  color: var(--inverted-text-color);
+  color: var(--primary-text-color);
   padding: 10px;
   cursor: pointer;
   display: flex;
 
   &:hover,
   &.active {
-    background: var(--brand-color);
+    background: var(--brand-color-med);
     color: var(--primary-text-color);
     outline: 0;
 
@@ -3205,7 +3207,7 @@ a.status-card.compact:hover {
   }
 
   &.active:hover {
-    background: var(--brand-color);
+    background: rgba(var(--brand-color-rgb), 0.5);
   }
 }
 
@@ -3223,7 +3225,7 @@ a.status-card.compact:hover {
   strong {
     font-weight: 500;
     display: block;
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
 
     @each $lang in $cjk-langs {
       &:lang(#{$lang}) {
@@ -3996,14 +3998,12 @@ a.status-card.compact:hover {
 
 .notification__filter-bar,
 .account__section-headline {
-  background: var(--brand-color-faint);
   border-bottom: 1px solid var(--brand-color-faint);
   cursor: default;
   display: flex;
   flex-shrink: 0;
 
   button {
-    background: var(--brand-color-med);
     border: 0;
     margin: 0;
   }
@@ -4019,6 +4019,7 @@ a.status-card.compact:hover {
     text-align: center;
     text-decoration: none;
     position: relative;
+    background: transparent;
 
     &.active {
       color: var(--primary-text-color);
@@ -4035,24 +4036,32 @@ a.status-card.compact:hover {
         transform: translateX(-50%);
         border-style: solid;
         border-width: 0 10px 10px;
-        border-color: transparent transparent var(--foreground-color);
+        border-color: transparent transparent var(--brand-color-faint);
       }
 
       &::after {
         bottom: -1px;
-        border-color: transparent transparent var(--foreground-color);
       }
     }
   }
 }
 
 .account__section-headline {
+  background: var(--brand-color-faint);
+
   button,
   a {
     flex: none;
     padding: 18px 15px;
     font-size: 16px;
     font-weight: 600;
+
+    &.active {
+      &::before,
+      &::after {
+        border-color: transparent transparent var(--foreground-color);
+      }
+    }
   }
 }
 
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 7091e42e1..95dee51e7 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -39,7 +39,7 @@
     font-weight: 400;
 
     strong {
-      color: var(--inverted-text-color);
+      color: var(--primary-text-color);
       font-weight: 500;
       @each $lang in $cjk-langs {
         &:lang(#{$lang}) {
@@ -194,10 +194,10 @@
   }
 
   .compose-form__modifiers {
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
     font-family: inherit;
     font-size: 14px;
-    background: var(--foreground-color);
+    background: var(--background-color);
     .compose-form__upload-wrapper {overflow: hidden;}
 
     .compose-form__uploads-wrapper {
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 7893df7c5..7612421d2 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -135,7 +135,7 @@
     box-sizing: border-box;
     text-decoration: none;
     background: var(--background-color);
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 897af0e1a..f515ef9d9 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -183,7 +183,7 @@
 .error-modal,
 .embed-modal {
   background: var(--background-color);
-  color: var(--inverted-text-color);
+  color: var(--primary-text-color);
   border-radius: 8px;
   overflow: hidden;
   display: flex;
@@ -260,12 +260,12 @@
 
     &.onboarding-modal__done,
     &.onboarding-modal__next {
-      color: var(--inverted-text-color);
+      color: var(--primary-text-color);
 
       &:hover,
       &:focus,
       &:active {
-        color: var(--inverted-text-color);
+        color: var(--primary-text-color);
       }
     }
   }
@@ -282,7 +282,7 @@
 
   &__label {
     font-weight: 500;
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
     margin-bottom: 5px;
     text-transform: uppercase;
     font-size: 12px;
@@ -464,7 +464,7 @@
     box-sizing: border-box;
     width: 100%;
     margin: 0;
-    color: var(--inverted-text-color);
+    color: var(--primary-text-color);
     background: #ffffff;
     padding: 10px;
     font-family: inherit;
@@ -486,7 +486,7 @@
     margin-bottom: 24px;
 
     &__label {
-      color: var(--inverted-text-color);
+      color: var(--primary-text-color);
       font-size: 14px;
     }
   }
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index ce5e1888a..2ed6bbc47 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -118,14 +118,17 @@
     height: 34px;
     margin-left: 20px;
     border-radius: 6px;
-    background-color: var(--accent-color) !important;
-    transition: background-color 0.2s;
+    background-color: var(--accent-color);
     font-weight: bold;
     font-size: 16px;
     transition: 0.2s;
 
     &:hover {
-      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
+      background-color: rgb(
+        calc(var(--accent-color-r) + 10),
+        calc(var(--accent-color-g) + 10),
+        calc(var(--accent-color-b) + 10)
+      );
     }
 
   }
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 3ef1ca2d9..d954d4e74 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -426,21 +426,21 @@ code {
   }
 
   select {
-    appearance: none;
     box-sizing: border-box;
     font-size: 16px;
     color: var(--primary-text-color);
+    background: var(--background-color);
     display: block;
     width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: var(--foreground-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color-med))}'/></svg>") no-repeat right 8px center / auto 16px;
-    border: 1px solid var(--brand-color-faint);
+    border: 1px solid var(--highlight-text-color);
     border-radius: 4px;
     padding-left: 10px;
     padding-right: 30px;
     height: 41px;
+    position: relative;
   }
 
   .label_input {
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 72746e862..7b1c62315 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -47,7 +47,7 @@
       box-sizing: border-box;
       width: 100%;
       font-size: 14px;
-      color: var(--inverted-text-color);
+      color: var(--primary-text-color);
       display: block;
       outline: 0;
       font-family: inherit;
@@ -166,8 +166,8 @@
     padding: 6px 10px;
     height: auto;
     line-height: inherit;
-    color: #0482d8;
-    border-color: #0482d8;
+    color: var(--brand-color);
+    border-color: var(--brand-color);
   }
 
   li {
@@ -182,20 +182,18 @@
   }
 
   select {
-    appearance: none;
     box-sizing: border-box;
     font-size: 14px;
-    color: #0482d8;
+    color: var(--brand-color);
     display: inline-block;
     width: auto;
     outline: 0;
     font-family: inherit;
     background-color: var(--foreground-color);
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{rgba(#0482d8, 0.999)}'/></svg>");
     background-repeat: no-repeat;
     background-position: right 8px center;
     background-size: auto 16px;
-    border: 1px solid #0482d8;
+    border: 1px solid var(--brand-color);
     border-radius: 4px;
     padding: 6px 10px;
     padding-right: 30px;
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index 528da5fc4..a5743eb5a 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -3,11 +3,11 @@ body {
   --brand-color: rgb(var(--brand-color-rgb));
   --brand-color-faint: rgba(var(--brand-color-rgb), 0.1);
   --brand-color-med: rgba(var(--brand-color-rgb), 0.2);
-  --accent-color: rgb(
-    calc(var(--brand-color-r) + 25),
-    calc(var(--brand-color-g) + 25),
-    calc(var(--brand-color-b) + 25)
-  );
+  --accent-color-r: calc(var(--brand-color-r) + 25);
+  --accent-color-g: calc(var(--brand-color-g) + 25);
+  --accent-color-b: calc(var(--brand-color-b) + 25);
+  --accent-color-rgb: var(--accent-color-r), var(--accent-color-g), var(--accent-color-b);
+  --accent-color: rgb(var(--accent-color-rgb));
   --primary-text-color-rgb: var(--primary-text-color-r), var(--primary-text-color-g), var(--primary-text-color-b);
   --primary-text-color: rgb(var(--primary-text-color-rgb));
   --primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6);
@@ -49,9 +49,9 @@ body.theme-mode-dark {
   --background-color-b: 51;
   --foreground-color: #222222;
   --highlight-text-color: rgb(
-    calc(var(--brand-color-r) + 25),
-    calc(var(--brand-color-g) + 25),
-    calc(var(--brand-color-b) + 25)
+    calc(var(--brand-color-r) + 40),
+    calc(var(--brand-color-g) + 40),
+    calc(var(--brand-color-b) + 40)
   );
   --brand-color-hicontrast: rgb(
     calc(var(--brand-color-r) + 50),