diff --git a/app/javascript/styles/mastodon-material-dark/color/black.scss b/app/javascript/styles/mastodon-material-dark/color/black.scss
index b4b29f827..520330822 100644
--- a/app/javascript/styles/mastodon-material-dark/color/black.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/black.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
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 c765e861c..a098ed86f 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #42485a;
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 6c2fef5a6..18daaf44c 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
@@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
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 ef5900e57..11e682c37 100644
--- a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
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 caa0d1b51..7be381ac8 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
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 f7a1e66ff..9fe2a1b7e 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
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 5fef3a753..9fc57f153 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
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 cc2efe2f8..e960d60a8 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
index 5e3d505eb..a6d861c1a 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
+++ b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
@@ -51,6 +51,20 @@
     }
 
     &__content { padding-top: 2px }
+
+    &__action-bar-button {
+        margin: 0 4px;
+
+        &.icon-button { padding: 4px }
+    }
+
+    &__action-bar-dropdown {
+        width: 28px !important;
+        height: 28px !important;
+        margin: 0 4px;
+
+        .icon-button { padding: 4px }
+    }
 }
 
 .detailed-status {
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
index 86a5f3e1e..e356e937b 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
+++ b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
@@ -12,6 +12,10 @@
     .fa { vertical-align: bottom }
 }
 
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
 // favorite icon
 .star-icon.active,
 .star-icon.icon-button.active.activate,
diff --git a/app/javascript/styles/mastodon-material-dark/theme/basics.scss b/app/javascript/styles/mastodon-material-dark/theme/basics.scss
index 32ba6dc8c..bb8f68bf0 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/basics.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/basics.scss
@@ -4,7 +4,8 @@
 @import '../custom_color', '../custom_layout';
 
 
-body { background: $bg-color }
+body,
+body.embed { background: $bg-color }
 
 .focusable:focus { background: transparent }
 
diff --git a/app/javascript/styles/mastodon-material-dark/theme/button.scss b/app/javascript/styles/mastodon-material-dark/theme/button.scss
index 6ec2ddd88..d432bfa1d 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/button.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/button.scss
@@ -45,6 +45,11 @@
         }
     }
 
+    &__counter {
+        width: 16px;
+        margin-left: 8px;
+    }
+
     &:hover {
         @include material-transition;
         color: $icon-button-hover-color;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/columns.scss b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
index dd47e9029..6128321f1 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
@@ -223,6 +223,7 @@
     color: $secondary-text-color;
     background: $card-bg-color;
     font-size: 16px;
+    contain: initial;  // padding fix
 }
 
 .conversation {
@@ -502,4 +503,9 @@
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-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 85c59e9ae..215d9d94d 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/components.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/components.scss
@@ -4,7 +4,13 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
-.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+.modal-root {
+    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+    &__overlay { background-color: rgba(0,0,0,.32) !important }
+
+    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+}
 
 .drawer {
     &__header {
@@ -364,6 +370,8 @@
             border-radius: 2px;
             padding: 8px 16px;
         }
+
+        &__text { line-height: 34px }
     }
 
     &__chart {
diff --git a/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
index 8aacc7e80..91663fb93 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
@@ -60,6 +60,7 @@
             &:focus {
                 @include shadow-2dp;
                 background: $search-bar-focus-color;
+                color: $search-bar-text-color;
             }
         }
     }
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 b416d3a02..c20a3da9c 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
@@ -48,6 +48,7 @@
     &.fa-bookmark,
     &.fa-ellipsis-h,
     &.fa-bell,
+    &.fa-bell-o,
     &.fa-eraser,
     &.fa-users,
     &.fa-file-text,
@@ -76,7 +77,8 @@
     &.fa-quote-right,
     &.fa-upload,
     &.fa-comments,
-    &.fa-angle-right {
+    &.fa-angle-right,
+    &.fa-thumb-tack {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -116,6 +118,7 @@
     &.fa-bookmark::before { content: "bookmark" }
     &.fa-ellipsis-h::before { content: "more_horiz" }
     &.fa-bell::before { content: "notifications" }
+    &.fa-bell-o::before { content: "notifications" }
     &.fa-eraser::before { content: "clear_all" }
     &.fa-users::before { content: "people" }
     &.fa-file-text::before { content: "web" }
@@ -145,6 +148,7 @@
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
     &.fa-angle-right::before { content: "chevron_right" }
+    &.fa-thumb-tack::before { content: "push_pin" }
 }
 
 // bookmark icon
@@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
     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="40px" width="20px"><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>');
 }
 
-button.icon-button i.fa-retweet:hover {
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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>') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
     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="40px" width="20px"><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-hover-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>');
 }
 
 button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover {
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
@@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // status scope
-.status__visibility-icon .fa {
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
     font-size: 16px;
     vertical-align: text-bottom;
 }
\ 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 f231eb835..b8ac12414 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/media.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/media.scss
@@ -11,29 +11,6 @@
     &__item { border-radius: $media-radius }
 }
 
-.media-modal__close {
-    &.icon-button {
-        background: transparent;
-        color: $media-icon-color;
-        font-size: 24px !important;
-        width: 24px !important;
-        height: 24px !important;
-        padding: 8px;
-        box-sizing: content-box;
-        line-height: normal !important;
-
-        &:hover {
-            background: $media-icon-bg-hover-color;
-            color: $media-icon-hover-color;
-        }
-
-        .fa-fw {
-            width: 24px;
-            height: 24px;
-        }
-    }
-}
-
 .media-modal {
     &__nav {
         background: $media-icon-bg-color;
@@ -53,11 +30,47 @@
         &--active { background-color: $media-page-indicator-active-color }
     }
 
+    &__close {
+        &.icon-button {
+            background: transparent;
+            color: $media-icon-color;
+            font-size: 24px !important;
+            width: 24px !important;
+            height: 24px !important;
+            padding: 8px;
+            box-sizing: content-box;
+            line-height: normal !important;
+    
+            &:hover {
+                background: $media-icon-bg-hover-color;
+                color: $media-icon-hover-color;
+            }
+    
+            .fa-fw {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
     &__meta {
         bottom: 24px;
 
         a { color: $media-icon-color }
     }
+
+    &__overlay {
+        .picture-in-picture__footer .icon-button {
+            color: $media-icon-color;
+
+            &:active,
+            &:focus,
+            &:hover {
+                color: $media-icon-hover-color;
+                background-color: transparent;
+            }
+        }
+    }
 }
 
 .video-player {
diff --git a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
index e6e5c4021..7e4374014 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
@@ -84,12 +84,19 @@
     }
 
     &__action-bar-button {
-        margin-right: 6px;
+        margin-right: 4px;
 
         &.icon-button {
             @include icon-button;
             padding: 8px;
             box-sizing: content-box;
+
+            &--with-counter {
+                margin-right: 4px;
+                width: auto !important;
+
+                &:hover { background: transparent }
+            }
         }
     }
 
@@ -253,6 +260,11 @@ a.status-card {
             box-sizing: content-box;
         }
     }
+
+    .button.logo-button {
+        margin-bottom: 16px;
+        line-height: 36px;
+    }
 }
 
 // search user trends
diff --git a/app/javascript/styles/mastodon-material-dark/theme/theme.scss b/app/javascript/styles/mastodon-material-dark/theme/theme.scss
index 0980ed92a..367893682 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/theme.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/theme.scss
@@ -1,5 +1,5 @@
 /*
-* Mastodon Material 0.2.0
+* Mastodon Material 0.2.1
 * Author: Rintan, Genbu Project
 * Copyright (C) 2020 Rintan, Genbu Project
 */
diff --git a/app/javascript/styles/mastodon-material-light/color/black.scss b/app/javascript/styles/mastodon-material-light/color/black.scss
index b4b29f827..520330822 100644
--- a/app/javascript/styles/mastodon-material-light/color/black.scss
+++ b/app/javascript/styles/mastodon-material-light/color/black.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
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 c765e861c..a098ed86f 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #42485a;
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 6c2fef5a6..18daaf44c 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
@@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
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 ef5900e57..11e682c37 100644
--- a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
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 caa0d1b51..7be381ac8 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
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 f7a1e66ff..9fe2a1b7e 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
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 5fef3a753..9fc57f153 100644
--- a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
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 cc2efe2f8..e960d60a8 100644
--- a/app/javascript/styles/mastodon-material-light/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/mastodon-material-light/plugins/dense.scss b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
index 5e3d505eb..a6d861c1a 100644
--- a/app/javascript/styles/mastodon-material-light/plugins/dense.scss
+++ b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
@@ -51,6 +51,20 @@
     }
 
     &__content { padding-top: 2px }
+
+    &__action-bar-button {
+        margin: 0 4px;
+
+        &.icon-button { padding: 4px }
+    }
+
+    &__action-bar-dropdown {
+        width: 28px !important;
+        height: 28px !important;
+        margin: 0 4px;
+
+        .icon-button { padding: 4px }
+    }
 }
 
 .detailed-status {
diff --git a/app/javascript/styles/mastodon-material-light/plugins/plus.scss b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
index 86a5f3e1e..e356e937b 100644
--- a/app/javascript/styles/mastodon-material-light/plugins/plus.scss
+++ b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
@@ -12,6 +12,10 @@
     .fa { vertical-align: bottom }
 }
 
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
 // favorite icon
 .star-icon.active,
 .star-icon.icon-button.active.activate,
diff --git a/app/javascript/styles/mastodon-material-light/theme/basics.scss b/app/javascript/styles/mastodon-material-light/theme/basics.scss
index 32ba6dc8c..bb8f68bf0 100644
--- a/app/javascript/styles/mastodon-material-light/theme/basics.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/basics.scss
@@ -4,7 +4,8 @@
 @import '../custom_color', '../custom_layout';
 
 
-body { background: $bg-color }
+body,
+body.embed { background: $bg-color }
 
 .focusable:focus { background: transparent }
 
diff --git a/app/javascript/styles/mastodon-material-light/theme/button.scss b/app/javascript/styles/mastodon-material-light/theme/button.scss
index 6ec2ddd88..d432bfa1d 100644
--- a/app/javascript/styles/mastodon-material-light/theme/button.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/button.scss
@@ -45,6 +45,11 @@
         }
     }
 
+    &__counter {
+        width: 16px;
+        margin-left: 8px;
+    }
+
     &:hover {
         @include material-transition;
         color: $icon-button-hover-color;
diff --git a/app/javascript/styles/mastodon-material-light/theme/columns.scss b/app/javascript/styles/mastodon-material-light/theme/columns.scss
index dd47e9029..6128321f1 100644
--- a/app/javascript/styles/mastodon-material-light/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/columns.scss
@@ -223,6 +223,7 @@
     color: $secondary-text-color;
     background: $card-bg-color;
     font-size: 16px;
+    contain: initial;  // padding fix
 }
 
 .conversation {
@@ -502,4 +503,9 @@
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-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 85c59e9ae..215d9d94d 100644
--- a/app/javascript/styles/mastodon-material-light/theme/components.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/components.scss
@@ -4,7 +4,13 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
-.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+.modal-root {
+    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+    &__overlay { background-color: rgba(0,0,0,.32) !important }
+
+    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+}
 
 .drawer {
     &__header {
@@ -364,6 +370,8 @@
             border-radius: 2px;
             padding: 8px 16px;
         }
+
+        &__text { line-height: 34px }
     }
 
     &__chart {
diff --git a/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
index 8aacc7e80..91663fb93 100644
--- a/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
@@ -60,6 +60,7 @@
             &:focus {
                 @include shadow-2dp;
                 background: $search-bar-focus-color;
+                color: $search-bar-text-color;
             }
         }
     }
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 b416d3a02..c20a3da9c 100644
--- a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
@@ -48,6 +48,7 @@
     &.fa-bookmark,
     &.fa-ellipsis-h,
     &.fa-bell,
+    &.fa-bell-o,
     &.fa-eraser,
     &.fa-users,
     &.fa-file-text,
@@ -76,7 +77,8 @@
     &.fa-quote-right,
     &.fa-upload,
     &.fa-comments,
-    &.fa-angle-right {
+    &.fa-angle-right,
+    &.fa-thumb-tack {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -116,6 +118,7 @@
     &.fa-bookmark::before { content: "bookmark" }
     &.fa-ellipsis-h::before { content: "more_horiz" }
     &.fa-bell::before { content: "notifications" }
+    &.fa-bell-o::before { content: "notifications" }
     &.fa-eraser::before { content: "clear_all" }
     &.fa-users::before { content: "people" }
     &.fa-file-text::before { content: "web" }
@@ -145,6 +148,7 @@
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
     &.fa-angle-right::before { content: "chevron_right" }
+    &.fa-thumb-tack::before { content: "push_pin" }
 }
 
 // bookmark icon
@@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
     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="40px" width="20px"><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>');
 }
 
-button.icon-button i.fa-retweet:hover {
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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>') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
     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="40px" width="20px"><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-hover-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>');
 }
 
 button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover {
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
@@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // status scope
-.status__visibility-icon .fa {
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
     font-size: 16px;
     vertical-align: text-bottom;
 }
\ 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 f231eb835..b8ac12414 100644
--- a/app/javascript/styles/mastodon-material-light/theme/media.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/media.scss
@@ -11,29 +11,6 @@
     &__item { border-radius: $media-radius }
 }
 
-.media-modal__close {
-    &.icon-button {
-        background: transparent;
-        color: $media-icon-color;
-        font-size: 24px !important;
-        width: 24px !important;
-        height: 24px !important;
-        padding: 8px;
-        box-sizing: content-box;
-        line-height: normal !important;
-
-        &:hover {
-            background: $media-icon-bg-hover-color;
-            color: $media-icon-hover-color;
-        }
-
-        .fa-fw {
-            width: 24px;
-            height: 24px;
-        }
-    }
-}
-
 .media-modal {
     &__nav {
         background: $media-icon-bg-color;
@@ -53,11 +30,47 @@
         &--active { background-color: $media-page-indicator-active-color }
     }
 
+    &__close {
+        &.icon-button {
+            background: transparent;
+            color: $media-icon-color;
+            font-size: 24px !important;
+            width: 24px !important;
+            height: 24px !important;
+            padding: 8px;
+            box-sizing: content-box;
+            line-height: normal !important;
+    
+            &:hover {
+                background: $media-icon-bg-hover-color;
+                color: $media-icon-hover-color;
+            }
+    
+            .fa-fw {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
     &__meta {
         bottom: 24px;
 
         a { color: $media-icon-color }
     }
+
+    &__overlay {
+        .picture-in-picture__footer .icon-button {
+            color: $media-icon-color;
+
+            &:active,
+            &:focus,
+            &:hover {
+                color: $media-icon-hover-color;
+                background-color: transparent;
+            }
+        }
+    }
 }
 
 .video-player {
diff --git a/app/javascript/styles/mastodon-material-light/theme/statuses.scss b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
index e6e5c4021..7e4374014 100644
--- a/app/javascript/styles/mastodon-material-light/theme/statuses.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
@@ -84,12 +84,19 @@
     }
 
     &__action-bar-button {
-        margin-right: 6px;
+        margin-right: 4px;
 
         &.icon-button {
             @include icon-button;
             padding: 8px;
             box-sizing: content-box;
+
+            &--with-counter {
+                margin-right: 4px;
+                width: auto !important;
+
+                &:hover { background: transparent }
+            }
         }
     }
 
@@ -253,6 +260,11 @@ a.status-card {
             box-sizing: content-box;
         }
     }
+
+    .button.logo-button {
+        margin-bottom: 16px;
+        line-height: 36px;
+    }
 }
 
 // search user trends
diff --git a/app/javascript/styles/mastodon-material-light/theme/theme.scss b/app/javascript/styles/mastodon-material-light/theme/theme.scss
index 0980ed92a..367893682 100644
--- a/app/javascript/styles/mastodon-material-light/theme/theme.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/theme.scss
@@ -1,5 +1,5 @@
 /*
-* Mastodon Material 0.2.0
+* Mastodon Material 0.2.1
 * Author: Rintan, Genbu Project
 * Copyright (C) 2020 Rintan, Genbu Project
 */
diff --git a/app/javascript/styles/material-black/color/black.scss b/app/javascript/styles/material-black/color/black.scss
index b4b29f827..520330822 100644
--- a/app/javascript/styles/material-black/color/black.scss
+++ b/app/javascript/styles/material-black/color/black.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
diff --git a/app/javascript/styles/material-black/color/mastodon-dark.scss b/app/javascript/styles/material-black/color/mastodon-dark.scss
index c765e861c..a098ed86f 100644
--- a/app/javascript/styles/material-black/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-black/color/mastodon-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #42485a;
diff --git a/app/javascript/styles/material-black/color/mastodon-light.scss b/app/javascript/styles/material-black/color/mastodon-light.scss
index 6c2fef5a6..18daaf44c 100644
--- a/app/javascript/styles/material-black/color/mastodon-light.scss
+++ b/app/javascript/styles/material-black/color/mastodon-light.scss
@@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-black/color/plus-classic.scss b/app/javascript/styles/material-black/color/plus-classic.scss
index ef5900e57..11e682c37 100644
--- a/app/javascript/styles/material-black/color/plus-classic.scss
+++ b/app/javascript/styles/material-black/color/plus-classic.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-black/color/v1-dark.scss b/app/javascript/styles/material-black/color/v1-dark.scss
index caa0d1b51..7be381ac8 100644
--- a/app/javascript/styles/material-black/color/v1-dark.scss
+++ b/app/javascript/styles/material-black/color/v1-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
diff --git a/app/javascript/styles/material-black/color/v1-light.scss b/app/javascript/styles/material-black/color/v1-light.scss
index f7a1e66ff..9fe2a1b7e 100644
--- a/app/javascript/styles/material-black/color/v1-light.scss
+++ b/app/javascript/styles/material-black/color/v1-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-black/color/v2-dark.scss b/app/javascript/styles/material-black/color/v2-dark.scss
index 5fef3a753..9fc57f153 100644
--- a/app/javascript/styles/material-black/color/v2-dark.scss
+++ b/app/javascript/styles/material-black/color/v2-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
diff --git a/app/javascript/styles/material-black/color/v2-light.scss b/app/javascript/styles/material-black/color/v2-light.scss
index cc2efe2f8..e960d60a8 100644
--- a/app/javascript/styles/material-black/color/v2-light.scss
+++ b/app/javascript/styles/material-black/color/v2-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-black/plugins/dense.scss b/app/javascript/styles/material-black/plugins/dense.scss
index 5e3d505eb..a6d861c1a 100644
--- a/app/javascript/styles/material-black/plugins/dense.scss
+++ b/app/javascript/styles/material-black/plugins/dense.scss
@@ -51,6 +51,20 @@
     }
 
     &__content { padding-top: 2px }
+
+    &__action-bar-button {
+        margin: 0 4px;
+
+        &.icon-button { padding: 4px }
+    }
+
+    &__action-bar-dropdown {
+        width: 28px !important;
+        height: 28px !important;
+        margin: 0 4px;
+
+        .icon-button { padding: 4px }
+    }
 }
 
 .detailed-status {
diff --git a/app/javascript/styles/material-black/plugins/plus.scss b/app/javascript/styles/material-black/plugins/plus.scss
index 86a5f3e1e..e356e937b 100644
--- a/app/javascript/styles/material-black/plugins/plus.scss
+++ b/app/javascript/styles/material-black/plugins/plus.scss
@@ -12,6 +12,10 @@
     .fa { vertical-align: bottom }
 }
 
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
 // favorite icon
 .star-icon.active,
 .star-icon.icon-button.active.activate,
diff --git a/app/javascript/styles/material-black/theme/basics.scss b/app/javascript/styles/material-black/theme/basics.scss
index 32ba6dc8c..bb8f68bf0 100644
--- a/app/javascript/styles/material-black/theme/basics.scss
+++ b/app/javascript/styles/material-black/theme/basics.scss
@@ -4,7 +4,8 @@
 @import '../custom_color', '../custom_layout';
 
 
-body { background: $bg-color }
+body,
+body.embed { background: $bg-color }
 
 .focusable:focus { background: transparent }
 
diff --git a/app/javascript/styles/material-black/theme/button.scss b/app/javascript/styles/material-black/theme/button.scss
index 6ec2ddd88..d432bfa1d 100644
--- a/app/javascript/styles/material-black/theme/button.scss
+++ b/app/javascript/styles/material-black/theme/button.scss
@@ -45,6 +45,11 @@
         }
     }
 
+    &__counter {
+        width: 16px;
+        margin-left: 8px;
+    }
+
     &:hover {
         @include material-transition;
         color: $icon-button-hover-color;
diff --git a/app/javascript/styles/material-black/theme/columns.scss b/app/javascript/styles/material-black/theme/columns.scss
index dd47e9029..6128321f1 100644
--- a/app/javascript/styles/material-black/theme/columns.scss
+++ b/app/javascript/styles/material-black/theme/columns.scss
@@ -223,6 +223,7 @@
     color: $secondary-text-color;
     background: $card-bg-color;
     font-size: 16px;
+    contain: initial;  // padding fix
 }
 
 .conversation {
@@ -502,4 +503,9 @@
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/components.scss b/app/javascript/styles/material-black/theme/components.scss
index 85c59e9ae..215d9d94d 100644
--- a/app/javascript/styles/material-black/theme/components.scss
+++ b/app/javascript/styles/material-black/theme/components.scss
@@ -4,7 +4,13 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
-.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+.modal-root {
+    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+    &__overlay { background-color: rgba(0,0,0,.32) !important }
+
+    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+}
 
 .drawer {
     &__header {
@@ -364,6 +370,8 @@
             border-radius: 2px;
             padding: 8px 16px;
         }
+
+        &__text { line-height: 34px }
     }
 
     &__chart {
diff --git a/app/javascript/styles/material-black/theme/emoji-picker.scss b/app/javascript/styles/material-black/theme/emoji-picker.scss
index 8aacc7e80..91663fb93 100644
--- a/app/javascript/styles/material-black/theme/emoji-picker.scss
+++ b/app/javascript/styles/material-black/theme/emoji-picker.scss
@@ -60,6 +60,7 @@
             &:focus {
                 @include shadow-2dp;
                 background: $search-bar-focus-color;
+                color: $search-bar-text-color;
             }
         }
     }
diff --git a/app/javascript/styles/material-black/theme/material-icons.scss b/app/javascript/styles/material-black/theme/material-icons.scss
index b416d3a02..c20a3da9c 100644
--- a/app/javascript/styles/material-black/theme/material-icons.scss
+++ b/app/javascript/styles/material-black/theme/material-icons.scss
@@ -48,6 +48,7 @@
     &.fa-bookmark,
     &.fa-ellipsis-h,
     &.fa-bell,
+    &.fa-bell-o,
     &.fa-eraser,
     &.fa-users,
     &.fa-file-text,
@@ -76,7 +77,8 @@
     &.fa-quote-right,
     &.fa-upload,
     &.fa-comments,
-    &.fa-angle-right {
+    &.fa-angle-right,
+    &.fa-thumb-tack {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -116,6 +118,7 @@
     &.fa-bookmark::before { content: "bookmark" }
     &.fa-ellipsis-h::before { content: "more_horiz" }
     &.fa-bell::before { content: "notifications" }
+    &.fa-bell-o::before { content: "notifications" }
     &.fa-eraser::before { content: "clear_all" }
     &.fa-users::before { content: "people" }
     &.fa-file-text::before { content: "web" }
@@ -145,6 +148,7 @@
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
     &.fa-angle-right::before { content: "chevron_right" }
+    &.fa-thumb-tack::before { content: "push_pin" }
 }
 
 // bookmark icon
@@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
     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="40px" width="20px"><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>');
 }
 
-button.icon-button i.fa-retweet:hover {
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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>') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
     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="40px" width="20px"><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-hover-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>');
 }
 
 button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover {
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
@@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // status scope
-.status__visibility-icon .fa {
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
     font-size: 16px;
     vertical-align: text-bottom;
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/media.scss b/app/javascript/styles/material-black/theme/media.scss
index f231eb835..b8ac12414 100644
--- a/app/javascript/styles/material-black/theme/media.scss
+++ b/app/javascript/styles/material-black/theme/media.scss
@@ -11,29 +11,6 @@
     &__item { border-radius: $media-radius }
 }
 
-.media-modal__close {
-    &.icon-button {
-        background: transparent;
-        color: $media-icon-color;
-        font-size: 24px !important;
-        width: 24px !important;
-        height: 24px !important;
-        padding: 8px;
-        box-sizing: content-box;
-        line-height: normal !important;
-
-        &:hover {
-            background: $media-icon-bg-hover-color;
-            color: $media-icon-hover-color;
-        }
-
-        .fa-fw {
-            width: 24px;
-            height: 24px;
-        }
-    }
-}
-
 .media-modal {
     &__nav {
         background: $media-icon-bg-color;
@@ -53,11 +30,47 @@
         &--active { background-color: $media-page-indicator-active-color }
     }
 
+    &__close {
+        &.icon-button {
+            background: transparent;
+            color: $media-icon-color;
+            font-size: 24px !important;
+            width: 24px !important;
+            height: 24px !important;
+            padding: 8px;
+            box-sizing: content-box;
+            line-height: normal !important;
+    
+            &:hover {
+                background: $media-icon-bg-hover-color;
+                color: $media-icon-hover-color;
+            }
+    
+            .fa-fw {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
     &__meta {
         bottom: 24px;
 
         a { color: $media-icon-color }
     }
+
+    &__overlay {
+        .picture-in-picture__footer .icon-button {
+            color: $media-icon-color;
+
+            &:active,
+            &:focus,
+            &:hover {
+                color: $media-icon-hover-color;
+                background-color: transparent;
+            }
+        }
+    }
 }
 
 .video-player {
diff --git a/app/javascript/styles/material-black/theme/statuses.scss b/app/javascript/styles/material-black/theme/statuses.scss
index e6e5c4021..7e4374014 100644
--- a/app/javascript/styles/material-black/theme/statuses.scss
+++ b/app/javascript/styles/material-black/theme/statuses.scss
@@ -84,12 +84,19 @@
     }
 
     &__action-bar-button {
-        margin-right: 6px;
+        margin-right: 4px;
 
         &.icon-button {
             @include icon-button;
             padding: 8px;
             box-sizing: content-box;
+
+            &--with-counter {
+                margin-right: 4px;
+                width: auto !important;
+
+                &:hover { background: transparent }
+            }
         }
     }
 
@@ -253,6 +260,11 @@ a.status-card {
             box-sizing: content-box;
         }
     }
+
+    .button.logo-button {
+        margin-bottom: 16px;
+        line-height: 36px;
+    }
 }
 
 // search user trends
diff --git a/app/javascript/styles/material-black/theme/theme.scss b/app/javascript/styles/material-black/theme/theme.scss
index 0980ed92a..367893682 100644
--- a/app/javascript/styles/material-black/theme/theme.scss
+++ b/app/javascript/styles/material-black/theme/theme.scss
@@ -1,5 +1,5 @@
 /*
-* Mastodon Material 0.2.0
+* Mastodon Material 0.2.1
 * Author: Rintan, Genbu Project
 * Copyright (C) 2020 Rintan, Genbu Project
 */
diff --git a/app/javascript/styles/material-dark/color/black.scss b/app/javascript/styles/material-dark/color/black.scss
index b4b29f827..520330822 100644
--- a/app/javascript/styles/material-dark/color/black.scss
+++ b/app/javascript/styles/material-dark/color/black.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
diff --git a/app/javascript/styles/material-dark/color/mastodon-dark.scss b/app/javascript/styles/material-dark/color/mastodon-dark.scss
index c765e861c..a098ed86f 100644
--- a/app/javascript/styles/material-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-dark/color/mastodon-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #42485a;
diff --git a/app/javascript/styles/material-dark/color/mastodon-light.scss b/app/javascript/styles/material-dark/color/mastodon-light.scss
index 6c2fef5a6..18daaf44c 100644
--- a/app/javascript/styles/material-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/material-dark/color/mastodon-light.scss
@@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-dark/color/plus-classic.scss b/app/javascript/styles/material-dark/color/plus-classic.scss
index ef5900e57..11e682c37 100644
--- a/app/javascript/styles/material-dark/color/plus-classic.scss
+++ b/app/javascript/styles/material-dark/color/plus-classic.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-dark/color/v1-dark.scss b/app/javascript/styles/material-dark/color/v1-dark.scss
index caa0d1b51..7be381ac8 100644
--- a/app/javascript/styles/material-dark/color/v1-dark.scss
+++ b/app/javascript/styles/material-dark/color/v1-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
diff --git a/app/javascript/styles/material-dark/color/v1-light.scss b/app/javascript/styles/material-dark/color/v1-light.scss
index f7a1e66ff..9fe2a1b7e 100644
--- a/app/javascript/styles/material-dark/color/v1-light.scss
+++ b/app/javascript/styles/material-dark/color/v1-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-dark/color/v2-dark.scss b/app/javascript/styles/material-dark/color/v2-dark.scss
index 5fef3a753..9fc57f153 100644
--- a/app/javascript/styles/material-dark/color/v2-dark.scss
+++ b/app/javascript/styles/material-dark/color/v2-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
diff --git a/app/javascript/styles/material-dark/color/v2-light.scss b/app/javascript/styles/material-dark/color/v2-light.scss
index cc2efe2f8..e960d60a8 100644
--- a/app/javascript/styles/material-dark/color/v2-light.scss
+++ b/app/javascript/styles/material-dark/color/v2-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-dark/plugins/dense.scss b/app/javascript/styles/material-dark/plugins/dense.scss
index 5e3d505eb..a6d861c1a 100644
--- a/app/javascript/styles/material-dark/plugins/dense.scss
+++ b/app/javascript/styles/material-dark/plugins/dense.scss
@@ -51,6 +51,20 @@
     }
 
     &__content { padding-top: 2px }
+
+    &__action-bar-button {
+        margin: 0 4px;
+
+        &.icon-button { padding: 4px }
+    }
+
+    &__action-bar-dropdown {
+        width: 28px !important;
+        height: 28px !important;
+        margin: 0 4px;
+
+        .icon-button { padding: 4px }
+    }
 }
 
 .detailed-status {
diff --git a/app/javascript/styles/material-dark/plugins/plus.scss b/app/javascript/styles/material-dark/plugins/plus.scss
index 86a5f3e1e..e356e937b 100644
--- a/app/javascript/styles/material-dark/plugins/plus.scss
+++ b/app/javascript/styles/material-dark/plugins/plus.scss
@@ -12,6 +12,10 @@
     .fa { vertical-align: bottom }
 }
 
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
 // favorite icon
 .star-icon.active,
 .star-icon.icon-button.active.activate,
diff --git a/app/javascript/styles/material-dark/theme/basics.scss b/app/javascript/styles/material-dark/theme/basics.scss
index 32ba6dc8c..bb8f68bf0 100644
--- a/app/javascript/styles/material-dark/theme/basics.scss
+++ b/app/javascript/styles/material-dark/theme/basics.scss
@@ -4,7 +4,8 @@
 @import '../custom_color', '../custom_layout';
 
 
-body { background: $bg-color }
+body,
+body.embed { background: $bg-color }
 
 .focusable:focus { background: transparent }
 
diff --git a/app/javascript/styles/material-dark/theme/button.scss b/app/javascript/styles/material-dark/theme/button.scss
index 6ec2ddd88..d432bfa1d 100644
--- a/app/javascript/styles/material-dark/theme/button.scss
+++ b/app/javascript/styles/material-dark/theme/button.scss
@@ -45,6 +45,11 @@
         }
     }
 
+    &__counter {
+        width: 16px;
+        margin-left: 8px;
+    }
+
     &:hover {
         @include material-transition;
         color: $icon-button-hover-color;
diff --git a/app/javascript/styles/material-dark/theme/columns.scss b/app/javascript/styles/material-dark/theme/columns.scss
index dd47e9029..6128321f1 100644
--- a/app/javascript/styles/material-dark/theme/columns.scss
+++ b/app/javascript/styles/material-dark/theme/columns.scss
@@ -223,6 +223,7 @@
     color: $secondary-text-color;
     background: $card-bg-color;
     font-size: 16px;
+    contain: initial;  // padding fix
 }
 
 .conversation {
@@ -502,4 +503,9 @@
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/components.scss b/app/javascript/styles/material-dark/theme/components.scss
index 85c59e9ae..215d9d94d 100644
--- a/app/javascript/styles/material-dark/theme/components.scss
+++ b/app/javascript/styles/material-dark/theme/components.scss
@@ -4,7 +4,13 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
-.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+.modal-root {
+    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+    &__overlay { background-color: rgba(0,0,0,.32) !important }
+
+    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+}
 
 .drawer {
     &__header {
@@ -364,6 +370,8 @@
             border-radius: 2px;
             padding: 8px 16px;
         }
+
+        &__text { line-height: 34px }
     }
 
     &__chart {
diff --git a/app/javascript/styles/material-dark/theme/emoji-picker.scss b/app/javascript/styles/material-dark/theme/emoji-picker.scss
index 8aacc7e80..91663fb93 100644
--- a/app/javascript/styles/material-dark/theme/emoji-picker.scss
+++ b/app/javascript/styles/material-dark/theme/emoji-picker.scss
@@ -60,6 +60,7 @@
             &:focus {
                 @include shadow-2dp;
                 background: $search-bar-focus-color;
+                color: $search-bar-text-color;
             }
         }
     }
diff --git a/app/javascript/styles/material-dark/theme/material-icons.scss b/app/javascript/styles/material-dark/theme/material-icons.scss
index b416d3a02..c20a3da9c 100644
--- a/app/javascript/styles/material-dark/theme/material-icons.scss
+++ b/app/javascript/styles/material-dark/theme/material-icons.scss
@@ -48,6 +48,7 @@
     &.fa-bookmark,
     &.fa-ellipsis-h,
     &.fa-bell,
+    &.fa-bell-o,
     &.fa-eraser,
     &.fa-users,
     &.fa-file-text,
@@ -76,7 +77,8 @@
     &.fa-quote-right,
     &.fa-upload,
     &.fa-comments,
-    &.fa-angle-right {
+    &.fa-angle-right,
+    &.fa-thumb-tack {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -116,6 +118,7 @@
     &.fa-bookmark::before { content: "bookmark" }
     &.fa-ellipsis-h::before { content: "more_horiz" }
     &.fa-bell::before { content: "notifications" }
+    &.fa-bell-o::before { content: "notifications" }
     &.fa-eraser::before { content: "clear_all" }
     &.fa-users::before { content: "people" }
     &.fa-file-text::before { content: "web" }
@@ -145,6 +148,7 @@
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
     &.fa-angle-right::before { content: "chevron_right" }
+    &.fa-thumb-tack::before { content: "push_pin" }
 }
 
 // bookmark icon
@@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
     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="40px" width="20px"><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>');
 }
 
-button.icon-button i.fa-retweet:hover {
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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>') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
     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="40px" width="20px"><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-hover-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>');
 }
 
 button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover {
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
@@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // status scope
-.status__visibility-icon .fa {
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
     font-size: 16px;
     vertical-align: text-bottom;
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/media.scss b/app/javascript/styles/material-dark/theme/media.scss
index f231eb835..b8ac12414 100644
--- a/app/javascript/styles/material-dark/theme/media.scss
+++ b/app/javascript/styles/material-dark/theme/media.scss
@@ -11,29 +11,6 @@
     &__item { border-radius: $media-radius }
 }
 
-.media-modal__close {
-    &.icon-button {
-        background: transparent;
-        color: $media-icon-color;
-        font-size: 24px !important;
-        width: 24px !important;
-        height: 24px !important;
-        padding: 8px;
-        box-sizing: content-box;
-        line-height: normal !important;
-
-        &:hover {
-            background: $media-icon-bg-hover-color;
-            color: $media-icon-hover-color;
-        }
-
-        .fa-fw {
-            width: 24px;
-            height: 24px;
-        }
-    }
-}
-
 .media-modal {
     &__nav {
         background: $media-icon-bg-color;
@@ -53,11 +30,47 @@
         &--active { background-color: $media-page-indicator-active-color }
     }
 
+    &__close {
+        &.icon-button {
+            background: transparent;
+            color: $media-icon-color;
+            font-size: 24px !important;
+            width: 24px !important;
+            height: 24px !important;
+            padding: 8px;
+            box-sizing: content-box;
+            line-height: normal !important;
+    
+            &:hover {
+                background: $media-icon-bg-hover-color;
+                color: $media-icon-hover-color;
+            }
+    
+            .fa-fw {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
     &__meta {
         bottom: 24px;
 
         a { color: $media-icon-color }
     }
+
+    &__overlay {
+        .picture-in-picture__footer .icon-button {
+            color: $media-icon-color;
+
+            &:active,
+            &:focus,
+            &:hover {
+                color: $media-icon-hover-color;
+                background-color: transparent;
+            }
+        }
+    }
 }
 
 .video-player {
diff --git a/app/javascript/styles/material-dark/theme/statuses.scss b/app/javascript/styles/material-dark/theme/statuses.scss
index e6e5c4021..7e4374014 100644
--- a/app/javascript/styles/material-dark/theme/statuses.scss
+++ b/app/javascript/styles/material-dark/theme/statuses.scss
@@ -84,12 +84,19 @@
     }
 
     &__action-bar-button {
-        margin-right: 6px;
+        margin-right: 4px;
 
         &.icon-button {
             @include icon-button;
             padding: 8px;
             box-sizing: content-box;
+
+            &--with-counter {
+                margin-right: 4px;
+                width: auto !important;
+
+                &:hover { background: transparent }
+            }
         }
     }
 
@@ -253,6 +260,11 @@ a.status-card {
             box-sizing: content-box;
         }
     }
+
+    .button.logo-button {
+        margin-bottom: 16px;
+        line-height: 36px;
+    }
 }
 
 // search user trends
diff --git a/app/javascript/styles/material-dark/theme/theme.scss b/app/javascript/styles/material-dark/theme/theme.scss
index 0980ed92a..367893682 100644
--- a/app/javascript/styles/material-dark/theme/theme.scss
+++ b/app/javascript/styles/material-dark/theme/theme.scss
@@ -1,5 +1,5 @@
 /*
-* Mastodon Material 0.2.0
+* Mastodon Material 0.2.1
 * Author: Rintan, Genbu Project
 * Copyright (C) 2020 Rintan, Genbu Project
 */
diff --git a/app/javascript/styles/material-light/color/black.scss b/app/javascript/styles/material-light/color/black.scss
index b4b29f827..520330822 100644
--- a/app/javascript/styles/material-light/color/black.scss
+++ b/app/javascript/styles/material-light/color/black.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
diff --git a/app/javascript/styles/material-light/color/mastodon-dark.scss b/app/javascript/styles/material-light/color/mastodon-dark.scss
index c765e861c..a098ed86f 100644
--- a/app/javascript/styles/material-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-light/color/mastodon-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #42485a;
diff --git a/app/javascript/styles/material-light/color/mastodon-light.scss b/app/javascript/styles/material-light/color/mastodon-light.scss
index 6c2fef5a6..18daaf44c 100644
--- a/app/javascript/styles/material-light/color/mastodon-light.scss
+++ b/app/javascript/styles/material-light/color/mastodon-light.scss
@@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-light/color/plus-classic.scss b/app/javascript/styles/material-light/color/plus-classic.scss
index ef5900e57..11e682c37 100644
--- a/app/javascript/styles/material-light/color/plus-classic.scss
+++ b/app/javascript/styles/material-light/color/plus-classic.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-light/color/v1-dark.scss b/app/javascript/styles/material-light/color/v1-dark.scss
index caa0d1b51..7be381ac8 100644
--- a/app/javascript/styles/material-light/color/v1-dark.scss
+++ b/app/javascript/styles/material-light/color/v1-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
diff --git a/app/javascript/styles/material-light/color/v1-light.scss b/app/javascript/styles/material-light/color/v1-light.scss
index f7a1e66ff..9fe2a1b7e 100644
--- a/app/javascript/styles/material-light/color/v1-light.scss
+++ b/app/javascript/styles/material-light/color/v1-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-light/color/v2-dark.scss b/app/javascript/styles/material-light/color/v2-dark.scss
index 5fef3a753..9fc57f153 100644
--- a/app/javascript/styles/material-light/color/v2-dark.scss
+++ b/app/javascript/styles/material-light/color/v2-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
diff --git a/app/javascript/styles/material-light/color/v2-light.scss b/app/javascript/styles/material-light/color/v2-light.scss
index cc2efe2f8..e960d60a8 100644
--- a/app/javascript/styles/material-light/color/v2-light.scss
+++ b/app/javascript/styles/material-light/color/v2-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/material-light/plugins/dense.scss b/app/javascript/styles/material-light/plugins/dense.scss
index 5e3d505eb..a6d861c1a 100644
--- a/app/javascript/styles/material-light/plugins/dense.scss
+++ b/app/javascript/styles/material-light/plugins/dense.scss
@@ -51,6 +51,20 @@
     }
 
     &__content { padding-top: 2px }
+
+    &__action-bar-button {
+        margin: 0 4px;
+
+        &.icon-button { padding: 4px }
+    }
+
+    &__action-bar-dropdown {
+        width: 28px !important;
+        height: 28px !important;
+        margin: 0 4px;
+
+        .icon-button { padding: 4px }
+    }
 }
 
 .detailed-status {
diff --git a/app/javascript/styles/material-light/plugins/plus.scss b/app/javascript/styles/material-light/plugins/plus.scss
index 86a5f3e1e..e356e937b 100644
--- a/app/javascript/styles/material-light/plugins/plus.scss
+++ b/app/javascript/styles/material-light/plugins/plus.scss
@@ -12,6 +12,10 @@
     .fa { vertical-align: bottom }
 }
 
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
 // favorite icon
 .star-icon.active,
 .star-icon.icon-button.active.activate,
diff --git a/app/javascript/styles/material-light/theme/basics.scss b/app/javascript/styles/material-light/theme/basics.scss
index 32ba6dc8c..bb8f68bf0 100644
--- a/app/javascript/styles/material-light/theme/basics.scss
+++ b/app/javascript/styles/material-light/theme/basics.scss
@@ -4,7 +4,8 @@
 @import '../custom_color', '../custom_layout';
 
 
-body { background: $bg-color }
+body,
+body.embed { background: $bg-color }
 
 .focusable:focus { background: transparent }
 
diff --git a/app/javascript/styles/material-light/theme/button.scss b/app/javascript/styles/material-light/theme/button.scss
index 6ec2ddd88..d432bfa1d 100644
--- a/app/javascript/styles/material-light/theme/button.scss
+++ b/app/javascript/styles/material-light/theme/button.scss
@@ -45,6 +45,11 @@
         }
     }
 
+    &__counter {
+        width: 16px;
+        margin-left: 8px;
+    }
+
     &:hover {
         @include material-transition;
         color: $icon-button-hover-color;
diff --git a/app/javascript/styles/material-light/theme/columns.scss b/app/javascript/styles/material-light/theme/columns.scss
index dd47e9029..6128321f1 100644
--- a/app/javascript/styles/material-light/theme/columns.scss
+++ b/app/javascript/styles/material-light/theme/columns.scss
@@ -223,6 +223,7 @@
     color: $secondary-text-color;
     background: $card-bg-color;
     font-size: 16px;
+    contain: initial;  // padding fix
 }
 
 .conversation {
@@ -502,4 +503,9 @@
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/components.scss b/app/javascript/styles/material-light/theme/components.scss
index 85c59e9ae..215d9d94d 100644
--- a/app/javascript/styles/material-light/theme/components.scss
+++ b/app/javascript/styles/material-light/theme/components.scss
@@ -4,7 +4,13 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
-.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+.modal-root {
+    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+    &__overlay { background-color: rgba(0,0,0,.32) !important }
+
+    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+}
 
 .drawer {
     &__header {
@@ -364,6 +370,8 @@
             border-radius: 2px;
             padding: 8px 16px;
         }
+
+        &__text { line-height: 34px }
     }
 
     &__chart {
diff --git a/app/javascript/styles/material-light/theme/emoji-picker.scss b/app/javascript/styles/material-light/theme/emoji-picker.scss
index 8aacc7e80..91663fb93 100644
--- a/app/javascript/styles/material-light/theme/emoji-picker.scss
+++ b/app/javascript/styles/material-light/theme/emoji-picker.scss
@@ -60,6 +60,7 @@
             &:focus {
                 @include shadow-2dp;
                 background: $search-bar-focus-color;
+                color: $search-bar-text-color;
             }
         }
     }
diff --git a/app/javascript/styles/material-light/theme/material-icons.scss b/app/javascript/styles/material-light/theme/material-icons.scss
index b416d3a02..c20a3da9c 100644
--- a/app/javascript/styles/material-light/theme/material-icons.scss
+++ b/app/javascript/styles/material-light/theme/material-icons.scss
@@ -48,6 +48,7 @@
     &.fa-bookmark,
     &.fa-ellipsis-h,
     &.fa-bell,
+    &.fa-bell-o,
     &.fa-eraser,
     &.fa-users,
     &.fa-file-text,
@@ -76,7 +77,8 @@
     &.fa-quote-right,
     &.fa-upload,
     &.fa-comments,
-    &.fa-angle-right {
+    &.fa-angle-right,
+    &.fa-thumb-tack {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -116,6 +118,7 @@
     &.fa-bookmark::before { content: "bookmark" }
     &.fa-ellipsis-h::before { content: "more_horiz" }
     &.fa-bell::before { content: "notifications" }
+    &.fa-bell-o::before { content: "notifications" }
     &.fa-eraser::before { content: "clear_all" }
     &.fa-users::before { content: "people" }
     &.fa-file-text::before { content: "web" }
@@ -145,6 +148,7 @@
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
     &.fa-angle-right::before { content: "chevron_right" }
+    &.fa-thumb-tack::before { content: "push_pin" }
 }
 
 // bookmark icon
@@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
     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="40px" width="20px"><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>');
 }
 
-button.icon-button i.fa-retweet:hover {
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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>') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
     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="40px" width="20px"><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-hover-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>');
 }
 
 button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover {
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
@@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // status scope
-.status__visibility-icon .fa {
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
     font-size: 16px;
     vertical-align: text-bottom;
 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/media.scss b/app/javascript/styles/material-light/theme/media.scss
index f231eb835..b8ac12414 100644
--- a/app/javascript/styles/material-light/theme/media.scss
+++ b/app/javascript/styles/material-light/theme/media.scss
@@ -11,29 +11,6 @@
     &__item { border-radius: $media-radius }
 }
 
-.media-modal__close {
-    &.icon-button {
-        background: transparent;
-        color: $media-icon-color;
-        font-size: 24px !important;
-        width: 24px !important;
-        height: 24px !important;
-        padding: 8px;
-        box-sizing: content-box;
-        line-height: normal !important;
-
-        &:hover {
-            background: $media-icon-bg-hover-color;
-            color: $media-icon-hover-color;
-        }
-
-        .fa-fw {
-            width: 24px;
-            height: 24px;
-        }
-    }
-}
-
 .media-modal {
     &__nav {
         background: $media-icon-bg-color;
@@ -53,11 +30,47 @@
         &--active { background-color: $media-page-indicator-active-color }
     }
 
+    &__close {
+        &.icon-button {
+            background: transparent;
+            color: $media-icon-color;
+            font-size: 24px !important;
+            width: 24px !important;
+            height: 24px !important;
+            padding: 8px;
+            box-sizing: content-box;
+            line-height: normal !important;
+    
+            &:hover {
+                background: $media-icon-bg-hover-color;
+                color: $media-icon-hover-color;
+            }
+    
+            .fa-fw {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
     &__meta {
         bottom: 24px;
 
         a { color: $media-icon-color }
     }
+
+    &__overlay {
+        .picture-in-picture__footer .icon-button {
+            color: $media-icon-color;
+
+            &:active,
+            &:focus,
+            &:hover {
+                color: $media-icon-hover-color;
+                background-color: transparent;
+            }
+        }
+    }
 }
 
 .video-player {
diff --git a/app/javascript/styles/material-light/theme/statuses.scss b/app/javascript/styles/material-light/theme/statuses.scss
index e6e5c4021..7e4374014 100644
--- a/app/javascript/styles/material-light/theme/statuses.scss
+++ b/app/javascript/styles/material-light/theme/statuses.scss
@@ -84,12 +84,19 @@
     }
 
     &__action-bar-button {
-        margin-right: 6px;
+        margin-right: 4px;
 
         &.icon-button {
             @include icon-button;
             padding: 8px;
             box-sizing: content-box;
+
+            &--with-counter {
+                margin-right: 4px;
+                width: auto !important;
+
+                &:hover { background: transparent }
+            }
         }
     }
 
@@ -253,6 +260,11 @@ a.status-card {
             box-sizing: content-box;
         }
     }
+
+    .button.logo-button {
+        margin-bottom: 16px;
+        line-height: 36px;
+    }
 }
 
 // search user trends
diff --git a/app/javascript/styles/material-light/theme/theme.scss b/app/javascript/styles/material-light/theme/theme.scss
index 0980ed92a..367893682 100644
--- a/app/javascript/styles/material-light/theme/theme.scss
+++ b/app/javascript/styles/material-light/theme/theme.scss
@@ -1,5 +1,5 @@
 /*
-* Mastodon Material 0.2.0
+* Mastodon Material 0.2.1
 * Author: Rintan, Genbu Project
 * Copyright (C) 2020 Rintan, Genbu Project
 */
diff --git a/app/javascript/styles/plus/color/black.scss b/app/javascript/styles/plus/color/black.scss
index b4b29f827..520330822 100644
--- a/app/javascript/styles/plus/color/black.scss
+++ b/app/javascript/styles/plus/color/black.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #1e1e1e;
diff --git a/app/javascript/styles/plus/color/mastodon-dark.scss b/app/javascript/styles/plus/color/mastodon-dark.scss
index c765e861c..a098ed86f 100644
--- a/app/javascript/styles/plus/color/mastodon-dark.scss
+++ b/app/javascript/styles/plus/color/mastodon-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #42485a;
diff --git a/app/javascript/styles/plus/color/mastodon-light.scss b/app/javascript/styles/plus/color/mastodon-light.scss
index 6c2fef5a6..18daaf44c 100644
--- a/app/javascript/styles/plus/color/mastodon-light.scss
+++ b/app/javascript/styles/plus/color/mastodon-light.scss
@@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/plus/color/plus-classic.scss b/app/javascript/styles/plus/color/plus-classic.scss
index ef5900e57..11e682c37 100644
--- a/app/javascript/styles/plus/color/plus-classic.scss
+++ b/app/javascript/styles/plus/color/plus-classic.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/plus/color/v1-dark.scss b/app/javascript/styles/plus/color/v1-dark.scss
index caa0d1b51..7be381ac8 100644
--- a/app/javascript/styles/plus/color/v1-dark.scss
+++ b/app/javascript/styles/plus/color/v1-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
diff --git a/app/javascript/styles/plus/color/v1-light.scss b/app/javascript/styles/plus/color/v1-light.scss
index f7a1e66ff..9fe2a1b7e 100644
--- a/app/javascript/styles/plus/color/v1-light.scss
+++ b/app/javascript/styles/plus/color/v1-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/plus/color/v2-dark.scss b/app/javascript/styles/plus/color/v2-dark.scss
index 5fef3a753..9fc57f153 100644
--- a/app/javascript/styles/plus/color/v2-dark.scss
+++ b/app/javascript/styles/plus/color/v2-dark.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
 $list-bg-inactive-color: lighten($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #2e2e2e;
diff --git a/app/javascript/styles/plus/color/v2-light.scss b/app/javascript/styles/plus/color/v2-light.scss
index cc2efe2f8..e960d60a8 100644
--- a/app/javascript/styles/plus/color/v2-light.scss
+++ b/app/javascript/styles/plus/color/v2-light.scss
@@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
 $list-bg-inactive-color: darken($list-bg-color, 10%);
 $text-field-bg-color: $card-bg-color;
 $verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
 
 // Chip color
 $contained-chip-color: #e0e0e0;
diff --git a/app/javascript/styles/plus/plugins/dense.scss b/app/javascript/styles/plus/plugins/dense.scss
index 5e3d505eb..a6d861c1a 100644
--- a/app/javascript/styles/plus/plugins/dense.scss
+++ b/app/javascript/styles/plus/plugins/dense.scss
@@ -51,6 +51,20 @@
     }
 
     &__content { padding-top: 2px }
+
+    &__action-bar-button {
+        margin: 0 4px;
+
+        &.icon-button { padding: 4px }
+    }
+
+    &__action-bar-dropdown {
+        width: 28px !important;
+        height: 28px !important;
+        margin: 0 4px;
+
+        .icon-button { padding: 4px }
+    }
 }
 
 .detailed-status {
diff --git a/app/javascript/styles/plus/plugins/plus.scss b/app/javascript/styles/plus/plugins/plus.scss
index 86a5f3e1e..e356e937b 100644
--- a/app/javascript/styles/plus/plugins/plus.scss
+++ b/app/javascript/styles/plus/plugins/plus.scss
@@ -12,6 +12,10 @@
     .fa { vertical-align: bottom }
 }
 
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
 // favorite icon
 .star-icon.active,
 .star-icon.icon-button.active.activate,
diff --git a/app/javascript/styles/plus/theme/basics.scss b/app/javascript/styles/plus/theme/basics.scss
index 32ba6dc8c..bb8f68bf0 100644
--- a/app/javascript/styles/plus/theme/basics.scss
+++ b/app/javascript/styles/plus/theme/basics.scss
@@ -4,7 +4,8 @@
 @import '../custom_color', '../custom_layout';
 
 
-body { background: $bg-color }
+body,
+body.embed { background: $bg-color }
 
 .focusable:focus { background: transparent }
 
diff --git a/app/javascript/styles/plus/theme/button.scss b/app/javascript/styles/plus/theme/button.scss
index 6ec2ddd88..d432bfa1d 100644
--- a/app/javascript/styles/plus/theme/button.scss
+++ b/app/javascript/styles/plus/theme/button.scss
@@ -45,6 +45,11 @@
         }
     }
 
+    &__counter {
+        width: 16px;
+        margin-left: 8px;
+    }
+
     &:hover {
         @include material-transition;
         color: $icon-button-hover-color;
diff --git a/app/javascript/styles/plus/theme/columns.scss b/app/javascript/styles/plus/theme/columns.scss
index dd47e9029..6128321f1 100644
--- a/app/javascript/styles/plus/theme/columns.scss
+++ b/app/javascript/styles/plus/theme/columns.scss
@@ -223,6 +223,7 @@
     color: $secondary-text-color;
     background: $card-bg-color;
     font-size: 16px;
+    contain: initial;  // padding fix
 }
 
 .conversation {
@@ -502,4 +503,9 @@
     opacity: 1;
 }
 
-.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-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 85c59e9ae..215d9d94d 100644
--- a/app/javascript/styles/plus/theme/components.scss
+++ b/app/javascript/styles/plus/theme/components.scss
@@ -4,7 +4,13 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
-.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+.modal-root {
+    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+    &__overlay { background-color: rgba(0,0,0,.32) !important }
+
+    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+}
 
 .drawer {
     &__header {
@@ -364,6 +370,8 @@
             border-radius: 2px;
             padding: 8px 16px;
         }
+
+        &__text { line-height: 34px }
     }
 
     &__chart {
diff --git a/app/javascript/styles/plus/theme/emoji-picker.scss b/app/javascript/styles/plus/theme/emoji-picker.scss
index 8aacc7e80..91663fb93 100644
--- a/app/javascript/styles/plus/theme/emoji-picker.scss
+++ b/app/javascript/styles/plus/theme/emoji-picker.scss
@@ -60,6 +60,7 @@
             &:focus {
                 @include shadow-2dp;
                 background: $search-bar-focus-color;
+                color: $search-bar-text-color;
             }
         }
     }
diff --git a/app/javascript/styles/plus/theme/material-icons.scss b/app/javascript/styles/plus/theme/material-icons.scss
index b416d3a02..c20a3da9c 100644
--- a/app/javascript/styles/plus/theme/material-icons.scss
+++ b/app/javascript/styles/plus/theme/material-icons.scss
@@ -48,6 +48,7 @@
     &.fa-bookmark,
     &.fa-ellipsis-h,
     &.fa-bell,
+    &.fa-bell-o,
     &.fa-eraser,
     &.fa-users,
     &.fa-file-text,
@@ -76,7 +77,8 @@
     &.fa-quote-right,
     &.fa-upload,
     &.fa-comments,
-    &.fa-angle-right {
+    &.fa-angle-right,
+    &.fa-thumb-tack {
         @include icon-font-style;
         line-height: 1;
         letter-spacing: normal;
@@ -116,6 +118,7 @@
     &.fa-bookmark::before { content: "bookmark" }
     &.fa-ellipsis-h::before { content: "more_horiz" }
     &.fa-bell::before { content: "notifications" }
+    &.fa-bell-o::before { content: "notifications" }
     &.fa-eraser::before { content: "clear_all" }
     &.fa-users::before { content: "people" }
     &.fa-file-text::before { content: "web" }
@@ -145,6 +148,7 @@
     &.fa-upload::before { content: "file_upload" }
     &.fa-comments::before { content: "forum" }
     &.fa-angle-right::before { content: "chevron_right" }
+    &.fa-thumb-tack::before { content: "push_pin" }
 }
 
 // bookmark icon
@@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
     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="40px" width="20px"><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>');
 }
 
-button.icon-button i.fa-retweet:hover {
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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>') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
     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="40px" width="20px"><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-hover-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>');
 }
 
 button.icon-button.disabled i.fa-retweet,
-button.icon-button.disabled i.fa-retweet:hover {
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
 }
 
@@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
 }
 
 // status scope
-.status__visibility-icon .fa {
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
     font-size: 16px;
     vertical-align: text-bottom;
 }
\ 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 f231eb835..b8ac12414 100644
--- a/app/javascript/styles/plus/theme/media.scss
+++ b/app/javascript/styles/plus/theme/media.scss
@@ -11,29 +11,6 @@
     &__item { border-radius: $media-radius }
 }
 
-.media-modal__close {
-    &.icon-button {
-        background: transparent;
-        color: $media-icon-color;
-        font-size: 24px !important;
-        width: 24px !important;
-        height: 24px !important;
-        padding: 8px;
-        box-sizing: content-box;
-        line-height: normal !important;
-
-        &:hover {
-            background: $media-icon-bg-hover-color;
-            color: $media-icon-hover-color;
-        }
-
-        .fa-fw {
-            width: 24px;
-            height: 24px;
-        }
-    }
-}
-
 .media-modal {
     &__nav {
         background: $media-icon-bg-color;
@@ -53,11 +30,47 @@
         &--active { background-color: $media-page-indicator-active-color }
     }
 
+    &__close {
+        &.icon-button {
+            background: transparent;
+            color: $media-icon-color;
+            font-size: 24px !important;
+            width: 24px !important;
+            height: 24px !important;
+            padding: 8px;
+            box-sizing: content-box;
+            line-height: normal !important;
+    
+            &:hover {
+                background: $media-icon-bg-hover-color;
+                color: $media-icon-hover-color;
+            }
+    
+            .fa-fw {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
     &__meta {
         bottom: 24px;
 
         a { color: $media-icon-color }
     }
+
+    &__overlay {
+        .picture-in-picture__footer .icon-button {
+            color: $media-icon-color;
+
+            &:active,
+            &:focus,
+            &:hover {
+                color: $media-icon-hover-color;
+                background-color: transparent;
+            }
+        }
+    }
 }
 
 .video-player {
diff --git a/app/javascript/styles/plus/theme/statuses.scss b/app/javascript/styles/plus/theme/statuses.scss
index e6e5c4021..7e4374014 100644
--- a/app/javascript/styles/plus/theme/statuses.scss
+++ b/app/javascript/styles/plus/theme/statuses.scss
@@ -84,12 +84,19 @@
     }
 
     &__action-bar-button {
-        margin-right: 6px;
+        margin-right: 4px;
 
         &.icon-button {
             @include icon-button;
             padding: 8px;
             box-sizing: content-box;
+
+            &--with-counter {
+                margin-right: 4px;
+                width: auto !important;
+
+                &:hover { background: transparent }
+            }
         }
     }
 
@@ -253,6 +260,11 @@ a.status-card {
             box-sizing: content-box;
         }
     }
+
+    .button.logo-button {
+        margin-bottom: 16px;
+        line-height: 36px;
+    }
 }
 
 // search user trends
diff --git a/app/javascript/styles/plus/theme/theme.scss b/app/javascript/styles/plus/theme/theme.scss
index 0980ed92a..367893682 100644
--- a/app/javascript/styles/plus/theme/theme.scss
+++ b/app/javascript/styles/plus/theme/theme.scss
@@ -1,5 +1,5 @@
 /*
-* Mastodon Material 0.2.0
+* Mastodon Material 0.2.1
 * Author: Rintan, Genbu Project
 * Copyright (C) 2020 Rintan, Genbu Project
 */