diff --git a/app/javascript/styles/mastodon-material-auto.scss b/app/javascript/styles/mastodon-material-auto.scss
new file mode 100644
index 000000000..189b2891c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-auto.scss
@@ -0,0 +1,2 @@
+@use 'mastodon-material-dark';
+@media (prefers-color-scheme: light) { @import 'mastodon-material-light'; }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark.scss b/app/javascript/styles/mastodon-material-dark.scss
index f35131435..889983ed4 100644
--- a/app/javascript/styles/mastodon-material-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark.scss
@@ -1,3 +1,2 @@
-@charset "UTF-8";
-
-@import 'mastodon-material-dark/loader'
\ No newline at end of file
+@import 'application';
+@import 'mastodon-material-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/v2-dark.scss b/app/javascript/styles/mastodon-material-dark/color/black.scss
similarity index 89%
rename from app/javascript/styles/material-v1-light/color/v2-dark.scss
rename to app/javascript/styles/mastodon-material-dark/color/black.scss
index c990d6b1e..b299981b0 100644
--- a/app/javascript/styles/material-v1-light/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/black.scss
@@ -20,30 +20,35 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
-$background-color: #121212;
-$menu-background-color: #1e1e1e;
+$background-color: #000000;
+$menu-background-color: #121212;
 $menu-background-hover-color: lighten($menu-background-color, 6%);
 $menu-background-active-color: lighten($menu-background-color, 10%);
 $menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #1e1e1e;
+$card-background-color: #121212;
 $card-background-hover-color: lighten($card-background-color, 6%);
 $card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #1e1e1e;
+$list-background-color: #000000;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
-$contained-chip-color: #2e2e2e;
+$contained-chip-color: #1e1e1e;
 $contained-chip-hover-color: lighten($contained-chip-color, 6%);
 $contained-chip-selected-color: lighten($contained-chip-color, 12%);
-$outlined-chip-color: #1e1e1e;
+$outlined-chip-color: #121212;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
@@ -89,7 +94,7 @@ $toggle-thumb-active-color: #1a73e8;
 $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
-$border-color: #2e2e2e;
+$border-color: #1e1e1e;
 $border-active-color: lighten($border-color, 30%);
 
 // Scroll bar color
@@ -98,7 +103,7 @@ $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
 $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
 
 // App bar color
-$top-bar-color: #272727;
+$top-bar-color: #1e1e1e;
 $search-bar-color: lighten($top-bar-color, 6%);
 $search-bar-focus-color: #ffffff;
 
@@ -110,7 +115,7 @@ $tab-indicator-background-hover-color: transparentize($tab-indicator-active-colo
 $tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
 $text-tab-indicator-color: $secondary-text-color;
 $text-tab-indicator-active-color: $ui-text-color;
-$text-tab-background-color: #1e1e1e;
+$text-tab-background-color: #121212;
 $text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
 $text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
 
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
index de22c451b..c3c168316 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
 $menu-text-color: #282c37;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #191b22;
@@ -34,6 +35,7 @@ $list-background-color: #282c37;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.7);
 $text-button-focus-color: transparentize($text-button-color, 0.6);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
index 134b18e10..54d894fec 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
@@ -19,6 +19,7 @@ $link-text-color: #217aba;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #eff3f5;
@@ -33,6 +34,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: lighten($text-button-color, 36%);
 $text-button-focus-color: lighten($text-button-color, 30%);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
index 3e817cde4..60c8370a2 100644
--- a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
index 652ffe37e..77cef824f 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #303030;
@@ -34,16 +35,20 @@ $list-background-color: #424242;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
 $contained-chip-selected-color: lighten($contained-chip-color, 12%);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
index 4000eead0..64f8d5842 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
index c990d6b1e..8c575bce5 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #121212;
@@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
index 6fd1dea9e..20336e96d 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #ffffff;
@@ -34,6 +35,7 @@ $list-background-color: $background-color;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
 $floating-action-button-color: #ffffff;
 $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
 $floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
+$floating-action-button-icon-color: $primary-color;
 
 // Toggle color
 $toggle-thumb-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
index 6c81dc3e4..853d82b15 100644
--- a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
@@ -52,11 +52,6 @@ $avater-radius: 50%;  // Rounded cropping
 
     &:hover { background: $outlined-chip-hover-color !important }
 }
-.relationship-tag,
-.account-role {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-}
 
 
 // Button shadow
diff --git a/app/javascript/styles/mastodon-material-dark/loader.scss b/app/javascript/styles/mastodon-material-dark/loader.scss
index 04d588001..e962aa921 100644
--- a/app/javascript/styles/mastodon-material-dark/loader.scss
+++ b/app/javascript/styles/mastodon-material-dark/loader.scss
@@ -1,8 +1,3 @@
-@charset "UTF-8";
-
-
-@import '../application';
-
 @import 'theme/theme';
 @import 'theme/material-icons';
 
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
index 42417124b..b3ba40812 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
+++ b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
@@ -60,4 +60,6 @@
     &__action-bar { padding: 10px 0 }
 }
 
+.reply-indicator { padding: 8px }
+
 .button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/account.scss b/app/javascript/styles/mastodon-material-dark/theme/account.scss
index 44d68d1e9..34a8a1816 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/account.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/account.scss
@@ -112,6 +112,8 @@
                 }
             }
         }
+
+        &__content { color: $secondary-text-color }
     }
 
     &__section-headline {
@@ -142,4 +144,10 @@
     border-radius: 17px;
     color: $ui-text-color;
     background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/columns.scss b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
index a6892adf2..54effffd3 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
@@ -198,15 +198,10 @@
 
 .setting-text {
     color: $primary-text-color;
-    background: $search-bar-color;
+    background: $text-field-background-color;
     border-radius: $bar-radius;
 
     &::placeholder { color: $tips-text-color }
-
-    &:focus {
-        @include shadow-1dp;
-        background: $search-bar-focus-color;
-    }
 }
 
 .empty-column-indicator {
@@ -375,7 +370,18 @@
         &__unread { background: $badge-color }
     }
 
-    &__pagination { color: $ui-text-color }
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
 }
 
 .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
@@ -458,45 +464,11 @@
 
 .relationship-tag {
     color: $ui-text-color;
-    background-color: $contained-chip-color;
+    background-color: $relationship-tag-color;
     font-size: 12px;
     border-radius: 17px;
     padding: 4px 8px;
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable {
-    &:focus { background: $card-background-color }
-}
-
-// single column mode
-@media screen and (min-width: 415px) {
-    .tabs-bar {
-        margin-bottom: 0;
-
-        &__wrapper { padding-top: 0 }
-    }
-
-    .columns-area__panels__main {
-        @include shadow-1dp;
-        padding: 0;
-        margin: 12px 12px 0;
-    }
-}
-
-@media screen and (min-width: 631px) {
-    .tabs-bar__link {
-        &:hover {
-            background: $tab-indicator-background-hover-color;
-            border-bottom-color: $tab-background-color;
-        }
-
-        &:active,
-        &:focus {
-            background: $tab-indicator-background-focus-color;
-            border-bottom-color: $tab-background-color;
-        }
-    }
-}
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/components.scss b/app/javascript/styles/mastodon-material-dark/theme/components.scss
index 4f844229c..ae5bfe158 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/components.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/components.scss
@@ -173,8 +173,9 @@
 .compose-form {
     .autosuggest-textarea {
         &__textarea {
-            background: $card-background-color;
+            background: $text-field-background-color;
             color: $ui-text-color;
+            border-radius: $card-radius;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -230,7 +231,7 @@
         &__poll-wrapper {
             border-top: 1px solid $border-color;
 
-            ul { padding: 12px }
+            ul { padding: 16px 12px 16px 0 }
 
             select {
                 color: $ui-text-color;
@@ -272,17 +273,31 @@
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
     }
 
     &__text input[type=text] {
         color: $ui-text-color;
-        background: $background-color;
+        background: $text-field-background-color;
         border: 1px solid $border-color;
         padding: 8px 12px;
     
         &:focus { border-color: $border-active-color }
     }
 
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
     &__chart {
         border-radius: 0;
         background: $poll-bar-color;
@@ -368,7 +383,8 @@
 }
 
 .reply-indicator {
-    @include shadow-1dp;
+    box-shadow: none;
+    border: 1px solid $border-color;
     border-radius: $card-radius;
     background: $card-background-color;
     padding: 16px;
@@ -391,4 +407,128 @@
     &__list a { color: $secondary-text-color }
 
     &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
index 51631eab5..747856253 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
@@ -151,6 +151,9 @@
 .no-reduce-motion button.icon-button i.fa-retweet {
     height: 18px;
     width: 18px;
-    transition: background-position .3s steps(1);
+    transition: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
-}
\ No newline at end of file
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/media.scss b/app/javascript/styles/mastodon-material-dark/theme/media.scss
index 28de8db85..9d0203828 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/media.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/media.scss
@@ -5,7 +5,11 @@
 @import 'mixins';
 
 
-.media-gallery { border-radius: $card-radius }
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
 
 .media-modal__close {
     align-content: center;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/modal.scss b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
index 287dcf804..2748c8723 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/modal.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
@@ -9,7 +9,7 @@
     background: $card-background-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 280px;
+    width: 300px;
 
     &__container {
         text-align: left;
@@ -21,6 +21,24 @@
         background: $card-background-color;
         padding: 8px;
     }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
 }
 
 .actions-modal {
diff --git a/app/javascript/styles/mastodon-material-dark/theme/mobile.scss b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
similarity index 58%
rename from app/javascript/styles/mastodon-material-dark/theme/mobile.scss
rename to app/javascript/styles/mastodon-material-dark/theme/responsive.scss
index ed6467ebc..9ae304041 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/mobile.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
@@ -32,7 +32,6 @@
     }
 }
 
-
 #tabs-bar__portal { overflow-y: hidden }
 
 .floating-action-button {
@@ -51,8 +50,45 @@
     .column { margin: 0 !important }
     .search__input { padding: 16px 46px }
 
-    .search__icon .fa {
-        top: 16px;
-        left: 16px;
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
     }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
index 65b5fcc41..eedf77c2a 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
@@ -180,6 +180,6 @@
 
 // search user trends
 .display-name {
-    &__html { color: $primary-text-color !important }
+    &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/theme.scss b/app/javascript/styles/mastodon-material-dark/theme/theme.scss
index 5b7daddf6..f92276549 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/theme.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/theme.scss
@@ -1,4 +1,4 @@
 @charset "UTF-8";
 
 
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light.scss b/app/javascript/styles/mastodon-material-light.scss
index 49340df17..5068d6386 100644
--- a/app/javascript/styles/mastodon-material-light.scss
+++ b/app/javascript/styles/mastodon-material-light.scss
@@ -1,3 +1,2 @@
-@charset "UTF-8";
-
-@import 'mastodon-material-light/loader'
\ No newline at end of file
+@import 'application';
+@import 'mastodon-material-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/black.scss b/app/javascript/styles/mastodon-material-light/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/black.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
index de22c451b..c3c168316 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
 $menu-text-color: #282c37;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #191b22;
@@ -34,6 +35,7 @@ $list-background-color: #282c37;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.7);
 $text-button-focus-color: transparentize($text-button-color, 0.6);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
index 134b18e10..54d894fec 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
@@ -19,6 +19,7 @@ $link-text-color: #217aba;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #eff3f5;
@@ -33,6 +34,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: lighten($text-button-color, 36%);
 $text-button-focus-color: lighten($text-button-color, 30%);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
index 3e817cde4..60c8370a2 100644
--- a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
index 652ffe37e..77cef824f 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #303030;
@@ -34,16 +35,20 @@ $list-background-color: #424242;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
 $contained-chip-selected-color: lighten($contained-chip-color, 12%);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-light.scss b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
index 4000eead0..64f8d5842 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
index c990d6b1e..8c575bce5 100644
--- a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #121212;
@@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-light.scss b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
index 6fd1dea9e..20336e96d 100644
--- a/app/javascript/styles/mastodon-material-light/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #ffffff;
@@ -34,6 +35,7 @@ $list-background-color: $background-color;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
 $floating-action-button-color: #ffffff;
 $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
 $floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
+$floating-action-button-icon-color: $primary-color;
 
 // Toggle color
 $toggle-thumb-color: #ffffff;
diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
index 6c81dc3e4..853d82b15 100644
--- a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
@@ -52,11 +52,6 @@ $avater-radius: 50%;  // Rounded cropping
 
     &:hover { background: $outlined-chip-hover-color !important }
 }
-.relationship-tag,
-.account-role {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-}
 
 
 // Button shadow
diff --git a/app/javascript/styles/mastodon-material-light/loader.scss b/app/javascript/styles/mastodon-material-light/loader.scss
index 04d588001..e962aa921 100644
--- a/app/javascript/styles/mastodon-material-light/loader.scss
+++ b/app/javascript/styles/mastodon-material-light/loader.scss
@@ -1,8 +1,3 @@
-@charset "UTF-8";
-
-
-@import '../application';
-
 @import 'theme/theme';
 @import 'theme/material-icons';
 
diff --git a/app/javascript/styles/mastodon-material-light/plugins/dense.scss b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
index 42417124b..b3ba40812 100644
--- a/app/javascript/styles/mastodon-material-light/plugins/dense.scss
+++ b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
@@ -60,4 +60,6 @@
     &__action-bar { padding: 10px 0 }
 }
 
+.reply-indicator { padding: 8px }
+
 .button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/account.scss b/app/javascript/styles/mastodon-material-light/theme/account.scss
index 44d68d1e9..34a8a1816 100644
--- a/app/javascript/styles/mastodon-material-light/theme/account.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/account.scss
@@ -112,6 +112,8 @@
                 }
             }
         }
+
+        &__content { color: $secondary-text-color }
     }
 
     &__section-headline {
@@ -142,4 +144,10 @@
     border-radius: 17px;
     color: $ui-text-color;
     background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/columns.scss b/app/javascript/styles/mastodon-material-light/theme/columns.scss
index a6892adf2..54effffd3 100644
--- a/app/javascript/styles/mastodon-material-light/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/columns.scss
@@ -198,15 +198,10 @@
 
 .setting-text {
     color: $primary-text-color;
-    background: $search-bar-color;
+    background: $text-field-background-color;
     border-radius: $bar-radius;
 
     &::placeholder { color: $tips-text-color }
-
-    &:focus {
-        @include shadow-1dp;
-        background: $search-bar-focus-color;
-    }
 }
 
 .empty-column-indicator {
@@ -375,7 +370,18 @@
         &__unread { background: $badge-color }
     }
 
-    &__pagination { color: $ui-text-color }
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
 }
 
 .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
@@ -458,45 +464,11 @@
 
 .relationship-tag {
     color: $ui-text-color;
-    background-color: $contained-chip-color;
+    background-color: $relationship-tag-color;
     font-size: 12px;
     border-radius: 17px;
     padding: 4px 8px;
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable {
-    &:focus { background: $card-background-color }
-}
-
-// single column mode
-@media screen and (min-width: 415px) {
-    .tabs-bar {
-        margin-bottom: 0;
-
-        &__wrapper { padding-top: 0 }
-    }
-
-    .columns-area__panels__main {
-        @include shadow-1dp;
-        padding: 0;
-        margin: 12px 12px 0;
-    }
-}
-
-@media screen and (min-width: 631px) {
-    .tabs-bar__link {
-        &:hover {
-            background: $tab-indicator-background-hover-color;
-            border-bottom-color: $tab-background-color;
-        }
-
-        &:active,
-        &:focus {
-            background: $tab-indicator-background-focus-color;
-            border-bottom-color: $tab-background-color;
-        }
-    }
-}
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/components.scss b/app/javascript/styles/mastodon-material-light/theme/components.scss
index 4f844229c..ae5bfe158 100644
--- a/app/javascript/styles/mastodon-material-light/theme/components.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/components.scss
@@ -173,8 +173,9 @@
 .compose-form {
     .autosuggest-textarea {
         &__textarea {
-            background: $card-background-color;
+            background: $text-field-background-color;
             color: $ui-text-color;
+            border-radius: $card-radius;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -230,7 +231,7 @@
         &__poll-wrapper {
             border-top: 1px solid $border-color;
 
-            ul { padding: 12px }
+            ul { padding: 16px 12px 16px 0 }
 
             select {
                 color: $ui-text-color;
@@ -272,17 +273,31 @@
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
     }
 
     &__text input[type=text] {
         color: $ui-text-color;
-        background: $background-color;
+        background: $text-field-background-color;
         border: 1px solid $border-color;
         padding: 8px 12px;
     
         &:focus { border-color: $border-active-color }
     }
 
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
     &__chart {
         border-radius: 0;
         background: $poll-bar-color;
@@ -368,7 +383,8 @@
 }
 
 .reply-indicator {
-    @include shadow-1dp;
+    box-shadow: none;
+    border: 1px solid $border-color;
     border-radius: $card-radius;
     background: $card-background-color;
     padding: 16px;
@@ -391,4 +407,128 @@
     &__list a { color: $secondary-text-color }
 
     &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
index 51631eab5..747856253 100644
--- a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
@@ -151,6 +151,9 @@
 .no-reduce-motion button.icon-button i.fa-retweet {
     height: 18px;
     width: 18px;
-    transition: background-position .3s steps(1);
+    transition: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
-}
\ No newline at end of file
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/media.scss b/app/javascript/styles/mastodon-material-light/theme/media.scss
index 28de8db85..9d0203828 100644
--- a/app/javascript/styles/mastodon-material-light/theme/media.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/media.scss
@@ -5,7 +5,11 @@
 @import 'mixins';
 
 
-.media-gallery { border-radius: $card-radius }
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
 
 .media-modal__close {
     align-content: center;
diff --git a/app/javascript/styles/mastodon-material-light/theme/modal.scss b/app/javascript/styles/mastodon-material-light/theme/modal.scss
index 287dcf804..2748c8723 100644
--- a/app/javascript/styles/mastodon-material-light/theme/modal.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/modal.scss
@@ -9,7 +9,7 @@
     background: $card-background-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 280px;
+    width: 300px;
 
     &__container {
         text-align: left;
@@ -21,6 +21,24 @@
         background: $card-background-color;
         padding: 8px;
     }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
 }
 
 .actions-modal {
diff --git a/app/javascript/styles/mastodon-material-light/theme/mobile.scss b/app/javascript/styles/mastodon-material-light/theme/responsive.scss
similarity index 58%
rename from app/javascript/styles/mastodon-material-light/theme/mobile.scss
rename to app/javascript/styles/mastodon-material-light/theme/responsive.scss
index ed6467ebc..9ae304041 100644
--- a/app/javascript/styles/mastodon-material-light/theme/mobile.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/responsive.scss
@@ -32,7 +32,6 @@
     }
 }
 
-
 #tabs-bar__portal { overflow-y: hidden }
 
 .floating-action-button {
@@ -51,8 +50,45 @@
     .column { margin: 0 !important }
     .search__input { padding: 16px 46px }
 
-    .search__icon .fa {
-        top: 16px;
-        left: 16px;
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
     }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/statuses.scss b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
index 65b5fcc41..eedf77c2a 100644
--- a/app/javascript/styles/mastodon-material-light/theme/statuses.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
@@ -180,6 +180,6 @@
 
 // search user trends
 .display-name {
-    &__html { color: $primary-text-color !important }
+    &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/theme.scss b/app/javascript/styles/mastodon-material-light/theme/theme.scss
index 5b7daddf6..f92276549 100644
--- a/app/javascript/styles/mastodon-material-light/theme/theme.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/theme.scss
@@ -1,4 +1,4 @@
 @charset "UTF-8";
 
 
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-auto.scss b/app/javascript/styles/material-auto.scss
new file mode 100644
index 000000000..116958187
--- /dev/null
+++ b/app/javascript/styles/material-auto.scss
@@ -0,0 +1,2 @@
+@use 'material-dark';
+@media (prefers-color-scheme: light) { @import 'material-light'; }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black.scss b/app/javascript/styles/material-black.scss
new file mode 100644
index 000000000..19f29bc08
--- /dev/null
+++ b/app/javascript/styles/material-black.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'material-black/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/black.scss b/app/javascript/styles/material-black/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/material-black/color/black.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/mastodon-dark.scss b/app/javascript/styles/material-black/color/mastodon-dark.scss
similarity index 94%
rename from app/javascript/styles/material-v1-light/color/mastodon-dark.scss
rename to app/javascript/styles/material-black/color/mastodon-dark.scss
index de22c451b..c3c168316 100644
--- a/app/javascript/styles/material-v1-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-black/color/mastodon-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
 $menu-text-color: #282c37;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #191b22;
@@ -34,6 +35,7 @@ $list-background-color: #282c37;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.7);
 $text-button-focus-color: transparentize($text-button-color, 0.6);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-dark/color/mastodon-light.scss b/app/javascript/styles/material-black/color/mastodon-light.scss
similarity index 94%
rename from app/javascript/styles/material-v1-dark/color/mastodon-light.scss
rename to app/javascript/styles/material-black/color/mastodon-light.scss
index 134b18e10..54d894fec 100644
--- a/app/javascript/styles/material-v1-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/material-black/color/mastodon-light.scss
@@ -19,6 +19,7 @@ $link-text-color: #217aba;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #eff3f5;
@@ -33,6 +34,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: lighten($text-button-color, 36%);
 $text-button-focus-color: lighten($text-button-color, 30%);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-light/color/plus-classic.scss b/app/javascript/styles/material-black/color/plus-classic.scss
similarity index 95%
rename from app/javascript/styles/material-v1-light/color/plus-classic.scss
rename to app/javascript/styles/material-black/color/plus-classic.scss
index 3e817cde4..60c8370a2 100644
--- a/app/javascript/styles/material-v1-light/color/plus-classic.scss
+++ b/app/javascript/styles/material-black/color/plus-classic.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
diff --git a/app/javascript/styles/material-v2-dark/color/v1-dark.scss b/app/javascript/styles/material-black/color/v1-dark.scss
similarity index 93%
rename from app/javascript/styles/material-v2-dark/color/v1-dark.scss
rename to app/javascript/styles/material-black/color/v1-dark.scss
index 652ffe37e..77cef824f 100644
--- a/app/javascript/styles/material-v2-dark/color/v1-dark.scss
+++ b/app/javascript/styles/material-black/color/v1-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #303030;
@@ -34,16 +35,20 @@ $list-background-color: #424242;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
 $contained-chip-selected-color: lighten($contained-chip-color, 12%);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v2-dark/color/v1-light.scss b/app/javascript/styles/material-black/color/v1-light.scss
similarity index 94%
rename from app/javascript/styles/material-v2-dark/color/v1-light.scss
rename to app/javascript/styles/material-black/color/v1-light.scss
index 4000eead0..64f8d5842 100644
--- a/app/javascript/styles/material-v2-dark/color/v1-light.scss
+++ b/app/javascript/styles/material-black/color/v1-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-dark/color/v2-dark.scss b/app/javascript/styles/material-black/color/v2-dark.scss
similarity index 94%
rename from app/javascript/styles/material-v1-dark/color/v2-dark.scss
rename to app/javascript/styles/material-black/color/v2-dark.scss
index c990d6b1e..8c575bce5 100644
--- a/app/javascript/styles/material-v1-dark/color/v2-dark.scss
+++ b/app/javascript/styles/material-black/color/v2-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #121212;
@@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-light/color/v2-light.scss b/app/javascript/styles/material-black/color/v2-light.scss
similarity index 94%
rename from app/javascript/styles/material-v1-light/color/v2-light.scss
rename to app/javascript/styles/material-black/color/v2-light.scss
index 6fd1dea9e..20336e96d 100644
--- a/app/javascript/styles/material-v1-light/color/v2-light.scss
+++ b/app/javascript/styles/material-black/color/v2-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #ffffff;
@@ -34,6 +35,7 @@ $list-background-color: $background-color;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
 $floating-action-button-color: #ffffff;
 $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
 $floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
+$floating-action-button-icon-color: $primary-color;
 
 // Toggle color
 $toggle-thumb-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-dark/custom_color.scss b/app/javascript/styles/material-black/custom_color.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/custom_color.scss
rename to app/javascript/styles/material-black/custom_color.scss
diff --git a/app/javascript/styles/material-v1-dark/custom_config.scss b/app/javascript/styles/material-black/custom_config.scss
similarity index 66%
rename from app/javascript/styles/material-v1-dark/custom_config.scss
rename to app/javascript/styles/material-black/custom_config.scss
index 9b055476b..b85ed3d23 100644
--- a/app/javascript/styles/material-v1-dark/custom_config.scss
+++ b/app/javascript/styles/material-black/custom_config.scss
@@ -2,4 +2,4 @@
 
 
 // Add your settings below
-@import 'color/v1-dark';
\ No newline at end of file
+@import 'color/black';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/custom_layout.scss b/app/javascript/styles/material-black/custom_layout.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/custom_layout.scss
rename to app/javascript/styles/material-black/custom_layout.scss
diff --git a/app/javascript/styles/material-v1-dark/icon_config.scss b/app/javascript/styles/material-black/icon_config.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/icon_config.scss
rename to app/javascript/styles/material-black/icon_config.scss
diff --git a/app/javascript/styles/material-v1-dark/layout/material-v1.scss b/app/javascript/styles/material-black/layout/material-v1.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/layout/material-v1.scss
rename to app/javascript/styles/material-black/layout/material-v1.scss
diff --git a/app/javascript/styles/material-v1-light/layout/material-v2.scss b/app/javascript/styles/material-black/layout/material-v2.scss
similarity index 89%
rename from app/javascript/styles/material-v1-light/layout/material-v2.scss
rename to app/javascript/styles/material-black/layout/material-v2.scss
index 6c81dc3e4..853d82b15 100644
--- a/app/javascript/styles/material-v1-light/layout/material-v2.scss
+++ b/app/javascript/styles/material-black/layout/material-v2.scss
@@ -52,11 +52,6 @@ $avater-radius: 50%;  // Rounded cropping
 
     &:hover { background: $outlined-chip-hover-color !important }
 }
-.relationship-tag,
-.account-role {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-}
 
 
 // Button shadow
diff --git a/app/javascript/styles/material-v1-dark/loader.scss b/app/javascript/styles/material-black/loader.scss
similarity index 62%
rename from app/javascript/styles/material-v1-dark/loader.scss
rename to app/javascript/styles/material-black/loader.scss
index 04d588001..e962aa921 100644
--- a/app/javascript/styles/material-v1-dark/loader.scss
+++ b/app/javascript/styles/material-black/loader.scss
@@ -1,8 +1,3 @@
-@charset "UTF-8";
-
-
-@import '../application';
-
 @import 'theme/theme';
 @import 'theme/material-icons';
 
diff --git a/app/javascript/styles/material-v1-dark/plugins/cards.scss b/app/javascript/styles/material-black/plugins/cards.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/plugins/cards.scss
rename to app/javascript/styles/material-black/plugins/cards.scss
diff --git a/app/javascript/styles/material-v1-light/plugins/dense.scss b/app/javascript/styles/material-black/plugins/dense.scss
similarity index 92%
rename from app/javascript/styles/material-v1-light/plugins/dense.scss
rename to app/javascript/styles/material-black/plugins/dense.scss
index 42417124b..b3ba40812 100644
--- a/app/javascript/styles/material-v1-light/plugins/dense.scss
+++ b/app/javascript/styles/material-black/plugins/dense.scss
@@ -60,4 +60,6 @@
     &__action-bar { padding: 10px 0 }
 }
 
+.reply-indicator { padding: 8px }
+
 .button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/plugins/plus.scss b/app/javascript/styles/material-black/plugins/plus.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/plugins/plus.scss
rename to app/javascript/styles/material-black/plugins/plus.scss
diff --git a/app/javascript/styles/material-v1-dark/theme/_functions.scss b/app/javascript/styles/material-black/theme/_functions.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/_functions.scss
rename to app/javascript/styles/material-black/theme/_functions.scss
diff --git a/app/javascript/styles/material-v1-dark/theme/_mixins.scss b/app/javascript/styles/material-black/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/_mixins.scss
rename to app/javascript/styles/material-black/theme/_mixins.scss
diff --git a/app/javascript/styles/material-v1-dark/theme/account.scss b/app/javascript/styles/material-black/theme/account.scss
similarity index 95%
rename from app/javascript/styles/material-v1-dark/theme/account.scss
rename to app/javascript/styles/material-black/theme/account.scss
index 44d68d1e9..34a8a1816 100644
--- a/app/javascript/styles/material-v1-dark/theme/account.scss
+++ b/app/javascript/styles/material-black/theme/account.scss
@@ -112,6 +112,8 @@
                 }
             }
         }
+
+        &__content { color: $secondary-text-color }
     }
 
     &__section-headline {
@@ -142,4 +144,10 @@
     border-radius: 17px;
     color: $ui-text-color;
     background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/base_config.scss b/app/javascript/styles/material-black/theme/base_config.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/base_config.scss
rename to app/javascript/styles/material-black/theme/base_config.scss
diff --git a/app/javascript/styles/material-v1-dark/theme/basics.scss b/app/javascript/styles/material-black/theme/basics.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/basics.scss
rename to app/javascript/styles/material-black/theme/basics.scss
diff --git a/app/javascript/styles/material-v1-dark/theme/button.scss b/app/javascript/styles/material-black/theme/button.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/button.scss
rename to app/javascript/styles/material-black/theme/button.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/columns.scss b/app/javascript/styles/material-black/theme/columns.scss
similarity index 90%
rename from app/javascript/styles/material-v2-dark/theme/columns.scss
rename to app/javascript/styles/material-black/theme/columns.scss
index a6892adf2..54effffd3 100644
--- a/app/javascript/styles/material-v2-dark/theme/columns.scss
+++ b/app/javascript/styles/material-black/theme/columns.scss
@@ -198,15 +198,10 @@
 
 .setting-text {
     color: $primary-text-color;
-    background: $search-bar-color;
+    background: $text-field-background-color;
     border-radius: $bar-radius;
 
     &::placeholder { color: $tips-text-color }
-
-    &:focus {
-        @include shadow-1dp;
-        background: $search-bar-focus-color;
-    }
 }
 
 .empty-column-indicator {
@@ -375,7 +370,18 @@
         &__unread { background: $badge-color }
     }
 
-    &__pagination { color: $ui-text-color }
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
 }
 
 .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
@@ -458,45 +464,11 @@
 
 .relationship-tag {
     color: $ui-text-color;
-    background-color: $contained-chip-color;
+    background-color: $relationship-tag-color;
     font-size: 12px;
     border-radius: 17px;
     padding: 4px 8px;
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable {
-    &:focus { background: $card-background-color }
-}
-
-// single column mode
-@media screen and (min-width: 415px) {
-    .tabs-bar {
-        margin-bottom: 0;
-
-        &__wrapper { padding-top: 0 }
-    }
-
-    .columns-area__panels__main {
-        @include shadow-1dp;
-        padding: 0;
-        margin: 12px 12px 0;
-    }
-}
-
-@media screen and (min-width: 631px) {
-    .tabs-bar__link {
-        &:hover {
-            background: $tab-indicator-background-hover-color;
-            border-bottom-color: $tab-background-color;
-        }
-
-        &:active,
-        &:focus {
-            background: $tab-indicator-background-focus-color;
-            border-bottom-color: $tab-background-color;
-        }
-    }
-}
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/components.scss b/app/javascript/styles/material-black/theme/components.scss
similarity index 73%
rename from app/javascript/styles/material-v2-dark/theme/components.scss
rename to app/javascript/styles/material-black/theme/components.scss
index 4f844229c..ae5bfe158 100644
--- a/app/javascript/styles/material-v2-dark/theme/components.scss
+++ b/app/javascript/styles/material-black/theme/components.scss
@@ -173,8 +173,9 @@
 .compose-form {
     .autosuggest-textarea {
         &__textarea {
-            background: $card-background-color;
+            background: $text-field-background-color;
             color: $ui-text-color;
+            border-radius: $card-radius;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -230,7 +231,7 @@
         &__poll-wrapper {
             border-top: 1px solid $border-color;
 
-            ul { padding: 12px }
+            ul { padding: 16px 12px 16px 0 }
 
             select {
                 color: $ui-text-color;
@@ -272,17 +273,31 @@
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
     }
 
     &__text input[type=text] {
         color: $ui-text-color;
-        background: $background-color;
+        background: $text-field-background-color;
         border: 1px solid $border-color;
         padding: 8px 12px;
     
         &:focus { border-color: $border-active-color }
     }
 
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
     &__chart {
         border-radius: 0;
         background: $poll-bar-color;
@@ -368,7 +383,8 @@
 }
 
 .reply-indicator {
-    @include shadow-1dp;
+    box-shadow: none;
+    border: 1px solid $border-color;
     border-radius: $card-radius;
     background: $card-background-color;
     padding: 16px;
@@ -391,4 +407,128 @@
     &__list a { color: $secondary-text-color }
 
     &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/control.scss b/app/javascript/styles/material-black/theme/control.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/control.scss
rename to app/javascript/styles/material-black/theme/control.scss
diff --git a/app/javascript/styles/material-v1-dark/theme/emoji-picker.scss b/app/javascript/styles/material-black/theme/emoji-picker.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/emoji-picker.scss
rename to app/javascript/styles/material-black/theme/emoji-picker.scss
diff --git a/app/javascript/styles/material-v1-dark/theme/icons.scss b/app/javascript/styles/material-black/theme/icons.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/icons.scss
rename to app/javascript/styles/material-black/theme/icons.scss
diff --git a/app/javascript/styles/material-v1-light/theme/material-icons.scss b/app/javascript/styles/material-black/theme/material-icons.scss
similarity index 93%
rename from app/javascript/styles/material-v1-light/theme/material-icons.scss
rename to app/javascript/styles/material-black/theme/material-icons.scss
index 51631eab5..747856253 100644
--- a/app/javascript/styles/material-v1-light/theme/material-icons.scss
+++ b/app/javascript/styles/material-black/theme/material-icons.scss
@@ -151,6 +151,9 @@
 .no-reduce-motion button.icon-button i.fa-retweet {
     height: 18px;
     width: 18px;
-    transition: background-position .3s steps(1);
+    transition: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
-}
\ No newline at end of file
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/media.scss b/app/javascript/styles/material-black/theme/media.scss
similarity index 96%
rename from app/javascript/styles/material-v2-dark/theme/media.scss
rename to app/javascript/styles/material-black/theme/media.scss
index 28de8db85..9d0203828 100644
--- a/app/javascript/styles/material-v2-dark/theme/media.scss
+++ b/app/javascript/styles/material-black/theme/media.scss
@@ -5,7 +5,11 @@
 @import 'mixins';
 
 
-.media-gallery { border-radius: $card-radius }
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
 
 .media-modal__close {
     align-content: center;
diff --git a/app/javascript/styles/material-v1-dark/theme/modal.scss b/app/javascript/styles/material-black/theme/modal.scss
similarity index 78%
rename from app/javascript/styles/material-v1-dark/theme/modal.scss
rename to app/javascript/styles/material-black/theme/modal.scss
index 287dcf804..2748c8723 100644
--- a/app/javascript/styles/material-v1-dark/theme/modal.scss
+++ b/app/javascript/styles/material-black/theme/modal.scss
@@ -9,7 +9,7 @@
     background: $card-background-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 280px;
+    width: 300px;
 
     &__container {
         text-align: left;
@@ -21,6 +21,24 @@
         background: $card-background-color;
         padding: 8px;
     }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
 }
 
 .actions-modal {
diff --git a/app/javascript/styles/material-v1-light/theme/mobile.scss b/app/javascript/styles/material-black/theme/responsive.scss
similarity index 58%
rename from app/javascript/styles/material-v1-light/theme/mobile.scss
rename to app/javascript/styles/material-black/theme/responsive.scss
index ed6467ebc..9ae304041 100644
--- a/app/javascript/styles/material-v1-light/theme/mobile.scss
+++ b/app/javascript/styles/material-black/theme/responsive.scss
@@ -32,7 +32,6 @@
     }
 }
 
-
 #tabs-bar__portal { overflow-y: hidden }
 
 .floating-action-button {
@@ -51,8 +50,45 @@
     .column { margin: 0 !important }
     .search__input { padding: 16px 46px }
 
-    .search__icon .fa {
-        top: 16px;
-        left: 16px;
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
     }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/statuses.scss b/app/javascript/styles/material-black/theme/statuses.scss
similarity index 98%
rename from app/javascript/styles/material-v1-light/theme/statuses.scss
rename to app/javascript/styles/material-black/theme/statuses.scss
index 65b5fcc41..eedf77c2a 100644
--- a/app/javascript/styles/material-v1-light/theme/statuses.scss
+++ b/app/javascript/styles/material-black/theme/statuses.scss
@@ -180,6 +180,6 @@
 
 // search user trends
 .display-name {
-    &__html { color: $primary-text-color !important }
+    &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/theme.scss b/app/javascript/styles/material-black/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/variables.scss b/app/javascript/styles/material-black/theme/variables.scss
similarity index 100%
rename from app/javascript/styles/material-v1-dark/theme/variables.scss
rename to app/javascript/styles/material-black/theme/variables.scss
diff --git a/app/javascript/styles/material-dark.scss b/app/javascript/styles/material-dark.scss
new file mode 100644
index 000000000..8cfd6c6be
--- /dev/null
+++ b/app/javascript/styles/material-dark.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'material-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/black.scss b/app/javascript/styles/material-dark/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/black.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/mastodon-dark.scss b/app/javascript/styles/material-dark/color/mastodon-dark.scss
similarity index 94%
rename from app/javascript/styles/material-v2-dark/color/mastodon-dark.scss
rename to app/javascript/styles/material-dark/color/mastodon-dark.scss
index de22c451b..c3c168316 100644
--- a/app/javascript/styles/material-v2-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-dark/color/mastodon-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
 $menu-text-color: #282c37;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #191b22;
@@ -34,6 +35,7 @@ $list-background-color: #282c37;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.7);
 $text-button-focus-color: transparentize($text-button-color, 0.6);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-light/color/mastodon-light.scss b/app/javascript/styles/material-dark/color/mastodon-light.scss
similarity index 94%
rename from app/javascript/styles/material-v1-light/color/mastodon-light.scss
rename to app/javascript/styles/material-dark/color/mastodon-light.scss
index 134b18e10..54d894fec 100644
--- a/app/javascript/styles/material-v1-light/color/mastodon-light.scss
+++ b/app/javascript/styles/material-dark/color/mastodon-light.scss
@@ -19,6 +19,7 @@ $link-text-color: #217aba;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #eff3f5;
@@ -33,6 +34,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: lighten($text-button-color, 36%);
 $text-button-focus-color: lighten($text-button-color, 30%);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-dark/color/plus-classic.scss b/app/javascript/styles/material-dark/color/plus-classic.scss
similarity index 95%
rename from app/javascript/styles/material-v1-dark/color/plus-classic.scss
rename to app/javascript/styles/material-dark/color/plus-classic.scss
index 3e817cde4..60c8370a2 100644
--- a/app/javascript/styles/material-v1-dark/color/plus-classic.scss
+++ b/app/javascript/styles/material-dark/color/plus-classic.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
diff --git a/app/javascript/styles/material-v1-light/color/v1-dark.scss b/app/javascript/styles/material-dark/color/v1-dark.scss
similarity index 93%
rename from app/javascript/styles/material-v1-light/color/v1-dark.scss
rename to app/javascript/styles/material-dark/color/v1-dark.scss
index 652ffe37e..77cef824f 100644
--- a/app/javascript/styles/material-v1-light/color/v1-dark.scss
+++ b/app/javascript/styles/material-dark/color/v1-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #303030;
@@ -34,16 +35,20 @@ $list-background-color: #424242;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
 $contained-chip-selected-color: lighten($contained-chip-color, 12%);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v2-light/color/v1-light.scss b/app/javascript/styles/material-dark/color/v1-light.scss
similarity index 94%
rename from app/javascript/styles/material-v2-light/color/v1-light.scss
rename to app/javascript/styles/material-dark/color/v1-light.scss
index 4000eead0..64f8d5842 100644
--- a/app/javascript/styles/material-v2-light/color/v1-light.scss
+++ b/app/javascript/styles/material-dark/color/v1-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v2-dark/color/v2-dark.scss b/app/javascript/styles/material-dark/color/v2-dark.scss
similarity index 94%
rename from app/javascript/styles/material-v2-dark/color/v2-dark.scss
rename to app/javascript/styles/material-dark/color/v2-dark.scss
index c990d6b1e..8c575bce5 100644
--- a/app/javascript/styles/material-v2-dark/color/v2-dark.scss
+++ b/app/javascript/styles/material-dark/color/v2-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #121212;
@@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v2-dark/color/v2-light.scss b/app/javascript/styles/material-dark/color/v2-light.scss
similarity index 94%
rename from app/javascript/styles/material-v2-dark/color/v2-light.scss
rename to app/javascript/styles/material-dark/color/v2-light.scss
index 6fd1dea9e..20336e96d 100644
--- a/app/javascript/styles/material-v2-dark/color/v2-light.scss
+++ b/app/javascript/styles/material-dark/color/v2-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #ffffff;
@@ -34,6 +35,7 @@ $list-background-color: $background-color;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
 $floating-action-button-color: #ffffff;
 $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
 $floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
+$floating-action-button-icon-color: $primary-color;
 
 // Toggle color
 $toggle-thumb-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-light/custom_color.scss b/app/javascript/styles/material-dark/custom_color.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/custom_color.scss
rename to app/javascript/styles/material-dark/custom_color.scss
diff --git a/app/javascript/styles/material-dark/custom_config.scss b/app/javascript/styles/material-dark/custom_config.scss
new file mode 100644
index 000000000..2a0c9e0fd
--- /dev/null
+++ b/app/javascript/styles/material-dark/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/v2-dark';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/custom_layout.scss b/app/javascript/styles/material-dark/custom_layout.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/custom_layout.scss
rename to app/javascript/styles/material-dark/custom_layout.scss
diff --git a/app/javascript/styles/material-v1-light/icon_config.scss b/app/javascript/styles/material-dark/icon_config.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/icon_config.scss
rename to app/javascript/styles/material-dark/icon_config.scss
diff --git a/app/javascript/styles/material-v1-light/layout/material-v1.scss b/app/javascript/styles/material-dark/layout/material-v1.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/layout/material-v1.scss
rename to app/javascript/styles/material-dark/layout/material-v1.scss
diff --git a/app/javascript/styles/material-v2-dark/layout/material-v2.scss b/app/javascript/styles/material-dark/layout/material-v2.scss
similarity index 89%
rename from app/javascript/styles/material-v2-dark/layout/material-v2.scss
rename to app/javascript/styles/material-dark/layout/material-v2.scss
index 6c81dc3e4..853d82b15 100644
--- a/app/javascript/styles/material-v2-dark/layout/material-v2.scss
+++ b/app/javascript/styles/material-dark/layout/material-v2.scss
@@ -52,11 +52,6 @@ $avater-radius: 50%;  // Rounded cropping
 
     &:hover { background: $outlined-chip-hover-color !important }
 }
-.relationship-tag,
-.account-role {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-}
 
 
 // Button shadow
diff --git a/app/javascript/styles/material-v2-light/loader.scss b/app/javascript/styles/material-dark/loader.scss
similarity index 62%
rename from app/javascript/styles/material-v2-light/loader.scss
rename to app/javascript/styles/material-dark/loader.scss
index 04d588001..e962aa921 100644
--- a/app/javascript/styles/material-v2-light/loader.scss
+++ b/app/javascript/styles/material-dark/loader.scss
@@ -1,8 +1,3 @@
-@charset "UTF-8";
-
-
-@import '../application';
-
 @import 'theme/theme';
 @import 'theme/material-icons';
 
diff --git a/app/javascript/styles/material-v1-light/plugins/cards.scss b/app/javascript/styles/material-dark/plugins/cards.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/plugins/cards.scss
rename to app/javascript/styles/material-dark/plugins/cards.scss
diff --git a/app/javascript/styles/material-v2-dark/plugins/dense.scss b/app/javascript/styles/material-dark/plugins/dense.scss
similarity index 92%
rename from app/javascript/styles/material-v2-dark/plugins/dense.scss
rename to app/javascript/styles/material-dark/plugins/dense.scss
index 42417124b..b3ba40812 100644
--- a/app/javascript/styles/material-v2-dark/plugins/dense.scss
+++ b/app/javascript/styles/material-dark/plugins/dense.scss
@@ -60,4 +60,6 @@
     &__action-bar { padding: 10px 0 }
 }
 
+.reply-indicator { padding: 8px }
+
 .button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/plugins/plus.scss b/app/javascript/styles/material-dark/plugins/plus.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/plugins/plus.scss
rename to app/javascript/styles/material-dark/plugins/plus.scss
diff --git a/app/javascript/styles/material-v1-light/theme/_functions.scss b/app/javascript/styles/material-dark/theme/_functions.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/_functions.scss
rename to app/javascript/styles/material-dark/theme/_functions.scss
diff --git a/app/javascript/styles/material-v1-light/theme/_mixins.scss b/app/javascript/styles/material-dark/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/_mixins.scss
rename to app/javascript/styles/material-dark/theme/_mixins.scss
diff --git a/app/javascript/styles/material-v1-light/theme/account.scss b/app/javascript/styles/material-dark/theme/account.scss
similarity index 95%
rename from app/javascript/styles/material-v1-light/theme/account.scss
rename to app/javascript/styles/material-dark/theme/account.scss
index 44d68d1e9..34a8a1816 100644
--- a/app/javascript/styles/material-v1-light/theme/account.scss
+++ b/app/javascript/styles/material-dark/theme/account.scss
@@ -112,6 +112,8 @@
                 }
             }
         }
+
+        &__content { color: $secondary-text-color }
     }
 
     &__section-headline {
@@ -142,4 +144,10 @@
     border-radius: 17px;
     color: $ui-text-color;
     background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/base_config.scss b/app/javascript/styles/material-dark/theme/base_config.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/base_config.scss
rename to app/javascript/styles/material-dark/theme/base_config.scss
diff --git a/app/javascript/styles/material-v1-light/theme/basics.scss b/app/javascript/styles/material-dark/theme/basics.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/basics.scss
rename to app/javascript/styles/material-dark/theme/basics.scss
diff --git a/app/javascript/styles/material-v1-light/theme/button.scss b/app/javascript/styles/material-dark/theme/button.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/button.scss
rename to app/javascript/styles/material-dark/theme/button.scss
diff --git a/app/javascript/styles/material-v1-dark/theme/columns.scss b/app/javascript/styles/material-dark/theme/columns.scss
similarity index 90%
rename from app/javascript/styles/material-v1-dark/theme/columns.scss
rename to app/javascript/styles/material-dark/theme/columns.scss
index a6892adf2..54effffd3 100644
--- a/app/javascript/styles/material-v1-dark/theme/columns.scss
+++ b/app/javascript/styles/material-dark/theme/columns.scss
@@ -198,15 +198,10 @@
 
 .setting-text {
     color: $primary-text-color;
-    background: $search-bar-color;
+    background: $text-field-background-color;
     border-radius: $bar-radius;
 
     &::placeholder { color: $tips-text-color }
-
-    &:focus {
-        @include shadow-1dp;
-        background: $search-bar-focus-color;
-    }
 }
 
 .empty-column-indicator {
@@ -375,7 +370,18 @@
         &__unread { background: $badge-color }
     }
 
-    &__pagination { color: $ui-text-color }
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
 }
 
 .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
@@ -458,45 +464,11 @@
 
 .relationship-tag {
     color: $ui-text-color;
-    background-color: $contained-chip-color;
+    background-color: $relationship-tag-color;
     font-size: 12px;
     border-radius: 17px;
     padding: 4px 8px;
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable {
-    &:focus { background: $card-background-color }
-}
-
-// single column mode
-@media screen and (min-width: 415px) {
-    .tabs-bar {
-        margin-bottom: 0;
-
-        &__wrapper { padding-top: 0 }
-    }
-
-    .columns-area__panels__main {
-        @include shadow-1dp;
-        padding: 0;
-        margin: 12px 12px 0;
-    }
-}
-
-@media screen and (min-width: 631px) {
-    .tabs-bar__link {
-        &:hover {
-            background: $tab-indicator-background-hover-color;
-            border-bottom-color: $tab-background-color;
-        }
-
-        &:active,
-        &:focus {
-            background: $tab-indicator-background-focus-color;
-            border-bottom-color: $tab-background-color;
-        }
-    }
-}
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/components.scss b/app/javascript/styles/material-dark/theme/components.scss
similarity index 73%
rename from app/javascript/styles/material-v1-dark/theme/components.scss
rename to app/javascript/styles/material-dark/theme/components.scss
index 4f844229c..ae5bfe158 100644
--- a/app/javascript/styles/material-v1-dark/theme/components.scss
+++ b/app/javascript/styles/material-dark/theme/components.scss
@@ -173,8 +173,9 @@
 .compose-form {
     .autosuggest-textarea {
         &__textarea {
-            background: $card-background-color;
+            background: $text-field-background-color;
             color: $ui-text-color;
+            border-radius: $card-radius;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -230,7 +231,7 @@
         &__poll-wrapper {
             border-top: 1px solid $border-color;
 
-            ul { padding: 12px }
+            ul { padding: 16px 12px 16px 0 }
 
             select {
                 color: $ui-text-color;
@@ -272,17 +273,31 @@
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
     }
 
     &__text input[type=text] {
         color: $ui-text-color;
-        background: $background-color;
+        background: $text-field-background-color;
         border: 1px solid $border-color;
         padding: 8px 12px;
     
         &:focus { border-color: $border-active-color }
     }
 
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
     &__chart {
         border-radius: 0;
         background: $poll-bar-color;
@@ -368,7 +383,8 @@
 }
 
 .reply-indicator {
-    @include shadow-1dp;
+    box-shadow: none;
+    border: 1px solid $border-color;
     border-radius: $card-radius;
     background: $card-background-color;
     padding: 16px;
@@ -391,4 +407,128 @@
     &__list a { color: $secondary-text-color }
 
     &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/control.scss b/app/javascript/styles/material-dark/theme/control.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/control.scss
rename to app/javascript/styles/material-dark/theme/control.scss
diff --git a/app/javascript/styles/material-v1-light/theme/emoji-picker.scss b/app/javascript/styles/material-dark/theme/emoji-picker.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/emoji-picker.scss
rename to app/javascript/styles/material-dark/theme/emoji-picker.scss
diff --git a/app/javascript/styles/material-v1-light/theme/icons.scss b/app/javascript/styles/material-dark/theme/icons.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/icons.scss
rename to app/javascript/styles/material-dark/theme/icons.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/material-icons.scss b/app/javascript/styles/material-dark/theme/material-icons.scss
similarity index 93%
rename from app/javascript/styles/material-v2-dark/theme/material-icons.scss
rename to app/javascript/styles/material-dark/theme/material-icons.scss
index 51631eab5..747856253 100644
--- a/app/javascript/styles/material-v2-dark/theme/material-icons.scss
+++ b/app/javascript/styles/material-dark/theme/material-icons.scss
@@ -151,6 +151,9 @@
 .no-reduce-motion button.icon-button i.fa-retweet {
     height: 18px;
     width: 18px;
-    transition: background-position .3s steps(1);
+    transition: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
-}
\ No newline at end of file
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/media.scss b/app/javascript/styles/material-dark/theme/media.scss
similarity index 96%
rename from app/javascript/styles/material-v1-light/theme/media.scss
rename to app/javascript/styles/material-dark/theme/media.scss
index 28de8db85..9d0203828 100644
--- a/app/javascript/styles/material-v1-light/theme/media.scss
+++ b/app/javascript/styles/material-dark/theme/media.scss
@@ -5,7 +5,11 @@
 @import 'mixins';
 
 
-.media-gallery { border-radius: $card-radius }
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
 
 .media-modal__close {
     align-content: center;
diff --git a/app/javascript/styles/material-v2-dark/theme/modal.scss b/app/javascript/styles/material-dark/theme/modal.scss
similarity index 78%
rename from app/javascript/styles/material-v2-dark/theme/modal.scss
rename to app/javascript/styles/material-dark/theme/modal.scss
index 287dcf804..2748c8723 100644
--- a/app/javascript/styles/material-v2-dark/theme/modal.scss
+++ b/app/javascript/styles/material-dark/theme/modal.scss
@@ -9,7 +9,7 @@
     background: $card-background-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 280px;
+    width: 300px;
 
     &__container {
         text-align: left;
@@ -21,6 +21,24 @@
         background: $card-background-color;
         padding: 8px;
     }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
 }
 
 .actions-modal {
diff --git a/app/javascript/styles/material-v1-dark/theme/mobile.scss b/app/javascript/styles/material-dark/theme/responsive.scss
similarity index 58%
rename from app/javascript/styles/material-v1-dark/theme/mobile.scss
rename to app/javascript/styles/material-dark/theme/responsive.scss
index ed6467ebc..9ae304041 100644
--- a/app/javascript/styles/material-v1-dark/theme/mobile.scss
+++ b/app/javascript/styles/material-dark/theme/responsive.scss
@@ -32,7 +32,6 @@
     }
 }
 
-
 #tabs-bar__portal { overflow-y: hidden }
 
 .floating-action-button {
@@ -51,8 +50,45 @@
     .column { margin: 0 !important }
     .search__input { padding: 16px 46px }
 
-    .search__icon .fa {
-        top: 16px;
-        left: 16px;
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
     }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/statuses.scss b/app/javascript/styles/material-dark/theme/statuses.scss
similarity index 98%
rename from app/javascript/styles/material-v2-dark/theme/statuses.scss
rename to app/javascript/styles/material-dark/theme/statuses.scss
index 65b5fcc41..eedf77c2a 100644
--- a/app/javascript/styles/material-v2-dark/theme/statuses.scss
+++ b/app/javascript/styles/material-dark/theme/statuses.scss
@@ -180,6 +180,6 @@
 
 // search user trends
 .display-name {
-    &__html { color: $primary-text-color !important }
+    &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/theme.scss b/app/javascript/styles/material-dark/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/variables.scss b/app/javascript/styles/material-dark/theme/variables.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/theme/variables.scss
rename to app/javascript/styles/material-dark/theme/variables.scss
diff --git a/app/javascript/styles/material-light.scss b/app/javascript/styles/material-light.scss
new file mode 100644
index 000000000..9818f14f5
--- /dev/null
+++ b/app/javascript/styles/material-light.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'material-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/black.scss b/app/javascript/styles/material-light/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/material-light/color/black.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/mastodon-dark.scss b/app/javascript/styles/material-light/color/mastodon-dark.scss
similarity index 94%
rename from app/javascript/styles/material-v2-light/color/mastodon-dark.scss
rename to app/javascript/styles/material-light/color/mastodon-dark.scss
index de22c451b..c3c168316 100644
--- a/app/javascript/styles/material-v2-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-light/color/mastodon-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
 $menu-text-color: #282c37;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #191b22;
@@ -34,6 +35,7 @@ $list-background-color: #282c37;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.7);
 $text-button-focus-color: transparentize($text-button-color, 0.6);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v2-dark/color/mastodon-light.scss b/app/javascript/styles/material-light/color/mastodon-light.scss
similarity index 94%
rename from app/javascript/styles/material-v2-dark/color/mastodon-light.scss
rename to app/javascript/styles/material-light/color/mastodon-light.scss
index 134b18e10..54d894fec 100644
--- a/app/javascript/styles/material-v2-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/material-light/color/mastodon-light.scss
@@ -19,6 +19,7 @@ $link-text-color: #217aba;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #eff3f5;
@@ -33,6 +34,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: lighten($text-button-color, 36%);
 $text-button-focus-color: lighten($text-button-color, 30%);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v2-dark/color/plus-classic.scss b/app/javascript/styles/material-light/color/plus-classic.scss
similarity index 95%
rename from app/javascript/styles/material-v2-dark/color/plus-classic.scss
rename to app/javascript/styles/material-light/color/plus-classic.scss
index 3e817cde4..60c8370a2 100644
--- a/app/javascript/styles/material-v2-dark/color/plus-classic.scss
+++ b/app/javascript/styles/material-light/color/plus-classic.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
diff --git a/app/javascript/styles/material-v1-dark/color/v1-dark.scss b/app/javascript/styles/material-light/color/v1-dark.scss
similarity index 93%
rename from app/javascript/styles/material-v1-dark/color/v1-dark.scss
rename to app/javascript/styles/material-light/color/v1-dark.scss
index 652ffe37e..77cef824f 100644
--- a/app/javascript/styles/material-v1-dark/color/v1-dark.scss
+++ b/app/javascript/styles/material-light/color/v1-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #303030;
@@ -34,16 +35,20 @@ $list-background-color: #424242;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
 $contained-chip-selected-color: lighten($contained-chip-color, 12%);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-light/color/v1-light.scss b/app/javascript/styles/material-light/color/v1-light.scss
similarity index 94%
rename from app/javascript/styles/material-v1-light/color/v1-light.scss
rename to app/javascript/styles/material-light/color/v1-light.scss
index 4000eead0..64f8d5842 100644
--- a/app/javascript/styles/material-v1-light/color/v1-light.scss
+++ b/app/javascript/styles/material-light/color/v1-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v2-light/color/v2-dark.scss b/app/javascript/styles/material-light/color/v2-dark.scss
similarity index 94%
rename from app/javascript/styles/material-v2-light/color/v2-dark.scss
rename to app/javascript/styles/material-light/color/v2-dark.scss
index c990d6b1e..8c575bce5 100644
--- a/app/javascript/styles/material-v2-light/color/v2-dark.scss
+++ b/app/javascript/styles/material-light/color/v2-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #121212;
@@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/material-v1-dark/color/v2-light.scss b/app/javascript/styles/material-light/color/v2-light.scss
similarity index 94%
rename from app/javascript/styles/material-v1-dark/color/v2-light.scss
rename to app/javascript/styles/material-light/color/v2-light.scss
index 6fd1dea9e..20336e96d 100644
--- a/app/javascript/styles/material-v1-dark/color/v2-light.scss
+++ b/app/javascript/styles/material-light/color/v2-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #ffffff;
@@ -34,6 +35,7 @@ $list-background-color: $background-color;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
 $floating-action-button-color: #ffffff;
 $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
 $floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
+$floating-action-button-icon-color: $primary-color;
 
 // Toggle color
 $toggle-thumb-color: #ffffff;
diff --git a/app/javascript/styles/material-v2-dark/custom_color.scss b/app/javascript/styles/material-light/custom_color.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/custom_color.scss
rename to app/javascript/styles/material-light/custom_color.scss
diff --git a/app/javascript/styles/material-v1-light/custom_config.scss b/app/javascript/styles/material-light/custom_config.scss
similarity index 100%
rename from app/javascript/styles/material-v1-light/custom_config.scss
rename to app/javascript/styles/material-light/custom_config.scss
diff --git a/app/javascript/styles/material-v2-dark/custom_layout.scss b/app/javascript/styles/material-light/custom_layout.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/custom_layout.scss
rename to app/javascript/styles/material-light/custom_layout.scss
diff --git a/app/javascript/styles/material-v2-dark/icon_config.scss b/app/javascript/styles/material-light/icon_config.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/icon_config.scss
rename to app/javascript/styles/material-light/icon_config.scss
diff --git a/app/javascript/styles/material-v2-dark/layout/material-v1.scss b/app/javascript/styles/material-light/layout/material-v1.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/layout/material-v1.scss
rename to app/javascript/styles/material-light/layout/material-v1.scss
diff --git a/app/javascript/styles/material-v1-dark/layout/material-v2.scss b/app/javascript/styles/material-light/layout/material-v2.scss
similarity index 89%
rename from app/javascript/styles/material-v1-dark/layout/material-v2.scss
rename to app/javascript/styles/material-light/layout/material-v2.scss
index 6c81dc3e4..853d82b15 100644
--- a/app/javascript/styles/material-v1-dark/layout/material-v2.scss
+++ b/app/javascript/styles/material-light/layout/material-v2.scss
@@ -52,11 +52,6 @@ $avater-radius: 50%;  // Rounded cropping
 
     &:hover { background: $outlined-chip-hover-color !important }
 }
-.relationship-tag,
-.account-role {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-}
 
 
 // Button shadow
diff --git a/app/javascript/styles/material-v1-light/loader.scss b/app/javascript/styles/material-light/loader.scss
similarity index 62%
rename from app/javascript/styles/material-v1-light/loader.scss
rename to app/javascript/styles/material-light/loader.scss
index 04d588001..e962aa921 100644
--- a/app/javascript/styles/material-v1-light/loader.scss
+++ b/app/javascript/styles/material-light/loader.scss
@@ -1,8 +1,3 @@
-@charset "UTF-8";
-
-
-@import '../application';
-
 @import 'theme/theme';
 @import 'theme/material-icons';
 
diff --git a/app/javascript/styles/material-v2-dark/plugins/cards.scss b/app/javascript/styles/material-light/plugins/cards.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/plugins/cards.scss
rename to app/javascript/styles/material-light/plugins/cards.scss
diff --git a/app/javascript/styles/material-v2-light/plugins/dense.scss b/app/javascript/styles/material-light/plugins/dense.scss
similarity index 92%
rename from app/javascript/styles/material-v2-light/plugins/dense.scss
rename to app/javascript/styles/material-light/plugins/dense.scss
index 42417124b..b3ba40812 100644
--- a/app/javascript/styles/material-v2-light/plugins/dense.scss
+++ b/app/javascript/styles/material-light/plugins/dense.scss
@@ -60,4 +60,6 @@
     &__action-bar { padding: 10px 0 }
 }
 
+.reply-indicator { padding: 8px }
+
 .button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/plugins/plus.scss b/app/javascript/styles/material-light/plugins/plus.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/plugins/plus.scss
rename to app/javascript/styles/material-light/plugins/plus.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/_functions.scss b/app/javascript/styles/material-light/theme/_functions.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/_functions.scss
rename to app/javascript/styles/material-light/theme/_functions.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/_mixins.scss b/app/javascript/styles/material-light/theme/_mixins.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/_mixins.scss
rename to app/javascript/styles/material-light/theme/_mixins.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/account.scss b/app/javascript/styles/material-light/theme/account.scss
similarity index 95%
rename from app/javascript/styles/material-v2-dark/theme/account.scss
rename to app/javascript/styles/material-light/theme/account.scss
index 44d68d1e9..34a8a1816 100644
--- a/app/javascript/styles/material-v2-dark/theme/account.scss
+++ b/app/javascript/styles/material-light/theme/account.scss
@@ -112,6 +112,8 @@
                 }
             }
         }
+
+        &__content { color: $secondary-text-color }
     }
 
     &__section-headline {
@@ -142,4 +144,10 @@
     border-radius: 17px;
     color: $ui-text-color;
     background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/base_config.scss b/app/javascript/styles/material-light/theme/base_config.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/base_config.scss
rename to app/javascript/styles/material-light/theme/base_config.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/basics.scss b/app/javascript/styles/material-light/theme/basics.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/basics.scss
rename to app/javascript/styles/material-light/theme/basics.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/button.scss b/app/javascript/styles/material-light/theme/button.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/button.scss
rename to app/javascript/styles/material-light/theme/button.scss
diff --git a/app/javascript/styles/material-v2-light/theme/columns.scss b/app/javascript/styles/material-light/theme/columns.scss
similarity index 90%
rename from app/javascript/styles/material-v2-light/theme/columns.scss
rename to app/javascript/styles/material-light/theme/columns.scss
index a6892adf2..54effffd3 100644
--- a/app/javascript/styles/material-v2-light/theme/columns.scss
+++ b/app/javascript/styles/material-light/theme/columns.scss
@@ -198,15 +198,10 @@
 
 .setting-text {
     color: $primary-text-color;
-    background: $search-bar-color;
+    background: $text-field-background-color;
     border-radius: $bar-radius;
 
     &::placeholder { color: $tips-text-color }
-
-    &:focus {
-        @include shadow-1dp;
-        background: $search-bar-focus-color;
-    }
 }
 
 .empty-column-indicator {
@@ -375,7 +370,18 @@
         &__unread { background: $badge-color }
     }
 
-    &__pagination { color: $ui-text-color }
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
 }
 
 .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
@@ -458,45 +464,11 @@
 
 .relationship-tag {
     color: $ui-text-color;
-    background-color: $contained-chip-color;
+    background-color: $relationship-tag-color;
     font-size: 12px;
     border-radius: 17px;
     padding: 4px 8px;
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable {
-    &:focus { background: $card-background-color }
-}
-
-// single column mode
-@media screen and (min-width: 415px) {
-    .tabs-bar {
-        margin-bottom: 0;
-
-        &__wrapper { padding-top: 0 }
-    }
-
-    .columns-area__panels__main {
-        @include shadow-1dp;
-        padding: 0;
-        margin: 12px 12px 0;
-    }
-}
-
-@media screen and (min-width: 631px) {
-    .tabs-bar__link {
-        &:hover {
-            background: $tab-indicator-background-hover-color;
-            border-bottom-color: $tab-background-color;
-        }
-
-        &:active,
-        &:focus {
-            background: $tab-indicator-background-focus-color;
-            border-bottom-color: $tab-background-color;
-        }
-    }
-}
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/components.scss b/app/javascript/styles/material-light/theme/components.scss
similarity index 73%
rename from app/javascript/styles/material-v2-light/theme/components.scss
rename to app/javascript/styles/material-light/theme/components.scss
index 4f844229c..ae5bfe158 100644
--- a/app/javascript/styles/material-v2-light/theme/components.scss
+++ b/app/javascript/styles/material-light/theme/components.scss
@@ -173,8 +173,9 @@
 .compose-form {
     .autosuggest-textarea {
         &__textarea {
-            background: $card-background-color;
+            background: $text-field-background-color;
             color: $ui-text-color;
+            border-radius: $card-radius;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -230,7 +231,7 @@
         &__poll-wrapper {
             border-top: 1px solid $border-color;
 
-            ul { padding: 12px }
+            ul { padding: 16px 12px 16px 0 }
 
             select {
                 color: $ui-text-color;
@@ -272,17 +273,31 @@
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
     }
 
     &__text input[type=text] {
         color: $ui-text-color;
-        background: $background-color;
+        background: $text-field-background-color;
         border: 1px solid $border-color;
         padding: 8px 12px;
     
         &:focus { border-color: $border-active-color }
     }
 
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
     &__chart {
         border-radius: 0;
         background: $poll-bar-color;
@@ -368,7 +383,8 @@
 }
 
 .reply-indicator {
-    @include shadow-1dp;
+    box-shadow: none;
+    border: 1px solid $border-color;
     border-radius: $card-radius;
     background: $card-background-color;
     padding: 16px;
@@ -391,4 +407,128 @@
     &__list a { color: $secondary-text-color }
 
     &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/control.scss b/app/javascript/styles/material-light/theme/control.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/control.scss
rename to app/javascript/styles/material-light/theme/control.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/emoji-picker.scss b/app/javascript/styles/material-light/theme/emoji-picker.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/emoji-picker.scss
rename to app/javascript/styles/material-light/theme/emoji-picker.scss
diff --git a/app/javascript/styles/material-v2-dark/theme/icons.scss b/app/javascript/styles/material-light/theme/icons.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/icons.scss
rename to app/javascript/styles/material-light/theme/icons.scss
diff --git a/app/javascript/styles/material-v2-light/theme/material-icons.scss b/app/javascript/styles/material-light/theme/material-icons.scss
similarity index 93%
rename from app/javascript/styles/material-v2-light/theme/material-icons.scss
rename to app/javascript/styles/material-light/theme/material-icons.scss
index 51631eab5..747856253 100644
--- a/app/javascript/styles/material-v2-light/theme/material-icons.scss
+++ b/app/javascript/styles/material-light/theme/material-icons.scss
@@ -151,6 +151,9 @@
 .no-reduce-motion button.icon-button i.fa-retweet {
     height: 18px;
     width: 18px;
-    transition: background-position .3s steps(1);
+    transition: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
-}
\ No newline at end of file
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/media.scss b/app/javascript/styles/material-light/theme/media.scss
similarity index 96%
rename from app/javascript/styles/material-v1-dark/theme/media.scss
rename to app/javascript/styles/material-light/theme/media.scss
index 28de8db85..9d0203828 100644
--- a/app/javascript/styles/material-v1-dark/theme/media.scss
+++ b/app/javascript/styles/material-light/theme/media.scss
@@ -5,7 +5,11 @@
 @import 'mixins';
 
 
-.media-gallery { border-radius: $card-radius }
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
 
 .media-modal__close {
     align-content: center;
diff --git a/app/javascript/styles/material-v1-light/theme/modal.scss b/app/javascript/styles/material-light/theme/modal.scss
similarity index 78%
rename from app/javascript/styles/material-v1-light/theme/modal.scss
rename to app/javascript/styles/material-light/theme/modal.scss
index 287dcf804..2748c8723 100644
--- a/app/javascript/styles/material-v1-light/theme/modal.scss
+++ b/app/javascript/styles/material-light/theme/modal.scss
@@ -9,7 +9,7 @@
     background: $card-background-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 280px;
+    width: 300px;
 
     &__container {
         text-align: left;
@@ -21,6 +21,24 @@
         background: $card-background-color;
         padding: 8px;
     }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
 }
 
 .actions-modal {
diff --git a/app/javascript/styles/material-light/theme/responsive.scss b/app/javascript/styles/material-light/theme/responsive.scss
new file mode 100644
index 000000000..9ae304041
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/statuses.scss b/app/javascript/styles/material-light/theme/statuses.scss
similarity index 98%
rename from app/javascript/styles/material-v1-dark/theme/statuses.scss
rename to app/javascript/styles/material-light/theme/statuses.scss
index 65b5fcc41..eedf77c2a 100644
--- a/app/javascript/styles/material-v1-dark/theme/statuses.scss
+++ b/app/javascript/styles/material-light/theme/statuses.scss
@@ -180,6 +180,6 @@
 
 // search user trends
 .display-name {
-    &__html { color: $primary-text-color !important }
+    &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/theme.scss b/app/javascript/styles/material-light/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/variables.scss b/app/javascript/styles/material-light/theme/variables.scss
similarity index 100%
rename from app/javascript/styles/material-v2-dark/theme/variables.scss
rename to app/javascript/styles/material-light/theme/variables.scss
diff --git a/app/javascript/styles/material-v1-dark.scss b/app/javascript/styles/material-v1-dark.scss
deleted file mode 100644
index e7071bb85..000000000
--- a/app/javascript/styles/material-v1-dark.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@charset "UTF-8";
-
-@import 'material-v1-dark/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss b/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
deleted file mode 100644
index de22c451b..000000000
--- a/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9baec8;
-$ui-text-color: #fff;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #606984;
-$tips-text-color: #6d7889;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4ea2df;
-$menu-text-color: #282c37;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-
-// Background-color
-$background-color: #191b22;
-$menu-background-color: #d9e1e8;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #313543;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #282c37;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$verified-background-color: darken($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #42485a;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
-$outlined-chip-color: #393f4f;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #9baec8;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: lighten($background-color, 14%);
-$icon-background-active-color: lighten($background-color, 18%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #fff;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.7);
-$text-button-focus-color: transparentize($text-button-color, 0.6);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($primary-color, 18%);
-
-// Border color
-$border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 16%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
-$scroll-bar-thumb-active-color: lighten($background-color, 32%);
-
-// App bar color
-$top-bar-color: #313543;
-$search-bar-color: lighten($top-bar-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: #d9e1e8;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #1f232b;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/v1-light.scss b/app/javascript/styles/material-v1-dark/color/v1-light.scss
deleted file mode 100644
index 4000eead0..000000000
--- a/app/javascript/styles/material-v1-dark/color/v1-light.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-
-// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$verified-background-color: lighten($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$top-bar-unread-icon-color: darken($primary-color, 30%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #2196f3;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/plugins/dense.scss b/app/javascript/styles/material-v1-dark/plugins/dense.scss
deleted file mode 100644
index 42417124b..000000000
--- a/app/javascript/styles/material-v1-dark/plugins/dense.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.drawer {
-    &__tab { margin: 8px auto 8px }
-}
-
-.column { margin: 10px 5px }
-
-.column-header {
-    &__buttons { height: 48px }
-
-    &__button {
-        margin: 8px;
-        padding: 10px 8px;
-
-        .fa { vertical-align: text-top }
-    }
-}
-
-.column-subheading { padding: 8px 16px }
-
-.column-link { padding: 12px 16px }
-
-.notification__filter-bar button { padding: 12px 0 }
-
-.getting-started__footer {
-    padding: 12px 16px;
-
-    p { margin-bottom: 12px }
-}
-
-.compose-form {
-    .compose-form__publish { padding-top: 8px }
-}
-
-.status {
-    padding: 8px 8px 8px 66px;
-
-    &__expand { width: 66px }
-
-    &__info { padding-right: 0 }
-
-    &__avatar {
-        left: 8px;
-        top: 10px;
-    }
-
-    &__content { padding-top: 2px }
-}
-
-.detailed-status {
-    padding: 14px;
-
-    &__meta { margin-top: 14px }
-
-    &__action-bar { padding: 10px 0 }
-}
-
-.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/material-icons.scss b/app/javascript/styles/material-v1-dark/theme/material-icons.scss
deleted file mode 100644
index 51631eab5..000000000
--- a/app/javascript/styles/material-v1-dark/theme/material-icons.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config', '../icon_config';
-@import '../custom_color', '../custom_layout';
-@import 'functions';
-
-
-.fa {
-    &.fa-bars,
-    &.fa-navicon,
-    &.fa-reorder,
-    &.fa-globe,
-    &.fa-cog,
-    &.fa-cogs,
-    &.fa-gears,
-    &.fa-sign-out,
-    &.fa-search,
-    &.fa-times,
-    &.fa-times-circle,
-    &.fa-close,
-    &.fa-remove,
-    &.fa-chevron-down,
-    &.fa-ellipsis-v,
-    &.fa-paperclip,
-    &.fa-tasks,
-    &.fa-plus,
-    &.fa-unlock,
-    &.fa-lock,
-    &.fa-envelope,
-    &.fa-home,
-    &.fa-bullhorn,
-    &.fa-sliders,
-    &.fa-chevron-left,
-    &.fa-chevron-right,
-    &.fa-reply,
-    &.fa-reply-all,
-    &.fa-share-alt,
-    &.fa-star,
-    &.fa-bookmark,
-    &.fa-ellipsis-h,
-    &.fa-bell,
-    &.fa-eraser,
-    &.fa-users,
-    &.fa-file-text,
-    &.fa-user-plus,
-    &.fa-address-book,
-    &.fa-address-book-o,
-    &.fa-list,
-    &.fa-list-ul,
-    &.fa-eye,
-    &.fa-eye-slash,
-    &.fa-pencil,
-    &.fa-trash,
-    &.fa-play,
-    &.fa-external-link,
-    &.fa-retweet,
-    &.fa-link,
-    &.fa-pause,
-    &.fa-volume-up,
-    &.fa-volume-off,
-    &.fa-expand,
-    &.fa-download,
-    &.fa-arrows-alt,
-    &.fa-compress,
-    &.fa-user-times,
-    &.fa-check,
-    &.fa-quote-right {
-        font-family: "Material Icons";
-    }
-}
-
-.fa {
-    &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
-    &.fa-globe::before { content: "public" }
-    &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
-    &.fa-sign-out::before { content: "exit_to_app" }
-    &.fa-search::before { content: "search" }
-    &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
-    &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
-    &.fa-paperclip::before { content: "attach_file" }
-    &.fa-tasks::before { content: "poll" }
-    &.fa-plus::before { content: "add" }
-    &.fa-unlock::before { content: "lock_open" }
-    &.fa-lock::before { content: "lock" }
-    &.fa-envelope::before { content: "mail" }
-    &.fa-home::before { content: "home" }
-    &.fa-bullhorn::before { content: "announcement" }
-    &.fa-sliders::before { content: "tune" }
-    &.fa-chevron-left::before { content: "arrow_back" }
-    &.fa-chevron-right::before { content: "arrow_forward" }
-    &.fa-reply::before { content: $reply-icon }
-    &.fa-reply-all::before { content: "reply_all" }
-    &.fa-share-alt::before { content: "share" }
-    &.fa-star::before { content: $favorite-icon }
-    &.fa-bookmark::before { content: "bookmark" }
-    &.fa-ellipsis-h::before { content: "more_horiz" }
-    &.fa-bell::before { content: "notifications" }
-    &.fa-eraser::before { content: "clear_all" }
-    &.fa-users::before { content: "people" }
-    &.fa-file-text::before { content: "web" }
-    &.fa-user-plus::before { content: "person_add" }
-    &.fa-address-book::before { content: "explore" }
-    &.fa-address-book-o::before { content: "explore" }
-    &.fa-list::before { content: "list" }
-    &.fa-list-ul::before { content: "list" }
-    &.fa-eye::before { content: "visibility" }
-    &.fa-eye-slash::before { content : "visibility_off" }
-    &.fa-pencil::before { content: "create" }
-    &.fa-trash::before { content: "delete" }
-    &.fa-play::before { content: "play_arrow" }
-    &.fa-external-link::before { content: "open_in_new" }
-    &.fa-retweet::before { content: "repeat" }
-    &.fa-link::before { content: "link" }
-    &.fa-pause::before { content: "pause" }
-    &.fa-volume-up::before { content: "volume_up" }
-    &.fa-volume-off::before { content: "volume_off" }
-    &.fa-expand::before { content: "web_asset" }
-    &.fa-download::before { content: "file_download" }
-    &.fa-arrows-alt::before { content: "fullscreen" }
-    &.fa-compress::before { content: "fullscreen_exit" }
-    &.fa-user-times::before { content: "delete" }
-    &.fa-check::before { content: "check" }
-    &.fa-quote-right::before { content: "format_quote" }
-}
-
-// bookmark icon
-.status__action-bar-button.icon-button,
-.bookmark-icon.icon-button {
-    .fa.fa-bookmark::before { content: "bookmark_border" }
-    &.active .fa.fa-bookmark::before { content: "bookmark" }
-}
-
-// favorite icon
-.status__action-bar-button.star-icon.icon-button,
-.star-icon.icon-button {
-    .fa.fa-star::before { content: $favorite-icon-border }
-
-    &.active,
-    &.active.activate {
-        .fa.fa-star::before { content: $favorite-icon }
-    }
-}
-
-// favorite icon color
-.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
-
-// boost icon
-.no-reduce-motion button.icon-button i.fa-retweet {
-    height: 18px;
-    width: 18px;
-    transition: background-position .3s steps(1);
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/theme/theme.scss b/app/javascript/styles/material-v1-dark/theme/theme.scss
deleted file mode 100644
index 5b7daddf6..000000000
--- a/app/javascript/styles/material-v1-dark/theme/theme.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light.scss b/app/javascript/styles/material-v1-light.scss
deleted file mode 100644
index b56b4408a..000000000
--- a/app/javascript/styles/material-v1-light.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@charset "UTF-8";
-
-@import 'material-v1-light/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/columns.scss b/app/javascript/styles/material-v1-light/theme/columns.scss
deleted file mode 100644
index a6892adf2..000000000
--- a/app/javascript/styles/material-v1-light/theme/columns.scss
+++ /dev/null
@@ -1,502 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.column {
-    @include shadow-1dp;
-    padding: 0;
-    margin: 10px 8px;
-    border-radius: $card-radius;
-
-    &>.scrollable { background: $list-background-color }
-
-    &:last-child { box-shadow: none }
-}
-
-.column-header {
-    background: $top-bar-color;
-    border-radius: $bar-radius;
-
-    > button {
-        padding: 16px 0 16px 16px;
-        color: $top-bar-text-color;
-    }
-
-    &>.column-header__back-button { color: $top-bar-icon-color }
-
-    &.active {
-        .column-header__icon {
-            color: $top-bar-unread-icon-color;
-            text-shadow: none;
-        }
-    }
-
-    &__icon {
-        margin-right: 16px;
-        color: $top-bar-icon-color;
-        font-size: 20px;
-    }
-
-    &__buttons { height: 56px }
-
-    &__button {
-        background: $top-bar-color;
-        color: $top-bar-icon-color;
-        margin: 8px 10px;
-        padding: 10px 12px;
-        border-radius: 50%;
-
-        &.active {
-            color: $top-bar-icon-active-color;
-            background: $icon-background-active-color;
-
-            &:hover {
-                color: $top-bar-icon-hover-color;
-                background: $icon-background-hover-color;
-            }
-        }
-
-        &:hover {
-            color: $top-bar-icon-hover-color;
-            background: $icon-background-hover-color;
-        }
-    }
-
-    &__setting-btn {
-        color: $icon-button-color;
-        padding: 8px 0;
-
-        &:hover {
-            color: $icon-button-hover-color;
-            text-decoration: none;
-        }
-
-        .fa { font-size: 20px }
-
-        span { vertical-align: middle }
-    }
-
-    &__setting-arrows {
-        font-size: 16px;
-        border-bottom: 8px;
-
-        .column-header__setting-btn {
-            padding: 8px;
-            border-radius: 50%;
-
-            &:last-child { padding-right: 8px }
-        }
-    }
-
-    &__wrapper {
-        @include shadow-4dp;
-        border-radius: $bar-radius;
-
-        .announcements { border-top: 1px solid $border-color }
-
-        &.active {
-            @include shadow-4dp;
-
-            &::before { background: transparent }
-        }
-    }
-
-    &__collapsible {
-        color: $ui-text-color;
-        background: $card-background-color;
-        border-top: 1px solid $border-color;
-
-        &-inner {
-            background: $card-background-color;
-            padding: 16px;
-        }
-
-        &.collapsed { border-top: none }
-    }
-
-    &__back-button {
-        background: $top-bar-color;
-        color: $top-bar-icon-color;
-        padding: 8px;
-        margin: auto 0;
-        border-radius: 50%;
-
-        span { display: none }
-    }
-}
-
-.column-subheading {
-    color: $section-text-color;
-    background: $background-color;
-    padding: 12px 16px;
-    border-top: 1px solid $border-color;
-}
-
-.column-link {
-    color: $ui-text-color;
-    background: $background-color;
-    padding: 16px;
-    border-radius: $nav-drawer-item-radius;
-
-    &:hover { background: $list-background-hover-color }
-
-    &:active,
-    &:focus { background: $list-background-active-color }
-
-    &__icon {
-        margin-right: 32px;
-        font-size: 20px;
-    }
-
-    &--transparent {
-        &.active {
-            color: $ui-text-color;
-            background: $menu-background-active-color;
-
-            &:hover { background: $menu-background-active-hover-color }
-    
-            .fa { color: $icon-color }
-        }
-
-        &:hover {
-            color: $ui-text-color;
-
-            .fa { color: $icon-color }
-        }
-    }
-
-    .fa { color: $icon-color }
-}
-
-.column-settings {
-    &__section {
-        color: $section-text-color;
-        margin-bottom: 0;
-        margin-top: 8px;
-    }
-
-    &__row .text-btn { margin-bottom: 0 }
-}
-
-.column-back-button {
-    @include shadow-4dp;
-    background: $top-bar-color;
-    color: $top-bar-icon-color;
-    padding: 16px;
-
-    span { visibility: hidden }  // hide "back" string
-}
-
-.column-inline-form {
-    padding: 16px 0 16px 16px;
-    background: $card-background-color;
-
-    .icon-button { margin: 0 16px }
-}
-
-.setting-text {
-    color: $primary-text-color;
-    background: $search-bar-color;
-    border-radius: $bar-radius;
-
-    &::placeholder { color: $tips-text-color }
-
-    &:focus {
-        @include shadow-1dp;
-        background: $search-bar-focus-color;
-    }
-}
-
-.empty-column-indicator {
-    color: $secondary-text-color;
-    background: $card-background-color;
-    font-size: 16px;
-}
-
-.conversation {
-    border-bottom: 1px solid $border-color;
-    padding: 12px;
-    background: $list-background-inactive-color;
-
-    &--unread {
-        background: $list-background-color;
-
-        .conversation__content__relative-time { color: $info-text-color }
-    }
-
-    &__unread { background: $primary-color }
-
-    &__avatar { padding: 0 16px 0 0 }
-
-    &__content {
-        padding: 0;
-
-        &__relative-time {
-            font-size: 14px;
-            color: $info-text-color;
-        }
-
-        &__names,
-        &__names a {
-            color: $primary-text-color;
-            font-size: 16px;
-        }
-    }
-}
-
-// read status in notification column
-.muted {
-    .status {
-        &__content {
-            color: $read-primary-text-color;
-    
-            p { color: $read-primary-text-color }
-    
-            a { color: $read-secondary-text-color }
-        }
-
-        &__display-name strong { color: $read-primary-text-color }
-    }
-
-    .poll {
-        color: $read-primary-text-color;
-
-        &__chart {
-            background: $read-poll-bar-color;
-    
-            &.leading { background: $read-poll-bar-leading-color }
-        }
-
-        &__footer,
-        &__link { color: $read-ui-text-color }
-    }
-}
-
-.load-gap { border-bottom: 1px solid $border-color }
-
-.load-more {
-    color: $icon-color;
-    padding: 16px;
-
-    &:hover { background: $menu-background-hover-color }
-}
-
-.getting-started {
-    background: $background-color;
-    color: $ui-text-color;
-
-    &__wrapper {
-        background: $background-color;
-        height: auto !important;
-        border-bottom: 1px solid $border-color;
-    }
-
-    &__footer {
-        padding: 16px;
-        
-        p {
-            color: $secondary-text-color;
-            font-size: 12px;
-            margin-bottom: 16px;
-        }
-
-        a { color: $ui-text-color }
-
-        p a { color: $link-text-color }
-    }
-
-    &__trends {
-        background: $background-color;
-        margin-bottom: 0;
-
-        h4 {
-            color: $section-text-color;
-            padding: 12px 16px;
-            border-top: 1px solid $border-color;
-            border-bottom: none;
-        }
-    }
-}
-
-.trends {
-    &__header {
-        color: $section-text-color;
-        background: transparent;
-        border-bottom: 1px solid $border-color;
-        padding: 16px;
-
-        .fa { margin-right: 8px }
-    }
-
-    &__item {
-        padding: 16px;
-        border-bottom: none;
-    
-        &__name {
-            color: $secondary-text-color;
-            font-size: 12px;
-    
-            a { color: $primary-text-color }
-        }
-    
-        &__current {
-            padding-right: 16px;
-            margin-left: 4px;
-            color: $secondary-text-color;
-        }
-    
-        &__sparkline path {
-            stroke: $primary-color;
-            fill: $primary-color;
-            fill-opacity: 0.5;
-        }
-    }
-}
-
-.setting-toggle {
-    &__label {
-        color: $ui-text-color;
-        margin: 8px 8px 8px 14px;
-    }
-}
-
-.announcements {
-    background: $card-background-color;
-    padding: 0;
-
-    &__container { color: $primary-text-color }
-
-    &__item {
-        padding: 16px;
-        font-size: 16px;
-
-        &__unread { background: $badge-color }
-    }
-
-    &__pagination { color: $ui-text-color }
-}
-
-.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
-
-.reactions-bar {
-    .emoji-button {
-        color: $icon-button-color;
-        font-size: 20px;
-
-        &:hover { color: $icon-button-hover-color }
-
-        &:active { color: $icon-button-active-color }
-    }
-
-    &__item {
-        background: $contained-chip-color;
-        border-radius: 17px;
-        margin: 2px 4px;
-
-        &.active {
-            background-color: $contained-chip-selected-color;
-            .reactions-bar__item__count { color: $ui-text-color }
-        }
-
-        &__emoji {
-            width: 24px;
-            height: 24px;
-            margin: 4px 0 4px 2px;
-        }
-
-        &__count {
-            font-size: 16px;
-            margin: 0 8px;
-            color: $secondary-text-color;
-        }
-
-        &:hover { background: $contained-chip-hover-color }
-    }
-}
-
-.notification {
-    &__filter-bar {
-        background: $tab-background-color;
-        border-bottom: 1px solid $border-color;
-        z-index: 1;
-    
-        button {
-            background: $tab-background-color;
-            color: $tab-indicator-color;
-            font-size: 16px;
-
-            span { font-size: 14px }
-    
-            &.active {
-                color: $tab-indicator-active-color;
-                border-bottom: 4px solid $tab-indicator-active-color;
-    
-                &::before,
-                &:after { border: none }
-
-                &:focus { background: $tab-indicator-background-focus-color }
-            }
-
-            &:hover { background: $tab-indicator-background-hover-color }
-        }
-    }
-
-    &__message {
-        color: $secondary-text-color;
-        margin: 0 16px 0 70px;
-        font-size: 16px;
-    }
-
-    &__display-name:hover { color: inherit }
-}
-
-.notification-favourite .status.status-direct {
-    .icon-button.disabled { color: $disabled-icon-color }
-}
-
-.relationship-tag {
-    color: $ui-text-color;
-    background-color: $contained-chip-color;
-    font-size: 12px;
-    border-radius: 17px;
-    padding: 4px 8px;
-    opacity: 1;
-}
-
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable {
-    &:focus { background: $card-background-color }
-}
-
-// single column mode
-@media screen and (min-width: 415px) {
-    .tabs-bar {
-        margin-bottom: 0;
-
-        &__wrapper { padding-top: 0 }
-    }
-
-    .columns-area__panels__main {
-        @include shadow-1dp;
-        padding: 0;
-        margin: 12px 12px 0;
-    }
-}
-
-@media screen and (min-width: 631px) {
-    .tabs-bar__link {
-        &:hover {
-            background: $tab-indicator-background-hover-color;
-            border-bottom-color: $tab-background-color;
-        }
-
-        &:active,
-        &:focus {
-            background: $tab-indicator-background-focus-color;
-            border-bottom-color: $tab-background-color;
-        }
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/components.scss b/app/javascript/styles/material-v1-light/theme/components.scss
deleted file mode 100644
index 4f844229c..000000000
--- a/app/javascript/styles/material-v1-light/theme/components.scss
+++ /dev/null
@@ -1,394 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.drawer {
-    &__header {
-        @include shadow-4dp;
-        background: $top-bar-color;
-        border-radius: $nav-bar-radius;
-        justify-content: space-around;
-    
-        a { transition: none }
-    
-        a:hover {
-            background: $icon-background-hover-color;
-            border-radius: 50%;
-        }
-    }
-
-    &__tab {
-        color: $top-bar-icon-color;
-        font-size: 20px;
-        margin: 10px auto 10px;
-        padding: 8px;
-        flex: none;
-        height: 20px;
-        width: 20px;
-        border-bottom: none;
-        text-align: justify;
-    
-        &:hover { color: $top-bar-icon-hover-color }
-    }
-
-    &__pager {
-        @include shadow-1dp;
-        border-radius: $card-radius;
-    }
-
-    &__inner {
-        background: $card-background-color;
-
-        &.darker {
-            background: $card-background-color;
-            position: inherit;
-        }
-
-        &__mastodon { background: $card-background-color }
-    }
-}
-
-.search {
-    &__input {
-        background: $search-bar-color;
-        color: $tips-text-color;
-        border-radius: $search-bar-radius;
-        padding: 12px 12px 12px 40px;
-
-        &:focus {
-            @include shadow-2dp;
-            background: $search-bar-focus-color;
-            color: $search-bar-text-color;
-        }
-
-        &::placeholder { color: $tips-text-color }
-    }
-
-    &__icon {
-        .fa {
-            color: $icon-color;
-            font-size: 20px;
-            top: 12px;
-            right: unset;
-            left: 12px;
-            height: 6px;
-            transition: none;
-
-            &.active { opacity: 1 }
-
-            &-search {
-                transform: none;
-                opacity: 1;
-            }
-            &-times-circle.active {
-                right: 16px;
-                left: unset;
-                transform: none;
-            }
-        }
-    }
-}
-
-.search-popout {
-    @include shadow-2dp;
-    background: $search-bar-focus-color;
-    border-radius: 0px $bar-radius;
-    border-top: 1px solid $border-color;
-    margin-top: 0;
-    color: $tips-text-color;
-
-    h4 {
-        color: $secondary-text-color;
-    }
-
-    em {
-        color: $search-bar-text-color;
-    }
-}
-
-.search-results {
-    &__header {
-        color: $secondary-text-color;
-        background-color: $card-background-color;
-        padding: 16px;
-
-        .fa { margin-right: 8px }
-    }
-
-    &__section {
-        h5 {
-            background: $card-background-color;
-            border-bottom: 1px solid $border-color;
-            padding: 16px;
-            color: $section-text-color;
-
-            .fa { margin-right: 8px }
-        }
-    }
-}
-
-.navigation-bar {
-    color: $secondary-text-color;
-    padding: 14px;
-
-    strong {
-        color: $ui-text-color;
-    }
-}
-
-.navigation-panel hr {
-    border-top: 1px solid $border-color;
-    margin: 8px 0;
-}
-
-.dropdown-menu {
-    @include shadow-8dp;
-    background: $menu-background-color;
-    padding: 8px 0;
-    border-radius: $menu-radius;
-
-    &__arrow { visibility: hidden }
-
-    &__item a {
-        font-size: 14px;
-        padding: 8px 16px;
-        background: $menu-background-color;
-        color: $menu-text-color;
-
-        &:hover, &:active {
-            background: $menu-background-hover-color;
-            color: $menu-text-color;
-        }
-    }
-
-    &__separator {
-        margin: 8px 0;
-        border-bottom: 1px solid $border-color;
-    }
-}
-
-.compose-form {
-    .autosuggest-textarea {
-        &__textarea {
-            background: $card-background-color;
-            color: $ui-text-color;
-    
-            &::placeholder { color: $tips-text-color }
-        }
-
-        &__suggestions {
-            @include shadow-1dp;
-            background: $menu-background-color;
-            color: $ui-text-color;
-            border-radius: $card-radius;
-            font-size: 16px;
-            padding: 8px 0;
-
-            &__item {
-                padding: 8px;
-                border-radius: 0;
-
-                &:hover { background: $menu-background-hover-color }
-
-                &.selected,
-                &:focus,
-                &:active { background: $menu-background-active-color }
-            }
-        }
-    }
-
-    .spoiler-input__input {
-        color: $ui-text-color;
-        background: $card-background-color;
-
-        &::placeholder { color: $tips-text-color }
-    }
-
-    .compose-form {
-        &__warning {
-            @include shadow-1dp;
-            color: $secondary-text-color;
-            background: $card-background-color;
-            padding: 16px;
-
-            a { color: $link-text-color }
-        }
-
-        &__modifiers {
-            background: $card-background-color;
-            color: $tips-text-color;
-        }
-
-        &__buttons-wrapper {
-            background: $card-background-color;
-            color: $tips-text-color;
-        }
-
-        &__poll-wrapper {
-            border-top: 1px solid $border-color;
-
-            ul { padding: 12px }
-
-            select {
-                color: $ui-text-color;
-                background-color: $background-color;
-                border: 0;
-
-                &:focus { border-color: $border-active-color }
-            }
-
-            .button.button-secondary {
-                box-shadow: none;
-                color: $outlined-button-color;
-                border-color: $outlined-button-color;
-
-                &:hover { background-color: $outlined-button-hover-color }
-
-                &:active { background-color: $outlined-button-active-color }
-
-                &:focus { background-color: $outlined-button-color }
-
-
-            }
-        }
-
-        &__utilBtns { padding-top: 0 }
-
-        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
-    }
-}
-
-.no-reduce-motion .spoiler-input {
-    transition-duration: .2s, .2s;
-}
-
-
-.poll {
-    &__input {
-        border: 2px solid $control-border-color;
-        width: 20px;
-        height: 20px;
-        flex: 0 0 20px;
-    }
-
-    &__text input[type=text] {
-        color: $ui-text-color;
-        background: $background-color;
-        border: 1px solid $border-color;
-        padding: 8px 12px;
-    
-        &:focus { border-color: $border-active-color }
-    }
-
-    &__chart {
-        border-radius: 0;
-        background: $poll-bar-color;
-    
-        &.leading { background: $poll-bar-leading-color }
-    }
-
-    &__footer {
-        padding-top: 8px;
-        padding-bottom: 0;
-        color: $ui-text-color;
-    }
-
-    &__link { color: $ui-text-color }
-}
-
-.privacy-dropdown {
-    &.active .privacy-dropdown__value.active {
-        background: $icon-background-hover-color;
-        border-radius: 50%;
-        box-shadow: none;
-
-        .icon-button { color: $icon-button-active-color }
-    }
-
-    &__dropdown {
-        @include shadow-8dp;
-        background: $menu-background-color;
-        border-radius: $dialog-radius;
-    }
-
-    &__option {
-        color: $icon-color;
-        padding: 8px 16px;
-
-        &__icon {
-            font-size: 20px;
-            margin-right: 12px;
-        }
-
-        &__content {
-            color: $secondary-text-color;
-
-            strong { color: $ui-text-color }
-        }
-
-        &.active {
-            background: $menu-background-active-color;
-            color: $icon-hover-color;
-
-            .privacy-dropdown__option__content {
-                color: $secondary-text-color;
-
-                strong { color: $ui-text-color }
-            }
-
-            &:hover {
-                background: $menu-background-active-color;
-                
-                .privacy-dropdown__option__content {
-                    color: $secondary-text-color;
-
-                    strong { color: $ui-text-color }
-                }
-            }
-        }
-
-        &:hover {
-            background: $menu-background-hover-color;
-            color: $icon-hover-color;
-
-            .privacy-dropdown__option__content {
-                color: $secondary-text-color;
-
-                strong { color: $ui-text-color }
-            }
-        }
-    }
-}
-
-.character-counter {
-    color: $secondary-text-color;
-}
-
-.reply-indicator {
-    @include shadow-1dp;
-    border-radius: $card-radius;
-    background: $card-background-color;
-    padding: 16px;
-
-    &__header { margin-bottom: 4px }
-
-    &__display {
-        &-name {
-            color: $primary-text-color;
-            padding-right: 24px;
-        }
-
-        &-avatar { margin-right: 8px }
-    }
-
-    &__content { color: $primary-text-color }
-}
-
-.attachment-list {
-    &__list a { color: $secondary-text-color }
-
-    &.compact .fa { color: $icon-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/theme/theme.scss b/app/javascript/styles/material-v1-light/theme/theme.scss
deleted file mode 100644
index 5b7daddf6..000000000
--- a/app/javascript/styles/material-v1-light/theme/theme.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark.scss b/app/javascript/styles/material-v2-dark.scss
deleted file mode 100644
index 6a342731c..000000000
--- a/app/javascript/styles/material-v2-dark.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@charset "UTF-8";
-
-@import 'material-v2-dark/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/custom_config.scss b/app/javascript/styles/material-v2-dark/custom_config.scss
deleted file mode 100644
index c0e23398a..000000000
--- a/app/javascript/styles/material-v2-dark/custom_config.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your settings below
-@import 'color/v2-dark';
-
-@import 'layout/material-v2';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/loader.scss b/app/javascript/styles/material-v2-dark/loader.scss
deleted file mode 100644
index 04d588001..000000000
--- a/app/javascript/styles/material-v2-dark/loader.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@charset "UTF-8";
-
-
-@import '../application';
-
-@import 'theme/theme';
-@import 'theme/material-icons';
-
-// Plugins
-//@import 'plugins/cards';
-//@import 'plugins/dense';
-//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/mobile.scss b/app/javascript/styles/material-v2-dark/theme/mobile.scss
deleted file mode 100644
index ed6467ebc..000000000
--- a/app/javascript/styles/material-v2-dark/theme/mobile.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.tabs-bar {
-    background: $top-bar-color;
-
-    &__link {
-        padding: 16px 16px 12px 16px;
-        color: $top-bar-icon-color;
-        border-bottom: 4px solid transparent;
-
-        &.active {
-            border-bottom: 4px solid $tab-indicator-active-color;
-            color: $tab-indicator-active-color;
-        }
-
-        .fa { font-size: 20px }
-
-        span {
-            margin-left: 8px;
-            vertical-align: text-bottom;
-        }
-    }
-
-    &__wrapper {
-        @include shadow-4dp;
-        background: transparent;
-    }
-}
-
-
-#tabs-bar__portal { overflow-y: hidden }
-
-.floating-action-button {
-    @include shadow-6dp;
-    background: $floating-action-button-color;
-    color: $floating-action-button-icon-color;
-    font-size: 24px;
-
-    &:hover { background: $floating-action-button-hover-color }
-
-    &:active,
-    &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
-    .column { margin: 0 !important }
-    .search__input { padding: 16px 46px }
-
-    .search__icon .fa {
-        top: 16px;
-        left: 16px;
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/theme/theme.scss b/app/javascript/styles/material-v2-dark/theme/theme.scss
deleted file mode 100644
index 5b7daddf6..000000000
--- a/app/javascript/styles/material-v2-dark/theme/theme.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light.scss b/app/javascript/styles/material-v2-light.scss
deleted file mode 100644
index e8875d39d..000000000
--- a/app/javascript/styles/material-v2-light.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@charset "UTF-8";
-
-@import 'material-v2-light/loader'
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/mastodon-light.scss b/app/javascript/styles/material-v2-light/color/mastodon-light.scss
deleted file mode 100644
index 134b18e10..000000000
--- a/app/javascript/styles/material-v2-light/color/mastodon-light.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #2b90d9;
-$secondary-color: #2b90d9;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #217aba;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-
-// Background-color
-$background-color: #eff3f5;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($background-color, 6%);
-$menu-background-active-color: darken($background-color, 10%);
-$menu-background-active-hover-color: darken($background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$verified-background-color: lighten($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #282c37;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: darken($background-color, 4%);
-$icon-background-active-color: darken($background-color, 8%);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $icon-hover-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: lighten($text-button-color, 36%);
-$text-button-focus-color: lighten($text-button-color, 30%);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: $primary-color;
-$toggle-track-active-color: lighten($primary-color, 26%);
-
-// Border color
-$border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: #ccd7e0;
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #ffffff;
-$search-bar-color: #d9e1e8;
-$search-bar-focus-color: $background-color;
-
-// Tab color
-$tab-indicator-color: #282c37;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: #e6ebf0;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $tab-indicator-color;
-$text-tab-indicator-active-color: $tab-indicator-active-color;
-$text-tab-background-color: $tab-background-color;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/plus-classic.scss b/app/javascript/styles/material-v2-light/color/plus-classic.scss
deleted file mode 100644
index 3e817cde4..000000000
--- a/app/javascript/styles/material-v2-light/color/plus-classic.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $inverted-text-color;
-$search-bar-text-color: $primary-text-color;
-
-// Background-color
-$background-color: #fafafa;
-$menu-background-color: #ffffff;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: #ffffff;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: #ffffff;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$verified-background-color: lighten($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
-$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
-
-// App bar color
-$top-bar-color: #db4437;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
-$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v1-dark.scss b/app/javascript/styles/material-v2-light/color/v1-dark.scss
deleted file mode 100644
index 652ffe37e..000000000
--- a/app/javascript/styles/material-v2-light/color/v1-dark.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #ffffff;
-$secondary-text-color: #9aa0a6;
-$ui-text-color: #e8eaed;
-$inverted-text-color: #000000;
-$section-text-color: $primary-color;
-$info-text-color: #9aa0a6;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $inverted-text-color;
-
-// Background-color
-$background-color: #303030;
-$menu-background-color: #424242;
-$menu-background-hover-color: lighten($menu-background-color, 6%);
-$menu-background-active-color: lighten($menu-background-color, 10%);
-$menu-background-active-hover-color: lighten($menu-background-color, 16%);
-$card-background-color: #424242;
-$card-background-hover-color: lighten($card-background-color, 6%);
-$card-background-inactive-color: lighten($card-background-color, 10%);
-$list-background-color: #424242;
-$list-background-hover-color: lighten($list-background-color, 6%);
-$list-background-active-color: lighten($list-background-color, 10%);
-$list-background-inactive-color: lighten($list-background-color, 10%);
-$verified-background-color: darken($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
-$contained-chip-selected-color: lighten($contained-chip-color, 12%);
-$outlined-chip-color: #1e1e1e;
-$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
-$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #e2e2e3;
-$icon-hover-color: lighten($icon-color, 30%);
-$icon-background-hover-color: transparentize(#ffffff, 0.8);
-$icon-background-active-color: transparentize(#ffffff, 0.7);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: #ffffff;
-$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
-$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
-$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
-$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
-$floating-action-button-icon-color: #ffffff;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: lighten($background-color, 20%);
-$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
-$scroll-bar-thumb-active-color: lighten($background-color, 38%);
-
-// App bar color
-$top-bar-color: #1565C0;
-$search-bar-color: lighten($background-color, 6%);
-$search-bar-focus-color: #ffffff;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $top-bar-color;
-$text-tab-background-color: #424242;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v2-light.scss b/app/javascript/styles/material-v2-light/color/v2-light.scss
deleted file mode 100644
index 6fd1dea9e..000000000
--- a/app/javascript/styles/material-v2-light/color/v2-light.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-@charset "UTF-8";
-
-
-// Base color
-$primary-color: #4285f4;
-$secondary-color: #db4437;
-$error-color: #B00020;
-$verified-color: #4caf50;
-
-// Text color
-$primary-text-color: #000000;
-$secondary-text-color: #5f6368;
-$ui-text-color: #202124;
-$inverted-text-color: #ffffff;
-$section-text-color: $primary-color;
-$info-text-color: #5e5e5e;
-$tips-text-color: #c0c0c0;
-$disabled-text-color: rgba(0,0,0,.54);
-$link-text-color: #4285f4;
-$menu-text-color: $ui-text-color;
-$top-bar-text-color: $ui-text-color;
-$search-bar-text-color: $primary-text-color;
-
-// Background-color
-$background-color: #ffffff;
-$menu-background-color: $background-color;
-$menu-background-hover-color: darken($menu-background-color, 6%);
-$menu-background-active-color: darken($menu-background-color, 10%);
-$menu-background-active-hover-color: darken($menu-background-color, 16%);
-$card-background-color: $background-color;
-$card-background-hover-color: darken($card-background-color, 6%);
-$card-background-inactive-color: darken($card-background-color, 10%);
-$list-background-color: $background-color;
-$list-background-hover-color: darken($list-background-color, 6%);
-$list-background-active-color: darken($list-background-color, 10%);
-$list-background-inactive-color: darken($list-background-color, 10%);
-$verified-background-color: lighten($verified-color, 20%);
-
-// Chip color
-$contained-chip-color: #e0e0e0;
-$contained-chip-hover-color: darken($contained-chip-color, 6%);
-$contained-chip-selected-color: darken($contained-chip-color, 12%);
-$outlined-chip-color: #ffffff;
-$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
-$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
-
-// Badge color
-$badge-color: $primary-color;
-//$badge-color: $secondary-color;
-
-// Icon color
-$icon-color: #757575;
-$icon-hover-color: darken($icon-color, 30%);
-$icon-background-hover-color: transparentize(#000000, 0.9);
-$icon-background-active-color: transparentize(#000000, 0.8);
-$disabled-icon-color: lighten($icon-color, 16%);
-$top-bar-icon-color: $icon-color;
-$top-bar-icon-hover-color: $icon-hover-color;
-$top-bar-icon-active-color: $primary-color;
-$top-bar-unread-icon-color: $secondary-color;
-$media-icon-color: transparentize(#ffffff, 0.4);
-$media-icon-hover-color: transparentize(#ffffff, 0.2);
-$media-icon-background-color: transparentize(#000000, 0.5);
-$media-icon-background-hover-color: transparentize(#000000, 0.8);
-$control-border-color: $icon-color;
-
-// Button color
-$icon-button-color: $icon-color;
-$icon-button-hover-color: $icon-hover-color;
-$icon-button-active-color: $primary-color;
-$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
-$contained-button-color: $primary-color;
-$contained-button-hover-color: lighten($contained-button-color, 10%);
-$outlined-button-color: $primary-color;
-$outlined-button-hover-color: lighten($primary-color, 36%);
-$outlined-button-active-color: lighten($primary-color, 30%);
-$text-button-color: $primary-color;
-$text-button-hover-color: transparentize($text-button-color, 0.8);
-$text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: #ffffff;
-$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
-$floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
-
-// Toggle color
-$toggle-thumb-color: #ffffff;
-$toggle-track-color: darken($toggle-thumb-color, 18%);
-$toggle-thumb-active-color: #1a73e8;
-$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
-
-// Border color
-$border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
-
-// Scroll bar color
-$scroll-bar-thumb-color: darken($background-color, 20%);
-$scroll-bar-thumb-hover-color: darken($background-color, 30%);
-$scroll-bar-thumb-active-color: darken($background-color, 38%);
-
-// App bar color
-$top-bar-color: $background-color;
-$search-bar-color: darken($background-color, 6%);
-$search-bar-focus-color: $background-color;
-
-// Tab color
-$tab-indicator-color: $top-bar-icon-color;
-$tab-indicator-active-color: $top-bar-icon-color;
-$tab-background-color: $top-bar-color;
-$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
-$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
-$text-tab-indicator-color: $secondary-text-color;
-$text-tab-indicator-active-color: $ui-text-color;
-$text-tab-background-color: #ffffff;
-$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
-$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
-
-// Media indicator color
-$media-page-indicator-color: #9e9e9e;
-$media-page-indicator-active-color: #e6e6e6;
-
-// Poll chart color
-$poll-bar-leading-color: $primary-color;
-$poll-bar-color: lighten($poll-bar-leading-color, 30%);
-
-// Contents color in read status
-$read-primary-text-color: transparentize($primary-text-color, 0.3);
-$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
-$read-ui-text-color: transparentize($ui-text-color, 0.3);
-$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
-$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/custom_color.scss b/app/javascript/styles/material-v2-light/custom_color.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/material-v2-light/custom_color.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/custom_config.scss b/app/javascript/styles/material-v2-light/custom_config.scss
deleted file mode 100644
index 38d8cd324..000000000
--- a/app/javascript/styles/material-v2-light/custom_config.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your settings below
-@import 'color/v2-light';
-
-@import 'layout/material-v2';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/custom_layout.scss b/app/javascript/styles/material-v2-light/custom_layout.scss
deleted file mode 100644
index b4ac46881..000000000
--- a/app/javascript/styles/material-v2-light/custom_layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/icon_config.scss b/app/javascript/styles/material-v2-light/icon_config.scss
deleted file mode 100644
index 610c7e308..000000000
--- a/app/javascript/styles/material-v2-light/icon_config.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// Favorite icon settings
-$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
-//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
-//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
-
-$favorite-icon-color: #ffd600;  // Star
-//$favorite-icon-color: #ff4081;  // Heart
-//$favorite-icon-color: #db4437;  // +1
-//$favorite-icon-color: #ffffff;  // inverted +1
-
-
-// Reply icon settings
-$reply-icon: "reply";
-//$reply-icon: "comment";  // blooming
-
-
-// Material Design Icon settings
-// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
-@font-face {
-    font-family: "Material Icons";
-    src:
-        local("Material Icons"),
-        //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2");  // GitHub
-        //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2");  // Google Fonts
-        url("../fonts/MaterialIcons-Regular.woff2");  // Self-hosting
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/layout/material-v1.scss b/app/javascript/styles/material-v2-light/layout/material-v1.scss
deleted file mode 100644
index 825deaf8c..000000000
--- a/app/javascript/styles/material-v2-light/layout/material-v1.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 2px;
-
-
-// Search bar radius
-$search-bar-radius: 2px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-
-
-// Button radius settings
-$button-radius: 2px;
-
-
-// Card radius settings
-$card-radius: 2px;
-
-
-// Dialog radius settings
-$dialog-radius: 2px;
-
-
-// Menu radius settings
-$menu-radius: 2px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 0;
-
-
-// Avater cropping settings
-$avater-radius: 50%;  // Rounded cropping
-//$avater-radius: 2px  // Material v1 square
-
-
-// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/layout/material-v2.scss b/app/javascript/styles/material-v2-light/layout/material-v2.scss
deleted file mode 100644
index 6c81dc3e4..000000000
--- a/app/javascript/styles/material-v2-light/layout/material-v2.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@charset "UTF-8";
-@import '../theme/mixins';
-
-
-// Navigation bar radius
-$nav-bar-radius: 8px;
-
-
-// Search bar radius
-$search-bar-radius: 8px;
-
-
-// Bar radius settings
-$bar-radius: 0;
-//$bar-radius: 8px;
-
-
-// Button radius settings
-$button-radius: 8px;
-
-
-// Card radius settings
-$card-radius: 8px;
-
-
-// Dialog radius settings
-$dialog-radius: 8px;
-
-
-// Menu radius settings
-$menu-radius: 8px;
-
-
-// Navigation drawer item settings
-$nav-drawer-item-radius: 8px;  // corner rounded
-//$nav-drawer-item-radius: 32px;  // full rounded
-//$nav-drawer-item-radius: 32px 0 0 32px;  // left rounded
-
-
-// Avater cropping settings
-$avater-radius: 50%;  // Rounded cropping
-//$avater-radius: 8px  // Material v2 square
-
-
-// Chip settings
-// If you want to use contained-chip, please comment out below.
-.reactions-bar__item {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-
-    &.active { background-color: $outlined-chip-selected-color !important }
-
-    &:hover { background: $outlined-chip-hover-color !important }
-}
-.relationship-tag,
-.account-role {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-}
-
-
-// Button shadow
-// If you want to use material v2 styled non-shadow button, please comment out this section.
-.button,
-.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/plugins/cards.scss b/app/javascript/styles/material-v2-light/plugins/cards.scss
deleted file mode 100644
index c134cbeeb..000000000
--- a/app/javascript/styles/material-v2-light/plugins/cards.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import '../theme/mixins';
-
-
-.column {
-    box-shadow: none !important;
-    margin: 2px 0 !important;
-    padding: 8px !important;
-
-    > .scrollable { background: $background-color }
-}
-
-.status {
-    border-bottom: 0;
-    border-radius: $card-radius;
-    background: $card-background-color;
-
-    &__prepend { padding: 8px 8px 2px 0 }
-}
-
-.account { border-bottom: 0 !important }
-
-.status__wrapper.status__wrapper,
-.notification.notification {
-    @include shadow-1dp;
-    margin: 8px 2px;
-    border-radius: $card-radius;
-    background: $card-background-color;
-}
-
-.notification .status__wrapper.status__wrapper { box-shadow: none !important }
-
-.notification__filter-bar {
-    @include non-overflow-shadow-4dp;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/plugins/plus.scss b/app/javascript/styles/material-v2-light/plugins/plus.scss
deleted file mode 100644
index 5b220631b..000000000
--- a/app/javascript/styles/material-v2-light/plugins/plus.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-@import '../theme/base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.status__action-bar-button {
-    background: #eeeeee;
-    width: 28px !important;
-    height: 28px !important;
-
-    .fa { vertical-align: bottom }
-}
-
-// favorite icon
-.star-icon.active,
-.star-icon.icon-button.active.active,
-.notification__favourite-icon-wrapper .star-icon,
-.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
-
-.notification__favourite-icon-wrapper {
-    left: -34px;
-
-    .star-icon {
-        border-radius: 50%;
-        width: 28px;
-        height: 28px;
-        vertical-align: baseline;
-        font-size: 18px;
-
-        &.fa-fw::before { vertical-align: middle }
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/_functions.scss b/app/javascript/styles/material-v2-light/theme/_functions.scss
deleted file mode 100644
index 0374231ed..000000000
--- a/app/javascript/styles/material-v2-light/theme/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-
-
-// convert hex color code to svg styled ascii color code
-@function svg-color ($color) {
-    @return '%23' + string.slice(inspect($color), 2, 7);
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/_mixins.scss b/app/javascript/styles/material-v2-light/theme/_mixins.scss
deleted file mode 100644
index 5f573e339..000000000
--- a/app/javascript/styles/material-v2-light/theme/_mixins.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@charset "UTF-8";
-
-
-$shadow-color-1: rgba(0,0,0,.2);
-$shadow-color-2: rgba(0,0,0,.14);
-$shadow-color-3: rgba(0,0,0,.12);
-
-@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
-@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
-@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
-@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
-@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
-@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
-@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
-@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
-@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
-@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
-@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
-@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
-@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
-@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
-@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
-@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
-
-@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/app/javascript/styles/material-v2-light/theme/account.scss b/app/javascript/styles/material-v2-light/theme/account.scss
deleted file mode 100644
index 44d68d1e9..000000000
--- a/app/javascript/styles/material-v2-light/theme/account.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.account {
-    border-bottom: 1px solid $border-color;
-
-    .account__display-name { color: $primary-text-color }
-    .account__display-name strong { color: $secondary-text-color }
-
-    &__avatar {
-        border-radius: $avater-radius;
-        width: 40px;
-        height: 40px;
-
-        &-overlay {
-            &-base {
-                border-radius: 50%;
-                width: 44px;
-                height: 44px;
-                background-size: 44px;
-            }
-
-            &-overlay { border-radius: $avater-radius }
-        }
-    }
-
-    &__header {
-        &__bar {
-            background: $card-background-color;
-            padding: 8px;
-            border-bottom: 1px solid $border-color;
-
-            .avatar .account__avatar { border: none }
-        }
-
-        &__tabs {
-            padding: 8px;
-
-            &__name {
-                padding: 8px;
-
-                h1 {
-                    color: $primary-text-color;
-
-                    small { color: $secondary-text-color }
-                }
-            }
-
-            &__buttons {
-                .icon-button {
-                    border: none;
-                    border-radius: 50%;
-                    padding: 0;
-                }
-            }
-        }
-
-        &__extra {
-            margin-top: 0;
-
-            &__links {
-                color: $secondary-text-color;
-                padding: 10px 0;
-
-                a {
-                    color: $secondary-text-color;
-                    padding: 4px 12px;
-
-                    strong { color: $ui-text-color }
-                }
-            }
-        }
-
-        &__bio {
-            margin: 0;
-
-            .account__header {
-                &__content {
-                    color: $primary-text-color;
-                    padding: 8px;
-                }
-
-                &__fields {
-                    border: 1px solid $border-color;
-                    border-radius: 4px;
-
-                    .verified {
-                        border: none;
-                        background: $verified-background-color;
-
-                        a,
-                        &__mark { color: $primary-text-color }
-                    }
-
-                    dl {
-                        border-bottom: 1px solid $border-color;
-
-                        &:first-child .verified { border-radius: 0 }
-
-                        &:last-child { border-bottom: 0 }
-                    }
-
-                    dt {
-                        color: $primary-text-color;
-                        background: $list-background-inactive-color;
-                    }
-
-                    dd { color: $primary-text-color }
-                }
-            }
-        }
-    }
-
-    &__section-headline {
-        background: $text-tab-background-color;
-        border-bottom: 1px solid $border-color;
-
-        a {
-            padding: 16px 0;
-            color: $text-tab-indicator-color;
-
-            &.active {
-                color: $text-tab-indicator-active-color;
-                border-bottom: 4px solid $text-tab-indicator-active-color;
-
-                &::before,
-                &:after { border: none }
-
-                &:focus { background: $text-tab-indicator-background-focus-color }
-            }
-
-            &:hover { background: $text-tab-indicator-background-hover-color }
-        }
-    }
-}
-
-.account-role {
-    padding: 4px 8px;
-    border-radius: 17px;
-    color: $ui-text-color;
-    background-color: $contained-chip-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/base_config.scss b/app/javascript/styles/material-v2-light/theme/base_config.scss
deleted file mode 100644
index 73ff009e1..000000000
--- a/app/javascript/styles/material-v2-light/theme/base_config.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@charset "UTF-8";
-
-
-// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
-
-
-// Color scheme
-@import '../color/v1-light';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'color/v2-light';
-
-
-// Layout profile
-@import '../layout/material-v1';
-// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
-// @import 'layout/material-v2';
-
-
-// Search bar hover settings
-// You can enable/disable search bar floating.
-/*.search__input:hover {
-    @include shadow-2dp;
-    background: $search-bar-focus-color;
-}*/
-
-
-// Status font size in timeline
-$status-font-size: 15px;  // mastodon default
-//$status-font-size: 16px;  // compatible with material design
-
-
-// Name font size in timeline status
-$name-font-size: 15px;  // mastodon default
-//$name-font-size: 16px;  // compatible with material design
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/basics.scss b/app/javascript/styles/material-v2-light/theme/basics.scss
deleted file mode 100644
index 4c122d1c6..000000000
--- a/app/javascript/styles/material-v2-light/theme/basics.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-body { background: $background-color }
-
-// Chrome & Safari scroll bar
-::-webkit-scrollbar-thumb {
-    background: $scroll-bar-thumb-color;
-
-    &:hover { background: $scroll-bar-thumb-hover-color }
-    &:active { background: $scroll-bar-thumb-active-color }
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
-    background: transparent !important;
-}
-
-// Firefox scroll bar
-html {
-    scrollbar-color: $scroll-bar-thumb-color transparent;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/button.scss b/app/javascript/styles/material-v2-light/theme/button.scss
deleted file mode 100644
index 1231bac98..000000000
--- a/app/javascript/styles/material-v2-light/theme/button.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.icon-button {
-    color: $icon-button-color;
-    border-radius: 50%;
-
-    &.active {
-        color: $icon-button-active-color;
-
-        &:hover { color: $icon-button-active-hover-color }
-    }
-
-    &.disabled { color: $disabled-icon-color }
-
-    &.inverted {
-        color: $icon-button-color;
-
-        &:hover {
-            color: $icon-button-hover-color;
-            background-color: $icon-background-hover-color;
-        }
-    }
-
-    &.overlayed {
-        border-radius: 50%;
-        background: $media-icon-background-color;
-        color: $media-icon-color;
-    
-        &:hover {
-            background: $media-icon-background-color;
-            color: $media-icon-hover-color;
-        }
-    }
-
-    &:hover {
-        color: $icon-button-hover-color;
-        background-color: $icon-background-hover-color;
-    }
-
-    &:active,
-    &:focus { background-color: transparent }
-}
-
-.text-icon-button {
-    color: $icon-button-color;
-    border-radius: 50%;
-    font-size: 12px;
-
-    &:hover {
-        background-color: $icon-background-hover-color;
-        color: $icon-button-hover-color;
-    }
-}
-
-.button,
-.button:active,
-.button:focus {
-    background-color: $contained-button-color;
-    border-radius: $button-radius;
-}
-
-.button:hover {
-    @include shadow-2dp;
-    background-color: $contained-button-hover-color;
-}
-
-.button.logo-button {
-    background: $contained-button-color;
-    margin: 2px;
-
-    &:hover { background: $contained-button-hover-color }
-
-    .button--destructive:hover { background: $contained-button-hover-color }
-}
-
-.button.button--block { margin: 8px 0 }
-
-.button.confirmation-modal__cancel-button {
-    box-shadow: none;
-    background-color: transparent;
-    margin: 0 8px;
-    color: $text-button-color;
-
-    &:hover { background: $text-button-hover-color }
-
-    &:focus { background: $text-button-focus-color }
-}
-
-.spoiler-button__overlay__label {
-    background: $media-icon-background-color;
-    border-radius: $button-radius;
-    color: $media-icon-color;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/control.scss b/app/javascript/styles/material-v2-light/theme/control.scss
deleted file mode 100644
index a205a4cb7..000000000
--- a/app/javascript/styles/material-v2-light/theme/control.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.react-toggle {
-    width: 36px;
-    height: 16px;
-    border-radius: 15px;
-
-    &-track {
-        background-color: $toggle-track-color;
-        margin: 4px;
-        width: 36px;
-        height: 16px;
-
-        &-check { visibility: hidden }
-        &-x { visibility: hidden }
-    }
-
-    &-thumb {
-        @include shadow-1dp;
-        width: 20px;
-        height: 20px;
-        border: 0;
-        background-color: $toggle-thumb-color;
-    }
-
-    &--checked {
-        .react-toggle{
-            &-track { background-color: $toggle-track-active-color }
-
-            &-thumb {
-                background-color: $toggle-thumb-active-color;
-                left: 22px;
-            }
-        }
-
-        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
-
-    }
-
-    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
-}
-
-.radio-button {
-    padding: 8px 0;
-
-    &__input {
-        border: 2px solid $border-color;
-
-        &.checked {
-            border-color: $icon-button-active-color;
-            background: $icon-button-active-color;
-            padding: 3px;
-            background-clip: content-box;
-        }
-    }
-}
-
-.compose-form__sensitive-button .checkbox {
-    border: 2px solid $border-color;
-    border-radius: 2px;
-
-    &.active {
-        border-color: $primary-color;
-        background: $primary-color;
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/emoji-picker.scss b/app/javascript/styles/material-v2-light/theme/emoji-picker.scss
deleted file mode 100644
index 70e22752d..000000000
--- a/app/javascript/styles/material-v2-light/theme/emoji-picker.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-.emoji-picker-dropdown {
-    &__menu {
-        @include shadow-8dp;
-        background: $menu-background-color;
-        border-radius: $menu-radius;
-    }
-
-    &__modifiers__menu {
-        @include shadow-8dp;
-        background: $menu-background-color;
-        border-radius: $menu-radius;
-
-        button {
-            padding: 8px;
-        }
-    }
-}
-
-.emoji-mart {
-    width: 388px !important;
-    font-size: 14px;
-    color: $menu-text-color;
-
-    &-bar {
-        border: 0 solid $border-color;
-
-        &:first-child {
-            background: $menu-background-color;
-        }
-    }
-
-    &-anchors {
-        color: $icon-button-color;
-        padding: 0;
-    }
-
-    &-anchor {
-        padding: 10px 4px;
-
-        &-selected {
-            color: $icon-button-active-color;
-        }
-
-        &-bar {
-            background-color: $tab-indicator-active-color;
-        }
-
-        &:hover {
-            color: $icon-button-hover-color;
-        }
-    }
-
-    &-search {
-        background: $menu-background-color;
-
-        input {
-            outline: none;
-            padding: 8px;
-            background: $search-bar-color;
-            color: $ui-text-color;
-            border: 0;
-            border-radius: $search-bar-radius;
-
-            &:focus {
-                @include shadow-2dp;
-                background: $search-bar-focus-color;
-            }
-        }
-    }
-
-    &-scroll {
-        padding: 0 8px 8px;
-        background: $menu-background-color;
-    }
-
-    &-category-label span {
-        padding: 4px 6px;
-        background: $menu-background-color;
-    }
-
-    &-emoji:hover::before {
-        background-color: $icon-background-hover-color;
-    }
-
-    &-no-results { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/icons.scss b/app/javascript/styles/material-v2-light/theme/icons.scss
deleted file mode 100644
index 1367647ec..000000000
--- a/app/javascript/styles/material-v2-light/theme/icons.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.fa.fa-users.column-link,
-.fa.fa-globe.column-link,
-.fa.fa-address-book.column-link,
-.fa.fa-bullhorn.column-link,
-.fa.fa-envelope.column-link,
-.fa.fa-bookmark.column-link,
-.fa.fa-star.column-link,
-.fa.fa-list-ul.column-link {
-    &__icon.fa-fw { color: $icon-color }
-}
-
-
-.fa { vertical-align: sub }  // adjust material icon font baseline to other font
-
-.fa.fa-times,
-.fa.fa-eraser,
-.fa.fa-plus { vertical-align: middle }  // adjustment exception
-
-.fa.fa-check { vertical-align: initial }
-
-.fa.fa-lock { text-transform: none }
-
-.fa-fw { width: 16px }
-
-// icon in tab settings
-.fa.fa-chevron-left.column-back-button__icon.fa-fw,
-.text-btn.column-header__setting-btn .fa.fa-eraser {
-    font-size: 20px;
-    margin-right: 16px;
-}
-
-.icon-with-badge__badge {
-    background: $badge-color;
-    border: none;
-    padding: 2px 6px;
-    border-radius: 12px;
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/media.scss b/app/javascript/styles/material-v2-light/theme/media.scss
deleted file mode 100644
index 28de8db85..000000000
--- a/app/javascript/styles/material-v2-light/theme/media.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.media-gallery { border-radius: $card-radius }
-
-.media-modal__close {
-    align-content: center;
-
-    &.icon-button {
-        background: transparent;
-        color: $media-icon-color;
-        text-align: center !important;
-        font-size: 24px !important;
-        width: 48px !important;
-        height: 48px !important;
-        border: 12px;
-
-        &:hover {
-            background: $media-icon-background-hover-color;
-            color: $media-icon-hover-color;
-        }
-
-        .fa-fw { width: 24px }
-    }
-}
-
-.media-modal {
-    &__nav {
-        background: $media-icon-background-color;
-        color: $media-icon-color;
-        height: 48px;
-        width: 48px;
-        margin: auto 16px;
-        padding: 8px;
-        border-radius: 50%;
-    
-        .fa { width: 32px }
-    }
-
-    &__button {
-        background-color: $media-page-indicator-color;
-
-        &--active { background-color: $media-page-indicator-active-color }
-    }
-}
-
-.video-player {
-    &__controls {
-        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
-        padding: 0 12px;
-    }
-
-    &__seek {
-        &::before {
-            background: rgba(255,255,255,.2);
-            border-radius: 0;
-        }
-
-        &__buffer {
-            background: rgba(255,255,255,.4);
-            border-radius: 0;
-        }
-
-        &__progress {
-            background: $primary-color;
-            border-radius: 0;
-        }
-
-        &__handle {
-            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-            background-color: $primary-color;
-            box-shadow: none;
-        }
-    }
-
-    &__volume {
-        &::before {
-            background: rgba(255,255,255,.4);
-            border-radius: 0;
-        }
-
-        &__current {
-            background: $primary-color;
-            border-radius: 0;
-        }
-
-        &__handle {
-            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-            background-color: $primary-color;
-            box-shadow: none;
-        }
-    }
-
-    &__time-current { margin-left: 68px }
-
-    &__buttons button { font-size: 20px }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/mobile.scss b/app/javascript/styles/material-v2-light/theme/mobile.scss
deleted file mode 100644
index ed6467ebc..000000000
--- a/app/javascript/styles/material-v2-light/theme/mobile.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.tabs-bar {
-    background: $top-bar-color;
-
-    &__link {
-        padding: 16px 16px 12px 16px;
-        color: $top-bar-icon-color;
-        border-bottom: 4px solid transparent;
-
-        &.active {
-            border-bottom: 4px solid $tab-indicator-active-color;
-            color: $tab-indicator-active-color;
-        }
-
-        .fa { font-size: 20px }
-
-        span {
-            margin-left: 8px;
-            vertical-align: text-bottom;
-        }
-    }
-
-    &__wrapper {
-        @include shadow-4dp;
-        background: transparent;
-    }
-}
-
-
-#tabs-bar__portal { overflow-y: hidden }
-
-.floating-action-button {
-    @include shadow-6dp;
-    background: $floating-action-button-color;
-    color: $floating-action-button-icon-color;
-    font-size: 24px;
-
-    &:hover { background: $floating-action-button-hover-color }
-
-    &:active,
-    &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
-    .column { margin: 0 !important }
-    .search__input { padding: 16px 46px }
-
-    .search__icon .fa {
-        top: 16px;
-        left: 16px;
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/modal.scss b/app/javascript/styles/material-v2-light/theme/modal.scss
deleted file mode 100644
index 287dcf804..000000000
--- a/app/javascript/styles/material-v2-light/theme/modal.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.confirmation-modal {
-    background: $card-background-color;
-    color: $ui-text-color;
-    border-radius: $dialog-radius;
-    width: 280px;
-
-    &__container {
-        text-align: left;
-        padding: 24px;
-    }
-
-    &__action-bar {
-        justify-content: flex-end;
-        background: $card-background-color;
-        padding: 8px;
-    }
-}
-
-.actions-modal {
-    background: $card-background-color;
-    border-radius: $card-radius;
-
-    ul li:not(:empty) a {
-        color: $ui-text-color;
-        font-size: 16px;
-
-        &:hover {
-            background: $card-background-hover-color;
-            color: $ui-text-color;
-        }
-    }
-
-    .dropdown-menu__separator { border-bottom-color: $border-color }
-
-    .status {
-        background: $card-background-color;
-        border-bottom-color: $border-color;
-        padding-top: 12px;
-        padding-bottom: 12px;
-
-        &__avatar {
-            left: 12px;
-            top: 12px;
-        }
-    }
-}
-
-.report-modal {
-    background: $card-background-color;
-    color: $ui-text-color;
-    border-radius: $card-radius;
-
-    &__target {
-        padding: 24px;
-        text-align: left;
-        font-weight: bold;
-    }
-
-    &__container {
-        border-top: none;
-    }
-
-    &__comment {
-        border-right: none;
-
-        .setting-text-label { color: $ui-text-color }
-    }
-}
-
-.embed-modal .embed-modal__container {
-    padding: 0 24px 24px 24px;
-
-    .hint {
-        margin-bottom: 16px;
-        color: $secondary-text-color;
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/statuses.scss b/app/javascript/styles/material-v2-light/theme/statuses.scss
deleted file mode 100644
index 65b5fcc41..000000000
--- a/app/javascript/styles/material-v2-light/theme/statuses.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.status {
-    padding: 12px 12px 12px 70px;
-    border-bottom: 1px solid $border-color;
-
-    &__expand { width: 70px }
-
-    &__info {
-        font-size: $name-font-size;
-        padding-right: 4px;
-    }
-
-    &__relative-time { color: $info-text-color }
-
-    &__display-name {
-        color: $secondary-text-color;
-
-        strong { color: $primary-text-color }
-    }
-
-    &__avatar {
-        left: 12px;
-        top: 12px;
-    }
-
-    &__content {
-        font-size: $status-font-size;
-        padding-top: 4px;
-        color: $primary-text-color;
-
-        a {
-            color: $link-text-color;
-
-            &.unhandled-link { color: $link-text-color }
-        }
-
-        .status__content__spoiler-link {
-            background: transparent;
-
-            &:hover { background: $text-button-hover-color }
-
-            &:focus { background: $text-button-focus-color }
-        }
-
-        &__spoiler-link {
-            border: 0;
-            color: $text-button-color;
-        }
-
-        &__read-more-button {
-            font-size: 14px;
-            color: $text-button-color;
-            border-radius: $button-radius;
-            padding: 4px 6px;
-
-            &:hover {
-                background: $text-button-hover-color;
-                text-decoration: none;
-            }
-
-            &:focus { background: $text-button-focus-color }
-        }
-    }
-
-    &__action-bar {
-        &__counter__label {
-            font-size: 14px;
-            color: $info-text-color;
-        }
-    }
-
-    &__prepend {
-        color: $secondary-text-color;
-        margin-left: 64px;
-
-        .status__display-name strong { color: $secondary-text-color }
-    }
-
-    &.status-direct:not(.read) {
-        background: transparent;
-        border-bottom-color: $border-color;
-    }
-}
-
-.status-card {
-    color: $icon-color;
-    border-color: $border-color;
-    outline: none;
-
-    &__image {
-        background: transparent;
-
-        &>.fa {
-            font-size: 26px;
-        }
-    }
-
-    &__title {
-        color: $primary-text-color;
-        margin-bottom: 6px;
-    }
-
-    &__description { color: $secondary-text-color }
-
-    &__actions {
-        &>div {
-            background: $media-icon-background-color;
-            border-radius: $button-radius;
-        }
-
-        button,
-        a {
-            color: $media-icon-color;
-            font-size: 20px;
-        }
-
-        a { bottom: auto }
-    }
-
-    &.compact {
-        border-color: $border-color;
-        outline: none;
-        background: transparent;
-        
-        .status-card {
-            &__content { padding: 12px }
-            &__image { flex: 0 0 64px }
-        }
-
-        &:hover { background-color: transparent !important }
-    }
-
-    &:hover { background-color: $card-background-color }
-}
-
-// Detailed status in mobile
-.status.light {
-    .status {
-        &__display-name { color: $primary-text-color }
-        &__relative-time { color: $info-text-color }
-        &__content { color: $primary-text-color }
-    }
-
-    .display-name { color: $secondary-text-color }
-    .display-name strong { color: $primary-text-color }
-}
-
-.detailed-status {
-    background: $card-background-color;
-    padding: 16px;
-
-    &__display-name {
-        color: $secondary-text-color;
-
-        strong { color: $primary-text-color }
-    }
-
-    &__meta {
-        margin-top: 16px;
-        color: $info-text-color;
-    }
-
-    &__action-bar {
-        background: $card-background-color;
-        border-top: none;
-        border-bottom: 1px solid $border-color;
-        padding: 12px 0;
-    }
-
-    &__button {
-        .icon-button { font-size: 20px !important }
-    }
-}
-
-// search user trends
-.display-name {
-    &__html { color: $primary-text-color !important }
-    &__account { color: $secondary-text-color }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/theme.scss b/app/javascript/styles/material-v2-light/theme/theme.scss
deleted file mode 100644
index 5b7daddf6..000000000
--- a/app/javascript/styles/material-v2-light/theme/theme.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@charset "UTF-8";
-
-
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/theme/variables.scss b/app/javascript/styles/material-v2-light/theme/variables.scss
deleted file mode 100644
index 0b948881b..000000000
--- a/app/javascript/styles/material-v2-light/theme/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-
-
-.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/plus.scss b/app/javascript/styles/plus.scss
index a78e9e34e..9cbccaa5f 100644
--- a/app/javascript/styles/plus.scss
+++ b/app/javascript/styles/plus.scss
@@ -1,3 +1,2 @@
-@charset "UTF-8";
-
-@import 'plus/loader'
\ No newline at end of file
+@import 'application';
+@import 'plus/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/black.scss b/app/javascript/styles/plus/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/plus/color/black.scss
@@ -0,0 +1,135 @@
+@charset "UTF-8";
+
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 0.8);
+$control-border-color: $icon-color;
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/mastodon-dark.scss b/app/javascript/styles/plus/color/mastodon-dark.scss
index de22c451b..c3c168316 100644
--- a/app/javascript/styles/plus/color/mastodon-dark.scss
+++ b/app/javascript/styles/plus/color/mastodon-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
 $menu-text-color: #282c37;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #191b22;
@@ -34,6 +35,7 @@ $list-background-color: #282c37;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.7);
 $text-button-focus-color: transparentize($text-button-color, 0.6);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/plus/color/mastodon-light.scss b/app/javascript/styles/plus/color/mastodon-light.scss
index 134b18e10..54d894fec 100644
--- a/app/javascript/styles/plus/color/mastodon-light.scss
+++ b/app/javascript/styles/plus/color/mastodon-light.scss
@@ -19,6 +19,7 @@ $link-text-color: #217aba;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #eff3f5;
@@ -33,6 +34,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: lighten($text-button-color, 36%);
 $text-button-focus-color: lighten($text-button-color, 30%);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/plus/color/plus-classic.scss b/app/javascript/styles/plus/color/plus-classic.scss
index 3e817cde4..60c8370a2 100644
--- a/app/javascript/styles/plus/color/plus-classic.scss
+++ b/app/javascript/styles/plus/color/plus-classic.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
diff --git a/app/javascript/styles/plus/color/v1-dark.scss b/app/javascript/styles/plus/color/v1-dark.scss
index 652ffe37e..77cef824f 100644
--- a/app/javascript/styles/plus/color/v1-dark.scss
+++ b/app/javascript/styles/plus/color/v1-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #303030;
@@ -34,16 +35,20 @@ $list-background-color: #424242;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
-$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
 $contained-chip-selected-color: lighten($contained-chip-color, 12%);
 $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -76,7 +81,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/plus/color/v1-light.scss b/app/javascript/styles/plus/color/v1-light.scss
index 4000eead0..64f8d5842 100644
--- a/app/javascript/styles/plus/color/v1-light.scss
+++ b/app/javascript/styles/plus/color/v1-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $inverted-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #fafafa;
@@ -34,6 +35,7 @@ $list-background-color: #ffffff;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/plus/color/v2-dark.scss b/app/javascript/styles/plus/color/v2-dark.scss
index c990d6b1e..8c575bce5 100644
--- a/app/javascript/styles/plus/color/v2-dark.scss
+++ b/app/javascript/styles/plus/color/v2-dark.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #121212;
@@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
 $list-background-hover-color: lighten($list-background-color, 6%);
 $list-background-active-color: lighten($list-background-color, 10%);
 $list-background-inactive-color: lighten($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: darken($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
 $outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
 $outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -77,7 +82,7 @@ $outlined-button-active-color: lighten($primary-color, 30%);
 $text-button-color: $primary-color;
 $text-button-hover-color: transparentize($text-button-color, 0.8);
 $text-button-focus-color: transparentize($text-button-color, 0.7);
-$floating-action-button-color: $secondary-color;
+$floating-action-button-color: $primary-color;
 $floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
 $floating-action-button-active-color: lighten($floating-action-button-color, 10%);
 $floating-action-button-icon-color: #ffffff;
diff --git a/app/javascript/styles/plus/color/v2-light.scss b/app/javascript/styles/plus/color/v2-light.scss
index 6fd1dea9e..20336e96d 100644
--- a/app/javascript/styles/plus/color/v2-light.scss
+++ b/app/javascript/styles/plus/color/v2-light.scss
@@ -20,6 +20,7 @@ $link-text-color: #4285f4;
 $menu-text-color: $ui-text-color;
 $top-bar-text-color: $ui-text-color;
 $search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
 
 // Background-color
 $background-color: #ffffff;
@@ -34,6 +35,7 @@ $list-background-color: $background-color;
 $list-background-hover-color: darken($list-background-color, 6%);
 $list-background-active-color: darken($list-background-color, 10%);
 $list-background-inactive-color: darken($list-background-color, 10%);
+$text-field-background-color: $card-background-color;
 $verified-background-color: lighten($verified-color, 20%);
 
 // Chip color
@@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
 $outlined-chip-hover-color: darken($outlined-chip-color, 6%);
 $outlined-chip-selected-color: darken($outlined-chip-color, 12%);
 
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
 // Badge color
 $badge-color: $primary-color;
 //$badge-color: $secondary-color;
@@ -80,7 +85,7 @@ $text-button-focus-color: transparentize($text-button-color, 0.7);
 $floating-action-button-color: #ffffff;
 $floating-action-button-hover-color: darken($floating-action-button-color, 6%);
 $floating-action-button-active-color: darken($floating-action-button-color, 10%);
-$floating-action-button-icon-color: $secondary-color;
+$floating-action-button-icon-color: $primary-color;
 
 // Toggle color
 $toggle-thumb-color: #ffffff;
diff --git a/app/javascript/styles/plus/layout/material-v2.scss b/app/javascript/styles/plus/layout/material-v2.scss
index 6c81dc3e4..853d82b15 100644
--- a/app/javascript/styles/plus/layout/material-v2.scss
+++ b/app/javascript/styles/plus/layout/material-v2.scss
@@ -52,11 +52,6 @@ $avater-radius: 50%;  // Rounded cropping
 
     &:hover { background: $outlined-chip-hover-color !important }
 }
-.relationship-tag,
-.account-role {
-    background: $outlined-chip-color !important;
-    border: 1px solid $border-color !important;
-}
 
 
 // Button shadow
diff --git a/app/javascript/styles/plus/loader.scss b/app/javascript/styles/plus/loader.scss
index ab6ad96b5..e962aa921 100644
--- a/app/javascript/styles/plus/loader.scss
+++ b/app/javascript/styles/plus/loader.scss
@@ -1,12 +1,7 @@
-@charset "UTF-8";
-
-
-@import '../application';
-
 @import 'theme/theme';
 @import 'theme/material-icons';
 
 // Plugins
-@import 'plugins/cards';
-@import 'plugins/dense';
-@import 'plugins/plus';
\ No newline at end of file
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/dense.scss b/app/javascript/styles/plus/plugins/dense.scss
index 42417124b..b3ba40812 100644
--- a/app/javascript/styles/plus/plugins/dense.scss
+++ b/app/javascript/styles/plus/plugins/dense.scss
@@ -60,4 +60,6 @@
     &__action-bar { padding: 10px 0 }
 }
 
+.reply-indicator { padding: 8px }
+
 .button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/account.scss b/app/javascript/styles/plus/theme/account.scss
index 44d68d1e9..34a8a1816 100644
--- a/app/javascript/styles/plus/theme/account.scss
+++ b/app/javascript/styles/plus/theme/account.scss
@@ -112,6 +112,8 @@
                 }
             }
         }
+
+        &__content { color: $secondary-text-color }
     }
 
     &__section-headline {
@@ -142,4 +144,10 @@
     border-radius: 17px;
     color: $ui-text-color;
     background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/columns.scss b/app/javascript/styles/plus/theme/columns.scss
index a6892adf2..54effffd3 100644
--- a/app/javascript/styles/plus/theme/columns.scss
+++ b/app/javascript/styles/plus/theme/columns.scss
@@ -198,15 +198,10 @@
 
 .setting-text {
     color: $primary-text-color;
-    background: $search-bar-color;
+    background: $text-field-background-color;
     border-radius: $bar-radius;
 
     &::placeholder { color: $tips-text-color }
-
-    &:focus {
-        @include shadow-1dp;
-        background: $search-bar-focus-color;
-    }
 }
 
 .empty-column-indicator {
@@ -375,7 +370,18 @@
         &__unread { background: $badge-color }
     }
 
-    &__pagination { color: $ui-text-color }
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
 }
 
 .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
@@ -458,45 +464,11 @@
 
 .relationship-tag {
     color: $ui-text-color;
-    background-color: $contained-chip-color;
+    background-color: $relationship-tag-color;
     font-size: 12px;
     border-radius: 17px;
     padding: 4px 8px;
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
-
-.focusable {
-    &:focus { background: $card-background-color }
-}
-
-// single column mode
-@media screen and (min-width: 415px) {
-    .tabs-bar {
-        margin-bottom: 0;
-
-        &__wrapper { padding-top: 0 }
-    }
-
-    .columns-area__panels__main {
-        @include shadow-1dp;
-        padding: 0;
-        margin: 12px 12px 0;
-    }
-}
-
-@media screen and (min-width: 631px) {
-    .tabs-bar__link {
-        &:hover {
-            background: $tab-indicator-background-hover-color;
-            border-bottom-color: $tab-background-color;
-        }
-
-        &:active,
-        &:focus {
-            background: $tab-indicator-background-focus-color;
-            border-bottom-color: $tab-background-color;
-        }
-    }
-}
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/components.scss b/app/javascript/styles/plus/theme/components.scss
index 4f844229c..ae5bfe158 100644
--- a/app/javascript/styles/plus/theme/components.scss
+++ b/app/javascript/styles/plus/theme/components.scss
@@ -173,8 +173,9 @@
 .compose-form {
     .autosuggest-textarea {
         &__textarea {
-            background: $card-background-color;
+            background: $text-field-background-color;
             color: $ui-text-color;
+            border-radius: $card-radius;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -230,7 +231,7 @@
         &__poll-wrapper {
             border-top: 1px solid $border-color;
 
-            ul { padding: 12px }
+            ul { padding: 16px 12px 16px 0 }
 
             select {
                 color: $ui-text-color;
@@ -272,17 +273,31 @@
         width: 20px;
         height: 20px;
         flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
     }
 
     &__text input[type=text] {
         color: $ui-text-color;
-        background: $background-color;
+        background: $text-field-background-color;
         border: 1px solid $border-color;
         padding: 8px 12px;
     
         &:focus { border-color: $border-active-color }
     }
 
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
     &__chart {
         border-radius: 0;
         background: $poll-bar-color;
@@ -368,7 +383,8 @@
 }
 
 .reply-indicator {
-    @include shadow-1dp;
+    box-shadow: none;
+    border: 1px solid $border-color;
     border-radius: $card-radius;
     background: $card-background-color;
     padding: 16px;
@@ -391,4 +407,128 @@
     &__list a { color: $secondary-text-color }
 
     &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/material-icons.scss b/app/javascript/styles/plus/theme/material-icons.scss
index 51631eab5..747856253 100644
--- a/app/javascript/styles/plus/theme/material-icons.scss
+++ b/app/javascript/styles/plus/theme/material-icons.scss
@@ -151,6 +151,9 @@
 .no-reduce-motion button.icon-button i.fa-retweet {
     height: 18px;
     width: 18px;
-    transition: background-position .3s steps(1);
+    transition: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
-}
\ No newline at end of file
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/media.scss b/app/javascript/styles/plus/theme/media.scss
index 28de8db85..9d0203828 100644
--- a/app/javascript/styles/plus/theme/media.scss
+++ b/app/javascript/styles/plus/theme/media.scss
@@ -5,7 +5,11 @@
 @import 'mixins';
 
 
-.media-gallery { border-radius: $card-radius }
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
 
 .media-modal__close {
     align-content: center;
diff --git a/app/javascript/styles/plus/theme/mobile.scss b/app/javascript/styles/plus/theme/mobile.scss
deleted file mode 100644
index ed6467ebc..000000000
--- a/app/javascript/styles/plus/theme/mobile.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@charset "UTF-8";
-@import 'base_config';
-@import '../custom_config';
-@import '../custom_color', '../custom_layout';
-@import 'mixins';
-
-
-.tabs-bar {
-    background: $top-bar-color;
-
-    &__link {
-        padding: 16px 16px 12px 16px;
-        color: $top-bar-icon-color;
-        border-bottom: 4px solid transparent;
-
-        &.active {
-            border-bottom: 4px solid $tab-indicator-active-color;
-            color: $tab-indicator-active-color;
-        }
-
-        .fa { font-size: 20px }
-
-        span {
-            margin-left: 8px;
-            vertical-align: text-bottom;
-        }
-    }
-
-    &__wrapper {
-        @include shadow-4dp;
-        background: transparent;
-    }
-}
-
-
-#tabs-bar__portal { overflow-y: hidden }
-
-.floating-action-button {
-    @include shadow-6dp;
-    background: $floating-action-button-color;
-    color: $floating-action-button-icon-color;
-    font-size: 24px;
-
-    &:hover { background: $floating-action-button-hover-color }
-
-    &:active,
-    &:focus { background: $floating-action-button-active-color }
-}
-
-.columns-area--mobile {
-    .column { margin: 0 !important }
-    .search__input { padding: 16px 46px }
-
-    .search__icon .fa {
-        top: 16px;
-        left: 16px;
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/modal.scss b/app/javascript/styles/plus/theme/modal.scss
index 287dcf804..2748c8723 100644
--- a/app/javascript/styles/plus/theme/modal.scss
+++ b/app/javascript/styles/plus/theme/modal.scss
@@ -9,7 +9,7 @@
     background: $card-background-color;
     color: $ui-text-color;
     border-radius: $dialog-radius;
-    width: 280px;
+    width: 300px;
 
     &__container {
         text-align: left;
@@ -21,6 +21,24 @@
         background: $card-background-color;
         padding: 8px;
     }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
 }
 
 .actions-modal {
diff --git a/app/javascript/styles/plus/theme/responsive.scss b/app/javascript/styles/plus/theme/responsive.scss
new file mode 100644
index 000000000..9ae304041
--- /dev/null
+++ b/app/javascript/styles/plus/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/statuses.scss b/app/javascript/styles/plus/theme/statuses.scss
index 65b5fcc41..eedf77c2a 100644
--- a/app/javascript/styles/plus/theme/statuses.scss
+++ b/app/javascript/styles/plus/theme/statuses.scss
@@ -180,6 +180,6 @@
 
 // search user trends
 .display-name {
-    &__html { color: $primary-text-color !important }
+    &__html { color: $primary-text-color }
     &__account { color: $secondary-text-color }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/theme.scss b/app/javascript/styles/plus/theme/theme.scss
index 5b7daddf6..f92276549 100644
--- a/app/javascript/styles/plus/theme/theme.scss
+++ b/app/javascript/styles/plus/theme/theme.scss
@@ -1,4 +1,4 @@
 @charset "UTF-8";
 
 
-@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
\ No newline at end of file
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d4b77535e..8ec4c7a52 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1244,12 +1244,13 @@ en:
     mastodon-light: Mastodon (Light)
     mastodon-auto: Mastodon (Auto)
     # additional theme
-    material-v1-dark: Material v1 (Dark)
-    material-v1-light: Material v1 (Light)
-    material-v2-dark: Material v2 (Dark)
-    material-v2-light: Material v2 (Light)
+    material-black: Material (Black)
+    material-dark: Material (Dark)
+    material-light: Material (Light)
+    material-auto: Material (Auto)
     mastodon-material-dark: Mastodon Material (Dark)
     mastodon-material-light: Mastodon Material (Light)
+    mastodon-material-auto: Mastodon Material (Auto)
     plus: Plus
   time:
     formats:
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index 699902665..7fd351f03 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -1226,12 +1226,13 @@ ja:
     mastodon-light: Mastodon (ライト)
     mastodon-auto: Mastodon (自動)
     # 追加テーマ
-    material-v1-dark: Material v1 (ダーク)
-    material-v1-light: Material v1 (ライト)
-    material-v2-dark: Material v2 (ダーク)
-    material-v2-light: Material v2 (ライト)
+    material-black: Material (黒)
+    material-dark: Material (ダーク)
+    material-light: Material (ライト)
+    material-auto: Material (自動)
     mastodon-material-dark: Mastodon Material (ダーク)
     mastodon-material-light: Mastodon Material (ライト)
+    mastodon-material-auto: Mastodon Material (自動)
     plus: Plus
   time:
     formats:
diff --git a/config/themes.yml b/config/themes.yml
index 5f6a22a6e..ff3d800aa 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -4,10 +4,11 @@ mastodon-light: styles/mastodon-light.scss
 mastodon-auto: styles/mastodon-auto.scss
 
 # 追加テーマ
-material-v1-dark: styles/material-v1-dark.scss
-material-v1-light: styles/material-v1-light.scss
-material-v2-dark: styles/material-v2-dark.scss
-material-v2-light: styles/material-v2-light.scss
+material-black: styles/material-black.scss
+material-dark: styles/material-dark.scss
+material-light: styles/material-light.scss
+material-auto: styles/material-auto.scss
 mastodon-material-dark: styles/mastodon-material-dark.scss
 mastodon-material-light: styles/mastodon-material-light.scss
+mastodon-material-auto: styles/mastodon-material-auto.scss
 plus: styles/plus.scss