From 20209c81ab9f0cdf54f85b5977d86aa60015ea92 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 22 Jul 2022 13:30:16 -0400
Subject: [PATCH] Improve visuals with branding

Co-authored-by: Alex Gleason <alex@alexgleason.me>
---
 app/soapbox/__fixtures__/intlMessages.json    |   4 +-
 app/soapbox/components/autosuggest_input.tsx  |  10 +-
 .../components/autosuggest_textarea.tsx       |   8 +-
 app/soapbox/components/badge.tsx              |   2 +-
 app/soapbox/components/dropdown_menu.tsx      |   4 +-
 app/soapbox/components/emoji_selector.tsx     |   8 +-
 app/soapbox/components/error_boundary.tsx     |  45 ++++---
 app/soapbox/components/hashtag.tsx            |   6 +-
 app/soapbox/components/landing-gradient.tsx   |   2 +-
 app/soapbox/components/list.tsx               |  26 ++--
 app/soapbox/components/media_gallery.js       |   2 +-
 app/soapbox/components/modal_root.js          |   4 +-
 app/soapbox/components/progress_circle.tsx    |   6 +-
 app/soapbox/components/quoted-status.tsx      |   4 +-
 .../components/sidebar-navigation-link.tsx    |  10 +-
 app/soapbox/components/sidebar_menu.tsx       | 116 +++++++++---------
 .../components/status-action-button.tsx       |   2 +-
 app/soapbox/components/status.tsx             |   4 +-
 app/soapbox/components/status_content.tsx     |   4 +-
 app/soapbox/components/status_list.tsx        |   2 +-
 .../components/thumb_navigation-link.tsx      |  20 ++-
 app/soapbox/components/tombstone.tsx          |   2 +-
 app/soapbox/components/ui/banner/banner.tsx   |   4 +-
 .../ui/button/__tests__/button.test.tsx       |   4 +-
 app/soapbox/components/ui/button/button.tsx   |   2 +-
 .../components/ui/button/useButtonStyles.ts   |  19 ++-
 app/soapbox/components/ui/card/card.tsx       |   2 +-
 .../components/ui/checkbox/checkbox.tsx       |   2 +-
 app/soapbox/components/ui/counter/counter.tsx |   2 +-
 app/soapbox/components/ui/divider/divider.tsx |   2 +-
 .../ui/emoji-selector/emoji-selector.tsx      |   2 +-
 .../components/ui/file-input/file-input.tsx   |   2 +-
 .../components/ui/form-group/form-group.tsx   |   8 +-
 .../components/ui/icon-button/icon-button.tsx |   2 +-
 app/soapbox/components/ui/input/input.tsx     |   6 +-
 app/soapbox/components/ui/menu/menu.css       |  10 +-
 app/soapbox/components/ui/menu/menu.tsx       |   2 +-
 app/soapbox/components/ui/modal/modal.tsx     |   6 +-
 .../ui/progress-bar/progress-bar.tsx          |   4 +-
 app/soapbox/components/ui/select/select.tsx   |   4 +-
 app/soapbox/components/ui/spinner/spinner.css |   2 +-
 .../components/ui/streamfield/streamfield.tsx |   2 +-
 app/soapbox/components/ui/tabs/tabs.css       |   8 +-
 app/soapbox/components/ui/tabs/tabs.tsx       |   4 +-
 app/soapbox/components/ui/text/text.tsx       |   6 +-
 .../components/ui/textarea/textarea.tsx       |   4 +-
 app/soapbox/components/ui/tooltip/tooltip.css |   4 +-
 .../components/validation-checkmark.tsx       |   2 +-
 app/soapbox/containers/soapbox.tsx            |   2 +-
 .../features/account/components/header.js     |  20 +--
 app/soapbox/features/admin/index.tsx          |   3 +-
 .../features/aliases/components/search.tsx    |   2 +-
 app/soapbox/features/auth_layout/index.tsx    |   2 +-
 .../auth_login/components/login_form.tsx      |   2 +-
 .../features/auth_token_list/index.tsx        |   2 +-
 .../components/compose_form_button.tsx        |   7 +-
 .../components/emoji_picker_dropdown.js       |   4 +-
 .../compose/components/polls/poll-form.tsx    |   6 +-
 .../compose/components/privacy_dropdown.tsx   |   2 +-
 .../compose/components/reply_indicator.tsx    |   2 +-
 .../features/compose/components/search.tsx    |   6 +-
 .../compose/components/search_results.tsx     |   2 +-
 .../components/text_character_counter.tsx     |   6 +-
 .../compose/components/upload_button.tsx      |   2 +-
 app/soapbox/features/delete_account/index.tsx |  43 ++++---
 .../developers/developers-challenge.tsx       |   3 +-
 .../features/developers/developers-menu.tsx   |  14 +--
 app/soapbox/features/edit_email/index.tsx     |   2 +-
 app/soapbox/features/edit_password/index.tsx  |   2 +-
 .../components/profile-preview.tsx            |   4 +-
 app/soapbox/features/edit_profile/index.tsx   |  16 +--
 .../features/feed-filtering/feed-carousel.tsx |   2 +-
 .../feed-suggestions/feed-suggestions.tsx     |   2 +-
 .../lists/components/new_list_form.tsx        |   3 +-
 app/soapbox/features/lists/index.tsx          |  51 ++++----
 app/soapbox/features/notifications/index.tsx  |   2 +-
 .../features/onboarding/onboarding-wizard.tsx |   2 +-
 .../steps/avatar-selection-step.tsx           |   8 +-
 .../features/onboarding/steps/bio-step.tsx    |   4 +-
 .../steps/cover-photo-selection-step.tsx      |  14 +--
 .../onboarding/steps/display-name-step.tsx    |   4 +-
 .../steps/suggested-accounts-step.tsx         |   6 +-
 .../components/placeholder_avatar.tsx         |   4 +-
 .../components/placeholder_card.tsx           |   4 +-
 .../components/placeholder_display_name.tsx   |   2 +-
 .../components/placeholder_notification.tsx   |   2 +-
 .../components/placeholder_status.tsx         |   4 +-
 .../components/placeholder_status_content.tsx |   2 +-
 .../public_layout/components/footer.tsx       |   4 +-
 .../public_layout/components/header.tsx       |   7 +-
 .../public_layout/components/sonar.tsx        |  10 +-
 .../features/security/mfa/enable_otp_form.tsx |   6 +-
 .../security/mfa/otp_confirm_form.tsx         |   8 +-
 app/soapbox/features/security/mfa_form.tsx    |   8 +-
 .../soapbox_config/components/icon-picker.tsx |   2 +-
 .../components/site-preview.tsx               |   6 +-
 .../features/status/components/action-bar.tsx |  10 +-
 .../features/status/components/card.tsx       |  30 ++---
 .../components/status-interaction-bar.tsx     |   5 +-
 .../status/components/thread-login-cta.tsx    |   2 +-
 app/soapbox/features/status/index.tsx         |   4 +-
 .../features/ui/components/action-button.tsx  |   6 +-
 .../features/ui/components/actions_modal.tsx  |   2 +-
 .../ui/components/background_shapes.tsx       |   2 +-
 .../ui/components/bundle_column_error.tsx     |   6 +-
 .../ui/components/compare_history_modal.tsx   |   2 +-
 .../features/ui/components/compose-button.tsx |   2 +-
 .../ui/components/confirmation_modal.tsx      |   6 +-
 .../features/ui/components/funding_panel.tsx  |   2 +-
 .../features/ui/components/hotkeys_modal.tsx  |   2 +-
 .../features/ui/components/link_footer.tsx    |   4 +-
 .../components/modals/landing-page-modal.tsx  |   6 +-
 .../modals/report-modal/report-modal.tsx      |   4 +-
 .../report-modal/steps/other-actions-step.tsx |   6 +-
 .../modals/report-modal/steps/reason-step.tsx |  10 +-
 .../features/ui/components/mute_modal.tsx     |   2 +-
 app/soapbox/features/ui/components/navbar.tsx |   6 +-
 .../ui/components/subscription-button.tsx     |   4 +-
 .../features/ui/components/theme-selector.tsx |  12 +-
 .../ui/containers/notifications_container.tsx |   2 +-
 .../features/verification/registration.tsx    |   2 +-
 .../verification/steps/age-verification.tsx   |   2 +-
 .../verification/steps/email-verification.tsx |   6 +-
 .../verification/steps/sms-verification.tsx   |   8 +-
 app/soapbox/locales/ar.json                   |   2 +-
 app/soapbox/locales/ast.json                  |   2 +-
 app/soapbox/locales/bg.json                   |   2 +-
 app/soapbox/locales/bn.json                   |   2 +-
 app/soapbox/locales/br.json                   |   2 +-
 app/soapbox/locales/co.json                   |   2 +-
 app/soapbox/locales/cy.json                   |   2 +-
 app/soapbox/locales/da.json                   |   2 +-
 app/soapbox/locales/el.json                   |   2 +-
 app/soapbox/locales/en.json                   |   2 +-
 app/soapbox/locales/eo.json                   |   2 +-
 app/soapbox/locales/es-AR.json                |   2 +-
 app/soapbox/locales/es.json                   |   2 +-
 app/soapbox/locales/et.json                   |   2 +-
 app/soapbox/locales/eu.json                   |   2 +-
 app/soapbox/locales/fa.json                   |   2 +-
 app/soapbox/locales/fi.json                   |   2 +-
 app/soapbox/locales/fr.json                   |   2 +-
 app/soapbox/locales/ga.json                   |   2 +-
 app/soapbox/locales/gl.json                   |   2 +-
 app/soapbox/locales/hi.json                   |   2 +-
 app/soapbox/locales/hr.json                   |   2 +-
 app/soapbox/locales/hu.json                   |   2 +-
 app/soapbox/locales/hy.json                   |   2 +-
 app/soapbox/locales/id.json                   |   2 +-
 app/soapbox/locales/io.json                   |   2 +-
 app/soapbox/locales/ka.json                   |   2 +-
 app/soapbox/locales/kk.json                   |   2 +-
 app/soapbox/locales/ko.json                   |   2 +-
 app/soapbox/locales/lt.json                   |   2 +-
 app/soapbox/locales/lv.json                   |   2 +-
 app/soapbox/locales/mk.json                   |   2 +-
 app/soapbox/locales/ms.json                   |   2 +-
 app/soapbox/locales/nl.json                   |   2 +-
 app/soapbox/locales/nn.json                   |   2 +-
 app/soapbox/locales/no.json                   |   2 +-
 app/soapbox/locales/oc.json                   |   2 +-
 app/soapbox/locales/pt-BR.json                |   2 +-
 app/soapbox/locales/ro.json                   |   2 +-
 app/soapbox/locales/ru.json                   |   2 +-
 app/soapbox/locales/sk.json                   |   2 +-
 app/soapbox/locales/sl.json                   |   2 +-
 app/soapbox/locales/sq.json                   |   2 +-
 app/soapbox/locales/sr-Latn.json              |   2 +-
 app/soapbox/locales/sr.json                   |   2 +-
 app/soapbox/locales/sv.json                   |   2 +-
 app/soapbox/locales/ta.json                   |   2 +-
 app/soapbox/locales/te.json                   |   2 +-
 app/soapbox/locales/th.json                   |   2 +-
 app/soapbox/locales/tr.json                   |   2 +-
 app/soapbox/locales/uk.json                   |   2 +-
 app/soapbox/locales/zh-HK.json                |   2 +-
 app/soapbox/locales/zh-TW.json                |   2 +-
 .../normalizers/soapbox/soapbox_config.ts     |  13 +-
 app/soapbox/pages/home_page.tsx               |   2 +-
 app/soapbox/utils/__tests__/colors.test.ts    |   4 +-
 app/soapbox/utils/__tests__/tailwind.test.ts  |  88 ++++++++++---
 app/soapbox/utils/colors.ts                   |   4 +-
 app/soapbox/utils/features.ts                 |   2 +-
 app/soapbox/utils/tailwind.ts                 |   7 +-
 app/soapbox/utils/theme.ts                    |  11 +-
 app/styles/accounts.scss                      |   8 +-
 app/styles/application.scss                   |  18 ++-
 app/styles/chats.scss                         |   4 +-
 app/styles/components/accordion.scss          |   2 +-
 app/styles/components/admin.scss              |   2 +-
 app/styles/components/columns.scss            |   2 +-
 app/styles/components/compose-form.scss       |  65 +++-------
 app/styles/components/datepicker.scss         |  22 ++--
 app/styles/components/detailed-status.scss    |   4 +-
 app/styles/components/directory.scss          |   8 +-
 app/styles/components/dropdown-menu.scss      |  14 +--
 app/styles/components/media-gallery.scss      |   5 +-
 app/styles/components/modal.scss              |   2 +-
 app/styles/components/react-toggle.scss       |   6 +-
 app/styles/components/reply-mentions.scss     |   4 +-
 app/styles/components/sidebar-menu.scss       |   2 +-
 app/styles/components/snackbar.scss           |   6 +-
 app/styles/components/status.scss             |  26 ++--
 app/styles/emoji_picker.scss                  |  20 +--
 app/styles/forms.scss                         |   2 +-
 app/styles/navigation.scss                    |   2 +-
 app/styles/utilities.scss                     |   2 +-
 tailwind.config.js                            |   4 +-
 208 files changed, 695 insertions(+), 654 deletions(-)

diff --git a/app/soapbox/__fixtures__/intlMessages.json b/app/soapbox/__fixtures__/intlMessages.json
index 7760742ff..54c919e6a 100644
--- a/app/soapbox/__fixtures__/intlMessages.json
+++ b/app/soapbox/__fixtures__/intlMessages.json
@@ -243,7 +243,7 @@
     "lists.edit": "Edit list",
     "lists.edit.submit": "Change title",
     "lists.new.create": "Add list",
-    "lists.new.create_title": "Create",
+    "lists.new.create_title": "Add list",
     "lists.new.save_title": "Save Title",
     "lists.new.title_placeholder": "New list title",
     "lists.search": "Search among people you follow",
@@ -721,7 +721,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/components/autosuggest_input.tsx b/app/soapbox/components/autosuggest_input.tsx
index fc702cf5f..e6a4af6d6 100644
--- a/app/soapbox/components/autosuggest_input.tsx
+++ b/app/soapbox/components/autosuggest_input.tsx
@@ -218,8 +218,8 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
         key={key}
         data-index={i}
         className={classNames({
-          'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 group': true,
-          'bg-gray-100 dark:bg-slate-700 hover:bg-gray-100 dark:hover:bg-gray-700': i === selectedSuggestion,
+          'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
+          'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
         })}
         onMouseDown={this.onSuggestionClick}
         onTouchEnd={this.onSuggestionClick}
@@ -253,7 +253,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
 
     return menu.map((item, i) => (
       <a
-        className={classNames('flex items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700', { selected: suggestions.size - selectedSuggestion === i })}
+        className={classNames('flex items-center space-x-2 px-4 py-2.5 text-sm cursor-pointer text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
         href='#'
         role='button'
         tabIndex={0}
@@ -301,7 +301,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
         <input
           type='text'
           className={classNames({
-            'block w-full sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-gray-500 focus:ring-primary-500 focus:border-primary-500': true,
+            'block w-full sm:text-sm border-gray-200 dark:border-gray-800 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:border-gray-200 dark:focus-border-gray-800 focus:ring-primary-500 focus:ring-2': true,
           }, className)}
           ref={this.setInput}
           disabled={disabled}
@@ -324,7 +324,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
         <div
           style={this.setPortalPosition()}
           className={classNames({
-            'fixed w-full z-[1001] shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
+            'fixed w-full z-[1001] shadow bg-white dark:bg-gray-900 rounded-lg py-1 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
             hidden: !visible,
             block: visible,
           })}
diff --git a/app/soapbox/components/autosuggest_textarea.tsx b/app/soapbox/components/autosuggest_textarea.tsx
index 84eff00c5..b5d54b670 100644
--- a/app/soapbox/components/autosuggest_textarea.tsx
+++ b/app/soapbox/components/autosuggest_textarea.tsx
@@ -219,8 +219,8 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
         key={key}
         data-index={i}
         className={classNames({
-          'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 group': true,
-          'bg-gray-100 dark:bg-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700': i === selectedSuggestion,
+          'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
+          'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
         })}
         onMouseDown={this.onSuggestionClick}
       >
@@ -260,7 +260,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
 
             <Textarea
               ref={this.setTextarea}
-              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
+              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-transparent px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
                 'min-h-[40px]': condensed,
                 'min-h-[100px]': !condensed,
               })}
@@ -288,7 +288,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
         <div
           style={this.setPortalPosition()}
           className={classNames({
-            'fixed z-1000 shadow bg-white dark:bg-slate-900 rounded-lg py-1 space-y-0': true,
+            'fixed z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
             hidden: suggestionsHidden || suggestions.isEmpty(),
             block: !suggestionsHidden && !suggestions.isEmpty(),
           })}
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 7686b1e47..7f6c8a09f 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -15,7 +15,7 @@ const Badge: React.FC<IBadge> = ({ title, slug }) => (
       'bg-yellow-500': slug === 'donor',
       'bg-black': slug === 'admin',
       'bg-cyan-600': slug === 'moderator',
-      'bg-gray-100 text-gray-900': slug === 'bot',
+      'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': slug === 'bot',
       'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
     })}
   >
diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index 3118b0d2d..d8b35f5fc 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -384,8 +384,8 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
           <IconButton
             disabled={disabled}
             className={classNames({
-              'text-gray-400 hover:text-gray-600': true,
-              'text-gray-600': open,
+              'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
+              'text-gray-700 dark:text-gray-500': open,
             })}
             title={title}
             src={src}
diff --git a/app/soapbox/components/emoji_selector.tsx b/app/soapbox/components/emoji_selector.tsx
index da8249fa9..69d104385 100644
--- a/app/soapbox/components/emoji_selector.tsx
+++ b/app/soapbox/components/emoji_selector.tsx
@@ -25,8 +25,8 @@ interface IEmojiSelector {
 class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
 
   static defaultProps: Partial<IEmojiSelector> = {
-    onReact: () => {},
-    onUnfocus: () => {},
+    onReact: () => { },
+    onUnfocus: () => { },
     visible: false,
   }
 
@@ -98,7 +98,7 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
   }
 
   handlers = {
-    open: () => {},
+    open: () => { },
   };
 
   setRef = (c: HTMLDivElement): void => {
@@ -111,7 +111,7 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
     return (
       <HotKeys handlers={this.handlers}>
         {/*<div
-          className={classNames('flex absolute bg-white dark:bg-slate-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', { 'opacity-100 pointer-events-auto z-[999]': visible || focused })}
+          className={classNames('flex absolute bg-white dark:bg-gray-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', { 'opacity-100 pointer-events-auto z-[999]': visible || focused })}
           onBlur={this.handleBlur}
           ref={this.setRef}
         >
diff --git a/app/soapbox/components/error_boundary.tsx b/app/soapbox/components/error_boundary.tsx
index abc051f02..ddca29d21 100644
--- a/app/soapbox/components/error_boundary.tsx
+++ b/app/soapbox/components/error_boundary.tsx
@@ -5,11 +5,12 @@ import { connect } from 'react-redux';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import * as BuildConfig from 'soapbox/build_config';
 import { Text, Stack } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { captureException } from 'soapbox/monitoring';
 import KVStore from 'soapbox/storage/kv_store';
 import sourceCode from 'soapbox/utils/code';
 
+import SiteLogo from './site-logo';
+
 import type { RootState } from 'soapbox/store';
 
 const goHome = () => location.href = '/';
@@ -103,7 +104,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
 
   render() {
     const { browser, hasError } = this.state;
-    const { children, siteTitle, logo, links } = this.props;
+    const { children, links } = this.props;
 
     if (!hasError) {
       return children;
@@ -114,35 +115,33 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
     const errorText = this.getErrorText();
 
     return (
-      <div className='h-screen pt-16 pb-12 flex flex-col bg-white'>
+      <div className='h-screen pt-16 pb-12 flex flex-col bg-white dark:bg-primary-900'>
         <main className='flex-grow flex flex-col justify-center max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8'>
           <div className='flex-shrink-0 flex justify-center'>
             <a href='/' className='inline-flex'>
-              {logo ? (
-                <img className='h-12' src={logo} alt={siteTitle} />
-              ) : (
-                <SvgIcon className='h-12 w-12' src={require('@tabler/icons/home.svg')} alt={siteTitle} />
-              )}
+              <SiteLogo alt='Logo' className='h-12 w-auto cursor-pointer' />
             </a>
           </div>
 
           <div className='py-8'>
             <div className='text-center max-w-xl mx-auto space-y-2'>
-              <h1 className='text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl'>
+              <h1 className='text-3xl font-extrabold text-gray-900 dark:text-gray-500 tracking-tight sm:text-4xl'>
                 <FormattedMessage id='alert.unexpected.message' defaultMessage='Something went wrong.' />
               </h1>
-              <p className='text-lg text-gray-500'>
+              <p className='text-lg text-gray-700 dark:text-gray-600'>
                 <FormattedMessage
                   id='alert.unexpected.body'
                   defaultMessage="We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out)."
-                  values={{ clearCookies: (
-                    <a href='/' onClick={this.clearCookies} className='text-gray-700 hover:underline'>
-                      <FormattedMessage
-                        id='alert.unexpected.clear_cookies'
-                        defaultMessage='clear cookies and browser data'
-                      />
-                    </a>
-                  ) }}
+                  values={{
+                    clearCookies: (
+                      <a href='/' onClick={this.clearCookies} className='text-primary-600 dark:text-accent-blue hover:underline'>
+                        <FormattedMessage
+                          id='alert.unexpected.clear_cookies'
+                          defaultMessage='clear cookies and browser data'
+                        />
+                      </a>
+                    ),
+                  }}
                 />
               </p>
 
@@ -153,7 +152,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
               </Text>
 
               <div className='mt-10'>
-                <a href='/' className='text-base font-medium text-primary-600 hover:text-primary-500'>
+                <a href='/' className='text-base font-medium text-primary-600 dark:text-accent-blue hover:underline'>
                   <FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
                   <span aria-hidden='true'> &rarr;</span>
                 </a>
@@ -165,7 +164,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
                 {errorText && (
                   <textarea
                     ref={this.setTextareaRef}
-                    className='h-48 p-4 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono'
+                    className='h-48 p-4 shadow-sm bg-gray-100 text-gray-900 dark:text-gray-100 dark:bg-gray-800 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 dark:border-gray-700 rounded-md font-mono'
                     value={errorText}
                     onClick={this.handleCopy}
                     readOnly
@@ -187,7 +186,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
           <nav className='flex justify-center space-x-4'>
             {links.get('status') && (
               <>
-                <a href={links.get('status')} className='text-sm font-medium text-gray-500 hover:text-gray-600'>
+                <a href={links.get('status')} className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'>
                   <FormattedMessage id='alert.unexpected.links.status' defaultMessage='Status' />
                 </a>
               </>
@@ -196,7 +195,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
             {links.get('help') && (
               <>
                 <span className='inline-block border-l border-gray-300' aria-hidden='true' />
-                <a href={links.get('help')} className='text-sm font-medium text-gray-500 hover:text-gray-600'>
+                <a href={links.get('help')} className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'>
                   <FormattedMessage id='alert.unexpected.links.help' defaultMessage='Help Center' />
                 </a>
               </>
@@ -205,7 +204,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
             {links.get('support') && (
               <>
                 <span className='inline-block border-l border-gray-300' aria-hidden='true' />
-                <a href={links.get('support')} className='text-sm font-medium text-gray-500 hover:text-gray-600'>
+                <a href={links.get('support')} className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'>
                   <FormattedMessage id='alert.unexpected.links.support' defaultMessage='Support' />
                 </a>
               </>
diff --git a/app/soapbox/components/hashtag.tsx b/app/soapbox/components/hashtag.tsx
index 6c1440c9b..0b0cc5bae 100644
--- a/app/soapbox/components/hashtag.tsx
+++ b/app/soapbox/components/hashtag.tsx
@@ -2,9 +2,6 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { useAppSelector } from 'soapbox/hooks';
-
 import { shortNumberFormat } from '../utils/numbers';
 
 import Permalink from './permalink';
@@ -18,7 +15,6 @@ interface IHashtag {
 
 const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
   const count = Number(hashtag.history?.get(0)?.accounts);
-  const brandColor = useAppSelector((state) => getSoapboxConfig(state).brandColor);
 
   return (
     <HStack alignItems='center' justifyContent='between' data-testid='hashtag'>
@@ -48,7 +44,7 @@ const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
             height={28}
             data={hashtag.history.reverse().map((day) => +day.uses).toArray()}
           >
-            <SparklinesCurve style={{ fill: 'none' }} color={brandColor} />
+            <SparklinesCurve style={{ fill: 'none' }} color='#818cf8' />
           </Sparklines>
         </div>
       )}
diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx
index 28be27373..f6dae6f61 100644
--- a/app/soapbox/components/landing-gradient.tsx
+++ b/app/soapbox/components/landing-gradient.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
-  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-900/50 via-white dark:via-slate-900 to-gradient-end/10 dark:to-slate-900/50' />
+  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-primary-900/50 via-white dark:via-primary-900 to-gradient-end/10 dark:to-primary-800/50' />
 );
 
 export default LandingGradient;
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 23ff05086..45e6c38c5 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -2,7 +2,10 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
+import { SelectDropdown } from '../features/forms';
+
 import Icon from './icon';
+import { Select } from './ui';
 
 const List: React.FC = ({ children }) => (
   <div className='space-y-0.5'>{children}</div>
@@ -22,36 +25,41 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
   const LabelComp = onClick ? 'span' : 'label';
   const linkProps = onClick ? { onClick } : {};
 
-  const renderChildren = React.useCallback(() =>
-    React.Children.map(children, (child) => {
+  const renderChildren = React.useCallback(() => {
+    return React.Children.map(children, (child) => {
       if (React.isValidElement(child)) {
+        const isSelect = child.type === SelectDropdown || child.type === Select;
+
         return React.cloneElement(child, {
           id: domId,
+          className: classNames({
+            'w-auto': isSelect,
+          }),
         });
       }
 
       return null;
-    })
-  , [children, domId]);
+    });
+  }, [children, domId]);
 
   return (
     <Comp
       className={classNames({
-        'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/10 to-gradient-end/10 dark:from-slate-900/25 dark:to-slate-900/50': true,
-        'cursor-pointer hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-slate-900/40 dark:hover:to-slate-900/75': typeof onClick !== 'undefined',
+        'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/10 to-gradient-end/10': true,
+        'cursor-pointer hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined',
       })}
       {...linkProps}
     >
       <div className='flex flex-col py-1.5 pr-4'>
-        <LabelComp className='text-black dark:text-white' htmlFor={domId}>{label}</LabelComp>
+        <LabelComp className='text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
 
         {hint ? (
-          <span className='text-sm text-gray-500 dark:text-gray-400'>{hint}</span>
+          <span className='text-sm text-gray-700 dark:text-gray-600'>{hint}</span>
         ) : null}
       </div>
 
       {onClick ? (
-        <div className='flex flex-row items-center text-gray-500 dark:text-gray-400'>
+        <div className='flex flex-row items-center text-gray-700 dark:text-gray-600'>
           {children}
 
           <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1' />
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 6d6882b9c..a49f4ab75 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -609,7 +609,7 @@ class MediaGallery extends React.PureComponent {
               />
             ) : (
               <button type='button' onClick={this.handleOpen} className='bg-transparent w-full h-full border-0'>
-                <div className='p-4 rounded-xl shadow-xl backdrop-blur-sm bg-white/75 dark:bg-slate-800/75 text-center inline-block space-y-4 max-w-[280px]'>
+                <div className='p-4 rounded-xl shadow-xl backdrop-blur-sm bg-white/75 dark:bg-gray-900/75 text-center inline-block space-y-4 max-w-[280px]'>
                   <div className='space-y-1'>
                     <Text weight='semibold'>{warning}</Text>
                     <Text size='sm'>
diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js
index 7eb25b9aa..bf7ecd2c6 100644
--- a/app/soapbox/components/modal_root.js
+++ b/app/soapbox/components/modal_root.js
@@ -68,7 +68,7 @@ class ModalRoot extends React.PureComponent {
 
   handleKeyUp = (e) => {
     if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
-         && !!this.props.children) {
+      && !!this.props.children) {
       this.handleOnClose();
     }
   }
@@ -212,7 +212,7 @@ class ModalRoot extends React.PureComponent {
         <div
           role='presentation'
           id='modal-overlay'
-          className='fixed inset-0 bg-gray-600 bg-opacity-90'
+          className='fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90'
           onClick={this.handleOnClose}
         />
 
diff --git a/app/soapbox/components/progress_circle.tsx b/app/soapbox/components/progress_circle.tsx
index aaa1fc4d0..6922bc68d 100644
--- a/app/soapbox/components/progress_circle.tsx
+++ b/app/soapbox/components/progress_circle.tsx
@@ -22,7 +22,7 @@ const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stro
         viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
       >
         <circle
-          className='stroke-gray-400'
+          className='stroke-gray-500 dark:stroke-white/20'
           cx={actualRadius}
           cy={actualRadius}
           r={radius}
@@ -30,8 +30,8 @@ const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stro
           strokeWidth={stroke}
         />
         <circle
-          className={classNames('stroke-primary-800', {
-            'stroke-danger-600': progress > 1,
+          className={classNames('stroke-primary-500', {
+            'stroke-secondary-500': progress > 1,
           })}
           style={{
             strokeDashoffset: dashoffset,
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index 5bd4effc4..832b1cef9 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -126,8 +126,8 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
     <Stack
       data-testid='quoted-status'
       space={2}
-      className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-slate-700 cursor-pointer', {
-        'hover:bg-gray-50 dark:hover:bg-slate-700': !compose,
+      className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-gray-800 cursor-pointer', {
+        'hover:bg-gray-50 dark:hover:bg-gray-800': !compose,
       })}
       onClick={handleExpandClick}
     >
diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 80bc57edd..0509c34ad 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -37,18 +37,16 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       ref={ref}
       onClick={handleClick}
       className={classNames({
-        'flex items-center p-3 text-sm font-semibold space-x-4 rounded-full group hover:bg-primary-200/80 dark:hover:bg-primary-900/60 hover:text-primary-600 dark:hover:text-gray-200': true,
-        'text-gray-500 dark:text-gray-400': !isActive,
-        'text-primary-600 dark:text-white': isActive,
+        'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rounded-full group text-gray-600 hover:text-primary-600 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-100 dark:hover:bg-primary-700': true,
+        'dark:text-gray-100 text-primary-600': isActive,
       })}
     >
       <span className='relative'>
         <Icon
           src={icon}
           count={count}
-          className={classNames({
-            'h-6 w-6 dark:group-hover:text-primary-500': true,
-            'dark:text-primary-500': isActive,
+          className={classNames('h-5 w-5 group-hover:text-primary-500', {
+            'text-primary-500': isActive,
           })}
         />
       </span>
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx
index ee7ee1adc..084506b89 100644
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@@ -8,13 +8,12 @@ import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
 import { getSettings } from 'soapbox/actions/settings';
 import { closeSidebar } from 'soapbox/actions/sidebar';
 import Account from 'soapbox/components/account';
-import SiteLogo from 'soapbox/components/site-logo';
 import { Stack } from 'soapbox/components/ui';
 import ProfileStats from 'soapbox/features/ui/components/profile_stats';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
 import { makeGetAccount, makeGetOtherAccounts } from 'soapbox/selectors';
 
-import { HStack, Icon, IconButton, Text } from './ui';
+import { Divider, HStack, Icon, IconButton, Text } from './ui';
 
 import type { List as ImmutableList } from 'immutable';
 import type { Account as AccountEntity } from 'soapbox/types/entities';
@@ -51,24 +50,24 @@ interface ISidebarLink {
 const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
   const body = (
     <HStack space={2} alignItems='center'>
-      <div className='bg-primary-50 dark:bg-slate-700 relative rounded inline-flex p-2'>
-        <Icon src={icon} className='text-primary-600 h-5 w-5' />
+      <div className='bg-primary-50 dark:bg-gray-800 relative rounded-full inline-flex p-2'>
+        <Icon src={icon} className='text-primary-500 h-5 w-5' />
       </div>
 
-      <Text tag='span' weight='medium' theme='muted' className='group-hover:text-gray-800 dark:group-hover:text-gray-200'>{text}</Text>
+      <Text tag='span' weight='medium' theme='inherit'>{text}</Text>
     </HStack>
   );
 
   if (to) {
     return (
-      <NavLink className='group py-1 rounded-md' to={to} onClick={onClick}>
+      <NavLink className='group rounded-full text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800' to={to} onClick={onClick}>
         {body}
       </NavLink>
     );
   }
 
   return (
-    <a className='group py-1 rounded-md' href={href} target='_blank' onClick={onClick}>
+    <a className='group rounded-full text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800' href={href} target='_blank' onClick={onClick}>
       {body}
     </a>
   );
@@ -139,72 +138,37 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
     >
       <div
         className={classNames({
-          'fixed inset-0 bg-gray-600 bg-opacity-90 z-1000': true,
+          'fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90 z-1000': true,
           'hidden': !sidebarOpen,
         })}
         role='button'
         onClick={handleClose}
-      />
+      >
+        <IconButton
+          title='close'
+          onClick={handleClose}
+          src={require('@tabler/icons/x.svg')}
+          ref={closeButtonRef}
+          iconClassName='h-6 w-6'
+          className='fixed top-5 right-5 text-gray-600 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+        />
+      </div>
 
       <div className='sidebar-menu'>
         <div className='relative overflow-y-scroll overflow-auto h-full w-full'>
           <div className='p-4'>
             <Stack space={4}>
-              <HStack alignItems='center' justifyContent='between'>
-                <Link to='/' onClick={onClose}>
-                  <SiteLogo alt='Logo' className='h-5 w-auto cursor-pointer' />
-                </Link>
-
-                <IconButton
-                  title='close'
-                  onClick={handleClose}
-                  src={require('@tabler/icons/x.svg')}
-                  ref={closeButtonRef}
-                  className='text-gray-400 hover:text-gray-600'
-                />
-              </HStack>
-
-              <Stack space={1}>
-                <Link to={`/@${account.acct}`} onClick={onClose}>
-                  <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
-                </Link>
-
-                <Stack>
-                  <button type='button' onClick={handleSwitcherClick} className='py-1'>
-                    <HStack alignItems='center' justifyContent='between'>
-                      <Text tag='span' size='sm' weight='medium'>
-                        <FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
-                      </Text>
-
-                      <Icon
-                        src={require('@tabler/icons/chevron-down.svg')}
-                        className={classNames('text-black dark:text-white transition-transform', {
-                          'rotate-180': switcher,
-                        })}
-                      />
-                    </HStack>
-                  </button>
-
-                  {switcher && (
-                    <div className='border-t border-solid border-gray-200'>
-                      {otherAccounts.map(account => renderAccount(account))}
-
-                      <NavLink className='flex py-2 space-x-1' to='/login/add' onClick={handleClose}>
-                        <Icon className='dark:text-white' src={require('@tabler/icons/plus.svg')} />
-                        <Text>{intl.formatMessage(messages.addAccount)}</Text>
-                      </NavLink>
-                    </div>
-                  )}
-                </Stack>
-              </Stack>
+              <Link to={`/@${account.acct}`} onClick={onClose}>
+                <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
+              </Link>
 
               <ProfileStats
                 account={account}
                 onClickHandler={handleClose}
               />
 
-              <Stack space={2}>
-                <hr />
+              <Stack space={4}>
+                <Divider />
 
                 <SidebarLink
                   to={`/@${account.acct}`}
@@ -241,7 +205,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 )}
 
                 {features.publicTimeline && <>
-                  <hr className='dark:border-slate-700' />
+                  <Divider />
 
                   <SidebarLink
                     to='/timeline/local'
@@ -260,7 +224,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   )}
                 </>}
 
-                <hr />
+                <Divider />
 
                 <SidebarLink
                   to='/blocks'
@@ -319,7 +283,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   />
                 )}
 
-                <hr />
+                <Divider />
 
                 <SidebarLink
                   to='/logout'
@@ -327,6 +291,36 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   text={intl.formatMessage(messages.logout)}
                   onClick={onClickLogOut}
                 />
+
+                <Divider />
+
+                <Stack space={4}>
+                  <button type='button' onClick={handleSwitcherClick} className='py-1'>
+                    <HStack alignItems='center' justifyContent='between'>
+                      <Text tag='span'>
+                        <FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
+                      </Text>
+
+                      <Icon
+                        src={require('@tabler/icons/chevron-down.svg')}
+                        className={classNames('w-4 h-4 text-gray-900 dark:text-gray-100 transition-transform', {
+                          'rotate-180': switcher,
+                        })}
+                      />
+                    </HStack>
+                  </button>
+
+                  {switcher && (
+                    <div className='border-t-2 border-gray-100 dark:border-gray-800 border-solid'>
+                      {otherAccounts.map(account => renderAccount(account))}
+
+                      <NavLink className='flex items-center py-2 space-x-1' to='/login/add' onClick={handleClose}>
+                        <Icon className='text-primary-500 w-4 h-4' src={require('@tabler/icons/plus.svg')} />
+                        <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
+                      </NavLink>
+                    </div>
+                  )}
+                </Stack>
               </Stack>
             </Stack>
           </div>
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index 0e837168d..1a625b5a1 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@@ -43,7 +43,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
       type='button'
       className={classNames(
         'flex items-center p-1 space-x-0.5 rounded-full',
-        'text-gray-400 hover:text-gray-600 dark:hover:text-white',
+        'text-gray-600 hover:text-gray-600 dark:hover:text-white',
         'bg-white dark:bg-transparent',
         'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
         {
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 1f1be8b74..e3dce38f5 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -361,7 +361,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         <NavLink
           to={`/@${status.getIn(['account', 'acct'])}`}
           onClick={(event) => event.stopPropagation()}
-          className='hidden sm:flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
+          className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
         >
           <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
@@ -384,7 +384,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
           <NavLink
             to={`/@${status.getIn(['account', 'acct'])}`}
             onClick={(event) => event.stopPropagation()}
-            className='flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
+            className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
           >
             <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx
index 138654b3f..75d969868 100644
--- a/app/soapbox/components/status_content.tsx
+++ b/app/soapbox/components/status_content.tsx
@@ -46,7 +46,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ onClick, hidden, tabIndex })
     tabIndex={tabIndex}
     className={classNames(
       'inline-block rounded-md px-1.5 py-0.5 ml-[0.5em]',
-      'text-black dark:text-white',
+      'text-gray-900 dark:text-gray-100',
       'font-bold text-[11px] uppercase',
       'bg-primary-100 dark:bg-primary-900',
       'hover:bg-primary-300 dark:hover:bg-primary-600',
@@ -279,7 +279,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
       output.push(<Poll id={status.poll} key='poll' status={status.url} />);
     }
 
-    return <div className={classNames({ 'bg-gray-100 dark:bg-primary-900 rounded-md p-4': hasPoll })}>{output}</div>;
+    return <div className={classNames({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</div>;
   } else {
     const output = [
       <div
diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx
index 408506997..05cbd036f 100644
--- a/app/soapbox/components/status_list.tsx
+++ b/app/soapbox/components/status_list.tsx
@@ -206,7 +206,7 @@ const StatusList: React.FC<IStatusList> = ({
       placeholderComponent={PlaceholderStatus}
       placeholderCount={20}
       ref={node}
-      className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
+      className={classNames('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
         'divide-none': divideType !== 'border',
       })}
       itemClassName={classNames({
diff --git a/app/soapbox/components/thumb_navigation-link.tsx b/app/soapbox/components/thumb_navigation-link.tsx
index 4e96260a0..1a6fa2ea5 100644
--- a/app/soapbox/components/thumb_navigation-link.tsx
+++ b/app/soapbox/components/thumb_navigation-link.tsx
@@ -19,7 +19,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, src, text,
 
   const isActive = (): boolean => {
     if (paths) {
-      return paths.some(path =>  pathname.startsWith(path));
+      return paths.some(path => pathname.startsWith(path));
     } else {
       return exact ? pathname === to : pathname.startsWith(to);
     }
@@ -34,8 +34,8 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, src, text,
           src={src}
           className={classNames({
             'h-5 w-5': true,
-            'text-gray-600 dark:text-gray-300': !active,
-            'text-primary-600': active,
+            'text-gray-600': !active,
+            'text-primary-500': active,
           })}
           count={count}
         />
@@ -44,13 +44,21 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, src, text,
           src={src}
           className={classNames({
             'h-5 w-5': true,
-            'text-gray-600 dark:text-gray-300': !active,
-            'text-primary-600': active,
+            'text-gray-600': !active,
+            'text-primary-500': active,
           })}
         />
       )}
 
-      <Text tag='span' size='xs'>
+      <Text
+        tag='span'
+        size='xs'
+        weight='medium'
+        className={classNames({
+          'text-gray-600': !active,
+          'text-primary-500': active,
+        })}
+      >
         {text}
       </Text>
     </NavLink>
diff --git a/app/soapbox/components/tombstone.tsx b/app/soapbox/components/tombstone.tsx
index c35da4b17..3a1c0ae4b 100644
--- a/app/soapbox/components/tombstone.tsx
+++ b/app/soapbox/components/tombstone.tsx
@@ -19,7 +19,7 @@ const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown }) => {
 
   return (
     <HotKeys handlers={handlers}>
-      <div className='p-9 flex items-center justify-center sm:rounded-xl bg-gray-100 border border-solid border-gray-200 dark:bg-slate-900 dark:border-slate-700 focusable' tabIndex={0}>
+      <div className='p-9 flex items-center justify-center sm:rounded-xl bg-gray-100 border border-solid border-gray-200 dark:bg-gray-900 dark:border-gray-800 focusable' tabIndex={0}>
         <Text>
           <FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts are unavailable.' />
         </Text>
diff --git a/app/soapbox/components/ui/banner/banner.tsx b/app/soapbox/components/ui/banner/banner.tsx
index 527509310..fa1cd0b44 100644
--- a/app/soapbox/components/ui/banner/banner.tsx
+++ b/app/soapbox/components/ui/banner/banner.tsx
@@ -13,8 +13,8 @@ const Banner: React.FC<IBanner> = ({ theme, children, className }) => {
     <div
       data-testid='banner'
       className={classNames('fixed bottom-0 left-0 right-0 py-8 z-50', {
-        'backdrop-blur bg-primary-900/80': theme === 'frosted',
-        'bg-white dark:bg-slate-800 text-black dark:text-white shadow-3xl dark:shadow-inset': theme === 'opaque',
+        'backdrop-blur bg-primary-800/80 dark:bg-primary-900/80': theme === 'frosted',
+        'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-3xl dark:shadow-inset': theme === 'opaque',
       }, className)}
     >
       <div className='max-w-4xl mx-auto px-4'>
diff --git a/app/soapbox/components/ui/button/__tests__/button.test.tsx b/app/soapbox/components/ui/button/__tests__/button.test.tsx
index ca1867cfe..8d1f65ec9 100644
--- a/app/soapbox/components/ui/button/__tests__/button.test.tsx
+++ b/app/soapbox/components/ui/button/__tests__/button.test.tsx
@@ -55,9 +55,9 @@ describe('<Button />', () => {
   });
 
   it('handles Theme properly', () => {
-    render(<Button theme='secondary' />);
+    render(<Button theme='tertiary' />);
 
-    expect(screen.getByRole('button')).toHaveClass('bg-primary-100');
+    expect(screen.getByRole('button')).toHaveClass('bg-transparent border-gray-400');
   });
 
   describe('to prop', () => {
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index f98535166..15826ff2d 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -44,7 +44,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     onClick,
     size = 'md',
     text,
-    theme = 'accent',
+    theme = 'secondary',
     to,
     type = 'button',
   } = props;
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 6f26d8be1..02daf32c1 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'transparent' | 'link' | 'danger-link'
+type ButtonThemes = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'transparent'
 type ButtonSizes = 'sm' | 'md' | 'lg'
 
 type IButtonStyles = {
@@ -19,15 +19,14 @@ const useButtonStyles = ({
 }: IButtonStyles) => {
   const themes = {
     primary:
-      'border-primary-600 text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
+      'bg-primary-500 hover:bg-primary-400 dark:hover:bg-primary-600 border-transparent focus:bg-primary-500 text-gray-100 focus:ring-primary-300',
     secondary:
-      'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
-    ghost: 'shadow-none border-gray-200 text-gray-700 bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
-    accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2',
-    danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2',
-    'danger-link': 'border-transparent text-accent-500 hover:bg-accent-500 hover:bg-opacity-10',
+      'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200',
+    tertiary:
+      'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
+    accent: 'border-transparent bg-secondary-500 hover:bg-secondary-300 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
+    danger: 'border-transparent bg-danger-600 text-gray-100 hover:bg-danger-500 dark:hover:bg-danger-700 focus:bg-danger-600 dark:focus:bg-danger-600',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
-    link: 'border-transparent text-primary-600 dark:text-primary-400 hover:bg-primary-100 hover:text-primary-700 dark:hover:bg-slate-900/50',
   };
 
   const sizes = {
@@ -38,8 +37,8 @@ const useButtonStyles = ({
   };
 
   const buttonStyle = classNames({
-    'inline-flex items-center border font-medium rounded-full focus:outline-none appearance-none transition-all': true,
-    'select-none disabled:opacity-50 disabled:cursor-default': disabled,
+    'inline-flex items-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all': true,
+    'select-none disabled:opacity-75 disabled:cursor-default': disabled,
     [`${themes[theme]}`]: true,
     [`${sizes[size]}`]: true,
     'flex w-full justify-center': block,
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index f60ec2ac8..4c4b8baaa 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -34,7 +34,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant, size
     {...filteredProps}
     className={classNames({
       'space-y-4': true,
-      'bg-white dark:bg-slate-800 text-black dark:text-white shadow-lg dark:shadow-inset overflow-hidden': variant === 'rounded',
+      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
     }, className)}
   >
diff --git a/app/soapbox/components/ui/checkbox/checkbox.tsx b/app/soapbox/components/ui/checkbox/checkbox.tsx
index 3199d4a33..028c52296 100644
--- a/app/soapbox/components/ui/checkbox/checkbox.tsx
+++ b/app/soapbox/components/ui/checkbox/checkbox.tsx
@@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
       {...props}
       ref={ref}
       type='checkbox'
-      className='dark:bg-slate-800 dark:border-gray-600 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'
+      className='border-2 dark:bg-gray-900 dark:border-gray-800 focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded'
     />
   );
 });
diff --git a/app/soapbox/components/ui/counter/counter.tsx b/app/soapbox/components/ui/counter/counter.tsx
index 46d192419..65f1a83ce 100644
--- a/app/soapbox/components/ui/counter/counter.tsx
+++ b/app/soapbox/components/ui/counter/counter.tsx
@@ -10,7 +10,7 @@ interface ICounter {
 /** A simple counter for notifications, etc. */
 const Counter: React.FC<ICounter> = ({ count }) => {
   return (
-    <span className='block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white dark:ring-slate-800'>
+    <span className='block px-1.5 py-0.5 bg-secondary-500 text-xs text-white rounded-full ring-2 ring-white dark:ring-gray-800'>
       {shortNumberFormat(count)}
     </span>
   );
diff --git a/app/soapbox/components/ui/divider/divider.tsx b/app/soapbox/components/ui/divider/divider.tsx
index 0670be123..033f139ae 100644
--- a/app/soapbox/components/ui/divider/divider.tsx
+++ b/app/soapbox/components/ui/divider/divider.tsx
@@ -8,7 +8,7 @@ interface IDivider {
 const Divider = ({ text }: IDivider) => (
   <div className='relative' data-testid='divider'>
     <div className='absolute inset-0 flex items-center' aria-hidden='true'>
-      <div className='w-full border-t-2 border-gray-100 dark:border-slate-700 border-solid' />
+      <div className='w-full border-t-2 border-gray-100 dark:border-gray-800 border-solid' />
     </div>
 
     {text && (
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index e17f2a1d4..659f72fd3 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -48,7 +48,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
   return (
     <HStack
       space={2}
-      className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md z-[999] w-max')}
+      className={classNames('bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max')}
     >
       {Array.from(emojis).map((emoji, i) => (
         <EmojiButton
diff --git a/app/soapbox/components/ui/file-input/file-input.tsx b/app/soapbox/components/ui/file-input/file-input.tsx
index 1f37f9279..f54f20ae8 100644
--- a/app/soapbox/components/ui/file-input/file-input.tsx
+++ b/app/soapbox/components/ui/file-input/file-input.tsx
@@ -8,7 +8,7 @@ const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
       {...props}
       ref={ref}
       type='file'
-      className='block w-full text-sm text-gray-800 dark:text-slate-200 file:cursor-pointer file:mr-2 file:py-1.5 file:px-3 file:rounded-full file:text-xs file:leading-4 file:font-medium file:border-gray-200 file:border file:border-solid file:bg-white file:text-gray-700 hover:file:bg-gray-100 dark:file:border-slate-700 dark:file:bg-slate-800 dark:file:text-slate-200'
+      className='block w-full text-sm text-gray-800 dark:text-gray-200 file:cursor-pointer file:mr-2 file:py-1.5 file:px-3 file:rounded-full file:text-xs file:leading-4 file:font-medium file:border-gray-200 file:border file:border-solid file:bg-white file:text-gray-700 hover:file:bg-gray-100 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:hover:bg-gray-800 dark:file:text-gray-500'
     />
   );
 });
diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index ec0da73e4..d93ed6ea8 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -42,7 +42,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
             <label
               htmlFor={formFieldId}
               data-testid='form-group-label'
-              className='-mt-0.5 block text-sm font-medium text-gray-700 dark:text-gray-400'
+              className='-mt-0.5 block text-sm font-medium text-gray-900 dark:text-gray-100'
               title={labelTitle}
             >
               {labelText}
@@ -61,7 +61,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
           )}
 
           {hintText && (
-            <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-400'>
+            <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-700 dark:text-gray-600'>
               {hintText}
             </p>
           )}
@@ -76,7 +76,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         <label
           htmlFor={formFieldId}
           data-testid='form-group-label'
-          className='block text-sm font-medium text-gray-700 dark:text-gray-400'
+          className='block text-sm font-medium text-gray-900 dark:text-gray-100'
           title={labelTitle}
         >
           {labelText}
@@ -97,7 +97,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         )}
 
         {hintText && (
-          <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-400'>
+          <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-700 dark:text-gray-600'>
             {hintText}
           </p>
         )}
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index aa317b6ea..352c7a92c 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -33,7 +33,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
       <SvgIcon src={src} className={iconClassName} />
 
       {text ? (
-        <Text tag='span' theme='muted' size='sm'>
+        <Text tag='span' theme='inherit' size='sm'>
           {text}
         </Text>
       ) : null}
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 9a4785c7b..03a5630d1 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -57,7 +57,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
       <div className={classNames('mt-1 relative rounded-md shadow-sm', outerClassName)}>
         {icon ? (
           <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
-            <Icon src={icon} className='h-4 w-4 text-gray-400' aria-hidden='true' />
+            <Icon src={icon} className='h-4 w-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
           </div>
         ) : null}
 
@@ -72,7 +72,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           type={revealed ? 'text' : type}
           ref={ref}
           className={classNames({
-            'dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary-500 focus:border-primary-500':
+            'bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 rounded-md focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
               true,
             'pr-7': isPassword,
             'text-red-600 border-red-600': hasError,
@@ -94,7 +94,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 type='button'
                 onClick={togglePassword}
                 tabIndex={-1}
-                className='text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2'
+                className='text-gray-700 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2'
               >
                 <SvgIcon
                   src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
diff --git a/app/soapbox/components/ui/menu/menu.css b/app/soapbox/components/ui/menu/menu.css
index 21f916508..d1b9d1a0e 100644
--- a/app/soapbox/components/ui/menu/menu.css
+++ b/app/soapbox/components/ui/menu/menu.css
@@ -1,5 +1,5 @@
 [data-reach-menu-popover] {
-  @apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-slate-900 ring-1 ring-black ring-opacity-5 focus:outline-none;
+  @apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-900 dark:ring-2 dark:ring-primary-700 focus:outline-none;
 
   z-index: 1003;
 }
@@ -13,7 +13,7 @@ div:focus[data-reach-menu-list] {
 }
 
 [data-reach-menu-item][data-selected] {
-  @apply bg-gray-100 dark:bg-slate-700;
+  @apply bg-gray-100 dark:bg-gray-800;
 }
 
 [data-reach-menu-list] {
@@ -22,11 +22,11 @@ div:focus[data-reach-menu-list] {
 
 [data-reach-menu-item],
 [data-reach-menu-link] {
-  @apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 cursor-pointer;
+  @apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 cursor-pointer;
 }
 
 [data-reach-menu-link] {
-  @apply hover:bg-gray-100 dark:hover:bg-slate-700;
+  @apply hover:bg-gray-100 dark:hover:bg-gray-800;
 }
 
 [data-reach-menu-item][data-disabled],
@@ -35,5 +35,5 @@ div:focus[data-reach-menu-list] {
 }
 
 [data-reach-menu-popover] hr {
-  @apply my-1 mx-2 border-t border-gray-100 dark:border-slate-700;
+  @apply my-1 mx-2 border-t-2 border-gray-100 dark:border-gray-800;
 }
diff --git a/app/soapbox/components/ui/menu/menu.tsx b/app/soapbox/components/ui/menu/menu.tsx
index b7d265e7f..91f3369a7 100644
--- a/app/soapbox/components/ui/menu/menu.tsx
+++ b/app/soapbox/components/ui/menu/menu.tsx
@@ -22,7 +22,7 @@ const MenuList: React.FC<IMenuList> = (props) => (
   <MenuPopover position={props.position === 'left' ? positionDefault : positionRight}>
     <MenuItems
       onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
-      className='py-1 bg-white dark:bg-slate-900 rounded-lg shadow-menu'
+      className='py-1 bg-white dark:bg-primary-900 rounded-lg shadow-menu'
       {...props}
     />
   </MenuPopover>
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 259783539..654ad9e7b 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -83,7 +83,7 @@ const Modal: React.FC<IModal> = ({
   }, [skipFocus, buttonRef]);
 
   return (
-    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
+    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-left align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           {title && (
@@ -92,7 +92,7 @@ const Modal: React.FC<IModal> = ({
                 'flex-row-reverse': closePosition === 'left',
               })}
             >
-              <h3 className='flex-grow text-lg leading-6 font-medium text-gray-900 dark:text-white'>
+              <h3 className='flex-grow text-lg leading-6 font-bold text-gray-900 dark:text-white'>
                 {title}
               </h3>
 
@@ -120,7 +120,7 @@ const Modal: React.FC<IModal> = ({
           <div className='flex-grow'>
             {cancelAction && (
               <Button
-                theme='ghost'
+                theme='tertiary'
                 onClick={cancelAction}
               >
                 {cancelText || 'Cancel'}
diff --git a/app/soapbox/components/ui/progress-bar/progress-bar.tsx b/app/soapbox/components/ui/progress-bar/progress-bar.tsx
index a4fcd84c9..5feadf0a3 100644
--- a/app/soapbox/components/ui/progress-bar/progress-bar.tsx
+++ b/app/soapbox/components/ui/progress-bar/progress-bar.tsx
@@ -6,8 +6,8 @@ interface IProgressBar {
 
 /** A horizontal meter filled to the given percentage. */
 const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
-  <div className='h-2.5 w-full rounded-full bg-gray-100 dark:bg-slate-900/50 overflow-hidden'>
-    <div className='h-full bg-accent-500' style={{ width: `${Math.floor(progress * 100)}%` }} />
+  <div className='h-2.5 w-full rounded-full bg-gray-300 dark:bg-primary-800 overflow-hidden'>
+    <div className='h-full bg-secondary-500' style={{ width: `${Math.floor(progress * 100)}%` }} />
   </div>
 );
 
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index f79d71ddd..b8d05b79d 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -6,12 +6,12 @@ interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
 
 /** Multiple-select dropdown. */
 const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
-  const { children, ...filteredProps } = props;
+  const { children, className, ...filteredProps } = props;
 
   return (
     <select
       ref={ref}
-      className='w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:text-white sm:text-sm rounded-md disabled:opacity-50'
+      className={`w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-800 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:ring-primary-500 dark:focus:border-primary-500 sm:text-sm rounded-md disabled:opacity-50 ${className}`}
       {...filteredProps}
     >
       {children}
diff --git a/app/soapbox/components/ui/spinner/spinner.css b/app/soapbox/components/ui/spinner/spinner.css
index f048ee7fc..70ce8ac90 100644
--- a/app/soapbox/components/ui/spinner/spinner.css
+++ b/app/soapbox/components/ui/spinner/spinner.css
@@ -14,7 +14,7 @@
 }
 
 .spinner > div::after {
-  @apply block absolute rounded-full bg-gray-600;
+  @apply block absolute rounded-full bg-gray-700 dark:bg-gray-400;
   content: ' ';
   top: 3.75%;
   left: 46.25%;
diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index 140a194b6..b161a1a6d 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -89,7 +89,7 @@ const Streamfield: React.FC<IStreamfield> = ({
           icon={require('@tabler/icons/plus.svg')}
           onClick={onAddItem}
           disabled={values.length >= maxItems}
-          theme='ghost'
+          theme='secondary'
           block
         >
           {intl.formatMessage(messages.add)}
diff --git a/app/soapbox/components/ui/tabs/tabs.css b/app/soapbox/components/ui/tabs/tabs.css
index ee2b5cccb..95f06f2dc 100644
--- a/app/soapbox/components/ui/tabs/tabs.css
+++ b/app/soapbox/components/ui/tabs/tabs.css
@@ -12,11 +12,11 @@
 
 [data-reach-tab] {
   @apply flex-1 flex justify-center items-center
-  py-4 px-1 text-center font-medium text-sm text-gray-500
-  dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200
-  focus:ring-primary-500 focus:ring-2;
+  py-4 px-1 text-center font-medium text-sm text-gray-700
+  dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500
+  focus:ring-primary-300 focus:ring-2;
 }
 
 [data-reach-tab][data-selected] {
-  @apply text-gray-900 dark:text-white;
+  @apply text-gray-900 dark:text-gray-100;
 }
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 1a4b0da31..1222aaa38 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -45,11 +45,11 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
         ref={ref}
       >
         <div
-          className='w-full h-[3px] bg-primary-200 dark:bg-slate-700 absolute'
+          className='w-full h-[3px] bg-primary-200 dark:bg-primary-700 absolute'
           style={{ top }}
         />
         <div
-          className={classNames('absolute h-[3px] bg-primary-600 transition-all duration-200', {
+          className={classNames('absolute h-[3px] bg-primary-500 transition-all duration-200', {
             'hidden': top <= 0,
           })}
           style={{ left, top, width }}
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 340b55dde..087893076 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -14,8 +14,8 @@ type Directions = 'ltr' | 'rtl'
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
   danger: 'text-danger-600',
-  primary: 'text-primary-600 dark:text-primary-400',
-  muted: 'text-gray-500 dark:text-gray-300',
+  primary: 'text-primary-600 dark:text-accent-blue',
+  muted: 'text-gray-700 dark:text-gray-600',
   subtle: 'text-gray-400 dark:text-gray-500',
   success: 'text-success-600',
   inherit: 'text-inherit',
@@ -32,7 +32,7 @@ const weights = {
 const sizes = {
   xs: 'text-xs',
   sm: 'text-sm',
-  md: 'text-base',
+  md: 'text-base leading-5',
   lg: 'text-lg',
   xl: 'text-xl',
   '2xl': 'text-2xl',
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index aef6804f6..5ba1a523c 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -28,8 +28,8 @@ const Textarea = React.forwardRef(
         {...props}
         ref={ref}
         className={classNames({
-          'dark:bg-slate-800 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md':
-              true,
+          'bg-white dark:bg-transparent shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+            true,
           'font-mono': isCodeEditor,
           'text-red-600 border-red-600': hasError,
         })}
diff --git a/app/soapbox/components/ui/tooltip/tooltip.css b/app/soapbox/components/ui/tooltip/tooltip.css
index 9e4addd1f..670571c8b 100644
--- a/app/soapbox/components/ui/tooltip/tooltip.css
+++ b/app/soapbox/components/ui/tooltip/tooltip.css
@@ -3,10 +3,10 @@
 }
 
 [data-reach-tooltip] {
-  @apply pointer-events-none absolute px-2.5 py-1.5 rounded shadow whitespace-nowrap text-xs font-medium bg-gray-800 text-white;
+  @apply pointer-events-none absolute px-2.5 py-1.5 rounded shadow whitespace-nowrap text-xs font-medium bg-gray-800 text-gray-100 dark:bg-gray-100 dark:text-gray-900;
   z-index: 100;
 }
 
 [data-reach-tooltip-arrow] {
-  @apply absolute z-50 w-0 h-0 border-l-8 border-solid border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800;
+  @apply absolute z-50 w-0 h-0 border-l-8 border-solid border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-100;
 }
diff --git a/app/soapbox/components/validation-checkmark.tsx b/app/soapbox/components/validation-checkmark.tsx
index e606f450b..634634866 100644
--- a/app/soapbox/components/validation-checkmark.tsx
+++ b/app/soapbox/components/validation-checkmark.tsx
@@ -15,7 +15,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
         src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')}
         className={classNames({
           'w-4 h-4': true,
-          'text-gray-400 fill-gray-400': !isValid,
+          'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,
           'text-success-500': isValid,
         })}
       />
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 603663aa7..f145ef890 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -255,7 +255,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   const darkMode = useTheme() === 'dark';
   const themeCss = generateThemeCss(soapboxConfig);
 
-  const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
+  const bodyClass = classNames('bg-white dark:bg-gray-800 text-base h-full', {
     'no-reduce-motion': !settings.get('reduceMotion'),
     'underline-links': settings.get('underlineLinks'),
     'dyslexic': settings.get('dyslexicFont'),
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 9e81ea54f..d5940d85c 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -515,8 +515,8 @@ class Header extends ImmutablePureComponent {
           src={require('@tabler/icons/mail.svg')}
           onClick={this.props.onDirect}
           title={intl.formatMessage(messages.direct, { name: account.get('username') })}
-          className='text-primary-700 bg-primary-100 hover:bg-primary-200 p-2'
-          iconClassName='w-5 h-5'
+          className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+          iconClassName='w-4 h-4'
         />
       );
     }
@@ -535,8 +535,8 @@ class Header extends ImmutablePureComponent {
         src={require('@tabler/icons/upload.svg')}
         onClick={this.handleShare}
         title={intl.formatMessage(messages.share, { name: account.get('username') })}
-        className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
-        iconClassName='w-5 h-5'
+        className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+        iconClassName='w-4 h-4'
       />
     );
   }
@@ -548,14 +548,14 @@ class Header extends ImmutablePureComponent {
       return (
         <div className='-mt-4 -mx-4'>
           <div>
-            <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-slate-900/50' />
+            <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50' />
           </div>
 
           <div className='px-4 sm:px-6'>
             <div className='-mt-12 flex items-end space-x-5'>
               <div className='flex relative'>
                 <div
-                  className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white dark:ring-slate-800'
+                  className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white dark:ring-gray-800'
                 />
               </div>
             </div>
@@ -571,7 +571,7 @@ class Header extends ImmutablePureComponent {
     return (
       <div className='-mt-4 -mx-4'>
         <div>
-          <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-slate-900/50'>
+          <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50'>
             {header && (
               <a href={account.get('header')} onClick={this.handleHeaderClick} target='_blank'>
                 <StillImage
@@ -596,7 +596,7 @@ class Header extends ImmutablePureComponent {
               <a href={account.get('avatar')} onClick={this.handleAvatarClick} target='_blank'>
                 <Avatar
                   account={account}
-                  className='h-24 w-24 rounded-full ring-4 ring-white dark:ring-slate-800'
+                  className='h-24 w-24 rounded-full ring-4 ring-white dark:ring-primary-900'
                 />
               </a>
             </div>
@@ -610,8 +610,8 @@ class Header extends ImmutablePureComponent {
                     <MenuButton
                       as={IconButton}
                       src={require('@tabler/icons/dots.svg')}
-                      className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
-                      iconClassName='w-5 h-5'
+                      className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+                      iconClassName='w-4 h-4'
                     />
 
                     <MenuList>
diff --git a/app/soapbox/features/admin/index.tsx b/app/soapbox/features/admin/index.tsx
index 84f72eda8..46a146c9f 100644
--- a/app/soapbox/features/admin/index.tsx
+++ b/app/soapbox/features/admin/index.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Switch, Route } from 'react-router-dom';
 
+import { Column } from 'soapbox/components/ui';
 import { useOwnAccount } from 'soapbox/hooks';
 
-import Column from '../ui/components/column';
-
 import AdminTabs from './components/admin-tabs';
 import Waitlist from './tabs/awaiting-approval';
 import Dashboard from './tabs/dashboard';
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 4d2a55a6a..4c2bf4b6b 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -45,7 +45,7 @@ const Search: React.FC = () => {
         <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
 
         <input
-          className='block w-full sm:text-sm dark:bg-slate-800 dark:text-white dark:placeholder:text-gray-500 focus:ring-indigo-500 focus:border-indigo-500 rounded-full'
+          className='block w-full sm:text-sm dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 focus:ring-primary-500 focus:border-primary-500 rounded-full'
           type='text'
           value={value}
           onChange={handleChange}
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index 21eb1a8b5..08653110d 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -54,7 +54,7 @@ const AuthLayout = () => {
             {shouldShowRegisterLink && (
               <div className='relative z-10 ml-auto flex items-center'>
                 <Button
-                  theme='link'
+                  theme='tertiary'
                   icon={require('@tabler/icons/user.svg')}
                   to='/signup'
                 >
diff --git a/app/soapbox/features/auth_login/components/login_form.tsx b/app/soapbox/features/auth_login/components/login_form.tsx
index ae07d8e97..9e8b1dc35 100644
--- a/app/soapbox/features/auth_login/components/login_form.tsx
+++ b/app/soapbox/features/auth_login/components/login_form.tsx
@@ -25,7 +25,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
       </div>
 
diff --git a/app/soapbox/features/auth_token_list/index.tsx b/app/soapbox/features/auth_token_list/index.tsx
index 458d8448b..5e1c054e3 100644
--- a/app/soapbox/features/auth_token_list/index.tsx
+++ b/app/soapbox/features/auth_token_list/index.tsx
@@ -24,7 +24,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token }) => {
   };
 
   return (
-    <div className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
+    <div className='p-4 rounded-lg bg-gray-100 dark:bg-gray-700'>
       <Stack space={2}>
         <Stack>
           <Text size='md' weight='medium'>{token.app_name}</Text>
diff --git a/app/soapbox/features/compose/components/compose_form_button.tsx b/app/soapbox/features/compose/components/compose_form_button.tsx
index da28d6618..975a89c41 100644
--- a/app/soapbox/features/compose/components/compose_form_button.tsx
+++ b/app/soapbox/features/compose/components/compose_form_button.tsx
@@ -21,7 +21,12 @@ const ComposeFormButton: React.FC<IComposeFormButton> = ({
   return (
     <div>
       <IconButton
-        className={classNames('text-gray-400 hover:text-gray-600', { 'text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300': active })}
+        className={
+          classNames({
+            'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !active,
+            'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': active,
+          })
+        }
         src={icon}
         title={title}
         disabled={disabled}
diff --git a/app/soapbox/features/compose/components/emoji_picker_dropdown.js b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
index 8ff75566f..aa24d2644 100644
--- a/app/soapbox/features/compose/components/emoji_picker_dropdown.js
+++ b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
@@ -312,7 +312,7 @@ class EmojiPickerDropdown extends React.PureComponent {
 
       EmojiPickerAsync().then(EmojiMart => {
         EmojiPicker = EmojiMart.Picker;
-        Emoji       = EmojiMart.Emoji;
+        Emoji = EmojiMart.Emoji;
 
         this.setState({ loading: false });
       }).catch(() => {
@@ -371,7 +371,7 @@ class EmojiPickerDropdown extends React.PureComponent {
         >
           {button || <IconButton
             className={classNames({
-              'text-gray-400 hover:text-gray-600': true,
+              'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
               'pulse-loading': active && loading,
             })}
             alt='😀'
diff --git a/app/soapbox/features/compose/components/polls/poll-form.tsx b/app/soapbox/features/compose/components/polls/poll-form.tsx
index 4f427dfcd..9cf727081 100644
--- a/app/soapbox/features/compose/components/polls/poll-form.tsx
+++ b/app/soapbox/features/compose/components/polls/poll-form.tsx
@@ -79,7 +79,7 @@ const Option = (props: IOption) => {
         </div>
 
         <AutosuggestInput
-          className='rounded-md'
+          className='rounded-md dark:!bg-transparent !bg-transparent'
           placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
           maxLength={maxChars}
           value={title}
@@ -190,9 +190,9 @@ const PollForm = () => {
 
       {/* Remove Poll */}
       <div className='text-center'>
-        <Button theme='danger-link' onClick={onRemovePoll}>
+        <button className='text-danger-500' onClick={onRemovePoll}>
           {intl.formatMessage(messages.removePoll)}
-        </Button>
+        </button>
       </div>
     </Stack>
   );
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index 7553c2c9d..a33eae37b 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -237,7 +237,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
     <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
       <div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
         <IconButton
-          className='text-gray-400 hover:text-gray-600'
+          className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
           src={valueOption?.icon}
           title={intl.formatMessage(messages.change_privacy)}
           onClick={handleToggle}
diff --git a/app/soapbox/features/compose/components/reply_indicator.tsx b/app/soapbox/features/compose/components/reply_indicator.tsx
index 5ee366a36..5a6a5f706 100644
--- a/app/soapbox/features/compose/components/reply_indicator.tsx
+++ b/app/soapbox/features/compose/components/reply_indicator.tsx
@@ -33,7 +33,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
   }
 
   return (
-    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
+    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-gray-800'>
       <AccountContainer
         {...actions}
         id={status.getIn(['account', 'id']) as string}
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index b51164f80..ad51369b4 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -119,7 +119,7 @@ const Search = (props: ISearch) => {
 
       <div className='relative'>
         <Component
-          className='block w-full pl-3 pr-10 py-2 border border-gray-100 dark:border-slate-600 rounded-full leading-5 bg-gray-100 dark:text-white placeholder-gray-500 dark:placeholder-gray-300 dark:bg-slate-900 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'
+          className='block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm'
           type='text'
           id='search'
           placeholder={intl.formatMessage(messages.placeholder)}
@@ -141,12 +141,12 @@ const Search = (props: ISearch) => {
         >
           <SvgIcon
             src={require('@tabler/icons/search.svg')}
-            className={classNames('h-4 w-4 text-gray-400', { hidden: hasValue })}
+            className={classNames('h-4 w-4 text-gray-600', { hidden: hasValue })}
           />
 
           <SvgIcon
             src={require('@tabler/icons/x.svg')}
-            className={classNames('h-4 w-4 text-gray-400', { hidden: !hasValue })}
+            className={classNames('h-4 w-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
         </div>
diff --git a/app/soapbox/features/compose/components/search_results.tsx b/app/soapbox/features/compose/components/search_results.tsx
index 45c92c472..a534911ba 100644
--- a/app/soapbox/features/compose/components/search_results.tsx
+++ b/app/soapbox/features/compose/components/search_results.tsx
@@ -204,7 +204,7 @@ const SearchResults = () => {
           placeholderComponent={placeholderComponent}
           placeholderCount={20}
           className={classNames({
-            'divide-gray-200 dark:divide-slate-700 divide-solid divide-y': selectedFilter === 'statuses',
+            'divide-gray-200 dark:divide-gray-800 divide-solid divide-y': selectedFilter === 'statuses',
           })}
           itemClassName={classNames({
             'pb-4': selectedFilter === 'accounts',
diff --git a/app/soapbox/features/compose/components/text_character_counter.tsx b/app/soapbox/features/compose/components/text_character_counter.tsx
index 823d24f6f..ac650384b 100644
--- a/app/soapbox/features/compose/components/text_character_counter.tsx
+++ b/app/soapbox/features/compose/components/text_character_counter.tsx
@@ -11,9 +11,9 @@ const TextCharacterCounter: React.FC<ITextCharacterCounter> = ({ text, max }) =>
   const checkRemainingText = (diff: number) => {
     return (
       <span
-        className={classNames('text-sm font-semibold', {
-          'text-gray-400': diff >= 0,
-          'text-danger-600': diff < 0,
+        className={classNames('text-sm font-medium', {
+          'text-gray-700': diff >= 0,
+          'text-secondary-600': diff < 0,
         })}
       >
         {diff}
diff --git a/app/soapbox/features/compose/components/upload_button.tsx b/app/soapbox/features/compose/components/upload_button.tsx
index eac158af5..515e6c0cb 100644
--- a/app/soapbox/features/compose/components/upload_button.tsx
+++ b/app/soapbox/features/compose/components/upload_button.tsx
@@ -55,7 +55,7 @@ const UploadButton: React.FC<IUploadButton> = ({
     <div>
       <IconButton
         src={src}
-        className='text-gray-400 hover:text-gray-600'
+        className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
         title={intl.formatMessage(messages.upload)}
         disabled={disabled}
         onClick={handleClick}
diff --git a/app/soapbox/features/delete_account/index.tsx b/app/soapbox/features/delete_account/index.tsx
index 1c614e440..10b71bb67 100644
--- a/app/soapbox/features/delete_account/index.tsx
+++ b/app/soapbox/features/delete_account/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { deleteAccount } from 'soapbox/actions/security';
 import snackbar from 'soapbox/actions/snackbar';
-import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
+import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -50,29 +50,32 @@ const DeleteAccount = () => {
       </CardHeader>
 
       <CardBody>
-        <p className='text-gray-400 mb-4'>
-          {intl.formatMessage(features.federating ? messages.deleteText : messages.localDeleteText)}
-        </p>
+        <Stack space={4}>
+          <Text theme='muted'>
 
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={intl.formatMessage(messages.passwordFieldLabel)}>
-            <Input
-              type='password'
-              name='password'
-              onChange={handleInputChange}
-              value={password}
-            />
-          </FormGroup>
+            {intl.formatMessage(features.federating ? messages.deleteText : messages.localDeleteText)}
+          </Text>
 
-          <FormActions>
-            <Button type='submit' theme='danger' disabled={isLoading}>
-              {intl.formatMessage(messages.deleteSubmit)}
-            </Button>
+          <Form onSubmit={handleSubmit}>
+            <FormGroup labelText={intl.formatMessage(messages.passwordFieldLabel)}>
+              <Input
+                type='password'
+                name='password'
+                onChange={handleInputChange}
+                value={password}
+              />
+            </FormGroup>
 
-          </FormActions>
-        </Form>
+            <FormActions>
+              <Button type='submit' theme='danger' disabled={isLoading}>
+                {intl.formatMessage(messages.deleteSubmit)}
+              </Button>
+
+            </FormActions>
+          </Form>
+        </Stack>
       </CardBody>
-    </Card>
+    </Card >
   );
 };
 
diff --git a/app/soapbox/features/developers/developers-challenge.tsx b/app/soapbox/features/developers/developers-challenge.tsx
index 468f9a6fe..920866fba 100644
--- a/app/soapbox/features/developers/developers-challenge.tsx
+++ b/app/soapbox/features/developers/developers-challenge.tsx
@@ -49,7 +49,8 @@ const DevelopersChallenge = () => {
             values={{ function: <span className='font-mono'>soapbox()</span> }}
           />
         </Text>
-        <Text tag='pre' family='mono'>
+
+        <Text tag='pre' family='mono' theme='muted'>
           {challenge}
         </Text>
 
diff --git a/app/soapbox/features/developers/developers-menu.tsx b/app/soapbox/features/developers/developers-menu.tsx
index cd8ee08bb..76320e530 100644
--- a/app/soapbox/features/developers/developers-menu.tsx
+++ b/app/soapbox/features/developers/developers-menu.tsx
@@ -23,7 +23,7 @@ interface IDashWidget {
 }
 
 const DashWidget: React.FC<IDashWidget> = ({ to, onClick, children }) => {
-  const className = 'bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform';
+  const className = 'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-800/75 p-4 rounded flex flex-col items-center justify-center space-y-2';
 
   if (to) {
     return <Link className={className} to={to}>{children}</Link>;
@@ -50,7 +50,7 @@ const Developers: React.FC = () => {
       <Column label={intl.formatMessage(messages.heading)}>
         <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
           <DashWidget to='/developers/apps/create'>
-            <SvgIcon src={require('@tabler/icons/apps.svg')} className='dark:text-gray-100' />
+            <SvgIcon src={require('@tabler/icons/apps.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -58,7 +58,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/settings_store'>
-            <SvgIcon src={require('@tabler/icons/code-plus.svg')} className='dark:text-gray-100' />
+            <SvgIcon src={require('@tabler/icons/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -66,7 +66,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/timeline'>
-            <SvgIcon src={require('@tabler/icons/home.svg')} className='dark:text-gray-100' />
+            <SvgIcon src={require('@tabler/icons/home.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@@ -74,7 +74,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error'>
-            <SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='dark:text-gray-100' />
+            <SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -82,7 +82,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error/network'>
-            <SvgIcon src={require('@tabler/icons/refresh.svg')} className='dark:text-gray-100' />
+            <SvgIcon src={require('@tabler/icons/refresh.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@@ -90,7 +90,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={leaveDevelopers}>
-            <SvgIcon src={require('@tabler/icons/logout.svg')} className='dark:text-gray-100' />
+            <SvgIcon src={require('@tabler/icons/logout.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
diff --git a/app/soapbox/features/edit_email/index.tsx b/app/soapbox/features/edit_email/index.tsx
index bd9becc2e..7c1d5bfd3 100644
--- a/app/soapbox/features/edit_email/index.tsx
+++ b/app/soapbox/features/edit_email/index.tsx
@@ -83,7 +83,7 @@ const EditEmail = () => {
             </FormGroup>
 
             <FormActions>
-              <Button to='/settings' theme='ghost'>{intl.formatMessage(messages.cancel)}</Button>
+              <Button to='/settings' theme='tertiary'>{intl.formatMessage(messages.cancel)}</Button>
               <Button type='submit' theme='primary' disabled={isLoading}>{intl.formatMessage(messages.submit)}</Button>
             </FormActions>
           </Form>
diff --git a/app/soapbox/features/edit_password/index.tsx b/app/soapbox/features/edit_password/index.tsx
index 5cebc3c98..0fd61d0c7 100644
--- a/app/soapbox/features/edit_password/index.tsx
+++ b/app/soapbox/features/edit_password/index.tsx
@@ -95,7 +95,7 @@ const EditPassword = () => {
             </FormGroup>
 
             <FormActions>
-              <Button to='/settings' theme='ghost'>
+              <Button to='/settings' theme='tertiary'>
                 {intl.formatMessage(messages.cancel)}
               </Button>
 
diff --git a/app/soapbox/features/edit_profile/components/profile-preview.tsx b/app/soapbox/features/edit_profile/components/profile-preview.tsx
index 9970cfaf1..b486efcbf 100644
--- a/app/soapbox/features/edit_profile/components/profile-preview.tsx
+++ b/app/soapbox/features/edit_profile/components/profile-preview.tsx
@@ -16,9 +16,9 @@ const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
   const { displayFqn } = useSoapboxConfig();
 
   return (
-    <div className='bg-white dark:bg-slate-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
+    <div className='bg-white dark:bg-gray-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
       <div>
-        <div className='relative w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-slate-900/50'>
+        <div className='relative w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
           <StillImage alt='' src={account.header} className='absolute inset-0 object-cover md:rounded-t-lg' />
         </div>
       </div>
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 21df0a327..c60298a7b 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -368,19 +368,19 @@ const EditProfile: React.FC = () => {
           <ProfilePreview account={previewAccount} />
 
           <div className='space-y-4'>
-            <FormGroup
-              labelText={<FormattedMessage id='edit_profile.fields.header_label' defaultMessage='Choose Background Picture' />}
-              hintText={<FormattedMessage id='edit_profile.hints.header' defaultMessage='PNG, GIF or JPG. Will be downscaled to {size}' values={{ size: '1920x1080px' }} />}
-            >
-              <FileInput onChange={handleFileChange('header', 1920 * 1080)} />
-            </FormGroup>
-
             <FormGroup
               labelText={<FormattedMessage id='edit_profile.fields.avatar_label' defaultMessage='Choose Profile Picture' />}
               hintText={<FormattedMessage id='edit_profile.hints.avatar' defaultMessage='PNG, GIF or JPG. Will be downscaled to {size}' values={{ size: '400x400px' }} />}
             >
               <FileInput onChange={handleFileChange('avatar', 400 * 400)} />
             </FormGroup>
+
+            <FormGroup
+              labelText={<FormattedMessage id='edit_profile.fields.header_label' defaultMessage='Choose Background Picture' />}
+              hintText={<FormattedMessage id='edit_profile.hints.header' defaultMessage='PNG, GIF or JPG. Will be downscaled to {size}' values={{ size: '1920x1080px' }} />}
+            >
+              <FileInput onChange={handleFileChange('header', 1920 * 1080)} />
+            </FormGroup>
           </div>
         </div>
 
@@ -472,7 +472,7 @@ const EditProfile: React.FC = () => {
         )}
 
         <FormActions>
-          <Button to='/settings' theme='ghost'>
+          <Button to='/settings' theme='tertiary'>
             {intl.formatMessage(messages.cancel)}
           </Button>
 
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 477c17f01..da1c3faee 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -44,7 +44,7 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
           <img
             src={avatar.account_avatar}
             className={classNames({
-              'w-14 h-14 min-w-[56px] rounded-full ring-2 ring-offset-4 dark:ring-offset-slate-800': true,
+              'w-14 h-14 min-w-[56px] rounded-full ring-2 ring-offset-4 dark:ring-offset-primary-900': true,
               'ring-transparent': !isSelected,
               'ring-primary-600': isSelected,
             })}
diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index ddcc16e4d..a2014d033 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -19,7 +19,7 @@ const SuggestionItem = ({ accountId }: { accountId: string }) => {
   const account = useAccount(accountId) as Account;
 
   return (
-    <Stack space={3} className='p-4 md:p-0 rounded-md border border-solid border-gray-100 dark:border-slate-700 dark:md:border-transparent md:border-transparent w-52 shrink-0 md:shrink md:w-full'>
+    <Stack space={3} className='p-4 md:p-0 rounded-md border border-solid border-gray-300 dark:border-gray-800 dark:md:border-transparent md:border-transparent w-52 shrink-0 md:shrink md:w-full'>
       <Link
         to={`/@${account.acct}`}
         title={account.acct}
diff --git a/app/soapbox/features/lists/components/new_list_form.tsx b/app/soapbox/features/lists/components/new_list_form.tsx
index eb19d1e87..645d6199c 100644
--- a/app/soapbox/features/lists/components/new_list_form.tsx
+++ b/app/soapbox/features/lists/components/new_list_form.tsx
@@ -9,7 +9,7 @@ import { useAppSelector } from 'soapbox/hooks';
 const messages = defineMessages({
   label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
   title: { id: 'lists.new.create', defaultMessage: 'Add list' },
-  create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
+  create: { id: 'lists.new.create_title', defaultMessage: 'Add list' },
 });
 
 const NewListForm: React.FC = () => {
@@ -49,6 +49,7 @@ const NewListForm: React.FC = () => {
         <Button
           disabled={disabled}
           onClick={handleSubmit}
+          theme='primary'
         >
           {create}
         </Button>
diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index e2843f77a..6ec93ee5a 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -8,11 +8,9 @@ import { deleteList, fetchLists } from 'soapbox/actions/lists';
 import { openModal } from 'soapbox/actions/modals';
 import Icon from 'soapbox/components/icon';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { CardHeader, CardTitle, IconButton, Spinner } from 'soapbox/components/ui';
+import { Column, IconButton, Spinner } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
-import Column from '../ui/components/column';
-
 import NewListForm from './components/new_list_form';
 
 import type { RootState } from 'soapbox/store';
@@ -76,32 +74,27 @@ const Lists: React.FC = () => {
   const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
 
   return (
-    <Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
-      <br />
-      <CardHeader>
-        <CardTitle title={intl.formatMessage(messages.add)} />
-      </CardHeader>
-      <NewListForm />
-      <br />
-      <CardHeader>
-        <CardTitle title={intl.formatMessage(messages.subheading)} />
-      </CardHeader>
-      <ScrollableList
-        scrollKey='lists'
-        emptyMessage={emptyMessage}
-        itemClassName='py-2'
-      >
-        {lists.map((list: any) => (
-          <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 p-2 text-black dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg'>
-            <Icon src={require('@tabler/icons/list.svg')} fixedWidth />
-            <span className='flex-grow'>
-              {list.title}
-            </span>
-            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
-            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
-          </Link>
-        ))}
-      </ScrollableList>
+    <Column label={intl.formatMessage(messages.heading)}>
+      <div className='space-y-4'>
+        <NewListForm />
+
+        <ScrollableList
+          scrollKey='lists'
+          emptyMessage={emptyMessage}
+          itemClassName='py-2'
+        >
+          {lists.map((list: any) => (
+            <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 p-2 text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg'>
+              <Icon src={require('@tabler/icons/list.svg')} fixedWidth />
+              <span className='flex-grow'>
+                {list.title}
+              </span>
+              <IconButton iconClassName='h-5 w-5 text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500' src={require('@tabler/icons/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
+              <IconButton iconClassName='h-5 w-5 text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500' src={require('@tabler/icons/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
+            </Link>
+          ))}
+        </ScrollableList>
+      </div>
     </Column>
   );
 };
diff --git a/app/soapbox/features/notifications/index.tsx b/app/soapbox/features/notifications/index.tsx
index f97c17a7f..4f276f42e 100644
--- a/app/soapbox/features/notifications/index.tsx
+++ b/app/soapbox/features/notifications/index.tsx
@@ -165,7 +165,7 @@ const Notifications = () => {
       onScrollToTop={handleScrollToTop}
       onScroll={handleScroll}
       className={classNames({
-        'divide-y divide-gray-200 dark:divide-gray-600 divide-solid': notifications.size > 0,
+        'divide-y divide-gray-200 dark:divide-primary-800 divide-solid': notifications.size > 0,
         'space-y-2': notifications.size === 0,
       })}
     >
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 4929d637e..cf88284f6 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -97,7 +97,7 @@ const OnboardingWizard = () => {
                 onClick={() => handleDotClick(i)}
                 className={classNames({
                   'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
-                  'bg-gray-200 hover:bg-gray-300': i !== currentStep,
+                  'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
                   'bg-primary-600': i === currentStep,
                 })}
               />
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 4593406bb..1889a3e20 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -74,7 +74,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-slate-900/50 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-900/50 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
@@ -94,7 +94,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                 )}
 
                 {isSubmitting && (
-                  <div className='absolute inset-0 rounded-full flex justify-center items-center bg-white/80'>
+                  <div className='absolute inset-0 rounded-full flex justify-center items-center bg-white/80 dark:bg-primary-900/80'>
                     <Spinner withText={false} />
                   </div>
                 )}
@@ -103,7 +103,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   onClick={openFilePicker}
                   type='button'
                   className={classNames({
-                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-slate-800 hover:bg-primary-700': true,
+                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
                     'opacity-50 pointer-events-none': isSubmitting,
                   })}
                   disabled={isSubmitting}
@@ -124,7 +124,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                 </Button>
 
                 {isDisabled && (
-                  <Button block theme='link' type='button' onClick={onNext}>
+                  <Button block theme='tertiary' type='button' onClick={onNext}>
                     <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
                   </Button>
                 )}
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index 1694b7461..895fd08e8 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -45,7 +45,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
@@ -89,7 +89,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
                   )}
                 </Button>
 
-                <Button block theme='link' type='button' onClick={onNext}>
+                <Button block theme='tertiary' type='button' onClick={onNext}>
                   <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
                 </Button>
               </Stack>
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index 0aaa471a3..485775279 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -75,7 +75,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
@@ -89,11 +89,11 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
           <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
             <Stack space={10}>
-              <div className='border border-solid border-gray-200 rounded-lg'>
+              <div className='border border-solid border-gray-200 dark:border-gray-800 rounded-lg'>
                 {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
                 <div
                   role='button'
-                  className='relative h-24 bg-primary-100 rounded-t-md flex items-center justify-center'
+                  className='relative h-24 bg-gray-200 dark:bg-gray-800 rounded-t-md flex items-center justify-center'
                 >
                   {selectedFile || account?.header && (
                     <StillImage
@@ -105,7 +105,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
                   {isSubmitting && (
                     <div
-                      className='absolute inset-0 rounded-t-md flex justify-center items-center bg-white/80'
+                      className='absolute inset-0 rounded-t-md flex justify-center items-center bg-white/80 dark:bg-primary-900/80'
                     >
                       <Spinner withText={false} />
                     </div>
@@ -115,7 +115,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                     onClick={openFilePicker}
                     type='button'
                     className={classNames({
-                      'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white hover:bg-primary-700': true,
+                      'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
                       'opacity-50 pointer-events-none': isSubmitting,
                     })}
                     disabled={isSubmitting}
@@ -128,7 +128,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
                 <div className='flex flex-col px-4 pb-4'>
                   {account && (
-                    <Avatar src={account.avatar} size={64} className='ring-2 ring-white -mt-8 mb-2' />
+                    <Avatar src={account.avatar} size={64} className='ring-2 dark:ring-primary-800 ring-white -mt-8 mb-2' />
                   )}
 
                   <Text weight='bold' size='sm'>{account?.display_name}</Text>
@@ -142,7 +142,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                 </Button>
 
                 {isDisabled && (
-                  <Button block theme='link' type='button' onClick={onNext}>
+                  <Button block theme='tertiary' type='button' onClick={onNext}>
                     <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
                   </Button>
                 )}
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index e85be85eb..00f38916e 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -52,7 +52,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
@@ -91,7 +91,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
                   {isSubmitting ? 'Saving…' : 'Next'}
                 </Button>
 
-                <Button block theme='link' type='button' onClick={onNext}>
+                <Button block theme='tertiary' type='button' onClick={onNext}>
                   <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
                 </Button>
               </Stack>
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index 97fe6cfc7..a1e8581cd 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -56,7 +56,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
 
   const renderEmpty = () => {
     return (
-      <div className='bg-primary-50 dark:bg-slate-700 my-2 rounded-lg text-center p-8'>
+      <div className='bg-primary-50 dark:bg-gray-800 my-2 rounded-lg text-center p-8'>
         <Text>
           <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
         </Text>
@@ -76,7 +76,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
@@ -101,7 +101,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
                   <FormattedMessage id='onboarding.done' defaultMessage='Done' />
                 </Button>
 
-                <Button block theme='link' type='button' onClick={onNext}>
+                <Button block theme='tertiary' type='button' onClick={onNext}>
                   <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
                 </Button>
               </Stack>
diff --git a/app/soapbox/features/placeholder/components/placeholder_avatar.tsx b/app/soapbox/features/placeholder/components/placeholder_avatar.tsx
index 8f6959d15..d84fe1a4e 100644
--- a/app/soapbox/features/placeholder/components/placeholder_avatar.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_avatar.tsx
@@ -23,12 +23,12 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
   return (
     <Stack space={3} className='animate-pulse text-center'>
       <div
-        className='block mx-auto rounded-full bg-slate-200 dark:bg-slate-700'
+        className='block mx-auto rounded-full bg-primary-50 dark:bg-primary-800'
         style={style}
       />
 
       {withText && (
-        <div style={{ width: size, height: 20 }} className='rounded-full bg-slate-200 dark:bg-slate-700' />
+        <div style={{ width: size, height: 20 }} className='rounded-full bg-primary-50 dark:bg-primary-800' />
       )}
     </Stack>
   );
diff --git a/app/soapbox/features/placeholder/components/placeholder_card.tsx b/app/soapbox/features/placeholder/components/placeholder_card.tsx
index 92911b9d6..b296ede4e 100644
--- a/app/soapbox/features/placeholder/components/placeholder_card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_card.tsx
@@ -9,9 +9,9 @@ const PlaceholderCard: React.FC = () => (
     'animate-pulse': true,
   })}
   >
-    <div className='w-2/5 bg-slate-200 rounded-l'>&nbsp;</div>
+    <div className='w-2/5 primary-500 rounded-l'>&nbsp;</div>
 
-    <div className='w-3/5 p-4 flex flex-col justify-between text-slate-200 break-words'>
+    <div className='w-3/5 p-4 flex flex-col justify-between text-primary-50 break-words'>
       <p>{generateText(randomIntFromInterval(5, 25))}</p>
       <p>{generateText(randomIntFromInterval(5, 75))}</p>
       <p>{generateText(randomIntFromInterval(5, 15))}</p>
diff --git a/app/soapbox/features/placeholder/components/placeholder_display_name.tsx b/app/soapbox/features/placeholder/components/placeholder_display_name.tsx
index 62d24a125..7dfedfc7d 100644
--- a/app/soapbox/features/placeholder/components/placeholder_display_name.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_display_name.tsx
@@ -13,7 +13,7 @@ const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength,
   const acctLength = randomIntFromInterval(maxLength, minLength);
 
   return (
-    <div className='flex flex-col text-slate-200 dark:text-slate-700'>
+    <div className='flex flex-col text-primary-50 dark:text-primary-800'>
       <p>{generateText(length)}</p>
       <p>{generateText(acctLength)}</p>
     </div>
diff --git a/app/soapbox/features/placeholder/components/placeholder_notification.tsx b/app/soapbox/features/placeholder/components/placeholder_notification.tsx
index bb99eeb5b..8b673b5bb 100644
--- a/app/soapbox/features/placeholder/components/placeholder_notification.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_notification.tsx
@@ -6,7 +6,7 @@ import PlaceholderStatusContent from './placeholder_status_content';
 
 /** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
-  <div className='bg-white dark:bg-slate-800 px-4 py-6 sm:p-6'>
+  <div className='bg-white dark:bg-primary-900 px-4 py-6 sm:p-6'>
     <div className='w-full animate-pulse'>
       <div className='mb-2'>
         <PlaceholderStatusContent minLength={20} maxLength={20} />
diff --git a/app/soapbox/features/placeholder/components/placeholder_status.tsx b/app/soapbox/features/placeholder/components/placeholder_status.tsx
index 2616b13c6..0fd5cfb9b 100644
--- a/app/soapbox/features/placeholder/components/placeholder_status.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_status.tsx
@@ -13,8 +13,8 @@ interface IPlaceholderStatus {
 const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => (
   <div
     className={classNames({
-      'status-placeholder bg-white dark:bg-slate-800': true,
-      'shadow-xl dark:shadow-inset sm:rounded-xl px-4 py-6 sm:p-5': !thread,
+      'status-placeholder bg-white dark:bg-primary-900': true,
+      'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': !thread,
     })}
   >
     <div className='w-full animate-pulse overflow-hidden'>
diff --git a/app/soapbox/features/placeholder/components/placeholder_status_content.tsx b/app/soapbox/features/placeholder/components/placeholder_status_content.tsx
index 85f747d52..0537f8520 100644
--- a/app/soapbox/features/placeholder/components/placeholder_status_content.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_status_content.tsx
@@ -12,7 +12,7 @@ const PlaceholderStatusContent: React.FC<IPlaceholderStatusContent> = ({ minLeng
   const length = randomIntFromInterval(maxLength, minLength);
 
   return (
-    <div className='flex flex-col text-slate-200 dark:text-slate-700'>
+    <div className='flex flex-col text-primary-50 dark:text-primary-800'>
       <p className='break-words'>{generateText(length)}</p>
     </div>
   );
diff --git a/app/soapbox/features/public_layout/components/footer.tsx b/app/soapbox/features/public_layout/components/footer.tsx
index 69f933339..188a20eda 100644
--- a/app/soapbox/features/public_layout/components/footer.tsx
+++ b/app/soapbox/features/public_layout/components/footer.tsx
@@ -31,8 +31,8 @@ const Footer = () => {
 
           return (
             <div key={idx} className='px-5 py-2'>
-              <Comp {...compProps} className='hover:underline'>
-                <Text tag='span' theme='primary' size='sm'>
+              <Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'>
+                <Text tag='span' theme='inherit' size='sm'>
                   {(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
                 </Text>
               </Comp>
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 532ba9cd9..35eac570a 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/app/soapbox/features/public_layout/components/header.tsx
@@ -101,7 +101,7 @@ const Header = () => {
                   <a
                     href={links.get('help')}
                     target='_blank'
-                    className='text-sm font-medium text-gray-500 hover:text-gray-900'
+                    className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'
                   >
                     <FormattedMessage id='landing_page_modal.helpCenter' defaultMessage='Help Center' />
                   </a>
@@ -109,7 +109,7 @@ const Header = () => {
               </HStack>
 
               <HStack space={2} className='xl:hidden shrink-0'>
-                <Button to='/login' theme='secondary'>
+                <Button to='/login' theme='tertiary'>
                   {intl.formatMessage(messages.login)}
                 </Button>
 
@@ -152,8 +152,9 @@ const Header = () => {
                 <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                   <IconButton
                     src={require('@tabler/icons/help.svg')}
-                    className='bg-transparent text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer'
+                    className='bg-transparent text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500 cursor-pointer'
                     iconClassName='w-5 h-5'
+                    transparent
                   />
                 </Tooltip>
               </Link>
diff --git a/app/soapbox/features/public_layout/components/sonar.tsx b/app/soapbox/features/public_layout/components/sonar.tsx
index 10ae9f293..e07ff4b8e 100644
--- a/app/soapbox/features/public_layout/components/sonar.tsx
+++ b/app/soapbox/features/public_layout/components/sonar.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 const Sonar = () => (
   <div className='relative'>
     <div className='relative w-48 h-48'>
-      <div className='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-600/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-600/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-600/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-600/25 opacity-0 pointer-events-none' />
 
-      <div className='absolute top-0 left-0 w-48 h-48 bg-white dark:bg-slate-900 rounded-full' />
+      <div className='absolute top-0 left-0 w-48 h-48 bg-white dark:bg-primary-900 rounded-full' />
     </div>
   </div>
 );
diff --git a/app/soapbox/features/security/mfa/enable_otp_form.tsx b/app/soapbox/features/security/mfa/enable_otp_form.tsx
index 98dae6519..9ecf409ed 100644
--- a/app/soapbox/features/security/mfa/enable_otp_form.tsx
+++ b/app/soapbox/features/security/mfa/enable_otp_form.tsx
@@ -36,12 +36,12 @@ const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupPr
 
   return (
     <Stack space={4}>
-      <Stack space={2}>
+      <Stack space={4}>
         <Text theme='muted'>
           <FormattedMessage id='mfa.setup_warning' defaultMessage="Write these codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account." />
         </Text>
 
-        <div className='bg-gray-100 dark:bg-slate-900/50 rounded-lg p-4'>
+        <div className='border-2 border-solid border-gray-200 dark:border-gray-800 rounded-lg p-4'>
           <Stack space={3}>
             <Text weight='medium' align='center'>
               <FormattedMessage id='mfa.setup_recoverycodes' defaultMessage='Recovery codes' />
@@ -65,7 +65,7 @@ const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupPr
       {!displayOtpForm && (
         <FormActions>
           <Button
-            theme='ghost'
+            theme='tertiary'
             text={intl.formatMessage(messages.mfaCancelButton)}
             onClick={() => history.push('../auth/edit')}
           />
diff --git a/app/soapbox/features/security/mfa/otp_confirm_form.tsx b/app/soapbox/features/security/mfa/otp_confirm_form.tsx
index b760313fd..76f2ae45b 100644
--- a/app/soapbox/features/security/mfa/otp_confirm_form.tsx
+++ b/app/soapbox/features/security/mfa/otp_confirm_form.tsx
@@ -26,7 +26,7 @@ const OtpConfirmForm: React.FC = () => {
   const history = useHistory();
   const dispatch = useAppDispatch();
 
-  const [state, setState] = useState<{password: string, isLoading: boolean, code: string, qrCodeURI: string, confirmKey: string}>({
+  const [state, setState] = useState<{ password: string, isLoading: boolean, code: string, qrCodeURI: string, confirmKey: string }>({
     password: '',
     isLoading: false,
     code: '',
@@ -36,7 +36,7 @@ const OtpConfirmForm: React.FC = () => {
 
   useEffect(() => {
     dispatch(setupMfa('totp')).then((data: any) => {
-      setState((prevState) => ({ ...prevState, qrCodeURI: data.provisioning_uri, confirmKey: data.key  }));
+      setState((prevState) => ({ ...prevState, qrCodeURI: data.provisioning_uri, confirmKey: data.key }));
     }).catch(() => {
       dispatch(snackbar.error(intl.formatMessage(messages.qrFail)));
     });
@@ -64,8 +64,6 @@ const OtpConfirmForm: React.FC = () => {
 
   return (
     <Stack space={4}>
-      <hr className='mt-4 dark:border-slate-700' />
-
       <Form onSubmit={handleSubmit}>
         <Stack>
           <Text weight='semibold' size='lg'>
@@ -118,7 +116,7 @@ const OtpConfirmForm: React.FC = () => {
         <FormActions>
           <Button
             type='button'
-            theme='ghost'
+            theme='tertiary'
             text={intl.formatMessage(messages.mfaCancelButton)}
             onClick={() => history.push('../auth/edit')}
             disabled={state.isLoading}
diff --git a/app/soapbox/features/security/mfa_form.tsx b/app/soapbox/features/security/mfa_form.tsx
index 759c648c1..1cbb15f7e 100644
--- a/app/soapbox/features/security/mfa_form.tsx
+++ b/app/soapbox/features/security/mfa_form.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { fetchMfa } from 'soapbox/actions/mfa';
-import { Card, CardBody, CardHeader, CardTitle, Column } from 'soapbox/components/ui';
+import { Card, CardBody, CardHeader, CardTitle, Column, Stack } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 
 import DisableOtpForm from './mfa/disable_otp_form';
@@ -47,10 +47,10 @@ const MfaForm: React.FC = () => {
           {mfa.getIn(['settings', 'totp']) ? (
             <DisableOtpForm />
           ) : (
-            <>
+            <Stack space={4}>
               <EnableOtpForm displayOtpForm={displayOtpForm} handleSetupProceedClick={handleSetupProceedClick} />
               {displayOtpForm && <OtpConfirmForm />}
-            </>
+            </Stack>
           )}
         </CardBody>
       </Card>
@@ -58,4 +58,4 @@ const MfaForm: React.FC = () => {
   );
 };
 
-export default MfaForm;
\ No newline at end of file
+export default MfaForm;
diff --git a/app/soapbox/features/soapbox_config/components/icon-picker.tsx b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
index 2531eca0a..05020af74 100644
--- a/app/soapbox/features/soapbox_config/components/icon-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
@@ -9,7 +9,7 @@ interface IIconPicker {
 
 const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
   return (
-    <div className='mt-1 relative rounded-md shadow-sm dark:bg-slate-800 border border-solid border-gray-300 dark:border-gray-600 rounded-md'>
+    <div className='mt-1 relative rounded-md shadow-sm dark:bg-gray-800 border border-solid border-gray-300 dark:border-gray-600'>
       <IconPickerDropdown value={value} onPickEmoji={onChange} />
     </div>
   );
diff --git a/app/soapbox/features/soapbox_config/components/site-preview.tsx b/app/soapbox/features/soapbox_config/components/site-preview.tsx
index 1c4efc92f..932fa39ca 100644
--- a/app/soapbox/features/soapbox_config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx
@@ -27,11 +27,11 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
   const bodyClass = classNames(
     'site-preview',
     'relative flex justify-center align-center text-base',
-    'border border-solid border-gray-200 dark:border-slate-600',
+    'border border-solid border-gray-200 dark:border-gray-600',
     'h-40 rounded-lg overflow-hidden',
     {
       'bg-white': !dark,
-      'bg-slate-900': dark,
+      'bg-gray-900': dark,
     });
 
   return (
@@ -45,7 +45,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
 
       <div className={classNames('flex absolute inset-0 shadow z-10 h-12 lg:h-16', {
         'bg-white': !dark,
-        'bg-slate-800': dark,
+        'bg-gray-800': dark,
       })}
       >
         <SiteLogo alt='Logo' className='h-5 lg:h-6 w-auto self-center px-2' theme={dark ? 'dark' : 'light'} />
diff --git a/app/soapbox/features/status/components/action-bar.tsx b/app/soapbox/features/status/components/action-bar.tsx
index a61ab9acb..b0560693c 100644
--- a/app/soapbox/features/status/components/action-bar.tsx
+++ b/app/soapbox/features/status/components/action-bar.tsx
@@ -549,7 +549,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
       <IconButton
         disabled={reblog_disabled}
         className={classNames({
-          'text-gray-400 hover:text-gray-600': !status.reblogged,
+          'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !status.reblogged,
           'text-success-600 hover:text-success-600': status.reblogged,
         })}
         title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
@@ -564,7 +564,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         <IconButton
           title={intl.formatMessage(messages.reply)}
           src={require('@tabler/icons/message-circle-2.svg')}
-          className='text-gray-400 hover:text-gray-600'
+          className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
           onClick={this.handleReplyClick}
           text={intl.formatMessage(messages.reply)}
         />
@@ -601,7 +601,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
             ) : (
               <IconButton
                 className={classNames({
-                  'text-gray-400 hover:text-gray-600': !meEmojiReact,
+                  'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !meEmojiReact,
                   'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
                 })}
                 title={meEmojiTitle}
@@ -616,7 +616,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
         ) : (
           <IconButton
             className={classNames({
-              'text-gray-400 hover:text-gray-600': !meEmojiReact,
+              'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !meEmojiReact,
               'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
             })}
             title={meEmojiTitle}
@@ -633,7 +633,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
           <IconButton
             title={intl.formatMessage(messages.share)}
             src={require('@tabler/icons/upload.svg')}
-            className='text-gray-400 hover:text-gray-600'
+            className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
             onClick={this.handleShare}
             text={intl.formatMessage(messages.share)}
           />
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index 90ddc27e3..4138a817f 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -69,7 +69,7 @@ const Card: React.FC<ICard> = ({
     setEmbedded(false);
   }, [card.url]);
 
-  const trimmedTitle       = trim(card.title, maxTitle);
+  const trimmedTitle = trim(card.title, maxTitle);
   const trimmedDescription = trim(card.description, maxDescription);
 
   const handlePhotoClick = () => {
@@ -109,9 +109,9 @@ const Card: React.FC<ICard> = ({
   };
 
   const renderVideo = () => {
-    const content   = { __html: addAutoPlay(card.html) };
-    const ratio     = getRatio(card);
-    const height    = width / ratio;
+    const content = { __html: addAutoPlay(card.html) };
+    const ratio = getRatio(card);
+    const height = width / ratio;
 
     return (
       <div
@@ -124,7 +124,7 @@ const Card: React.FC<ICard> = ({
   };
 
   const getRatio = (card: CardEntity): number => {
-    const ratio  = (card.width / card.height) || 16 / 9;
+    const ratio = (card.width / card.height) || 16 / 9;
 
     // Constrain to a sane limit
     // https://en.wikipedia.org/wiki/Aspect_ratio_(image)
@@ -132,10 +132,10 @@ const Card: React.FC<ICard> = ({
   };
 
   const interactive = card.type !== 'link';
-  const horizontal  = interactive || embedded;
-  const className   = classnames('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`);
-  const ratio       = getRatio(card);
-  const height      = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
+  const horizontal = interactive || embedded;
+  const className = classnames('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`);
+  const ratio = getRatio(card);
+  const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
 
   const title = interactive ? (
     <a
@@ -153,7 +153,7 @@ const Card: React.FC<ICard> = ({
   );
 
   const description = (
-    <div className='status-card__content cursor-default'>
+    <div className='status-card__content'>
       <span className='status-card__title'>{title}</span>
       <p className='status-card__description'>{trimmedDescription}</p>
       <span className='status-card__host'><Icon src={require('@tabler/icons/link.svg')} /> {card.provider_name}</span>
@@ -196,12 +196,12 @@ const Card: React.FC<ICard> = ({
           {thumbnail}
 
           <div className='absolute inset-0 flex items-center justify-center'>
-            <div className='bg-white shadow-md rounded-md p-2 flex items-center justify-center'>
+            <div className='bg-gray-500/90 dark:bg-gray-700/90 shadow-md rounded-full px-4 py-3 flex items-center justify-center'>
               <HStack space={3} alignItems='center'>
-                <button onClick={handleEmbedClick} className='appearance-none text-gray-400 hover:text-gray-600'>
+                <button onClick={handleEmbedClick} className='appearance-none text-gray-700 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'>
                   <Icon
                     src={iconVariant}
-                    className='w-5 h-5 text-inherit'
+                    className='w-6 h-6 text-inherit'
                   />
                 </button>
 
@@ -211,11 +211,11 @@ const Card: React.FC<ICard> = ({
                     href={card.url}
                     target='_blank'
                     rel='noopener'
-                    className='text-gray-400 hover:text-gray-600'
+                    className='text-gray-700 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'
                   >
                     <Icon
                       src={require('@tabler/icons/external-link.svg')}
-                      className='w-5 h-5 text-inherit'
+                      className='w-6 h-6 text-inherit'
                     />
                   </a>
                 )}
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index 17f9163db..3f3654809 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -16,7 +16,6 @@ interface IStatusInteractionBar {
 }
 
 const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.Element | null => {
-
   const me = useAppSelector(({ me }) => me);
   const { allowedEmoji } = useSoapboxConfig();
   const dispatch = useDispatch();
@@ -163,9 +162,9 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
 
   return (
     <HStack space={3}>
-      {features.emojiReacts ? getEmojiReacts() : getFavourites()}
-
       {getReposts()}
+      
+      {features.emojiReacts ? getEmojiReacts() : getFavourites()}
     </HStack>
   );
 };
diff --git a/app/soapbox/features/status/components/thread-login-cta.tsx b/app/soapbox/features/status/components/thread-login-cta.tsx
index 2626aeb3c..07c244bee 100644
--- a/app/soapbox/features/status/components/thread-login-cta.tsx
+++ b/app/soapbox/features/status/components/thread-login-cta.tsx
@@ -22,7 +22,7 @@ const ThreadLoginCta: React.FC = () => {
       </Stack>
 
       <Stack space={4} className='max-w-xs mx-auto'>
-        <Button theme='secondary' to='/login' block>
+        <Button theme='tertiary' to='/login' block>
           <FormattedMessage id='thread_login.login' defaultMessage='Log in' />
         </Button>
         <Button to='/signup' block>
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 42efb903c..505a0dd24 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -740,7 +740,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
               onOpenCompareHistoryModal={this.handleOpenCompareHistoryModal}
             />
 
-            <hr className='mb-2 dark:border-slate-600' />
+            <hr className='mb-2 border-t-2 dark:border-primary-800' />
 
             <ActionBar
               status={status}
@@ -774,7 +774,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         </HotKeys>
 
         {hasDescendants && (
-          <hr className='mt-2 dark:border-slate-600' />
+          <hr className='mt-2 border-t-2 dark:border-primary-800' />
         )}
       </div>
     );
diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx
index c0308fb65..299702d94 100644
--- a/app/soapbox/features/ui/components/action-button.tsx
+++ b/app/soapbox/features/ui/components/action-button.tsx
@@ -159,7 +159,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
           text={intl.formatMessage(messages.follow)}
         />
       );
-    // Pleroma's classic remote follow form.
+      // Pleroma's classic remote follow form.
     } else if (features.pleromaRemoteFollow) {
       return (
         <form method='POST' action='/main/ostatus'>
@@ -208,7 +208,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       return (
         <Button
           size='sm'
-          theme='secondary'
+          theme='tertiary'
           text={small ? intl.formatMessage(messages.requested_small) : intl.formatMessage(messages.requested)}
           onClick={handleFollow}
         />
@@ -245,7 +245,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
     // Edit profile
     return (
       <Button
-        theme='secondary'
+        theme='tertiary'
         size='sm'
         text={intl.formatMessage(messages.edit_profile)}
         to='/settings/profile'
diff --git a/app/soapbox/features/ui/components/actions_modal.tsx b/app/soapbox/features/ui/components/actions_modal.tsx
index 554e3b214..2a9b78623 100644
--- a/app/soapbox/features/ui/components/actions_modal.tsx
+++ b/app/soapbox/features/ui/components/actions_modal.tsx
@@ -55,7 +55,7 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
       {({ top }) => (
         <div className='modal-root__modal actions-modal' style={{ top: `${top}%` }}>
           {status && (
-            <Stack space={2} className='p-4 bg-gray-50 dark:bg-slate-800 border-b border-solid border-gray-200 dark:border-gray-700'>
+            <Stack space={2} className='p-4 bg-gray-50 dark:bg-gray-800 border-b border-solid border-gray-200 dark:border-gray-700'>
               <AccountContainer
                 key={status.account as string}
                 id={status.account as string}
diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index 50bdef350..fd1cd678d 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -9,7 +9,7 @@ interface IBackgroundShapes {
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
   <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
-    <div className='w-screen h-screen bg-gradient-sm lg:bg-gradient-lg' />
+    <div className='w-screen h-screen bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark' />
   </div>
 );
 
diff --git a/app/soapbox/features/ui/components/bundle_column_error.tsx b/app/soapbox/features/ui/components/bundle_column_error.tsx
index 44ad44852..c3e839623 100644
--- a/app/soapbox/features/ui/components/bundle_column_error.tsx
+++ b/app/soapbox/features/ui/components/bundle_column_error.tsx
@@ -22,15 +22,15 @@ const BundleColumnError: React.FC<IBundleColumnError> = ({ onRetry }) => {
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
-      <Stack space={4} alignItems='center' justifyContent='center' className='bg-primary-50 dark:bg-slate-700 p-10 min-h-[160px] rounded-lg'>
+      <Stack space={4} alignItems='center' justifyContent='center' className='p-10 min-h-[160px] rounded-lg'>
         <IconButton
-          iconClassName='w-20 h-20'
+          iconClassName='w-10 h-10'
           title={intl.formatMessage(messages.retry)}
           src={require('@tabler/icons/refresh.svg')}
           onClick={handleRetry}
         />
 
-        <Text align='center'>{intl.formatMessage(messages.body)}</Text>
+        <Text align='center' theme='muted'>{intl.formatMessage(messages.body)}</Text>
       </Stack>
     </Column>
   );
diff --git a/app/soapbox/features/ui/components/compare_history_modal.tsx b/app/soapbox/features/ui/components/compare_history_modal.tsx
index 648c0709f..1bf5d4df7 100644
--- a/app/soapbox/features/ui/components/compare_history_modal.tsx
+++ b/app/soapbox/features/ui/components/compare_history_modal.tsx
@@ -36,7 +36,7 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
     body = <Spinner />;
   } else {
     body = (
-      <div className='divide-y divide-solid divide-gray-200 dark:divide-slate-700'>
+      <div className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'>
         {versions?.map((version) => {
           const content = { __html: version.contentHtml };
           const spoilerContent = { __html: version.spoilerHtml };
diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx
index 6642d0fac..bbe6467a3 100644
--- a/app/soapbox/features/ui/components/compose-button.tsx
+++ b/app/soapbox/features/ui/components/compose-button.tsx
@@ -11,7 +11,7 @@ const ComposeButton = () => {
 
   return (
     <div className='mt-4'>
-      <Button icon={require('@tabler/icons/pencil-plus.svg')} block size='lg' onClick={onOpenCompose}>
+      <Button theme='accent' icon={require('@tabler/icons/pencil-plus.svg')} block size='lg' onClick={onOpenCompose}>
         <span><FormattedMessage id='navigation.compose' defaultMessage='Compose' /></span>
       </Button>
     </div>
diff --git a/app/soapbox/features/ui/components/confirmation_modal.tsx b/app/soapbox/features/ui/components/confirmation_modal.tsx
index 8b4d790e6..fefe57396 100644
--- a/app/soapbox/features/ui/components/confirmation_modal.tsx
+++ b/app/soapbox/features/ui/components/confirmation_modal.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui';
+import { Modal, Text } from 'soapbox/components/ui';
 import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
 
 interface IConfirmationModal {
@@ -60,7 +60,9 @@ const ConfirmationModal: React.FC<IConfirmationModal> = ({
       secondaryText={secondary}
       secondaryAction={onSecondary && handleSecondary}
     >
-      <p className='text-gray-600 dark:text-gray-300'>{message}</p>
+      <Text>
+        {message}
+      </Text>
 
       <div className='mt-2'>
         {checkbox && <div className='confirmation-modal__checkbox'>
diff --git a/app/soapbox/features/ui/components/funding_panel.tsx b/app/soapbox/features/ui/components/funding_panel.tsx
index 883734bbe..48245a741 100644
--- a/app/soapbox/features/ui/components/funding_panel.tsx
+++ b/app/soapbox/features/ui/components/funding_panel.tsx
@@ -64,7 +64,7 @@ const FundingPanel: React.FC = () => {
         <Text>{goalText}</Text>
       </div>
       <div>
-        <Button theme='ghost' onClick={handleDonateClick}>
+        <Button theme='secondary' onClick={handleDonateClick}>
           <FormattedMessage id='patron.donate' defaultMessage='Donate' />
         </Button>
       </div>
diff --git a/app/soapbox/features/ui/components/hotkeys_modal.tsx b/app/soapbox/features/ui/components/hotkeys_modal.tsx
index 955d2cb80..1f44c9f9a 100644
--- a/app/soapbox/features/ui/components/hotkeys_modal.tsx
+++ b/app/soapbox/features/ui/components/hotkeys_modal.tsx
@@ -10,7 +10,7 @@ interface IHotkeysModal {
 }
 
 const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <kbd className='px-1.5 py-1 bg-primary-50 dark:bg-slate-700 border border-solid border-primary-200 rounded-md dark:border-slate-500 text-xs font-sans'>
+  <kbd className='px-1.5 py-1 bg-primary-50 dark:bg-gray-800 border border-solid border-primary-200 rounded-md dark:border-gray-700 text-xs font-sans'>
     {children}
   </kbd>
 );
diff --git a/app/soapbox/features/ui/components/link_footer.tsx b/app/soapbox/features/ui/components/link_footer.tsx
index c2104fbcd..913799a34 100644
--- a/app/soapbox/features/ui/components/link_footer.tsx
+++ b/app/soapbox/features/ui/components/link_footer.tsx
@@ -19,7 +19,7 @@ interface IFooterLink {
 const FooterLink: React.FC<IFooterLink> = ({ children, className, ...rest }): JSX.Element => {
   return (
     <div>
-      <Link className={classNames('text-gray-400 hover:text-gray-500 hover:underline', className)} {...rest}>{children}</Link>
+      <Link className={classNames('text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500 hover:underline', className)} {...rest}>{children}</Link>
     </div>
   );
 };
@@ -38,7 +38,7 @@ const LinkFooter: React.FC = (): JSX.Element => {
 
   return (
     <div className='space-y-2'>
-      <div className='flex flex-wrap items-center divide-x-dot text-gray-400'>
+      <div className='flex flex-wrap items-center divide-x-dot text-gray-600'>
         {account && <>
           {features.profileDirectory && (
             <FooterLink to='/directory'><FormattedMessage id='navigation_bar.profile_directory' defaultMessage='Profile directory' /></FooterLink>
diff --git a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
index 22a733f60..08f161f7e 100644
--- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
@@ -36,13 +36,13 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
       title={<SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />}
       onClose={() => onClose('LANDING_PAGE')}
     >
-      <div className='mt-4 divide-y divide-solid divide-gray-200 dark:divide-slate-700'>
+      <div className='mt-4 divide-y divide-solid divide-gray-200 dark:divide-gray-800'>
         {links.get('help') && (
           <nav className='grid gap-y-8 mb-6'>
             <a
               href={links.get('help')}
               target='_blank'
-              className='p-3 space-x-3 flex items-center rounded-md dark:hover:bg-slate-900/50 hover:bg-gray-50'
+              className='p-3 space-x-3 flex items-center rounded-md dark:hover:bg-gray-900/50 hover:bg-gray-50'
             >
               <Icon src={require('@tabler/icons/lifebuoy.svg')} className='flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-200' />
 
@@ -59,7 +59,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
             'grid-cols-1': !isOpen,
           })}
         >
-          <Button to='/login' theme='secondary' block>
+          <Button to='/login' theme='tertiary' block>
             {intl.formatMessage(messages.login)}
           </Button>
 
diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index cd4f1ff08..a0f52af13 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -45,7 +45,7 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
   }
 
   return (
-    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
+    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-gray-800'>
       <AccountContainer
         id={status.account as any}
         showProfileHoverCard={false}
@@ -123,7 +123,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
     switch (selectedStatusIds.size) {
       case 0:
         return (
-          <div className='bg-gray-100 dark:bg-slate-700 p-4 rounded-lg flex items-center justify-center w-full'>
+          <div className='bg-gray-100 dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center w-full'>
             <Text theme='muted'>{intl.formatMessage(messages.blankslate)}</Text>
           </div>
         );
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 7ce82995d..e26cbbf44 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -61,14 +61,14 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
           <FormGroup labelText={intl.formatMessage(messages.addAdditionalStatuses)}>
             {showAdditionalStatuses ? (
               <Stack space={2}>
-                <div className='bg-gray-100 dark:bg-slate-600 rounded-lg p-4'>
+                <div className='divide-y divide-gray-200 dark:divide-gray-800 divide-solid'>
                   {statusIds.map((statusId) => <StatusCheckBox id={statusId} key={statusId} />)}
                 </div>
 
                 <div>
                   <Button
                     icon={require('@tabler/icons/arrows-minimize.svg')}
-                    theme='secondary'
+                    theme='tertiary'
                     size='sm'
                     onClick={() => setShowAdditionalStatuses(false)}
                   >
@@ -79,7 +79,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
             ) : (
               <Button
                 icon={require('@tabler/icons/plus.svg')}
-                theme='secondary'
+                theme='tertiary'
                 size='sm'
                 onClick={() => setShowAdditionalStatuses(true)}
               >
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 484946657..38e3b11c4 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -108,10 +108,10 @@ const ReasonStep = (_props: IReasonStep) => {
                     data-testid={`rule-${rule.id}`}
                     onClick={() => dispatch(changeReportRule(rule.id))}
                     className={classNames({
-                      'relative border border-solid border-gray-200 dark:border-slate-900/75 hover:bg-gray-50 dark:hover:bg-slate-900/50 text-left w-full p-4 flex justify-between items-center cursor-pointer': true,
+                      'relative border border-solid border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-primary-800/30 text-left w-full p-4 flex justify-between items-center cursor-pointer': true,
                       'rounded-tl-lg rounded-tr-lg': idx === 0,
                       'rounded-bl-lg rounded-br-lg': idx === rules.length - 1,
-                      'bg-gray-50 dark:bg-slate-900': isSelected,
+                      'bg-gray-200 hover:bg-gray-200 dark:bg-primary-800/50': isSelected,
                     })}
                   >
                     <Stack className='mr-3'>
@@ -132,7 +132,7 @@ const ReasonStep = (_props: IReasonStep) => {
                       value={rule.id}
                       checked={isSelected}
                       readOnly
-                      className='h-4 w-4 cursor-pointer text-primary-600 dark:text-primary-400 border-gray-300 rounded focus:ring-primary-500'
+                      className='border-2 dark:bg-gray-900 dark:border-gray-800 checked:bg-primary-500 dark:checked:bg-primary-500 focus:ring-primary-500 dark:focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded'
                     />
                   </button>
                 );
@@ -140,13 +140,13 @@ const ReasonStep = (_props: IReasonStep) => {
             </div>
 
             <div
-              className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-slate-900 absolute transition-opacity duration-500', {
+              className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
                 'opacity-0': isNearTop,
                 'opacity-100': !isNearTop,
               })}
             />
             <div
-              className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-slate-900 absolute transition-opacity duration-500', {
+              className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
                 'opacity-0': isNearBottom,
                 'opacity-100': !isNearBottom,
               })}
diff --git a/app/soapbox/features/ui/components/mute_modal.tsx b/app/soapbox/features/ui/components/mute_modal.tsx
index b2b5e25b2..be0eda49a 100644
--- a/app/soapbox/features/ui/components/mute_modal.tsx
+++ b/app/soapbox/features/ui/components/mute_modal.tsx
@@ -58,7 +58,7 @@ const MuteModal = () => {
 
         <label>
           <HStack alignItems='center' space={2}>
-            <Text tag='span'>
+            <Text tag='span' theme='muted'>
               <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
             </Text>
 
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 331f4007f..103223009 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -67,7 +67,7 @@ const Navbar = () => {
   if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
 
   return (
-    <nav className='bg-white dark:bg-slate-800 shadow z-50 sticky top-0' ref={node}>
+    <nav className='bg-white dark:bg-primary-900 shadow z-50 sticky top-0' ref={node}>
       <div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <div className='relative flex justify-between h-12 lg:h-16'>
           {account && (
@@ -86,7 +86,7 @@ const Navbar = () => {
             })}
           >
             <Link key='logo' to='/' data-preview-title-id='column.home' className='flex-shrink-0 flex items-center'>
-              <SiteLogo alt='Logo' className='h-5 lg:h-6 w-auto cursor-pointer' />
+              <SiteLogo alt='Logo' className='h-5 w-auto cursor-pointer' />
               <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
             </Link>
 
@@ -147,7 +147,7 @@ const Navbar = () => {
                 </Form>
 
                 <div className='space-x-1.5 lg:hidden'>
-                  <Button theme='secondary' to='/login' size='sm'>
+                  <Button theme='tertiary' to='/login' size='sm'>
                     <FormattedMessage id='account.login' defaultMessage='Log In' />
                   </Button>
 
diff --git a/app/soapbox/features/ui/components/subscription-button.tsx b/app/soapbox/features/ui/components/subscription-button.tsx
index b94430977..6da5a1ddf 100644
--- a/app/soapbox/features/ui/components/subscription-button.tsx
+++ b/app/soapbox/features/ui/components/subscription-button.tsx
@@ -93,8 +93,8 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
         src={isSubscribed ? require('@tabler/icons/bell-ringing.svg') : require('@tabler/icons/bell.svg')}
         onClick={handleToggle}
         title={title}
-        className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 disabled:hover:bg-primary-100 p-2'
-        iconClassName='w-5 h-5'
+        className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+        iconClassName='w-4 h-4'
       />
     );
   }
diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index a3b388c07..e285788e0 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -3,6 +3,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon } from 'soapbox/components/ui';
 
+import Select from '../../../components/ui/select/select';
+
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
   dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
@@ -39,21 +41,21 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
     <label>
       <div className='relative rounded-md shadow-sm'>
         <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
-          <Icon src={themeIconSrc} className='h-4 w-4 text-gray-400' />
+          <Icon src={themeIconSrc} className='h-4 w-4 text-gray-600 dark:text-gray-700' />
         </div>
 
-        <select
+        <Select
           onChange={handleChange}
           defaultValue={value}
-          className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
+          className='pl-10'
         >
           <option value='system'>{intl.formatMessage(messages.system)}</option>
           <option value='light'>{intl.formatMessage(messages.light)}</option>
           <option value='dark'>{intl.formatMessage(messages.dark)}</option>
-        </select>
+        </Select>
 
         <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
-          <Icon src={require('@tabler/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
+          <Icon src={require('@tabler/icons/chevron-down.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-700' />
         </div>
       </div>
     </label>
diff --git a/app/soapbox/features/ui/containers/notifications_container.tsx b/app/soapbox/features/ui/containers/notifications_container.tsx
index b6d1748e5..79d8724c1 100644
--- a/app/soapbox/features/ui/containers/notifications_container.tsx
+++ b/app/soapbox/features/ui/containers/notifications_container.tsx
@@ -47,7 +47,7 @@ const SnackbarContainer: React.FC = () => {
       // HACK: it's a JSX.Element instead of a string!
       // react-notification displays it just fine.
       alert.action = (
-        <Button theme='ghost' size='sm' onClick={item.action} text={maybeFormatMessage(item.actionLabel)} />
+        <Button theme='tertiary' size='sm' onClick={item.action} text={maybeFormatMessage(item.actionLabel)} />
       ) as any;
     }
 
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index 2576bd2bc..a6f5749e8 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -96,7 +96,7 @@ const Registration = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>
           <FormattedMessage id='registration.header' defaultMessage='Register your account' />
         </h1>
diff --git a/app/soapbox/features/verification/steps/age-verification.tsx b/app/soapbox/features/verification/steps/age-verification.tsx
index d1e83b406..84283f4b4 100644
--- a/app/soapbox/features/verification/steps/age-verification.tsx
+++ b/app/soapbox/features/verification/steps/age-verification.tsx
@@ -50,7 +50,7 @@ const AgeVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>
           <FormattedMessage id='age_verification.header' defaultMessage='Enter your birth date' />
         </h1>
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index 800e3dd3d..01e023456 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -39,12 +39,12 @@ const EmailSent: React.FC<IEmailSent> = ({ handleSubmit }) => {
     <div className='sm:pt-10 mx-auto flex flex-col items-center justify-center'>
       <Icon src={require('@tabler/icons/send.svg')} className='text-primary-600 dark:text-primary-400 h-12 w-12 mb-5' />
 
-      <div className='space-y-1 text-center mb-4'>
+      <div className='space-y-2 text-center mb-4'>
         <Text weight='bold' size='3xl'>We sent you an email</Text>
         <Text theme='muted'>Click on the link in the email to validate your email.</Text>
       </div>
 
-      <Button theme='ghost' onClick={handleSubmit}>Resend verification email</Button>
+      <Button theme='tertiary' onClick={handleSubmit}>Resend verification email</Button>
     </div>
   );
 };
@@ -108,7 +108,7 @@ const EmailVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>{intl.formatMessage({ id: 'email_verification.header', defaultMessage: 'Enter your email address' })}</h1>
       </div>
 
diff --git a/app/soapbox/features/verification/steps/sms-verification.tsx b/app/soapbox/features/verification/steps/sms-verification.tsx
index 6462203e2..8f545e1ad 100644
--- a/app/soapbox/features/verification/steps/sms-verification.tsx
+++ b/app/soapbox/features/verification/steps/sms-verification.tsx
@@ -95,7 +95,7 @@ const SmsVerification = () => {
   if (status === Statuses.REQUESTED) {
     return (
       <div>
-        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
           <h1 className='text-center font-bold text-2xl'>
             {intl.formatMessage({ id: 'sms_verification.sent.header', defaultMessage: 'Verification code' })}
           </h1>
@@ -114,14 +114,14 @@ const SmsVerification = () => {
             shouldAutoFocus
             isDisabled={isLoading}
             containerStyle='flex justify-center mt-2 space-x-4'
-            inputStyle='w-10i border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500'
+            inputStyle='w-10i border-gray-300 dark:bg-gray-800 dark:border-gray-800 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500'
           />
 
           <div className='text-center'>
             <Button
               size='sm'
               type='button'
-              theme='ghost'
+              theme='tertiary'
               onClick={resendVerificationCode}
               disabled={requestedAnother}
             >
@@ -135,7 +135,7 @@ const SmsVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-800 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>{intl.formatMessage({ id: 'sms_verification.header', defaultMessage: 'Enter your phone number' })}</h1>
       </div>
 
diff --git a/app/soapbox/locales/ar.json b/app/soapbox/locales/ar.json
index 772c9ff01..bb72e7904 100644
--- a/app/soapbox/locales/ar.json
+++ b/app/soapbox/locales/ar.json
@@ -624,7 +624,7 @@
   "lists.edit": "عدّل القائمة",
   "lists.edit.submit": "تعديل العنوان",
   "lists.new.create": "إنشاء قائمة",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "عنوان القائمة الجديدة",
   "lists.search": "إبحث في قائمة الحسابات التي تُتابِعها",
diff --git a/app/soapbox/locales/ast.json b/app/soapbox/locales/ast.json
index 7ec22b72b..1284630c4 100644
--- a/app/soapbox/locales/ast.json
+++ b/app/soapbox/locales/ast.json
@@ -624,7 +624,7 @@
   "lists.edit": "Editar la llista",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Títulu nuevu de la llista",
   "lists.search": "Guetar ente la xente que sigues",
diff --git a/app/soapbox/locales/bg.json b/app/soapbox/locales/bg.json
index d8166b0e2..c470f3895 100644
--- a/app/soapbox/locales/bg.json
+++ b/app/soapbox/locales/bg.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/bn.json b/app/soapbox/locales/bn.json
index 6df9b7764..c5f60c7f5 100644
--- a/app/soapbox/locales/bn.json
+++ b/app/soapbox/locales/bn.json
@@ -624,7 +624,7 @@
   "lists.edit": "তালিকা সম্পাদনা করতে",
   "lists.edit.submit": "শিরোনাম সম্পাদনা করতে",
   "lists.new.create": "তালিকাতে যুক্ত করতে",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "তালিকার নতুন শিরোনাম দিতে",
   "lists.search": "যাদের অনুসরণ করেন তাদের ভেতরে খুঁজুন",
diff --git a/app/soapbox/locales/br.json b/app/soapbox/locales/br.json
index 33eeb6bf9..4008d5d24 100644
--- a/app/soapbox/locales/br.json
+++ b/app/soapbox/locales/br.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/co.json b/app/soapbox/locales/co.json
index 2a36fb5b8..022c92b87 100644
--- a/app/soapbox/locales/co.json
+++ b/app/soapbox/locales/co.json
@@ -624,7 +624,7 @@
   "lists.edit": "Mudificà a lista",
   "lists.edit.submit": "Cambià u titulu",
   "lists.new.create": "Aghjunghje",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Titulu di a lista",
   "lists.search": "Circà indè i vostr'abbunamenti",
diff --git a/app/soapbox/locales/cy.json b/app/soapbox/locales/cy.json
index fc63fe49b..589f9897d 100644
--- a/app/soapbox/locales/cy.json
+++ b/app/soapbox/locales/cy.json
@@ -624,7 +624,7 @@
   "lists.edit": "Golygwch rhestr",
   "lists.edit.submit": "Newid teitl",
   "lists.new.create": "Ychwanegu rhestr",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Teitl rhestr newydd",
   "lists.search": "Chwilio ymysg pobl yr ydych yn ei ddilyn",
diff --git a/app/soapbox/locales/da.json b/app/soapbox/locales/da.json
index 1ebb2ad5d..5bf8ce175 100644
--- a/app/soapbox/locales/da.json
+++ b/app/soapbox/locales/da.json
@@ -624,7 +624,7 @@
   "lists.edit": "Rediger liste",
   "lists.edit.submit": "Skift titel",
   "lists.new.create": "Tilføj liste",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Ny liste titel",
   "lists.search": "Søg iblandt folk du følger",
diff --git a/app/soapbox/locales/el.json b/app/soapbox/locales/el.json
index c756fd72c..7636f276d 100644
--- a/app/soapbox/locales/el.json
+++ b/app/soapbox/locales/el.json
@@ -624,7 +624,7 @@
   "lists.edit": "Επεξεργασία λίστας",
   "lists.edit.submit": "Αλλαγή τίτλου",
   "lists.new.create": "Προσθήκη λίστας",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Τίτλος νέας λίστα",
   "lists.search": "Αναζήτησε μεταξύ των ανθρώπων που ακουλουθείς",
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index b7d3d60cb..94e50c152 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -630,7 +630,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/eo.json b/app/soapbox/locales/eo.json
index 7f7016c7e..eff42e37e 100644
--- a/app/soapbox/locales/eo.json
+++ b/app/soapbox/locales/eo.json
@@ -624,7 +624,7 @@
   "lists.edit": "Redakti la liston",
   "lists.edit.submit": "Ŝanĝi titolon",
   "lists.new.create": "Aldoni liston",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Titolo de la nova listo",
   "lists.search": "Serĉi inter la homoj, kiujn vi sekvas",
diff --git a/app/soapbox/locales/es-AR.json b/app/soapbox/locales/es-AR.json
index 676254cde..ece9380cc 100644
--- a/app/soapbox/locales/es-AR.json
+++ b/app/soapbox/locales/es-AR.json
@@ -624,7 +624,7 @@
   "lists.edit": "Editar lista",
   "lists.edit.submit": "Cambiar título",
   "lists.new.create": "Agregar lista",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Nuevo título de lista",
   "lists.search": "Buscar entre la gente que seguís",
diff --git a/app/soapbox/locales/es.json b/app/soapbox/locales/es.json
index e7b64d1db..9394f837b 100644
--- a/app/soapbox/locales/es.json
+++ b/app/soapbox/locales/es.json
@@ -624,7 +624,7 @@
   "lists.edit": "Editar lista",
   "lists.edit.submit": "Cambiar título",
   "lists.new.create": "Añadir lista",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Título de la nueva lista",
   "lists.search": "Buscar entre la gente a la que sigues",
diff --git a/app/soapbox/locales/et.json b/app/soapbox/locales/et.json
index cf751a640..172027f17 100644
--- a/app/soapbox/locales/et.json
+++ b/app/soapbox/locales/et.json
@@ -624,7 +624,7 @@
   "lists.edit": "Muuda nimistut",
   "lists.edit.submit": "Muuda pealkiri",
   "lists.new.create": "Lisa nimistu",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Uus nimistu pealkiri",
   "lists.search": "Otsi sinu poolt jälgitavate inimese hulgast",
diff --git a/app/soapbox/locales/eu.json b/app/soapbox/locales/eu.json
index ab4d91000..c1a97c08e 100644
--- a/app/soapbox/locales/eu.json
+++ b/app/soapbox/locales/eu.json
@@ -624,7 +624,7 @@
   "lists.edit": "Editatu zerrenda",
   "lists.edit.submit": "Aldatu izenburua",
   "lists.new.create": "Gehitu zerrenda",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Zerrenda berriaren izena",
   "lists.search": "Bilatu jarraitzen dituzun pertsonen artean",
diff --git a/app/soapbox/locales/fa.json b/app/soapbox/locales/fa.json
index 485b68f9b..1e81edae0 100644
--- a/app/soapbox/locales/fa.json
+++ b/app/soapbox/locales/fa.json
@@ -624,7 +624,7 @@
   "lists.edit": "ویرایش فهرست",
   "lists.edit.submit": "تغییر عنوان",
   "lists.new.create": "افزودن فهرست",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "نام فهرست تازه",
   "lists.search": "بین کسانی که پی می‌گیرید بگردید",
diff --git a/app/soapbox/locales/fi.json b/app/soapbox/locales/fi.json
index 31910f1c9..986cb2885 100644
--- a/app/soapbox/locales/fi.json
+++ b/app/soapbox/locales/fi.json
@@ -624,7 +624,7 @@
   "lists.edit": "Muokkaa listaa",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Lisää lista",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Uuden listan nimi",
   "lists.search": "Etsi seuraamistasi henkilöistä",
diff --git a/app/soapbox/locales/fr.json b/app/soapbox/locales/fr.json
index a6be99deb..292dafcf0 100644
--- a/app/soapbox/locales/fr.json
+++ b/app/soapbox/locales/fr.json
@@ -624,7 +624,7 @@
   "lists.edit": "Éditer la liste",
   "lists.edit.submit": "Changer le titre",
   "lists.new.create": "Ajouter une liste",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Titre de la nouvelle liste",
   "lists.search": "Rechercher parmi les gens que vous suivez",
diff --git a/app/soapbox/locales/ga.json b/app/soapbox/locales/ga.json
index 6401356b7..49a8e0491 100644
--- a/app/soapbox/locales/ga.json
+++ b/app/soapbox/locales/ga.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/gl.json b/app/soapbox/locales/gl.json
index 380aa48fc..d888208c2 100644
--- a/app/soapbox/locales/gl.json
+++ b/app/soapbox/locales/gl.json
@@ -624,7 +624,7 @@
   "lists.edit": "Editar lista",
   "lists.edit.submit": "Cambiar título",
   "lists.new.create": "Engadir lista",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Novo título da lista",
   "lists.search": "Procurar entre a xente que segues",
diff --git a/app/soapbox/locales/hi.json b/app/soapbox/locales/hi.json
index 25286e744..8c03d6c75 100644
--- a/app/soapbox/locales/hi.json
+++ b/app/soapbox/locales/hi.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/hr.json b/app/soapbox/locales/hr.json
index 5fa9d2207..35a0d7436 100644
--- a/app/soapbox/locales/hr.json
+++ b/app/soapbox/locales/hr.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/hu.json b/app/soapbox/locales/hu.json
index 1c9a1a5e4..53c63a983 100644
--- a/app/soapbox/locales/hu.json
+++ b/app/soapbox/locales/hu.json
@@ -624,7 +624,7 @@
   "lists.edit": "Lista szerkesztése",
   "lists.edit.submit": "Cím megváltoztatása",
   "lists.new.create": "Lista hozzáadása",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Új lista címe",
   "lists.search": "Keresés a követett személyek között",
diff --git a/app/soapbox/locales/hy.json b/app/soapbox/locales/hy.json
index f5854229a..007915b13 100644
--- a/app/soapbox/locales/hy.json
+++ b/app/soapbox/locales/hy.json
@@ -624,7 +624,7 @@
   "lists.edit": "Փոփոխել ցանկը",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Ավելացնել ցանկ",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Նոր ցանկի վերնագիր",
   "lists.search": "Փնտրել քո հետեւած մարդկանց մեջ",
diff --git a/app/soapbox/locales/id.json b/app/soapbox/locales/id.json
index 7e5a2b1dc..b991afa2d 100644
--- a/app/soapbox/locales/id.json
+++ b/app/soapbox/locales/id.json
@@ -624,7 +624,7 @@
   "lists.edit": "Sunting daftar",
   "lists.edit.submit": "Ubah judul",
   "lists.new.create": "Tambah daftar",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Judul daftar baru",
   "lists.search": "Cari di antara orang yang Anda ikuti",
diff --git a/app/soapbox/locales/io.json b/app/soapbox/locales/io.json
index 5f6cb6333..36a86bc2c 100644
--- a/app/soapbox/locales/io.json
+++ b/app/soapbox/locales/io.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/ka.json b/app/soapbox/locales/ka.json
index 05f9a3f9f..448f4cae9 100644
--- a/app/soapbox/locales/ka.json
+++ b/app/soapbox/locales/ka.json
@@ -624,7 +624,7 @@
   "lists.edit": "სიის შეცვლა",
   "lists.edit.submit": "Change title",
   "lists.new.create": "სიის დამატება",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "ახალი სიის სათაური",
   "lists.search": "ძებნა ადამიანებს შორის რომელთაც მიჰყვებით",
diff --git a/app/soapbox/locales/kk.json b/app/soapbox/locales/kk.json
index e4f77f3ca..c397800b1 100644
--- a/app/soapbox/locales/kk.json
+++ b/app/soapbox/locales/kk.json
@@ -624,7 +624,7 @@
   "lists.edit": "Тізімді өңдеу",
   "lists.edit.submit": "Тақырыбын өзгерту",
   "lists.new.create": "Тізім құру",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Жаңа тізім аты",
   "lists.search": "Сіз іздеген адамдар арасында іздеу",
diff --git a/app/soapbox/locales/ko.json b/app/soapbox/locales/ko.json
index 4e0ac92cd..db8a486be 100644
--- a/app/soapbox/locales/ko.json
+++ b/app/soapbox/locales/ko.json
@@ -624,7 +624,7 @@
   "lists.edit": "리스트 편집",
   "lists.edit.submit": "제목 수정",
   "lists.new.create": "리스트 추가",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "새 리스트의 이름",
   "lists.search": "팔로우 중인 사람들 중에서 찾기",
diff --git a/app/soapbox/locales/lt.json b/app/soapbox/locales/lt.json
index 0254f3e80..9fdc5d331 100644
--- a/app/soapbox/locales/lt.json
+++ b/app/soapbox/locales/lt.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/lv.json b/app/soapbox/locales/lv.json
index 00408f1e1..d1cb0d41c 100644
--- a/app/soapbox/locales/lv.json
+++ b/app/soapbox/locales/lv.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/mk.json b/app/soapbox/locales/mk.json
index c25e28d88..01e5ae407 100644
--- a/app/soapbox/locales/mk.json
+++ b/app/soapbox/locales/mk.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/ms.json b/app/soapbox/locales/ms.json
index 723b073b3..790f63a45 100644
--- a/app/soapbox/locales/ms.json
+++ b/app/soapbox/locales/ms.json
@@ -624,7 +624,7 @@
   "lists.edit": "Edit list",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Add list",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "New list title",
   "lists.search": "Search among people you follow",
diff --git a/app/soapbox/locales/nl.json b/app/soapbox/locales/nl.json
index 8a6c569af..39c7269d9 100644
--- a/app/soapbox/locales/nl.json
+++ b/app/soapbox/locales/nl.json
@@ -624,7 +624,7 @@
   "lists.edit": "Lijst bewerken",
   "lists.edit.submit": "Titel veranderen",
   "lists.new.create": "Lijst toevoegen",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Naam nieuwe lijst",
   "lists.search": "Zoek naar mensen die je volgt",
diff --git a/app/soapbox/locales/nn.json b/app/soapbox/locales/nn.json
index 3b534cb0a..9fbbd86eb 100644
--- a/app/soapbox/locales/nn.json
+++ b/app/soapbox/locales/nn.json
@@ -624,7 +624,7 @@
   "lists.edit": "Rediger liste",
   "lists.edit.submit": "Bytt tittel",
   "lists.new.create": "Legg til liste",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Ny liste tittel",
   "lists.search": "Søk gjennom folk du føljar",
diff --git a/app/soapbox/locales/no.json b/app/soapbox/locales/no.json
index e66c34163..1f2446b7f 100644
--- a/app/soapbox/locales/no.json
+++ b/app/soapbox/locales/no.json
@@ -624,7 +624,7 @@
   "lists.edit": "Rediger listen",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Ligg til liste",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Ny listetittel",
   "lists.search": "Søk blant personer du følger",
diff --git a/app/soapbox/locales/oc.json b/app/soapbox/locales/oc.json
index d92fae8fa..4eb55fb27 100644
--- a/app/soapbox/locales/oc.json
+++ b/app/soapbox/locales/oc.json
@@ -624,7 +624,7 @@
   "lists.edit": "Modificar la lista",
   "lists.edit.submit": "Cambiar lo títol",
   "lists.new.create": "Ajustar una lista",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Títol de la nòva lista",
   "lists.search": "Cercar demest lo monde que seguètz",
diff --git a/app/soapbox/locales/pt-BR.json b/app/soapbox/locales/pt-BR.json
index 8b959d70d..41a5b397e 100644
--- a/app/soapbox/locales/pt-BR.json
+++ b/app/soapbox/locales/pt-BR.json
@@ -624,7 +624,7 @@
   "lists.edit": "Editar lista",
   "lists.edit.submit": "Mudar o título",
   "lists.new.create": "Adicionar lista",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Novo título da lista",
   "lists.search": "Procurar entre as pessoas que você segue",
diff --git a/app/soapbox/locales/ro.json b/app/soapbox/locales/ro.json
index 701d4746c..44f37a7d2 100644
--- a/app/soapbox/locales/ro.json
+++ b/app/soapbox/locales/ro.json
@@ -624,7 +624,7 @@
   "lists.edit": "Editează lista",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Adaugă listă",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Titlu pentru noua listă",
   "lists.search": "Caută printre persoanale pe care le urmărești",
diff --git a/app/soapbox/locales/ru.json b/app/soapbox/locales/ru.json
index 6f3f01305..41b33d909 100644
--- a/app/soapbox/locales/ru.json
+++ b/app/soapbox/locales/ru.json
@@ -624,7 +624,7 @@
   "lists.edit": "Изменить список",
   "lists.edit.submit": "Изменить название",
   "lists.new.create": "Новый список",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Заголовок списка",
   "lists.search": "Искать из ваших подписок",
diff --git a/app/soapbox/locales/sk.json b/app/soapbox/locales/sk.json
index efe98b3d7..d5b4f83f8 100644
--- a/app/soapbox/locales/sk.json
+++ b/app/soapbox/locales/sk.json
@@ -624,7 +624,7 @@
   "lists.edit": "Uprav zoznam",
   "lists.edit.submit": "Zmeň názov",
   "lists.new.create": "Pridaj zoznam",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Názov nového zoznamu",
   "lists.search": "Vyhľadávaj medzi užívateľmi, ktorých sleduješ",
diff --git a/app/soapbox/locales/sl.json b/app/soapbox/locales/sl.json
index e1c370c43..8629c898b 100644
--- a/app/soapbox/locales/sl.json
+++ b/app/soapbox/locales/sl.json
@@ -624,7 +624,7 @@
   "lists.edit": "Uredi seznam",
   "lists.edit.submit": "Spremeni naslov",
   "lists.new.create": "Dodaj seznam",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Nov naslov seznama",
   "lists.search": "Išči med ljudmi, katerim sledite",
diff --git a/app/soapbox/locales/sq.json b/app/soapbox/locales/sq.json
index d9dd0fae6..8ce5e89bf 100644
--- a/app/soapbox/locales/sq.json
+++ b/app/soapbox/locales/sq.json
@@ -624,7 +624,7 @@
   "lists.edit": "Përpunoni listën",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Shtoni listë",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Titull liste të re",
   "lists.search": "Kërkoni mes personash që ndiqni",
diff --git a/app/soapbox/locales/sr-Latn.json b/app/soapbox/locales/sr-Latn.json
index 629f3552f..60231149f 100644
--- a/app/soapbox/locales/sr-Latn.json
+++ b/app/soapbox/locales/sr-Latn.json
@@ -624,7 +624,7 @@
   "lists.edit": "Izmeni listu",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Dodaj listu",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Naslov nove liste",
   "lists.search": "Pretraži među ljudima koje pratite",
diff --git a/app/soapbox/locales/sr.json b/app/soapbox/locales/sr.json
index 61e8f8441..08479bf79 100644
--- a/app/soapbox/locales/sr.json
+++ b/app/soapbox/locales/sr.json
@@ -624,7 +624,7 @@
   "lists.edit": "Измени листу",
   "lists.edit.submit": "Change title",
   "lists.new.create": "Додај листу",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Наслов нове листе",
   "lists.search": "Претражи међу људима које пратите",
diff --git a/app/soapbox/locales/sv.json b/app/soapbox/locales/sv.json
index 474922047..2d05a117a 100644
--- a/app/soapbox/locales/sv.json
+++ b/app/soapbox/locales/sv.json
@@ -624,7 +624,7 @@
   "lists.edit": "Redigera lista",
   "lists.edit.submit": "Ändra titel",
   "lists.new.create": "Lägg till lista",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Ny listrubrik",
   "lists.search": "Sök bland personer du följer",
diff --git a/app/soapbox/locales/ta.json b/app/soapbox/locales/ta.json
index 04dac445b..23dfecff2 100644
--- a/app/soapbox/locales/ta.json
+++ b/app/soapbox/locales/ta.json
@@ -624,7 +624,7 @@
   "lists.edit": "பட்டியலை திருத்து",
   "lists.edit.submit": "தலைப்பு மாற்றவும்",
   "lists.new.create": "பட்டியலில் சேர்",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "புதிய பட்டியல் தலைப்பு",
   "lists.search": "நீங்கள் பின்தொடரும் நபர்கள் மத்தியில் தேடுதல்",
diff --git a/app/soapbox/locales/te.json b/app/soapbox/locales/te.json
index 8ebfe5839..ac87c4dd5 100644
--- a/app/soapbox/locales/te.json
+++ b/app/soapbox/locales/te.json
@@ -624,7 +624,7 @@
   "lists.edit": "జాబితాను సవరించు",
   "lists.edit.submit": "శీర్షిక మార్చు",
   "lists.new.create": "జాబితాను జోడించు",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "కొత్త జాబితా శీర్షిక",
   "lists.search": "మీరు అనుసరించే వ్యక్తులలో శోధించండి",
diff --git a/app/soapbox/locales/th.json b/app/soapbox/locales/th.json
index 5d21b188c..538b1110d 100644
--- a/app/soapbox/locales/th.json
+++ b/app/soapbox/locales/th.json
@@ -624,7 +624,7 @@
   "lists.edit": "แก้ไขรายการ",
   "lists.edit.submit": "เปลี่ยนชื่อเรื่อง",
   "lists.new.create": "เพิ่มรายการ",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "ชื่อเรื่องรายการใหม่",
   "lists.search": "ค้นหาในหมู่ผู้คนที่คุณติดตาม",
diff --git a/app/soapbox/locales/tr.json b/app/soapbox/locales/tr.json
index d70a53f1a..75563470d 100644
--- a/app/soapbox/locales/tr.json
+++ b/app/soapbox/locales/tr.json
@@ -624,7 +624,7 @@
   "lists.edit": "listeyi düzenle",
   "lists.edit.submit": "Başlığı değiştir",
   "lists.new.create": "Liste ekle",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Yeni liste başlığı",
   "lists.search": "Takip ettiğiniz kişiler arasından arayın",
diff --git a/app/soapbox/locales/uk.json b/app/soapbox/locales/uk.json
index 4026edbb6..7fc49ec5b 100644
--- a/app/soapbox/locales/uk.json
+++ b/app/soapbox/locales/uk.json
@@ -624,7 +624,7 @@
   "lists.edit": "Редагувати список",
   "lists.edit.submit": "Змінити назву",
   "lists.new.create": "Додати список",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "Нова назва списку",
   "lists.search": "Шукати серед людей, на яких ви підписані",
diff --git a/app/soapbox/locales/zh-HK.json b/app/soapbox/locales/zh-HK.json
index 6939545ec..d1d518dff 100644
--- a/app/soapbox/locales/zh-HK.json
+++ b/app/soapbox/locales/zh-HK.json
@@ -624,7 +624,7 @@
   "lists.edit": "編輯列表",
   "lists.edit.submit": "Change title",
   "lists.new.create": "新增列表",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "新列表標題",
   "lists.search": "從你關注的用戶中搜索",
diff --git a/app/soapbox/locales/zh-TW.json b/app/soapbox/locales/zh-TW.json
index 5fb238f09..c563aedb1 100644
--- a/app/soapbox/locales/zh-TW.json
+++ b/app/soapbox/locales/zh-TW.json
@@ -624,7 +624,7 @@
   "lists.edit": "編輯名單",
   "lists.edit.submit": "變更標題",
   "lists.new.create": "新增名單",
-  "lists.new.create_title": "Create",
+  "lists.new.create_title": "Add list",
   "lists.new.save_title": "Save Title",
   "lists.new.title_placeholder": "新名單標題",
   "lists.search": "搜尋您關注的使用者",
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index d90112810..eab311266 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -16,18 +16,6 @@ import type {
 } from 'soapbox/types/soapbox';
 
 const DEFAULT_COLORS = ImmutableMap<string, any>({
-  gray: ImmutableMap({
-    50: '#f9fafb',
-    100: '#f3f4f6',
-    200: '#e5e7eb',
-    300: '#d1d5db',
-    400: '#9ca3af',
-    500: '#6b7280',
-    600: '#4b5563',
-    700: '#374151',
-    800: '#1f2937',
-    900: '#111827',
-  }),
   success: ImmutableMap({
     50: '#f0fdf4',
     100: '#dcfce7',
@@ -159,6 +147,7 @@ const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMa
   const missing = ImmutableMap({
     'gradient-start': colors.getIn(['primary', '500']),
     'gradient-end': colors.getIn(['accent', '500']),
+    'accent-blue': colors.getIn(['primary', '600']),
   });
 
   return soapboxConfig.set('colors', missing.mergeDeep(colors));
diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx
index e161bbe53..32b68e486 100644
--- a/app/soapbox/pages/home_page.tsx
+++ b/app/soapbox/pages/home_page.tsx
@@ -38,7 +38,7 @@ const HomePage: React.FC = ({ children }) => {
 
   return (
     <>
-      <Layout.Main className='pt-3 sm:pt-0 dark:divide-slate-700 space-y-3'>
+      <Layout.Main className='pt-3 sm:pt-0 dark:divide-gray-800 space-y-3'>
         {me && (
           <Card variant='rounded' ref={composeBlock}>
             <CardBody>
diff --git a/app/soapbox/utils/__tests__/colors.test.ts b/app/soapbox/utils/__tests__/colors.test.ts
index 8677cb1c6..cb523e357 100644
--- a/app/soapbox/utils/__tests__/colors.test.ts
+++ b/app/soapbox/utils/__tests__/colors.test.ts
@@ -15,8 +15,8 @@ describe('tintify()', () => {
       '500': '#0482d8',
       '600': '#0475c2',
       '700': '#0362a2',
-      '800': '#024e82',
-      '900': '#02406a',
+      '800': '#012741',
+      '900': '#011929',
     });
   });
 });
diff --git a/app/soapbox/utils/__tests__/tailwind.test.ts b/app/soapbox/utils/__tests__/tailwind.test.ts
index 3c359ecc0..081d9cfd6 100644
--- a/app/soapbox/utils/__tests__/tailwind.test.ts
+++ b/app/soapbox/utils/__tests__/tailwind.test.ts
@@ -25,8 +25,8 @@ describe('toTailwind()', () => {
           500: '#0482d8',
           600: '#0475c2',
           700: '#0362a2',
-          800: '#024e82',
-          900: '#02406a',
+          800: '#012741',
+          900: '#011929',
         },
       },
     };
@@ -57,8 +57,8 @@ describe('toTailwind()', () => {
           500: '#0482d8',
           600: '#0475c2',
           700: '#0362a2',
-          800: '#024e82',
-          900: '#02406a',
+          800: '#012741',
+          900: '#011929',
         },
       },
     };
@@ -82,8 +82,8 @@ describe('fromLegacyColors()', () => {
         500: '#0482d8',
         600: '#0475c2',
         700: '#0362a2',
-        800: '#024e82',
-        900: '#02406a',
+        800: '#012741',
+        900: '#011929',
       },
       // Accent color is generated from brandColor
       accent: {
@@ -95,8 +95,32 @@ describe('fromLegacyColors()', () => {
         500: '#10b3d1',
         600: '#0ea1bc',
         700: '#0c869d',
-        800: '#0a6b7d',
-        900: '#085866',
+        800: '#05363f',
+        900: '#032228',
+      },
+      secondary: {
+        50: '#f3fbfd',
+        100: '#e7f7fa',
+        200: '#c3ecf4',
+        300: '#58cadf',
+        400: '#40c2da',
+        500: '#10b3d1',
+        600: '#0ea1bc',
+        700: '#0c869d',
+        800: '#05363f',
+        900: '#032228',
+      },
+      gray: {
+        50: '#f8fafa',
+        100: '#f1f4f6',
+        200: '#dde4e8',
+        300: '#9eb2bf',
+        400: '#91a7b5',
+        500: '#7591a3',
+        600: '#698393',
+        700: '#586d7a',
+        800: '#232c31',
+        900: '#161c1f',
       },
     };
 
@@ -120,8 +144,8 @@ describe('fromLegacyColors()', () => {
         500: '#0482d8',
         600: '#0475c2',
         700: '#0362a2',
-        800: '#024e82',
-        900: '#02406a',
+        800: '#012741',
+        900: '#011929',
       },
       accent: {
         50: '#f4fdf3',
@@ -132,8 +156,32 @@ describe('fromLegacyColors()', () => {
         500: '#2bd110',
         600: '#27bc0e',
         700: '#209d0c',
-        800: '#1a7d0a',
-        900: '#156608',
+        800: '#0d3f05',
+        900: '#082803',
+      },
+      secondary: {
+        50: '#f4fdf3',
+        100: '#eafae7',
+        200: '#caf4c3',
+        300: '#6bdf58',
+        400: '#55da40',
+        500: '#2bd110',
+        600: '#27bc0e',
+        700: '#209d0c',
+        800: '#0d3f05',
+        900: '#082803',
+      },
+      gray: {
+        50: '#f8fafa',
+        100: '#f1f4f6',
+        200: '#dde4e8',
+        300: '#9eb2bf',
+        400: '#91a7b5',
+        500: '#7591a3',
+        600: '#698393',
+        700: '#586d7a',
+        800: '#232c31',
+        900: '#161c1f',
       },
     };
 
@@ -156,8 +204,8 @@ describe('expandPalette()', () => {
         500: '#0482d8',
         600: '#0475c2',
         700: '#0362a2',
-        800: '#024e82',
-        900: '#02406a',
+        800: '#012741',
+        900: '#011929',
       },
     };
 
@@ -176,8 +224,8 @@ describe('expandPalette()', () => {
         500: '#0482d8',
         600: '#0475c2',
         700: '#0362a2',
-        800: '#024e82',
-        900: '#02406a',
+        800: '#012741',
+        900: '#011929',
       },
       accent: '#2bd110',
     };
@@ -192,8 +240,8 @@ describe('expandPalette()', () => {
         500: '#0482d8',
         600: '#0475c2',
         700: '#0362a2',
-        800: '#024e82',
-        900: '#02406a',
+        800: '#012741',
+        900: '#011929',
       },
       accent: {
         50: '#f4fdf3',
@@ -204,8 +252,8 @@ describe('expandPalette()', () => {
         500: '#2bd110',
         600: '#27bc0e',
         700: '#209d0c',
-        800: '#1a7d0a',
-        900: '#156608',
+        800: '#0d3f05',
+        900: '#082803',
       },
     };
 
diff --git a/app/soapbox/utils/colors.ts b/app/soapbox/utils/colors.ts
index 796b2123a..277e73481 100644
--- a/app/soapbox/utils/colors.ts
+++ b/app/soapbox/utils/colors.ts
@@ -107,8 +107,8 @@ export default function(baseColor: string): TailwindColorObject {
     400: 0.2,
     600: 0.9,
     700: 0.75,
-    800: 0.6,
-    900: 0.49,
+    800: 0.3,
+    900: 0.19,
   };
 
   [50, 100, 200, 300, 400].forEach(level => {
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 550aba273..046ad4f0c 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -525,7 +525,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see POST /api/v1/apps
      * @see POST /oauth/token
      */
-    scopes: v.software === PLEROMA ? 'read write follow push admin' : 'read write follow push admin:read admin:write',
+    scopes: v.software === PLEROMA ? 'read write follow push admin' : 'read write follow push',
 
     /**
      * Ability to manage account security settings.
diff --git a/app/soapbox/utils/tailwind.ts b/app/soapbox/utils/tailwind.ts
index af55da8d6..3315a7209 100644
--- a/app/soapbox/utils/tailwind.ts
+++ b/app/soapbox/utils/tailwind.ts
@@ -1,7 +1,7 @@
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
 import tintify from 'soapbox/utils/colors';
-import { generateAccent } from 'soapbox/utils/theme';
+import { generateAccent, generateNeutral } from 'soapbox/utils/theme';
 
 import type { TailwindColorPalette } from 'soapbox/types/colors';
 
@@ -37,10 +37,13 @@ const maybeGenerateAccentColor = (brandColor: any): string | null => {
 export const fromLegacyColors = (soapboxConfig: SoapboxConfig): TailwindColorPalette => {
   const brandColor = soapboxConfig.get('brandColor');
   const accentColor = soapboxConfig.get('accentColor');
+  const accent = isHex(accentColor) ? accentColor : maybeGenerateAccentColor(brandColor);
 
   return expandPalette({
     primary: isHex(brandColor) ? brandColor : null,
-    accent: isHex(accentColor) ? accentColor : maybeGenerateAccentColor(brandColor),
+    secondary: accent,
+    accent,
+    gray: (isHex(brandColor) ? generateNeutral(brandColor) : null) as any,
   });
 };
 
diff --git a/app/soapbox/utils/theme.ts b/app/soapbox/utils/theme.ts
index ccf523b8b..4f6126c17 100644
--- a/app/soapbox/utils/theme.ts
+++ b/app/soapbox/utils/theme.ts
@@ -59,7 +59,7 @@ function hslToHex(color: Hsl): string {
   return `#${f(0)}${f(8)}${f(4)}`;
 }
 
-// Generate accent color from brand color
+/** Generate accent color from brand color. */
 export const generateAccent = (brandColor: string): string | null => {
   const rgb = hexToRgb(brandColor);
   if (!rgb) return null;
@@ -68,6 +68,15 @@ export const generateAccent = (brandColor: string): string | null => {
   return hslToHex({ h: h - 15, s: 86, l: 44 });
 };
 
+/** Generate neutral color from brand color. */
+export const generateNeutral = (brandColor: string): string | null => {
+  const rgb = hexToRgb(brandColor);
+  if (!rgb) return null;
+
+  const { h } = rgbToHsl(rgb);
+  return hslToHex({ h, s: 20, l: 55 });
+};
+
 const parseShades = (obj: Record<string, any>, color: string, shades: Record<string, any>): void => {
   if (!shades) return;
 
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index e0ccdc416..eb1880805 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -161,18 +161,22 @@ a .account__avatar {
 }
 
 .account-gallery__item {
+  @apply rounded-lg m-1;
   border: 0;
   box-sizing: border-box;
   display: block;
   position: relative;
-  border-radius: 4px;
   overflow: hidden;
-  margin: 2px;
 
   a {
     background: var(--brand-color--faint);
   }
 
+  video,
+  img {
+    @apply rounded-lg;
+  }
+
   &__icons {
     position: absolute;
     top: 50%;
diff --git a/app/styles/application.scss b/app/styles/application.scss
index f27ab386e..1b70c6982 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -93,18 +93,30 @@
     height: 100dvh;
   }
 
-  .bg-gradient-lg {
+  .bg-gradient-light {
     background: linear-gradient(
-      112deg,
+      115deg,
       rgba(0, 0, 0, 0) 0%,
       rgba(0, 0, 0, 0) 20%,
-      rgba(var(--color-gradient-start) / 0.1) 30%,
+      rgba(var(--color-gradient-start) / 0.1) 35%,
       rgba(var(--color-gradient-end) / 0.1) 70%,
       rgba(0, 0, 0, 0) 80%,
       rgba(0, 0, 0, 0) 100%
     );
   }
 
+  .bg-gradient-dark {
+    background: linear-gradient(
+      115deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 30%,
+      rgba(var(--color-gradient-start) / 0.1) 45%,
+      rgba(var(--color-gradient-start) / 0.2) 55%,
+      rgba(0, 0, 0, 0) 70%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
   .bg-gradient-sm {
     background: linear-gradient(
       112deg,
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 8d1568f18..5bfb5362c 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -83,7 +83,7 @@
   }
 
   &__content {
-    @apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-slate-800;
+    @apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-gray-800;
 
     > div {
       @apply max-h-full;
@@ -139,7 +139,7 @@
   display: flex;
 
   &__bubble {
-    @apply px-2.5 py-1 rounded-lg bg-primary-50 dark:bg-slate-700;
+    @apply px-2.5 py-1 rounded-lg bg-primary-50 dark:bg-gray-700;
     max-width: 70%;
     text-overflow: ellipsis;
     overflow-wrap: break-word;
diff --git a/app/styles/components/accordion.scss b/app/styles/components/accordion.scss
index 314da1369..77c39ae1e 100644
--- a/app/styles/components/accordion.scss
+++ b/app/styles/components/accordion.scss
@@ -3,7 +3,7 @@
 }
 
 .accordion {
-  @apply text-black dark:text-white bg-gray-100 dark:bg-slate-900;
+  @apply text-black dark:text-white bg-gray-100 dark:bg-gray-900;
   padding: 15px 20px;
   font-size: 14px;
   border-radius: 8px;
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index 5c4d4e2fe..6c6fb42fa 100644
--- a/app/styles/components/admin.scss
+++ b/app/styles/components/admin.scss
@@ -3,7 +3,7 @@
 }
 
 .dashcounter {
-  @apply bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center space-y-2 hover:-translate-y-1 transition-transform cursor-pointer;
+  @apply bg-gray-200 dark:bg-gray-800 p-4 rounded flex flex-col items-center space-y-2 hover:-translate-y-1 transition-transform cursor-pointer;
 }
 
 .dashwidgets {
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index e0f73e6d9..5ac761946 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -586,7 +586,7 @@
 
 .empty-column-indicator,
 .error-column {
-  @apply bg-primary-50 dark:bg-slate-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
+  @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
 
   @supports (display: grid) { // hack to fix Chrome <57
     contain: strict;
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index ca2979098..890016d61 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -80,62 +80,31 @@
       overflow: hidden;
 
       &__actions {
-        background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        opacity: 0;
-        transition: opacity 0.1s ease;
+        @apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
+
+        &.active {
+          @apply opacity-100;
+        }
 
         .icon-button {
-          flex: 0 1 auto;
-          color: #fff;
-          font-size: 14px;
-          font-weight: 500;
-          padding: 10px;
-          font-family: inherit;
-
-          &:hover,
-          &:focus,
-          &:active {
-            color: var(--accent-color);
-          }
+          @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 flex items-center;
         }
-        &.active { opacity: 1; }
       }
 
       &-description {
-        position: absolute;
-        z-index: 2;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        box-sizing: border-box;
-        background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-        padding: 10px;
-        opacity: 0;
-        transition: opacity 0.1s ease;
+        @apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
+
+        &.active {
+          @apply opacity-100;
+        }
 
         textarea {
-          background: transparent;
-          box-sizing: border-box;
-          color: #fff;
-          border: 1px solid #fff;
-          outline: none;
-          padding: 10px;
-          margin: 0;
-          width: 100%;
-          font-family: inherit;
-          font-size: 14px;
-          font-weight: 500;
-
-          &:focus { color: #fff; }
+          @apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
 
           &::placeholder {
-            color: rgba(255, 255, 255, 0.6);
+            @apply text-white/60;
           }
         }
-        &.active { opacity: 1; }
       }
 
       &-preview {
@@ -197,7 +166,7 @@
 } // end .compose-form
 
 .privacy-dropdown__dropdown {
-  @apply absolute bg-white dark:bg-slate-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;
+  @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;
 
   &.top {
     transform-origin: 50% 100%;
@@ -209,10 +178,10 @@
 }
 
 .privacy-dropdown__option {
-  @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
+  @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
 
   &.active {
-    @apply bg-gray-100 dark:bg-slate-800;
+    @apply bg-gray-100 dark:bg-gray-800;
   }
 
   &:hover,
@@ -224,7 +193,7 @@
   }
 
   &.active {
-    @apply hover:bg-gray-200 dark:hover:bg-slate-700;
+    @apply hover:bg-gray-200 dark:hover:bg-gray-700;
   }
 }
 
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index 6d7552a80..7c99ad92e 100644
--- a/app/styles/components/datepicker.scss
+++ b/app/styles/components/datepicker.scss
@@ -1,9 +1,9 @@
 .react-datepicker {
-  @apply dark:bg-slate-900 dark:border-slate-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg;
+  @apply dark:bg-gray-900 dark:border-gray-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg;
 }
 
 .react-datepicker__input-container > input {
-  @apply dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary-500 focus:border-primary-500;
+  @apply dark:bg-gray-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary-500 focus:border-primary-500;
 
   &.has-error {
     @apply text-red-600 border-red-600;
@@ -12,11 +12,11 @@
 
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  @apply border-b-white dark:border-b-slate-900;
+  @apply border-b-white dark:border-b-gray-900;
 }
 
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
-  @apply border-b-gray-200 dark:border-b-slate-700;
+  @apply border-b-gray-200 dark:border-b-gray-700;
 }
 
 .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
@@ -24,7 +24,7 @@
 }
 
 .react-datepicker__header {
-  @apply bg-white dark:bg-slate-900 border-b-0 py-1 px-0;
+  @apply bg-white dark:bg-gray-900 border-b-0 py-1 px-0;
   // border-top-left-radius: var(--border-radius-lg);
 }
 
@@ -39,7 +39,7 @@
 }
 
 .react-datepicker__navigation {
-  @apply top-4 h-8 w-8 rounded hover:bg-gray-50 dark:hover:bg-slate-900/50;
+  @apply top-4 h-8 w-8 rounded hover:bg-gray-50 dark:hover:bg-gray-900/50;
 }
 
 .react-datepicker__navigation-icon {
@@ -82,11 +82,11 @@
 }
 
 .react-datepicker__time {
-  @apply dark:bg-slate-900;
+  @apply dark:bg-gray-900;
 }
 
 .react-datepicker__time-container {
-  @apply dark:border-slate-700;
+  @apply dark:border-gray-700;
 }
 
 .react-datepicker__day-name,
@@ -108,7 +108,7 @@
 .react-datepicker__quarter-text:hover,
 .react-datepicker__year-text:hover,
 .react-datepicker__time-list-item:hover {
-  @apply bg-gray-100 dark:bg-slate-700 rounded;
+  @apply bg-gray-100 dark:bg-gray-700 rounded;
 }
 
 .react-datepicker__day--selected,
@@ -123,14 +123,14 @@
 .react-datepicker__year-text--selected,
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
-  @apply bg-primary-600 hover:bg-primary-700 dark:bg-slate-300 dark:hover:bg-slate-200 text-white dark:text-black rounded;
+  @apply bg-primary-600 hover:bg-primary-700 dark:bg-gray-300 dark:hover:bg-gray-200 text-white dark:text-black rounded;
 }
 
 .react-datepicker__day--keyboard-selected,
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
-  @apply bg-primary-50 hover:bg-primary-100 dark:bg-slate-700 dark:hover:bg-slate-600 text-primary-600 dark:text-primary-400;
+  @apply bg-primary-50 hover:bg-primary-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-primary-600 dark:text-primary-400;
 }
 
 .react-datepicker__close-icon::after {
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 8cd6fd711..287838b2d 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -92,7 +92,7 @@
 }
 
 .thread {
-  @apply bg-white dark:bg-slate-800 p-4 shadow-xl dark:shadow-inset sm:p-6 sm:rounded-xl;
+  @apply bg-white dark:bg-primary-900 p-4 shadow-xl dark:shadow-none sm:p-6 sm:rounded-xl;
 
   &__status {
     @apply relative pb-4;
@@ -132,7 +132,7 @@
   // }
 
   &__connector {
-    @apply bg-gray-200 dark:bg-gray-600 absolute w-0.5 left-5 hidden;
+    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden;
 
     &--bottom {
       @apply block;
diff --git a/app/styles/components/directory.scss b/app/styles/components/directory.scss
index fa6925df7..11364fdd8 100644
--- a/app/styles/components/directory.scss
+++ b/app/styles/components/directory.scss
@@ -31,7 +31,7 @@
   }
 
   &__card {
-    @apply rounded-lg bg-gray-100 dark:bg-slate-700;
+    @apply rounded-lg bg-gray-100 dark:bg-gray-700;
     box-sizing: border-box;
     margin-bottom: 0;
     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
@@ -53,7 +53,7 @@
     }
 
     &__img {
-      @apply bg-primary-200 dark:bg-slate-600;
+      @apply bg-primary-200 dark:bg-gray-600;
       height: 125px;
       position: relative;
 
@@ -67,7 +67,7 @@
     }
 
     &__bar {
-      @apply bg-primary-200 dark:bg-slate-600;
+      @apply bg-primary-200 dark:bg-gray-600;
       display: flex;
       align-items: center;
       padding: 10px;
@@ -149,7 +149,7 @@
       }
 
       .account__header__content {
-        @apply border-b border-solid border-gray-200 dark:border-slate-600;
+        @apply border-b border-solid border-gray-200 dark:border-gray-600;
         box-sizing: border-box;
         padding: 15px 10px;
         width: 100%;
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 4d517a8d2..8be2978e3 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -1,5 +1,5 @@
 .dropdown-menu {
-  @apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg py-1 w-56;
+  @apply absolute bg-white dark:bg-gray-900 z-40 rounded-md shadow-lg py-1 w-56 dark:ring-2 dark:ring-primary-700 focus:outline-none;
 
   &.left { transform-origin: 100% 50%; }
   &.top { transform-origin: 50% 100%; }
@@ -11,28 +11,28 @@
     border: 0 solid transparent;
 
     &.left {
-      @apply border-l-white dark:border-l-slate-900;
+      @apply border-l-white dark:border-l-gray-900;
       right: -5px;
       margin-top: -5px;
       border-width: 5px 0 5px 5px;
     }
 
     &.top {
-      @apply border-t-white dark:border-t-slate-900;
+      @apply border-t-white dark:border-t-gray-900;
       bottom: -5px;
       margin-left: -5px;
       border-width: 5px 5px 0;
     }
 
     &.bottom {
-      @apply border-b-white dark:border-b-slate-900;
+      @apply border-b-white dark:border-b-gray-900;
       top: -5px;
       margin-left: -5px;
       border-width: 0 5px 5px;
     }
 
     &.right {
-      @apply border-r-white dark:border-r-slate-900;
+      @apply border-r-white dark:border-r-gray-900;
       left: -5px;
       margin-top: -5px;
       border-width: 5px 5px 5px 0;
@@ -47,7 +47,7 @@
     @apply focus-within:ring-primary-500 focus-within:ring-2;
 
     a {
-      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 focus:bg-gray-100 dark:focus:bg-slate-800 cursor-pointer;
+      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 cursor-pointer;
 
       > .svg-icon:first-child {
         @apply h-5 w-5 mr-2.5 transition-none;
@@ -64,7 +64,7 @@
   }
 
   &__separator {
-    @apply block my-2 h-[1px] bg-gray-200 dark:bg-gray-600;
+    @apply block my-2 h-[1px] bg-gray-100 dark:bg-gray-800;
   }
 }
 // end .dropdown-menu
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 1abb7fa5a..311af3b64 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -65,7 +65,7 @@
     width: 100%;
 
     img {
-      object-fit: cover;
+      @apply object-cover rounded-lg;
     }
   }
 
@@ -106,7 +106,7 @@
 }
 
 .media-gallery__preview {
-  @apply bg-gray-200 dark:bg-slate-900;
+  @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -145,6 +145,7 @@
 }
 
 .media-gallery__item-gifv-thumbnail {
+  @apply rounded-md;
   cursor: zoom-in;
   height: 100%;
   object-fit: cover;
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 9974c7fa0..5f5ed6db3 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -285,7 +285,7 @@
 }
 
 .actions-modal {
-  @apply w-full max-h-full max-w-lg mt-auto mb-2 bg-white dark:bg-slate-800;
+  @apply w-full max-h-full max-w-lg mt-auto mb-2 bg-white dark:bg-gray-800;
 
   .status {
     overflow-y: auto;
diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss
index 3f3ef49e4..726e52731 100644
--- a/app/styles/components/react-toggle.scss
+++ b/app/styles/components/react-toggle.scss
@@ -28,12 +28,12 @@
 }
 
 .react-toggle-track {
-  @apply bg-gray-300 dark:bg-slate-700 w-[50px] p-0 rounded-full transition-colors;
+  @apply bg-gray-500 dark:bg-gray-700 w-[50px] p-0 rounded-full transition-colors;
   height: var(--input-height);
 }
 
 .react-toggle--checked .react-toggle-track {
-  @apply bg-primary-600;
+  @apply bg-primary-600 dark:bg-accent-blue;
 }
 
 .react-toggle-track-check {
@@ -88,6 +88,6 @@
 }
 
 .react-toggle--checked .react-toggle-thumb {
-  @apply border-primary-600;
+  @apply border-primary-600 dark:border-accent-blue;
   left: 21px;
 }
diff --git a/app/styles/components/reply-mentions.scss b/app/styles/components/reply-mentions.scss
index 6e10654b8..39b70a585 100644
--- a/app/styles/components/reply-mentions.scss
+++ b/app/styles/components/reply-mentions.scss
@@ -1,8 +1,8 @@
 .reply-mentions {
-  @apply text-gray-500 dark:text-gray-400 mb-1 text-sm;
+  @apply text-gray-700 dark:text-gray-600 mb-1 text-sm;
 
   &__account {
-    @apply text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 no-underline hover:underline;
+    @apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline;
   }
 }
 
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index e1f13694e..9c015badb 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -1,5 +1,5 @@
 .sidebar-menu {
-  @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-slate-800 transition-all ease-linear -translate-x-80 z-1000;
+  @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 z-1000;
 
   @media (max-width: 400px) {
     width: 90vw;
diff --git a/app/styles/components/snackbar.scss b/app/styles/components/snackbar.scss
index 7ebdf19eb..28e79d672 100644
--- a/app/styles/components/snackbar.scss
+++ b/app/styles/components/snackbar.scss
@@ -3,7 +3,7 @@
 }
 
 .notification-bar {
-  @apply max-w-sm w-full flex flex-row items-center bg-white dark:bg-slate-900 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
+  @apply max-w-sm w-full flex flex-row items-center bg-white dark:bg-gray-900 shadow-lg rounded-lg pointer-events-auto dark:ring-2 dark:ring-gray-800 overflow-hidden;
 
   &::before {
     font-family: 'Font Awesome 5 Free';
@@ -44,11 +44,11 @@
 }
 
 .notification-bar-title {
-  @apply mb-1 text-sm font-medium text-gray-900 dark:text-gray-300;
+  @apply mb-1 text-sm font-medium text-gray-900 dark:text-gray-100;
 }
 
 .notification-bar-message {
-  @apply text-sm text-gray-700 dark:text-gray-400;
+  @apply text-sm text-gray-800 dark:text-gray-200;
 }
 
 .notification-bar-action a {
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 3b05c9fdd..9f47c5f13 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -37,7 +37,7 @@
 
   p > code,
   pre {
-    @apply bg-gray-100 dark:bg-slate-900;
+    @apply bg-gray-100 dark:bg-primary-900;
   }
 
   /* Inline code */
@@ -113,7 +113,7 @@
 }
 
 .status-link {
-  @apply hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500;
+  @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
 }
 
 .status {
@@ -174,7 +174,7 @@
 }
 
 .status__wrapper {
-  @apply bg-white dark:bg-slate-800 px-4 py-6 shadow-xl dark:shadow-inset sm:p-5 sm:rounded-xl;
+  @apply bg-white dark:bg-primary-900 px-4 py-6 shadow-xl dark:shadow-none sm:p-5 sm:rounded-xl;
 }
 
 [column-type=filled] .status__wrapper,
@@ -183,20 +183,17 @@
 }
 
 .status-check-box {
-  border-bottom: 1px solid var(--background-color);
-  display: flex;
+  @apply flex items-center justify-between;
 
   .status-check-box__status {
-    margin: 10px 0 10px 10px;
-    flex: 1;
+    @apply py-2;
 
     .media-gallery {
       max-width: 250px;
     }
 
     .status__content {
-      padding: 0;
-      white-space: normal;
+      @apply p-0 text-gray-700 dark:text-gray-500 text-sm whitespace-normal;
     }
 
     .video-player,
@@ -251,7 +248,7 @@
   }
 
   a {
-    @apply text-primary-600 dark:text-primary-400 hover:underline;
+    @apply text-primary-600 dark:text-accent-blue hover:underline;
 
     .fa {
       color: var(--primary-text-color);
@@ -289,11 +286,11 @@
 }
 
 .status-card {
-  @apply flex text-sm border border-solid border-gray-200 dark:border-gray-700 rounded-lg text-gray-800 dark:text-gray-200 mt-3 min-h-[150px] no-underline overflow-hidden;
+  @apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 mt-3 min-h-[150px] no-underline overflow-hidden;
 }
 
 a.status-card {
-  @apply cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 hover:no-underline;
+  @apply cursor-pointer hover:bg-gray-100 dark:hover:bg-primary-800/30 hover:no-underline;
 }
 
 .status-card-photo {
@@ -317,10 +314,11 @@ a.status-card {
 }
 
 .status-card__description {
-  @apply text-gray-500 dark:text-gray-400;
+  @apply text-gray-700 dark:text-gray-600;
 }
 
 .status-card__host {
+  @apply text-primary-600 dark:text-accent-blue;
   display: flex;
   margin-top: 10px;
   font-size: 13px;
@@ -369,7 +367,7 @@ a.status-card {
 }
 
 .status-card.compact {
-  @apply border-gray-200 dark:border-gray-700;
+  @apply border-gray-200 dark:border-gray-800;
 }
 
 .status-card__image-image {
diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index 7bef34d27..90830d576 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -5,7 +5,7 @@
 }
 
 .emoji-mart {
-  @apply text-base inline-block text-gray-900 dark:text-gray-100 rounded bg-white dark:bg-slate-900 shadow-lg;
+  @apply text-base inline-block text-gray-900 dark:text-gray-100 rounded bg-white dark:bg-primary-900 shadow-lg;
 }
 
 .emoji-mart .emoji-mart-emoji {
@@ -13,7 +13,7 @@
 }
 
 .emoji-mart-bar {
-  @apply border-0 border-solid border-gray-200 dark:border-slate-700;
+  @apply border-0 border-solid border-gray-200 dark:border-gray-800;
 }
 
 .emoji-mart-bar:first-child {
@@ -33,7 +33,7 @@
 }
 
 .emoji-mart-anchor {
-  @apply relative block flex-auto text-gray-400 dark:text-gray-500 text-center overflow-hidden transition-colors py-3 px-1;
+  @apply relative block flex-auto text-gray-700 dark:text-gray-600 text-center overflow-hidden transition-colors py-3 px-1;
 }
 
 .emoji-mart-anchor:focus { outline: 0; }
@@ -73,11 +73,11 @@
 }
 
 .emoji-mart-search {
-  @apply relative mt-1.5 p-2.5 pr-12 bg-white dark:bg-slate-900;
+  @apply relative mt-1.5 p-2.5 pr-12 bg-white dark:bg-primary-900;
 }
 
 .emoji-mart-search input {
-  @apply text-sm pr-9 block w-full border-gray-300 dark:bg-slate-800 dark:border-gray-600 rounded-full focus:ring-primary-500 focus:border-primary-500;
+  @apply text-sm pr-9 block w-full border-gray-300 dark:bg-transparent dark:border-gray-800 rounded-full focus:ring-primary-500 focus:border-primary-500;
 
   &::-moz-focus-inner {
     border: 0;
@@ -112,7 +112,7 @@
 }
 
 .emoji-mart-search-icon svg {
-  @apply stroke-gray-400;
+  @apply fill-gray-700 dark:fill-gray-600;
 }
 
 .emoji-mart-search-icon:hover svg {
@@ -125,7 +125,7 @@
 }
 
 .emoji-mart-category .emoji-mart-emoji:hover::before {
-  @apply bg-gray-50 dark:bg-slate-800;
+  @apply bg-gray-50 dark:bg-primary-800;
   z-index: 0;
   content: "";
   position: absolute;
@@ -145,7 +145,7 @@
 }
 
 .emoji-mart-category-label span {
-  @apply bg-white dark:bg-slate-900;
+  @apply bg-white dark:bg-primary-900;
   display: block;
   width: 100%;
   font-weight: 500;
@@ -241,7 +241,7 @@
 }
 
 .emoji-picker-dropdown__modifiers__menu {
-  @apply absolute bg-white dark:bg-slate-900 rounded-3xl shadow overflow-hidden;
+  @apply absolute bg-white dark:bg-primary-900 rounded-3xl shadow overflow-hidden;
   z-index: 4;
   top: -4px;
   left: -8px;
@@ -252,7 +252,7 @@
     &:hover,
     &:focus,
     &:active {
-      @apply bg-gray-300 dark:bg-slate-600;
+      @apply bg-gray-300 dark:bg-primary-600;
     }
   }
 
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 0194f4a42..50a59a1be 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -311,7 +311,7 @@ code {
   input[type=password],
   textarea,
   .rfipbtn {
-    @apply border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-800 text-black dark:text-white;
+    @apply border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-black dark:text-white;
     box-sizing: border-box;
     font-size: 16px;
     color: var(--primary-text-color);
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index ddf39aba2..67973e575 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -1,5 +1,5 @@
 .thumb-navigation {
-  @apply fixed lg:hidden bottom-0 bg-white dark:bg-slate-800 border-t border-solid border-gray-200 dark:border-gray-700 left-0 right-0 shadow-2xl w-full flex z-50;
+  @apply fixed lg:hidden bottom-0 bg-white/90 dark:bg-primary-900/90 backdrop-blur-md border-t border-solid border-gray-200 dark:border-gray-800 left-0 right-0 shadow-2xl w-full flex z-50;
   padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
   overflow-x: auto;
   scrollbar-width: thin;
diff --git a/app/styles/utilities.scss b/app/styles/utilities.scss
index cb7f1919f..36fffaa95 100644
--- a/app/styles/utilities.scss
+++ b/app/styles/utilities.scss
@@ -13,5 +13,5 @@
 }
 
 .mention {
-  @apply text-primary-600 dark:text-primary-400 hover:underline;
+  @apply text-primary-600 dark:text-accent-blue hover:underline;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 036c479ba..ff34b2da3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 const { parseColorMatrix } = require('./tailwind/colors');
 
 module.exports = {
-  content: ['./app/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html'],
+  content: ['./app/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './app/index.ejs'],
   darkMode: 'class',
   theme: {
     screens: {
@@ -41,9 +41,11 @@ module.exports = {
         // Colors are configured at runtime with CSS variables in soapbox.json
         gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
         primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+        secondary: [100, 200, 300, 400, 500, 600],
         success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
         danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
         accent: [300, 500],
+        'accent-blue': true,
         'gradient-start': true,
         'gradient-end': true,
         'sea-blue': true,