diff --git a/app/javascript/styles/modern-dark.scss b/app/javascript/styles/modern-dark.scss
new file mode 100644
index 000000000..09a5778a0
--- /dev/null
+++ b/app/javascript/styles/modern-dark.scss
@@ -0,0 +1,8 @@
+@import 'modern/dark';
+@import 'application';
+@import 'modern/style';
+
+.layout-multiple-columns .column {
+	flex-grow: 1;
+	max-width: 500px;
+}
diff --git a/app/javascript/styles/modern-light.scss b/app/javascript/styles/modern-light.scss
new file mode 100644
index 000000000..073febc20
--- /dev/null
+++ b/app/javascript/styles/modern-light.scss
@@ -0,0 +1,9 @@
+@import 'modern/light';
+@import 'application';
+@import 'modern/style';
+@import 'mastodon-light/diff';
+
+.layout-multiple-columns .column {
+	flex-grow: 1;
+	max-width: 500px;
+}
diff --git a/app/javascript/styles/modern/dark.scss b/app/javascript/styles/modern/dark.scss
new file mode 100644
index 000000000..1a3d38b84
--- /dev/null
+++ b/app/javascript/styles/modern/dark.scss
@@ -0,0 +1,56 @@
+// Commonly used web colors
+$black: #000000;            // Black
+$white: #ffffff;            // White
+$success-green: #79bd9a !default;    // Padua
+$error-red: #df405a !default;        // Cerise
+$warning-red: #ff5050 !default;      // Sunset Orange
+$gold-star: #ca8f04 !default;        // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+// Values from the classic Mastodon UI
+$classic-base-color: #282c37;         // Midnight Express
+$classic-primary-color: #9baec8;      // Echo Blue
+$classic-secondary-color: #d9e1e8;    // Pattens Blue
+$classic-highlight-color: #e7b01c;    // Summer Sky
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
diff --git a/app/javascript/styles/modern/light.scss b/app/javascript/styles/modern/light.scss
new file mode 100644
index 000000000..5faae83b6
--- /dev/null
+++ b/app/javascript/styles/modern/light.scss
@@ -0,0 +1,41 @@
+// Dependent colors
+$black: #000000;
+$white: #ffffff;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #e7b01c;
+
+// Differences
+$success-green: lighten(#3c754d, 8%);
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
+
+$ui-base-color: $classic-secondary-color !default;
+$ui-base-lighter-color: #b0c0cf;
+$ui-primary-color: #9bcbed;
+$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: #e7b01c;
+
+$primary-text-color: $black !default;
+$darker-text-color: $classic-base-color !default;
+$dark-text-color: #444b5d;
+$action-button-color: #606984;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: $classic-base-color !default;
+$light-text-color: #444b5d;
+
+//Newly added colors
+$account-background-color: $white !default;
+
+//Invert darkened and lightened colors
+@function darken($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+}
+
+@function lighten($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+}
diff --git a/app/javascript/styles/modern/style.scss b/app/javascript/styles/modern/style.scss
new file mode 100644
index 000000000..05b52f041
--- /dev/null
+++ b/app/javascript/styles/modern/style.scss
@@ -0,0 +1,1046 @@
+:root {
+    --tl-width: 750px;
+    --radius: 12px;
+    --radius-round: 24px;
+    --hover-color: rgba(170,170,170,0.07);
+    --border-color: rgba(120,120,120,0.2);
+    --shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
+    --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4);
+  }
+  #mastodon button,
+  .public-layout button,
+  #mastodon video,
+  .public-layout video,
+  #mastodon input,
+  .public-layout input,
+  #mastodon iframe,
+  .public-layout iframe,
+  #mastodon .privacy-dropdown__dropdown,
+  .public-layout .privacy-dropdown__dropdown,
+  #mastodon .react-toggle-track,
+  .public-layout .react-toggle-track {
+    border-radius: var(--radius) !important;
+  }
+  #mastodon *,
+  .public-layout * {
+    border-color: var(--border-color) !important;
+    font-display: swap !important;
+  }
+  #mastodon .media-gallery__item,
+  .public-layout .media-gallery__item,
+  #mastodon .column-link,
+  .public-layout .column-link,
+  #mastodon select,
+  .public-layout select {
+    transition: transform 0.4s cubic-bezier(0, 0, 0, 3) !important;
+  }
+  #mastodon .media-gallery__item:active,
+  .public-layout .media-gallery__item:active,
+  #mastodon .column-link:active,
+  .public-layout .column-link:active,
+  #mastodon select:active,
+  .public-layout select:active {
+    transform: scale(0.99);
+    transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
+  }
+  #mastodon .react-toggle-track,
+  .public-layout .react-toggle-track,
+  #mastodon .button,
+  .public-layout .button,
+  #mastodon .icon-button,
+  .public-layout .icon-button {
+    transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important;
+  }
+  #mastodon .react-toggle-track:active,
+  .public-layout .react-toggle-track:active,
+  #mastodon .button:active,
+  .public-layout .button:active,
+  #mastodon .icon-button:active,
+  .public-layout .icon-button:active {
+    transform: scale(0.95);
+    transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
+  }
+  #mastodon .react-toggle-thumb,
+  .public-layout .react-toggle-thumb {
+    pointer-events: none;
+  }
+  #mastodon .account__avatar,
+  .public-layout .account__avatar {
+    border-radius: 30%;
+  }
+  #mastodon .detailed-status__action-bar,
+  .public-layout .detailed-status__action-bar,
+  #mastodon .column-header__collapsible-inner,
+  .public-layout .column-header__collapsible-inner,
+  #mastodon .compose-form__buttons-wrapper,
+  .public-layout .compose-form__buttons-wrapper,
+  #mastodon .audio-player,
+  .public-layout .audio-player,
+  #mastodon .box-widget input[type="email"],
+  .public-layout .box-widget input[type="email"],
+  #mastodon .box-widget input[type="password"],
+  .public-layout .box-widget input[type="password"],
+  #mastodon .box-widget input[type="text"],
+  .public-layout .box-widget input[type="text"],
+  #mastodon .box-widget textarea,
+  .public-layout .box-widget textarea,
+  #mastodon .compose-form .spoiler-input__input,
+  .public-layout .compose-form .spoiler-input__input,
+  #mastodon .compose-form__autosuggest-wrapper,
+  .public-layout .compose-form__autosuggest-wrapper,
+  #mastodon .compose-form__poll-wrapper select,
+  .public-layout .compose-form__poll-wrapper select,
+  #mastodon .poll__option input[type="text"],
+  .public-layout .poll__option input[type="text"],
+  #mastodon .report-dialog-modal__textarea,
+  .public-layout .report-dialog-modal__textarea,
+  #mastodon .search__input,
+  .public-layout .search__input,
+  #mastodon .setting-text,
+  .public-layout .setting-text,
+  #mastodon .statuses-grid .detailed-status,
+  .public-layout .statuses-grid .detailed-status {
+    border: 0 !important;
+  }
+  #mastodon .columns-area__panels__pane__inner,
+  .public-layout .columns-area__panels__pane__inner {
+    margin-top: 30px;
+  }
+  #mastodon .compose-panel,
+  .public-layout .compose-panel {
+    margin-top: 0;
+  }
+  #mastodon .search,
+  .public-layout .search,
+  .search-popout {
+    margin-inline: 5px;
+    border-radius: var(--radius);
+  }
+  #mastodon .search label,
+  .public-layout .search label {
+    box-sizing: border-box;
+  }
+  #mastodon .search input,
+  .public-layout .search input {
+    border-radius: var(--radius-round) !important;
+    padding-left: 20px;
+  }
+  #mastodon .search .search__icon > i,
+  .public-layout .search .search__icon > i {
+    right: 15px;
+  }
+  #mastodon .compose-form .compose-form__autosuggest-wrapper,
+  .public-layout .compose-form .compose-form__autosuggest-wrapper,
+  #mastodon .compose-form .autosuggest-textarea__textarea,
+  .public-layout .compose-form .autosuggest-textarea__textarea {
+    border-radius: var(--radius) var(--radius) 0 0 !important;
+  }
+  #mastodon .compose-form .compose-form__buttons-wrapper,
+  .public-layout .compose-form .compose-form__buttons-wrapper {
+    border-radius: 0 0 var(--radius) var(--radius) !important;
+  }
+  #mastodon .getting-started__footer,
+  .public-layout .getting-started__footer {
+    opacity: 0.5;
+    transition: opacity 0.4s;
+  }
+  #mastodon .getting-started__footer a,
+  .public-layout .getting-started__footer a {
+    text-decoration: none;
+  }
+  #mastodon .getting-started__footer > p,
+  .public-layout .getting-started__footer > p {
+    font-size: 0;
+    line-height: 0;
+    opacity: 0;
+    transition: font-size 0.2s, line-height 0.2s;
+    transition-duration: 0.2s;
+  }
+  #mastodon .getting-started__footer:hover,
+  .public-layout .getting-started__footer:hover,
+  #mastodon .getting-started__footer:focus-within,
+  .public-layout .getting-started__footer:focus-within {
+    opacity: 1;
+  }
+  #mastodon .getting-started__footer:hover > p,
+  .public-layout .getting-started__footer:hover > p,
+  #mastodon .getting-started__footer:focus-within > p,
+  .public-layout .getting-started__footer:focus-within > p {
+    font-size: 1em;
+    line-height: 1.5;
+    opacity: 1;
+    transform: translateY(0px);
+    transition: font-size 0.1s, line-height 0.25s cubic-bezier(0, 0, 0, 1.3), opacity 0.2s 0.1s;
+  }
+  #mastodon .columns-area__panels__main,
+  .public-layout .columns-area__panels__main {
+    margin: 0 10px;
+    padding-top: 30px !important;
+    overflow: visible !important;
+    transition: max-width 0.2s cubic-bezier(0, 0, 0, 1.1), margin 0.2s cubic-bezier(0, 0, 0, 1.1);
+  }
+  @media (min-width: 1320px) {
+    #mastodon .columns-area__panels__main,
+    .public-layout .columns-area__panels__main {
+      max-width: var(--tl-width) !important;
+      padding: 0 15px;
+    }
+  }
+  #mastodon .columns-area__panels__main > div,
+  .public-layout .columns-area__panels__main > div {
+    border-radius: var(--radius);
+  }
+  #mastodon .columns-area__panels__main .scrollable,
+  .public-layout .columns-area__panels__main .scrollable {
+    padding-bottom: 40vh !important;
+  }
+  #mastodon .scrollable,
+  .public-layout .scrollable,
+  #mastodon .column-back-button,
+  .public-layout .column-back-button,
+  #mastodon .column-header,
+  .public-layout .column-header {
+    border: 0;
+    border-radius: var(--radius);
+  }
+  #mastodon .scrollable:not(.scrollable--flex),
+  .public-layout .scrollable:not(.scrollable--flex),
+  #mastodon .activity-stream,
+  .public-layout .activity-stream {
+    border: 0 !important;
+    contain: unset !important;
+  }
+  #mastodon .scrollable:not(.scrollable--flex):not(.activity-stream),
+  .public-layout .scrollable:not(.scrollable--flex):not(.activity-stream),
+  #mastodon .activity-stream:not(.activity-stream),
+  .public-layout .activity-stream:not(.activity-stream) {
+    padding: 10px;
+  }
+  #mastodon .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable,
+  .public-layout .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable,
+  #mastodon .activity-stream > [tabindex]:first-child > .focusable,
+  .public-layout .activity-stream > [tabindex]:first-child > .focusable {
+    margin-top: 0;
+  }
+  #mastodon .scrollable:not(.scrollable--flex) > div > [tabindex]:last-child .status,
+  .public-layout .scrollable:not(.scrollable--flex) > div > [tabindex]:last-child .status,
+  #mastodon .activity-stream > div > [tabindex]:last-child .status,
+  .public-layout .activity-stream > div > [tabindex]:last-child .status {
+    border: 0;
+  }
+  #mastodon .column,
+  .public-layout .column,
+  #mastodon .columns-area,
+  .public-layout .columns-area {
+    overflow: visible !important;
+  }
+  #mastodon .scrollable--flex .account-timeline__header,
+  .public-layout .scrollable--flex .account-timeline__header {
+    margin: 0 !important;
+  }
+  #mastodon .account-timeline__header,
+  .public-layout .account-timeline__header {
+    margin: -10px;
+    margin-bottom: 10px;
+  }
+  #mastodon .account-timeline__header .account__header,
+  .public-layout .account-timeline__header .account__header {
+    overflow: visible !important;
+  }
+  #mastodon .account-timeline__header .account__header__info,
+  .public-layout .account-timeline__header .account__header__info {
+    z-index: 2;
+  }
+  #mastodon .account-timeline__header .account__header__image,
+  .public-layout .account-timeline__header .account__header__image {
+    height: 0;
+    padding-bottom: 35%;
+    position: sticky;
+    top: calc(0px - var(--radius));
+    border-radius: var(--radius) var(--radius) 0 0;
+  }
+  #mastodon .account-timeline__header .account__header__image img,
+  .public-layout .account-timeline__header .account__header__image img {
+    position: absolute;
+  }
+  #mastodon .account-timeline__header .account__header__bar,
+  .public-layout .account-timeline__header .account__header__bar {
+    padding: 10px;
+    border: 0;
+    border-radius: var(--radius) var(--radius) 0 0;
+    margin-top: calc(0px - var(--radius)) !important;
+  }
+  #mastodon .account-timeline__header .account__header__tabs__name h1,
+  .public-layout .account-timeline__header .account__header__tabs__name h1 {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  #mastodon .account-timeline__header .account__header__tabs__name h1 span,
+  .public-layout .account-timeline__header .account__header__tabs__name h1 span {
+    margin-right: 0.4em;
+  }
+  #mastodon .account-timeline__header .account__header__bio,
+  .public-layout .account-timeline__header .account__header__bio {
+    margin: 0;
+    margin-top: 10px;
+  }
+  #mastodon .account-timeline__header .account__header__bio > div,
+  .public-layout .account-timeline__header .account__header__bio > div {
+    padding-inline: 10px !important;
+  }
+  #mastodon .account__header__fields,
+  .public-layout .account__header__fields,
+  #mastodon .account__header__account-note,
+  .public-layout .account__header__account-note {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    border: 0;
+    gap: 10px;
+  }
+  .public-account-bio .account__header__fields {
+    padding: 20px !important;
+    padding-bottom: 0 !important;
+  }
+  #mastodon .account__header__fields dl,
+  .public-layout .account__header__fields dl,
+  #mastodon .account__header__account-note dl,
+  .public-layout .account__header__account-note dl,
+  #mastodon .account__header__fields.account__header__account-note.account__header__account-note,
+  .public-layout .account__header__fields.account__header__account-note.account__header__account-note,
+  #mastodon .account__header__account-note.account__header__account-note.account__header__account-note,
+  .public-layout .account__header__account-note.account__header__account-note.account__header__account-note {
+    border: 0;
+    border-radius: var(--radius-round);
+    overflow: hidden;
+    background-color: var(--border-color);
+    padding: 0 !important;
+  }
+  #mastodon .account__header__fields dl dt,
+  .public-layout .account__header__fields dl dt,
+  #mastodon .account__header__account-note dl dt,
+  .public-layout .account__header__account-note dl dt,
+  #mastodon .account__header__fields.account__header__account-note.account__header__account-note dt,
+  .public-layout .account__header__fields.account__header__account-note.account__header__account-note dt,
+  #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt,
+  .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dt,
+  #mastodon .account__header__fields dl dd,
+  .public-layout .account__header__fields dl dd,
+  #mastodon .account__header__account-note dl dd,
+  .public-layout .account__header__account-note dl dd,
+  #mastodon .account__header__fields.account__header__account-note.account__header__account-note dd,
+  .public-layout .account__header__fields.account__header__account-note.account__header__account-note dd,
+  #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd,
+  .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd {
+    width: unset;
+    padding-block: 0.5em;
+  }
+  #mastodon .account__header__fields dl dt,
+  .public-layout .account__header__fields dl dt,
+  #mastodon .account__header__account-note dl dt,
+  .public-layout .account__header__account-note dl dt,
+  #mastodon .account__header__fields.account__header__account-note.account__header__account-note dt,
+  .public-layout .account__header__fields.account__header__account-note.account__header__account-note dt,
+  #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt,
+  .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dt {
+    background: none;
+  }
+  #mastodon .account__header__fields dl dd,
+  .public-layout .account__header__fields dl dd,
+  #mastodon .account__header__account-note dl dd,
+  .public-layout .account__header__account-note dl dd,
+  #mastodon .account__header__fields.account__header__account-note.account__header__account-note dd,
+  .public-layout .account__header__fields.account__header__account-note.account__header__account-note dd,
+  #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd,
+  .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd {
+    border: 0;
+  }
+  #mastodon .account__header__fields dl dd:not(.verified),
+  .public-layout .account__header__fields dl dd:not(.verified),
+  #mastodon .account__header__account-note dl dd:not(.verified),
+  .public-layout .account__header__account-note dl dd:not(.verified),
+  #mastodon .account__header__fields.account__header__account-note.account__header__account-note dd:not(.verified),
+  .public-layout .account__header__fields.account__header__account-note.account__header__account-note dd:not(.verified),
+  #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd:not(.verified),
+  .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd:not(.verified) {
+    padding-left: 0;
+  }
+  #mastodon .account__header__fields.account__header__account-note,
+  .public-layout .account__header__fields.account__header__account-note,
+  #mastodon .account__header__account-note.account__header__account-note,
+  .public-layout .account__header__account-note.account__header__account-note {
+    margin: 10px;
+    margin-bottom: 0;
+    gap: 0;
+    background: none !important;
+    border: 1px solid var(--border-color) !important;
+  }
+  #mastodon .account__header__fields textarea,
+  .public-layout .account__header__fields textarea,
+  #mastodon .account__header__account-note textarea,
+  .public-layout .account__header__account-note textarea {
+    width: 0;
+    flex-grow: 1;
+    margin: 0 !important;
+    border-radius: 0;
+  }
+  #mastodon .account__header__fields label,
+  .public-layout .account__header__fields label,
+  #mastodon .account__header__account-note label,
+  .public-layout .account__header__account-note label {
+    margin: 0;
+    font-weight: 600;
+    padding-inline: 14px;
+  }
+  #mastodon .account__section-headline,
+  .public-layout .account__section-headline {
+    background: none;
+  }
+  .with-modals #mastodon .account__section-headline,
+  .with-modals .public-layout .account__section-headline {
+    border: 0 !important;
+  }
+  #mastodon .account__section-headline a span,
+  .public-layout .account__section-headline a span {
+    font-weight: 400;
+  }
+  #mastodon .account__section-headline a.active span,
+  .public-layout .account__section-headline a.active span {
+    font-weight: 700;
+  }
+  #mastodon .notification__filter-bar,
+  .public-layout .notification__filter-bar {
+    border: 0 !important;
+    margin-bottom: calc(0px - var(--radius));
+    padding-bottom: var(--radius);
+  }
+  #mastodon .focusable,
+  .public-layout .focusable,
+  #mastodon .entry,
+  .public-layout .entry {
+    overflow: clip;
+    border-radius: var(--radius) !important;
+    transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s;
+    animation: fadeUp 0.4s forwards cubic-bezier(0, 1, 1, 1);
+  }
+  #mastodon .focusable.entry,
+  .public-layout .focusable.entry,
+  #mastodon .entry.entry,
+  .public-layout .entry.entry {
+    margin-bottom: 10px;
+  }
+  #mastodon .focusable.entry .status,
+  .public-layout .focusable.entry .status,
+  #mastodon .entry.entry .status,
+  .public-layout .entry.entry .status {
+    border: 0 !important;
+  }
+  #mastodon .focusable:hover,
+  .public-layout .focusable:hover,
+  #mastodon .entry:hover,
+  .public-layout .entry:hover {
+    background-color: var(--hover-color);
+  }
+  #mastodon .status__info,
+  .public-layout .status__info {
+    margin-top: 5px;
+  }
+  #mastodon .status__info .status__avatar,
+  .public-layout .status__info .status__avatar {
+    top: 15px;
+    left: 15px !important;
+  }
+  #mastodon .status__content,
+  .public-layout .status__content {
+    min-height: 1.4em;
+    padding-top: 2px;
+  }
+  #mastodon .media-gallery,
+  .public-layout .media-gallery,
+  #mastodon .video-player,
+  .public-layout .video-player {
+    margin-left: -62px;
+    width: unset;
+    box-shadow: var(--shadow-low);
+    border-radius: var(--radius);
+    margin-block: 15px !important;
+    animation: scaleIn 0.4s;
+    max-width: unset !important;
+    max-height: 80vh !important;
+  }
+  #mastodon .detailed-status__wrapper,
+  .public-layout .detailed-status__wrapper,
+  #mastodon .detailed-status,
+  .public-layout .detailed-status {
+    box-shadow: var(--shadow);
+  }
+  #mastodon .detailed-status__wrapper.detailed-status__wrapper,
+  .public-layout .detailed-status__wrapper.detailed-status__wrapper,
+  #mastodon .detailed-status.detailed-status__wrapper,
+  .public-layout .detailed-status.detailed-status__wrapper {
+    margin-block: 15px;
+  }
+  #mastodon .detailed-status__wrapper .media-gallery,
+  .public-layout .detailed-status__wrapper .media-gallery,
+  #mastodon .detailed-status .media-gallery,
+  .public-layout .detailed-status .media-gallery,
+  #mastodon .detailed-status__wrapper .video-player,
+  .public-layout .detailed-status__wrapper .video-player,
+  #mastodon .detailed-status .video-player,
+  .public-layout .detailed-status .video-player {
+    margin-left: 0 !important;
+    max-height: unset !important;
+  }
+  #mastodon .status__action-bar,
+  .public-layout .status__action-bar,
+  #mastodon .detailed-status__action-bar,
+  .public-layout .detailed-status__action-bar {
+    padding-top: 0;
+  }
+  #mastodon .status__action-bar .icon-button,
+  .public-layout .status__action-bar .icon-button,
+  #mastodon .detailed-status__action-bar .icon-button,
+  .public-layout .detailed-status__action-bar .icon-button {
+    display: inline-flex;
+    align-items: center;
+    width: unset !important;
+    padding: 0.3em 0.5em !important;
+    height: unset !important;
+    flex: 0 1 auto !important;
+    min-width: 0;
+  }
+  #mastodon .status__action-bar .icon-button::after,
+  .public-layout .status__action-bar .icon-button::after,
+  #mastodon .detailed-status__action-bar .icon-button::after,
+  .public-layout .detailed-status__action-bar .icon-button::after {
+    content: attr(aria-label);
+    font-size: 0.7em;
+    margin-left: 0.5em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #mastodon .status__action-bar .status__action-bar-dropdown,
+  .public-layout .status__action-bar .status__action-bar-dropdown,
+  #mastodon .detailed-status__action-bar .status__action-bar-dropdown,
+  .public-layout .detailed-status__action-bar .status__action-bar-dropdown,
+  #mastodon .status__action-bar .detailed-status__action-bar-dropdown,
+  .public-layout .status__action-bar .detailed-status__action-bar-dropdown,
+  #mastodon .detailed-status__action-bar .detailed-status__action-bar-dropdown,
+  .public-layout .detailed-status__action-bar .detailed-status__action-bar-dropdown,
+  #mastodon .status__action-bar .detailed-status__button,
+  .public-layout .status__action-bar .detailed-status__button,
+  #mastodon .detailed-status__action-bar .detailed-status__button,
+  .public-layout .detailed-status__action-bar .detailed-status__button {
+    display: contents;
+  }
+  #mastodon .status__action-bar.detailed-status__action-bar,
+  .public-layout .status__action-bar.detailed-status__action-bar,
+  #mastodon .detailed-status__action-bar.detailed-status__action-bar,
+  .public-layout .detailed-status__action-bar.detailed-status__action-bar {
+    padding-right: 15px !important;
+    padding-left: 15px !important;
+  }
+  #mastodon .status__action-bar.detailed-status__action-bar .icon-button,
+  .public-layout .status__action-bar.detailed-status__action-bar .icon-button,
+  #mastodon .detailed-status__action-bar.detailed-status__action-bar .icon-button,
+  .public-layout .detailed-status__action-bar.detailed-status__action-bar .icon-button {
+    flex-grow: 1 !important;
+    justify-content: center;
+  }
+  #mastodon .status,
+  .public-layout .status {
+    overflow: visible !important;
+    padding: 15px 15px 15px 78px !important;
+  }
+  #mastodon .detailed-status,
+  .public-layout .detailed-status {
+    padding: 15px !important;
+  }
+  #mastodon .tabs-bar__wrapper,
+  .public-layout .tabs-bar__wrapper {
+    transition: margin-left 0.2s cubic-bezier(0, 0, 0, 1.1);
+  }
+  @media (min-width: 1191px) {
+    #mastodon .tabs-bar__wrapper,
+    .public-layout .tabs-bar__wrapper {
+      position: fixed;
+      width: 285px;
+      margin-left: 600px;
+      padding-top: 0;
+      margin-top: 30px;
+      overflow: clip;
+      border-radius: var(--radius) var(--radius) !important;
+      box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1);
+    }
+    #mastodon .tabs-bar__wrapper .column-header,
+    .public-layout .tabs-bar__wrapper .column-header,
+    #mastodon .tabs-bar__wrapper .column-header__buttons button,
+    .public-layout .tabs-bar__wrapper .column-header__buttons button {
+      background: none !important;
+    }
+    #mastodon .tabs-bar__wrapper .column-header,
+    .public-layout .tabs-bar__wrapper .column-header {
+      font-weight: 600;
+    }
+  }
+  @media (min-width: 895px) and (max-width: 1191px) {
+    #mastodon .tabs-bar__wrapper,
+    .public-layout .tabs-bar__wrapper {
+      padding-top: 0;
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar,
+    .public-layout .tabs-bar__wrapper .tabs-bar {
+      margin-bottom: 0;
+      border: 0 !important;
+    }
+    #mastodon .tabs-bar__wrapper #tabs-bar__portal,
+    .public-layout .tabs-bar__wrapper #tabs-bar__portal {
+      border-radius: 0 !important;
+    }
+    #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header,
+    .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header,
+    #mastodon .tabs-bar__wrapper #tabs-bar__portal button,
+    .public-layout .tabs-bar__wrapper #tabs-bar__portal button {
+      border-radius: 0 !important;
+    }
+    #mastodon .tabs-bar__wrapper ~ .columns-area .scrollable,
+    .public-layout .tabs-bar__wrapper ~ .columns-area .scrollable {
+      border-radius: 0 !important;
+    }
+  }
+  @media (min-width: 1191px) and (min-width: 1320px) {
+    #mastodon .tabs-bar__wrapper,
+    .public-layout .tabs-bar__wrapper {
+      margin-left: calc(var(--tl-width) - 5px);
+    }
+  }
+  #mastodon .navigation-panel,
+  .public-layout .navigation-panel {
+    padding-top: 50px;
+    padding-bottom: 20px;
+    height: calc(100% - 30px);
+    box-sizing: border-box;
+  }
+  #mastodon .column-link,
+  .public-layout .column-link {
+    flex-grow: 2 !important;
+    display: flex !important;
+    align-items: center !important;
+    align-content: center;
+    max-height: 3.3em;
+    min-height: 2.7em !important;
+    padding-block: 0;
+    position: relative;
+    box-sizing: border-box;
+  }
+  #mastodon .column-link .column-link__icon,
+  .public-layout .column-link .column-link__icon,
+  .column-header__icon {
+    margin-right: 1em !important;
+  }
+  #mastodon .column-link::before,
+  .public-layout .column-link::before {
+    content: "" !important;
+    position: absolute;
+    border-radius: 100px !important;
+    width: unset !important;
+    height: unset !important;
+    inset: 0px 0px !important;
+    opacity: 0 !important;
+    background-color: rgba(150,150,150,0.1);
+    transition: opacity 0.2s;
+  }
+  #mastodon .column-link:hover:before,
+  .public-layout .column-link:hover:before,
+  #mastodon .column-link:focus:before,
+  .public-layout .column-link:focus:before {
+    opacity: 1 !important;
+  }
+  #mastodon.public-layout .header,
+  .public-layout.public-layout .header {
+    border-radius: var(--radius);
+  }
+  #mastodon.public-layout .public-account-header,
+  .public-layout.public-layout .public-account-header {
+    border-radius: var(--radius);
+    --border-color: transparent !important;
+    border: 0 !important;
+  }
+  #mastodon.public-layout .public-account-header .public-account-header__bar::before,
+  .public-layout.public-layout .public-account-header .public-account-header__bar::before {
+    border: 0;
+  }
+  #mastodon.public-layout .grid,
+  .public-layout.public-layout .grid {
+    gap: 20px;
+  }
+  #mastodon.public-layout .public-account-header + .grid .column-1,
+  .public-layout.public-layout .public-account-header + .grid .column-1 {
+    position: sticky;
+    align-self: flex-end;
+    bottom: 0;
+    min-height: calc(100vh - 80px);
+  }
+  #mastodon.public-layout .public-account-header + .grid .column-1 > *,
+  .public-layout.public-layout .public-account-header + .grid .column-1 > * {
+    border-radius: var(--radius);
+    overflow: hidden;
+    border: 0 !important;
+  }
+  #mastodon.public-layout .public-account-header + .grid .column-1 a,
+  .public-layout.public-layout .public-account-header + .grid .column-1 a,
+  #mastodon.public-layout .public-account-header + .grid .column-1 .hero-widget__text,
+  .public-layout.public-layout .public-account-header + .grid .column-1 .hero-widget__text {
+    border: 0 !important;
+  }
+  #mastodon.public-layout .box-widget,
+  .public-layout.public-layout .box-widget,
+  #mastodon.public-layout .directory__tag > a,
+  .public-layout.public-layout .directory__tag > a,
+  #mastodon.public-layout .hero-widget,
+  .public-layout.public-layout .hero-widget,
+  #mastodon.public-layout .landing-page__call-to-action,
+  .public-layout.public-layout .landing-page__call-to-action,
+  #mastodon.public-layout .table-of-contents,
+  .public-layout.public-layout .table-of-contents,
+  #mastodon.public-layout .rules-list,
+  .public-layout.public-layout .rules-list {
+    border-radius: var(--radius);
+    overflow: hidden;
+  }
+  #mastodon.public-layout .footer .column-3,
+  .public-layout.public-layout .footer .column-3,
+  #mastodon.public-layout .footer .column-4,
+  .public-layout.public-layout .footer .column-4 {
+    text-align: right;
+  }
+  @media (max-width: 895px) {
+    #mastodon .columns-area__panels__main,
+    .public-layout .columns-area__panels__main {
+      padding: 0 !important;
+    }
+    #mastodon .is-composing .columns-area__panels__main,
+    .public-layout .is-composing .columns-area__panels__main {
+      padding-bottom: 40px !important;
+    }
+    #mastodon .columns-area__panels__main .scrollable,
+    .public-layout .columns-area__panels__main .scrollable,
+    #mastodon .columns-area__panels__main .account__header__image,
+    .public-layout .columns-area__panels__main .account__header__image {
+      border-radius: 0 !important;
+    }
+    #mastodon .tabs-bar__wrapper,
+    .public-layout .tabs-bar__wrapper {
+      position: fixed !important;
+      top: unset !important;
+      bottom: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      display: flex;
+      flex-direction: column;
+      box-shadow: none !important;
+      padding: 0;
+      background: none;
+      border-radius: 0 !important;
+      pointer-events: none;
+      filter: brightness(0.95);
+    }
+    #mastodon .tabs-bar__wrapper > *,
+    .public-layout .tabs-bar__wrapper > * {
+      pointer-events: all;
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar,
+    .public-layout .tabs-bar__wrapper .tabs-bar {
+      order: 2;
+      margin: 0;
+      border: 0;
+      border-radius: var(--radius-round) var(--radius-round) 0 0;
+      color: #fff !important;
+      overflow: visible !important;
+      padding-inline: 5px;
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar a,
+    .public-layout .tabs-bar__wrapper .tabs-bar a {
+      flex-grow: 1 !important;
+      padding-block: 20px;
+      position: relative;
+      border: 0;
+      background: none !important;
+      transition: transform 0.4s cubic-bezier(0, 0, 0, 4), filter 0.1s;
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar a > i,
+    .public-layout .tabs-bar__wrapper .tabs-bar a > i {
+      font-size: 18px;
+      filter: opacity(0.7);
+      transition: transform 0.2s cubic-bezier(0, 0, 0, 1.2);
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar a > i .icon-with-badge__badge,
+    .public-layout .tabs-bar__wrapper .tabs-bar a > i .icon-with-badge__badge {
+      font-size: 0.5em;
+      border-radius: var(--radius-round);
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar a::before,
+    .public-layout .tabs-bar__wrapper .tabs-bar a::before {
+      content: "";
+      position: absolute;
+      bottom: -10px;
+      width: 5px;
+      height: 10px;
+      border-radius: 100px;
+      background-color: currentColor;
+      left: 50%;
+      margin-left: -2.5px;
+      transition: bottom 0.2s cubic-bezier(0, 0, 0, 4), width 0.2s, margin-left 0.2s;
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar a:active,
+    .public-layout .tabs-bar__wrapper .tabs-bar a:active {
+      transform: translateY(5px);
+      transition: transform 1s;
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar a.active,
+    .public-layout .tabs-bar__wrapper .tabs-bar a.active {
+      transform: translateY(-2px);
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar a.active i,
+    .public-layout .tabs-bar__wrapper .tabs-bar a.active i {
+      filter: none !important;
+    }
+    #mastodon .tabs-bar__wrapper .tabs-bar a.active::before,
+    .public-layout .tabs-bar__wrapper .tabs-bar a.active::before {
+      bottom: -6px;
+      width: 10px;
+      margin-left: -5px;
+    }
+    #mastodon .tabs-bar__wrapper #tabs-bar__portal,
+    .public-layout .tabs-bar__wrapper #tabs-bar__portal {
+      margin: 10px 20px !important;
+      width: max-content !important;
+      box-shadow: var(--shadow) !important;
+      max-width: calc(100vw - 130px);
+    }
+    #mastodon .tabs-bar__wrapper #tabs-bar__portal > button,
+    .public-layout .tabs-bar__wrapper #tabs-bar__portal > button {
+      padding-inline: 20px;
+    }
+    #mastodon .tabs-bar__wrapper #tabs-bar__portal button,
+    .public-layout .tabs-bar__wrapper #tabs-bar__portal button {
+      min-width: 60px;
+    }
+    #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible,
+    .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible {
+      transition: margin-top 0.2s cubic-bezier(0, 0, 0, 2);
+      max-width: 100%;
+      border-radius: var(--radius);
+    }
+    #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed),
+    .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed) {
+      width: calc(100vw - 40px);
+      margin-top: 5px;
+    }
+    .floating-action-button {
+      bottom: 70px;
+    }
+    #mastodon .icon-button:after,
+    .public-layout .icon-button:after {
+      content: unset !important;
+    }
+    #mastodon .status__action-bar,
+    .public-layout .status__action-bar {
+      margin-left: -63px;
+      margin-bottom: -10px;
+    }
+    #mastodon .status__action-bar .icon-button,
+    .public-layout .status__action-bar .icon-button {
+      flex-grow: 1 !important;
+      margin: 0 !important;
+      justify-content: center;
+      padding: 0.7em !important;
+    }
+    #mastodon .modal-root__modal .status.light,
+    .public-layout .modal-root__modal .status.light {
+      overflow: hidden !important;
+      padding-left: 70px !important;
+    }
+  }
+  .layout-multiple-columns #mastodon .columns-area {
+    overflow: auto hidden !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area .column-header,
+  .layout-multiple-columns #mastodon .columns-area .scrollable,
+  .layout-multiple-columns #mastodon .columns-area .column-back-button,
+  .layout-multiple-columns #mastodon .columns-area .account__header__image {
+    border-radius: 0 !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area .icon-button:after {
+    content: unset !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area > div {
+    border: 0 !important;
+    padding: 0 !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area > div:not(:last-child):not(.drawer) {
+    padding-right: 2px !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area > div.column {
+    flex-grow: 1;
+    max-width: 600px;
+  }
+  .layout-multiple-columns #mastodon .columns-area > div:first-child {
+    margin-left: auto !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area > div:last-child {
+    margin-right: auto !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area .drawer {
+    padding-inline: 10px !important;
+    padding-top: 20px !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area .drawer .drawer__header {
+    border-radius: var(--radius-round);
+    margin-inline: 5px;
+    overflow: hidden;
+    border: 0 !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a {
+    border: 0;
+  }
+  .layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:first-child {
+    padding-left: 15px !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:last-child {
+    padding-right: 15px !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area .drawer__inner:not(.darker),
+  .layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon {
+    background-color: transparent;
+    border: 0 !important;
+  }
+  .layout-multiple-columns #mastodon .columns-area .drawer__inner.darker {
+    border-radius: var(--radius) var(--radius) 0 0;
+    margin-inline: 5px;
+    width: calc(100% - 10px);
+  }
+  #mastodon .modal-root__container,
+  .public-layout .modal-root__container {
+    animation: bounceIn 0.7s;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+  @-moz-keyframes bounceIn {
+      0% {
+        transform: scale(1.1);
+        opacity: 0;
+      }
+      30% {
+        transform: scale(0.99);
+        opacity: 1;
+      }
+      60% {
+        transform: scale(1.005);
+        opacity: 1;
+      }
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+  }
+  @-webkit-keyframes bounceIn {
+      0% {
+        transform: scale(1.1);
+        opacity: 0;
+      }
+      30% {
+        transform: scale(0.99);
+        opacity: 1;
+      }
+      60% {
+        transform: scale(1.005);
+        opacity: 1;
+      }
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+  }
+  @-o-keyframes bounceIn {
+      0% {
+        transform: scale(1.1);
+        opacity: 0;
+      }
+      30% {
+        transform: scale(0.99);
+        opacity: 1;
+      }
+      60% {
+        transform: scale(1.005);
+        opacity: 1;
+      }
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+  }
+  @keyframes bounceIn {
+      0% {
+        transform: scale(1.1);
+        opacity: 0;
+      }
+      30% {
+        transform: scale(0.99);
+        opacity: 1;
+      }
+      60% {
+        transform: scale(1.005);
+        opacity: 1;
+      }
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+  }
+  @-moz-keyframes fadeUp {
+      from {
+        transform: translateY(20px);
+      }
+  }
+  @-webkit-keyframes fadeUp {
+      from {
+        transform: translateY(20px);
+      }
+  }
+  @-o-keyframes fadeUp {
+      from {
+        transform: translateY(20px);
+      }
+  }
+  @keyframes fadeUp {
+      from {
+        transform: translateY(20px);
+      }
+  }
+  @-moz-keyframes scaleIn {
+      from {
+        transform: scale(0.98);
+        opacity: 0;
+      }
+  }
+  @-webkit-keyframes scaleIn {
+      from {
+        transform: scale(0.98);
+        opacity: 0;
+      }
+  }
+  @-o-keyframes scaleIn {
+      from {
+        transform: scale(0.98);
+        opacity: 0;
+      }
+  }
+  @keyframes scaleIn {
+      from {
+        transform: scale(0.98);
+        opacity: 0;
+      }
+  }
+  }
+  
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index dc8a22ff5..911962ecd 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1579,6 +1579,8 @@ en:
     missing-contrast: Mastodon-missing (High contrast)
     missing-light: Mastodon-missing (Light)
     mobile-small: Mobile Small / Mastodon (Dark)
+    modern-dark: Modern Dark
+    modern-light: Modern Light
   thread_mark:
     ancestor: Has reference
     both: Has reference and reply
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index 7ba90c0d6..c5d91c9d2 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -1482,6 +1482,8 @@ ja:
     missing-contrast: Mastodon-missing (ハイコントラスト)
     missing-light: Mastodon-missing (ライト)
     mobile-small: Mobile 小 / Mastodon (ダーク)
+    modern-dark: モダン（ダーク）
+    modern-light: モダン（ライト）
   thread_mark:
     ancestor: 参照あり
     both: 参照・返信あり
diff --git a/config/themes.yml b/config/themes.yml
index 7266f0f11..7e0e04927 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -13,3 +13,5 @@ mastodon-material-v2-dark: styles/mastodon-material-v2-dark.scss
 mastodon-material-mastodon-light: styles/mastodon-material-mastodon-light.scss
 mastodon-material-mastodon-dark: styles/mastodon-material-mastodon-dark.scss
 mastodon-material-google-plus: styles/mastodon-material-google-plus.scss
+modern-dark: styles/modern-dark.scss
+modern-light: styles/modern-light.scss