diff --git a/.eslintrc.js b/.eslintrc.js
index ba4c9c40b5..ae13b0711c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -165,7 +165,7 @@ module.exports = defineConfig({
     //   },
     // ],
     'jsx-a11y/no-noninteractive-tabindex': 'off',
-    'jsx-a11y/no-onchange': 'warn',
+    'jsx-a11y/no-onchange': 'off',
     // recommended is full 'error'
     'jsx-a11y/no-static-element-interactions': [
       'warn',
diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js
index 07f60b9270..06f0d79874 100644
--- a/app/javascript/flavours/glitch/actions/compose.js
+++ b/app/javascript/flavours/glitch/actions/compose.js
@@ -21,7 +21,6 @@ let fetchComposeSuggestionsAccountsController;
 let fetchComposeSuggestionsTagsController;
 
 export const COMPOSE_CHANGE          = 'COMPOSE_CHANGE';
-export const COMPOSE_CYCLE_ELEFRIEND = 'COMPOSE_CYCLE_ELEFRIEND';
 export const COMPOSE_SUBMIT_REQUEST  = 'COMPOSE_SUBMIT_REQUEST';
 export const COMPOSE_SUBMIT_SUCCESS  = 'COMPOSE_SUBMIT_SUCCESS';
 export const COMPOSE_SUBMIT_FAIL     = 'COMPOSE_SUBMIT_FAIL';
@@ -59,7 +58,7 @@ export const COMPOSE_SENSITIVITY_CHANGE  = 'COMPOSE_SENSITIVITY_CHANGE';
 export const COMPOSE_SPOILERNESS_CHANGE  = 'COMPOSE_SPOILERNESS_CHANGE';
 export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
 export const COMPOSE_VISIBILITY_CHANGE   = 'COMPOSE_VISIBILITY_CHANGE';
-export const COMPOSE_LISTABILITY_CHANGE  = 'COMPOSE_LISTABILITY_CHANGE';
+export const COMPOSE_COMPOSING_CHANGE    = 'COMPOSE_COMPOSING_CHANGE';
 export const COMPOSE_CONTENT_TYPE_CHANGE = 'COMPOSE_CONTENT_TYPE_CHANGE';
 export const COMPOSE_LANGUAGE_CHANGE     = 'COMPOSE_LANGUAGE_CHANGE';
 
@@ -117,12 +116,6 @@ export function changeCompose(text) {
   };
 }
 
-export function cycleElefriendCompose() {
-  return {
-    type: COMPOSE_CYCLE_ELEFRIEND,
-  };
-}
-
 export function replyCompose(status, routerHistory) {
   return (dispatch, getState) => {
     const prependCWRe = getState().getIn(['local_settings', 'prepend_cw_re']);
@@ -148,13 +141,13 @@ export function resetCompose() {
   };
 }
 
-export const focusCompose = (routerHistory, defaultText) => dispatch => {
+export const focusCompose = (routerHistory, defaultText) => (dispatch, getState) => {
   dispatch({
     type: COMPOSE_FOCUS,
     defaultText,
   });
 
-  ensureComposeIsVisible(routerHistory);
+  ensureComposeIsVisible(getState, routerHistory);
 };
 
 export function mentionCompose(account, routerHistory) {
@@ -179,7 +172,7 @@ export function directCompose(account, routerHistory) {
   };
 }
 
-export function submitCompose(routerHistory) {
+export function submitCompose(routerHistory, overridePrivacy = null) {
   return function (dispatch, getState) {
     let status     = getState().getIn(['compose', 'text'], '');
     const media    = getState().getIn(['compose', 'media_attachments']);
@@ -228,7 +221,7 @@ export function submitCompose(routerHistory) {
         media_attributes,
         sensitive: getState().getIn(['compose', 'sensitive']) || (spoilerText.length > 0 && media.size !== 0),
         spoiler_text: spoilerText,
-        visibility: getState().getIn(['compose', 'privacy']),
+        visibility: overridePrivacy || getState().getIn(['compose', 'privacy']),
         poll: getState().getIn(['compose', 'poll'], null),
         language: getState().getIn(['compose', 'language']),
       },
@@ -246,11 +239,6 @@ export function submitCompose(routerHistory) {
       dispatch(insertIntoTagHistory(response.data.tags, status));
       dispatch(submitComposeSuccess({ ...response.data }));
 
-      //  If the response has no data then we can't do anything else.
-      if (!response.data) {
-        return;
-      }
-
       // To make the app more responsive, immediately push the status
       // into the columns
       const insertIfOnline = timelineId => {
@@ -660,15 +648,19 @@ export const readyComposeSuggestionsTags = (token, tags) => ({
 
 export function selectComposeSuggestion(position, token, suggestion, path) {
   return (dispatch, getState) => {
-    let completion;
+    let completion, startPosition;
+
     if (suggestion.type === 'emoji') {
-      completion = suggestion.native || suggestion.colons;
+      completion    = suggestion.native || suggestion.colons;
+      startPosition = position - 1;
 
       dispatch(useEmoji(suggestion));
     } else if (suggestion.type === 'hashtag') {
-      completion = `#${suggestion.name}`;
+      completion    = `#${suggestion.name}`;
+      startPosition = position - 1;
     } else if (suggestion.type === 'account') {
-      completion = '@' + getState().getIn(['accounts', suggestion.id, 'acct']);
+      completion    = getState().getIn(['accounts', suggestion.id, 'acct']);
+      startPosition = position;
     }
 
     // We don't want to replace hashtags that vary only in case due to accessibility, but we need to fire off an event so that
@@ -676,7 +668,7 @@ export function selectComposeSuggestion(position, token, suggestion, path) {
     if (suggestion.type !== 'hashtag' || token.slice(1).localeCompare(suggestion.name, undefined, { sensitivity: 'accent' }) !== 0) {
       dispatch({
         type: COMPOSE_SUGGESTION_SELECT,
-        position,
+        position: startPosition,
         token,
         completion,
         path,
@@ -684,7 +676,7 @@ export function selectComposeSuggestion(position, token, suggestion, path) {
     } else {
       dispatch({
         type: COMPOSE_SUGGESTION_IGNORE,
-        position,
+        position: startPosition,
         token,
         completion,
         path,
@@ -786,18 +778,26 @@ export function changeComposeVisibility(value) {
   };
 }
 
-export function changeComposeContentType(value) {
-  return {
-    type: COMPOSE_CONTENT_TYPE_CHANGE,
-    value,
-  };
-}
-
-export function insertEmojiCompose(position, emoji) {
+export function insertEmojiCompose(position, emoji, needsSpace) {
   return {
     type: COMPOSE_EMOJI_INSERT,
     position,
     emoji,
+    needsSpace,
+  };
+}
+
+export function changeComposing(value) {
+  return {
+    type: COMPOSE_COMPOSING_CHANGE,
+    value,
+  };
+}
+
+export function changeComposeContentType(value) {
+  return {
+    type: COMPOSE_CONTENT_TYPE_CHANGE,
+    value,
   };
 }
 
diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index fd7caea6df..7e5209653e 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -37,10 +37,10 @@ class Account extends ImmutablePureComponent {
   static propTypes = {
     size: PropTypes.number,
     account: ImmutablePropTypes.record,
-    onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
-    onMute: PropTypes.func.isRequired,
-    onMuteNotifications: PropTypes.func.isRequired,
+    onFollow: PropTypes.func,
+    onBlock: PropTypes.func,
+    onMute: PropTypes.func,
+    onMuteNotifications: PropTypes.func,
     intl: PropTypes.object.isRequired,
     hidden: PropTypes.bool,
     minimal: PropTypes.bool,
diff --git a/app/javascript/flavours/glitch/components/autosuggest_emoji.jsx b/app/javascript/flavours/glitch/components/autosuggest_emoji.jsx
index eb25f5a643..892d068b31 100644
--- a/app/javascript/flavours/glitch/components/autosuggest_emoji.jsx
+++ b/app/javascript/flavours/glitch/components/autosuggest_emoji.jsx
@@ -35,7 +35,7 @@ export default class AutosuggestEmoji extends PureComponent {
           alt={emoji.native || emoji.colons}
         />
 
-        {emoji.colons}
+        <div className='autosuggest-emoji__name'>{emoji.colons}</div>
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/components/autosuggest_hashtag.tsx b/app/javascript/flavours/glitch/components/autosuggest_hashtag.tsx
index 6da6200142..808f303754 100644
--- a/app/javascript/flavours/glitch/components/autosuggest_hashtag.tsx
+++ b/app/javascript/flavours/glitch/components/autosuggest_hashtag.tsx
@@ -1,5 +1,3 @@
-import { FormattedMessage } from 'react-intl';
-
 import { ShortNumber } from 'flavours/glitch/components/short_number';
 
 interface Props {
@@ -16,27 +14,18 @@ interface Props {
   };
 }
 
-export const AutosuggestHashtag: React.FC<Props> = ({ tag }) => {
-  const weeklyUses = tag.history && (
-    <ShortNumber
-      value={tag.history.reduce((total, day) => total + day.uses * 1, 0)}
-    />
-  );
-
-  return (
-    <div className='autosuggest-hashtag'>
-      <div className='autosuggest-hashtag__name'>
-        #<strong>{tag.name}</strong>
-      </div>
-      {tag.history !== undefined && (
-        <div className='autosuggest-hashtag__uses'>
-          <FormattedMessage
-            id='autosuggest_hashtag.per_week'
-            defaultMessage='{count} per week'
-            values={{ count: weeklyUses }}
-          />
-        </div>
-      )}
+export const AutosuggestHashtag: React.FC<Props> = ({ tag }) => (
+  <div className='autosuggest-hashtag'>
+    <div className='autosuggest-hashtag__name'>
+      #<strong>{tag.name}</strong>
     </div>
-  );
-};
+
+    {tag.history !== undefined && (
+      <div className='autosuggest-hashtag__uses'>
+        <ShortNumber
+          value={tag.history.reduce((total, day) => total + day.uses * 1, 0)}
+        />
+      </div>
+    )}
+  </div>
+);
diff --git a/app/javascript/flavours/glitch/components/autosuggest_input.jsx b/app/javascript/flavours/glitch/components/autosuggest_input.jsx
index 6d2474b442..f707a18e1d 100644
--- a/app/javascript/flavours/glitch/components/autosuggest_input.jsx
+++ b/app/javascript/flavours/glitch/components/autosuggest_input.jsx
@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
+import Overlay from 'react-overlays/Overlay';
+
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 
 import AutosuggestEmoji from './autosuggest_emoji';
@@ -13,8 +15,8 @@ import { AutosuggestHashtag } from './autosuggest_hashtag';
 const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
   let word;
 
-  let left  = str.slice(0, caretPosition).search(/[^\s\u200B]+$/);
-  let right = str.slice(caretPosition).search(/[\s\u200B]/);
+  let left  = str.slice(0, caretPosition).search(/\S+$/);
+  let right = str.slice(caretPosition).search(/\s/);
 
   if (right < 0) {
     word = str.slice(left);
@@ -29,7 +31,7 @@ const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
   word = word.trim().toLowerCase();
 
   if (word.length > 0) {
-    return [left, word];
+    return [left + 1, word];
   } else {
     return [null, null];
   }
@@ -195,34 +197,37 @@ export default class AutosuggestInput extends ImmutablePureComponent {
 
     return (
       <div className='autosuggest-input'>
-        <label>
-          <span style={{ display: 'none' }}>{placeholder}</span>
+        <input
+          type='text'
+          ref={this.setInput}
+          disabled={disabled}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          value={value}
+          onChange={this.onChange}
+          onKeyDown={this.onKeyDown}
+          onKeyUp={onKeyUp}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          dir='auto'
+          aria-autocomplete='list'
+          aria-label={placeholder}
+          id={id}
+          className={className}
+          maxLength={maxLength}
+          lang={lang}
+          spellCheck={spellCheck}
+        />
 
-          <input
-            type='text'
-            ref={this.setInput}
-            disabled={disabled}
-            placeholder={placeholder}
-            autoFocus={autoFocus}
-            value={value}
-            onChange={this.onChange}
-            onKeyDown={this.onKeyDown}
-            onKeyUp={onKeyUp}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            dir='auto'
-            aria-autocomplete='list'
-            id={id}
-            className={className}
-            maxLength={maxLength}
-            lang={lang}
-            spellCheck={spellCheck}
-          />
-        </label>
-
-        <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
-          {suggestions.map(this.renderSuggestion)}
-        </div>
+        <Overlay show={!(suggestionsHidden || suggestions.isEmpty())} offset={[0, 0]} placement='bottom' target={this.input} popperConfig={{ strategy: 'fixed' }}>
+          {({ props }) => (
+            <div {...props}>
+              <div className='autosuggest-textarea__suggestions' style={{ width: this.input?.clientWidth }}>
+                {suggestions.map(this.renderSuggestion)}
+              </div>
+            </div>
+          )}
+        </Overlay>
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx b/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
index 28384075c3..07fbccacc9 100644
--- a/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
+++ b/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
+import Overlay from 'react-overlays/Overlay';
 import Textarea from 'react-textarea-autosize';
 
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
@@ -15,8 +16,8 @@ import { AutosuggestHashtag } from './autosuggest_hashtag';
 const textAtCursorMatchesToken = (str, caretPosition) => {
   let word;
 
-  let left  = str.slice(0, caretPosition).search(/[^\s\u200B]+$/);
-  let right = str.slice(caretPosition).search(/[\s\u200B]/);
+  let left  = str.slice(0, caretPosition).search(/\S+$/);
+  let right = str.slice(caretPosition).search(/\s/);
 
   if (right < 0) {
     word = str.slice(left);
@@ -31,7 +32,7 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
   word = word.trim().toLowerCase();
 
   if (word.length > 0) {
-    return [left, word];
+    return [left + 1, word];
   } else {
     return [null, null];
   }
@@ -52,7 +53,6 @@ const AutosuggestTextarea = forwardRef(({
   onFocus,
   autoFocus = true,
   lang,
-  children,
 }, textareaRef) => {
 
   const [suggestionsHidden, setSuggestionsHidden] = useState(true);
@@ -183,40 +183,38 @@ const AutosuggestTextarea = forwardRef(({
     );
   };
 
-  return [
-    <div className='compose-form__autosuggest-wrapper' key='autosuggest-wrapper'>
-      <div className='autosuggest-textarea'>
-        <label>
-          <span style={{ display: 'none' }}>{placeholder}</span>
+  return (
+    <div className='autosuggest-textarea'>
+      <Textarea
+        ref={textareaRef}
+        className='autosuggest-textarea__textarea'
+        disabled={disabled}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onKeyUp={onKeyUp}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onPaste={handlePaste}
+        dir='auto'
+        aria-autocomplete='list'
+        aria-label={placeholder}
+        lang={lang}
+      />
 
-          <Textarea
-            ref={textareaRef}
-            className='autosuggest-textarea__textarea'
-            disabled={disabled}
-            placeholder={placeholder}
-            autoFocus={autoFocus}
-            value={value}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            onKeyUp={onKeyUp}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            onPaste={handlePaste}
-            dir='auto'
-            aria-autocomplete='list'
-            lang={lang}
-          />
-        </label>
-      </div>
-      {children}
-    </div>,
-
-    <div className='autosuggest-textarea__suggestions-wrapper' key='suggestions-wrapper'>
-      <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
-        {suggestions.map(renderSuggestion)}
-      </div>
-    </div>,
-  ];
+      <Overlay show={!(suggestionsHidden || suggestions.isEmpty())} offset={[0, 0]} placement='bottom' target={textareaRef} popperConfig={{ strategy: 'fixed' }}>
+        {({ props }) => (
+          <div {...props}>
+            <div className='autosuggest-textarea__suggestions' style={{ width: textareaRef.current?.clientWidth }}>
+              {suggestions.map(renderSuggestion)}
+            </div>
+          </div>
+        )}
+      </Overlay>
+    </div>
+  );
 });
 
 AutosuggestTextarea.propTypes = {
@@ -232,7 +230,6 @@ AutosuggestTextarea.propTypes = {
   onKeyDown: PropTypes.func,
   onPaste: PropTypes.func.isRequired,
   onFocus:PropTypes.func,
-  children: PropTypes.node,
   autoFocus: PropTypes.bool,
   lang: PropTypes.string,
 };
diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
index bfaa53f6e5..4d9c34a762 100644
--- a/app/javascript/flavours/glitch/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
@@ -165,7 +165,7 @@ class Dropdown extends PureComponent {
     children: PropTypes.node,
     icon: PropTypes.string,
     iconComponent: PropTypes.func,
-    items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
+    items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]),
     loading: PropTypes.bool,
     size: PropTypes.number,
     title: PropTypes.string,
diff --git a/app/javascript/flavours/glitch/components/visibility_icon.tsx b/app/javascript/flavours/glitch/components/visibility_icon.tsx
index baf134c0ae..dd24c5c927 100644
--- a/app/javascript/flavours/glitch/components/visibility_icon.tsx
+++ b/app/javascript/flavours/glitch/components/visibility_icon.tsx
@@ -1,9 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
 import MailIcon from '@/material-icons/400-24px/mail.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
 
 import { Icon } from './icon';
 
@@ -11,14 +11,17 @@ type Visibility = 'public' | 'unlisted' | 'private' | 'direct';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  unlisted_short: {
+    id: 'privacy.unlisted.short',
+    defaultMessage: 'Quiet public',
+  },
   private_short: {
     id: 'privacy.private.short',
-    defaultMessage: 'Followers only',
+    defaultMessage: 'Followers',
   },
   direct_short: {
     id: 'privacy.direct.short',
-    defaultMessage: 'Mentioned people only',
+    defaultMessage: 'Specific people',
   },
 });
 
@@ -35,7 +38,7 @@ export const VisibilityIcon: React.FC<{ visibility: Visibility }> = ({
     },
     unlisted: {
       icon: 'unlock',
-      iconComponent: LockOpenIcon,
+      iconComponent: QuietTimeIcon,
       text: intl.formatMessage(messages.unlisted_short),
     },
     private: {
diff --git a/app/javascript/flavours/glitch/containers/compose_container.jsx b/app/javascript/flavours/glitch/containers/compose_container.jsx
index f76550678e..772ac5fa6b 100644
--- a/app/javascript/flavours/glitch/containers/compose_container.jsx
+++ b/app/javascript/flavours/glitch/containers/compose_container.jsx
@@ -1,14 +1,12 @@
-import { PureComponent } from 'react';
-
 import { Provider } from 'react-redux';
 
-import { fetchCustomEmojis } from '../actions/custom_emojis';
-import { hydrateStore } from '../actions/store';
-import Compose from '../features/standalone/compose';
-import initialState from '../initial_state';
-import { IntlProvider } from '../locales';
-import { store } from '../store';
-
+import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
+import { hydrateStore } from 'flavours/glitch/actions/store';
+import { Router } from 'flavours/glitch/components/router';
+import Compose from 'flavours/glitch/features/standalone/compose';
+import initialState from 'flavours/glitch/initial_state';
+import { IntlProvider } from 'flavours/glitch/locales';
+import { store } from 'flavours/glitch/store';
 
 if (initialState) {
   store.dispatch(hydrateStore(initialState));
@@ -16,16 +14,14 @@ if (initialState) {
 
 store.dispatch(fetchCustomEmojis());
 
-export default class ComposeContainer extends PureComponent {
+const ComposeContainer = () => (
+  <IntlProvider>
+    <Provider store={store}>
+      <Router>
+        <Compose />
+      </Router>
+    </Provider>
+  </IntlProvider>
+);
 
-  render () {
-    return (
-      <IntlProvider>
-        <Provider store={store}>
-          <Compose />
-        </Provider>
-      </IntlProvider>
-    );
-  }
-
-}
+export default ComposeContainer;
diff --git a/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx b/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
index de5d2369c3..7fda25ded5 100644
--- a/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
@@ -1,15 +1,13 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useCallback } from 'react';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { useDispatch } from 'react-redux';
 
-import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
-import { preferencesLink, profileLink } from 'flavours/glitch/utils/backend_links';
-
-
-import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import { openModal } from 'flavours/glitch/actions/modal';
+import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
+import { logOut } from 'flavours/glitch/utils/log_out';
 
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
@@ -25,51 +23,52 @@ const messages = defineMessages({
   filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
+  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
+  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
-class ActionBar extends PureComponent {
+export const ActionBar = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
 
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    onLogout: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
+  const handleLogoutClick = useCallback(() => {
+    dispatch(openModal({
+      modalType: 'CONFIRM',
+      modalProps: {
+        message: intl.formatMessage(messages.logoutMessage),
+        confirm: intl.formatMessage(messages.logoutConfirm),
+        closeWhenConfirm: false,
+        onConfirm: () => logOut(),
+      },
+    }));
+  }, [dispatch, intl]);
 
-  handleLogout = () => {
-    this.props.onLogout();
-  };
+  let menu = [];
 
-  render () {
-    const { intl } = this.props;
+  menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
+  menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' });
+  menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' });
+  menu.push(null);
+  menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' });
+  menu.push({ text: intl.formatMessage(messages.favourites), to: '/favourites' });
+  menu.push({ text: intl.formatMessage(messages.bookmarks), to: '/bookmarks' });
+  menu.push({ text: intl.formatMessage(messages.lists), to: '/lists' });
+  menu.push({ text: intl.formatMessage(messages.followed_tags), to: '/followed_tags' });
+  menu.push(null);
+  menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' });
+  menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
+  menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
+  menu.push({ text: intl.formatMessage(messages.filters), href: '/filters' });
+  menu.push(null);
+  menu.push({ text: intl.formatMessage(messages.logout), action: handleLogoutClick });
 
-    let menu = [];
-
-    menu.push({ text: intl.formatMessage(messages.edit_profile), href: profileLink });
-    menu.push({ text: intl.formatMessage(messages.preferences), href: preferencesLink });
-    menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' });
-    menu.push(null);
-    menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' });
-    menu.push({ text: intl.formatMessage(messages.favourites), to: '/favourites' });
-    menu.push({ text: intl.formatMessage(messages.bookmarks), to: '/bookmarks' });
-    menu.push({ text: intl.formatMessage(messages.lists), to: '/lists' });
-    menu.push({ text: intl.formatMessage(messages.followed_tags), to: '/followed_tags' });
-    menu.push(null);
-    menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' });
-    menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
-    menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
-    menu.push({ text: intl.formatMessage(messages.filters), href: '/filters' });
-    menu.push(null);
-    menu.push({ text: intl.formatMessage(messages.logout), action: this.handleLogout });
-
-    return (
-      <div className='compose__action-bar'>
-        <div className='compose__action-bar-dropdown'>
-          <DropdownMenuContainer items={menu} icon='bars' iconComponent={MenuIcon} size={24} direction='right' />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(ActionBar);
+  return (
+    <DropdownMenuContainer
+      items={menu}
+      icon='bars'
+      iconComponent={MoreHorizIcon}
+      size={24}
+      direction='right'
+    />
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx
index 6c3ee3846b..fe684c1483 100644
--- a/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx
@@ -15,8 +15,8 @@ export default class AutosuggestAccount extends ImmutablePureComponent {
 
     return (
       <div className='autosuggest-account' title={account.get('acct')}>
-        <div className='autosuggest-account-icon'><Avatar account={account} size={18} /></div>
-        <DisplayName account={account} inline />
+        <Avatar account={account} size={24} />
+        <DisplayName account={account} />
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/compose/components/character_counter.jsx b/app/javascript/flavours/glitch/features/compose/components/character_counter.jsx
index 42452b30f6..f400d1fe2f 100644
--- a/app/javascript/flavours/glitch/features/compose/components/character_counter.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/character_counter.jsx
@@ -1,26 +1,18 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
 
 import { length } from 'stringz';
 
-export default class CharacterCounter extends PureComponent {
+export const CharacterCounter = ({ text, max }) => {
+  const diff = max - length(text);
 
-  static propTypes = {
-    text: PropTypes.string.isRequired,
-    max: PropTypes.number.isRequired,
-  };
-
-  checkRemainingText (diff) {
-    if (diff < 0) {
-      return <span className='character-counter character-counter--over'>{diff}</span>;
-    }
-
-    return <span className='character-counter'>{diff}</span>;
+  if (diff < 0) {
+    return <span className='character-counter character-counter--over'>{diff}</span>;
   }
 
-  render () {
-    const diff = this.props.max - length(this.props.text);
-    return this.checkRemainingText(diff);
-  }
+  return <span className='character-counter'>{diff}</span>;
+};
 
-}
+CharacterCounter.propTypes = {
+  text: PropTypes.string.isRequired,
+  max: PropTypes.number.isRequired,
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
index 12f4f2948b..ecadf21170 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
@@ -10,35 +10,40 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { length } from 'stringz';
 
-import { maxChars } from 'flavours/glitch/initial_state';
-import { isMobile } from 'flavours/glitch/is_mobile';
 import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
 
 import AutosuggestInput from '../../../components/autosuggest_input';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
+import { Button } from '../../../components/button';
+import { maxChars } from '../../../initial_state';
 import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
-import OptionsContainer from '../containers/options_container';
-import PollFormContainer from '../containers/poll_form_container';
-import ReplyIndicatorContainer from '../containers/reply_indicator_container';
+import LanguageDropdown from '../containers/language_dropdown_container';
+import PollButtonContainer from '../containers/poll_button_container';
+import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
+import SpoilerButtonContainer from '../containers/spoiler_button_container';
+import UploadButtonContainer from '../containers/upload_button_container';
 import UploadFormContainer from '../containers/upload_form_container';
 import WarningContainer from '../containers/warning_container';
 import { countableText } from '../util/counter';
 
-import CharacterCounter from './character_counter';
-import Publisher from './publisher';
-import TextareaIcons from './textarea_icons';
+import { CharacterCounter } from './character_counter';
+import { ContentTypeButton } from './content_type_button';
+import { EditIndicator } from './edit_indicator';
+import { FederationButton } from './federation_button';
+import { NavigationBar } from './navigation_bar';
+import { PollForm } from "./poll_form";
+import { ReplyIndicator } from './reply_indicator';
+import { SecondaryPrivacyButton } from './secondary_privacy_button';
+import { ThreadModeButton } from './thread_mode_button';
+
+const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
-  missingDescriptionMessage: {
-    id: 'confirmations.missing_media_description.message',
-    defaultMessage: 'At least one media attachment is lacking a description. Consider describing all media attachments for the visually impaired before sending your toot.',
-  },
-  missingDescriptionConfirm: {
-    id: 'confirmations.missing_media_description.confirm',
-    defaultMessage: 'Send anyway',
-  },
-  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
+  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Content warning (optional)' },
+  publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
+  saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Update' },
+  reply: { id: 'compose_form.reply', defaultMessage: 'Reply' },
 });
 
 class ComposeForm extends ImmutablePureComponent {
@@ -47,11 +52,14 @@ class ComposeForm extends ImmutablePureComponent {
     text: PropTypes.string.isRequired,
     suggestions: ImmutablePropTypes.list,
     spoiler: PropTypes.bool,
+    spoilerAlwaysOn: PropTypes.bool,
     privacy: PropTypes.string,
+    sideArm: PropTypes.string,
     spoilerText: PropTypes.string,
     focusDate: PropTypes.instanceOf(Date),
     caretPosition: PropTypes.number,
     preselectDate: PropTypes.instanceOf(Date),
+    preselectOnReply: PropTypes.bool,
     isSubmitting: PropTypes.bool,
     isChangingUpload: PropTypes.bool,
     isEditing: PropTypes.bool,
@@ -64,26 +72,20 @@ class ComposeForm extends ImmutablePureComponent {
     onChangeSpoilerText: PropTypes.func.isRequired,
     onPaste: PropTypes.func.isRequired,
     onPickEmoji: PropTypes.func.isRequired,
-    showSearch: PropTypes.bool,
+    autoFocus: PropTypes.bool,
+    withoutNavigation: PropTypes.bool,
     anyMedia: PropTypes.bool,
+    media: ImmutablePropTypes.list,
+    mediaDescriptionConfirmation: PropTypes.bool,
+    onMediaDescriptionConfirm: PropTypes.func.isRequired,
     isInReply: PropTypes.bool,
     singleColumn: PropTypes.bool,
     lang: PropTypes.string,
-    advancedOptions: ImmutablePropTypes.map,
-    media: ImmutablePropTypes.list,
-    sideArm: PropTypes.string,
-    sensitive: PropTypes.bool,
-    spoilersAlwaysOn: PropTypes.bool,
-    mediaDescriptionConfirmation: PropTypes.bool,
-    preselectOnReply: PropTypes.bool,
-    onChangeSpoilerness: PropTypes.func.isRequired,
-    onChangeVisibility: PropTypes.func.isRequired,
-    onMediaDescriptionConfirm: PropTypes.func.isRequired,
     ...WithOptionalRouterPropTypes
   };
 
   static defaultProps = {
-    showSearch: false,
+    autoFocus: false,
   };
 
   state = {
@@ -101,30 +103,27 @@ class ComposeForm extends ImmutablePureComponent {
 
   handleKeyDown = (e) => {
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      this.handleSubmit();
+      this.handleSubmit(e);
     }
 
     if (e.keyCode === 13 && e.altKey) {
-      this.handleSecondarySubmit();
+      this.handleSecondarySubmit(e);
     }
   };
 
   getFulltextForCharacterCounting = () => {
-    return [
-      this.props.spoiler? this.props.spoilerText: '',
-      countableText(this.props.text),
-      this.props.advancedOptions && this.props.advancedOptions.get('do_not_federate') ? ' 👁️' : '',
-    ].join('');
+    return [this.props.spoiler? this.props.spoilerText: '', countableText(this.props.text)].join('');
   };
 
   canSubmit = () => {
     const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
     const fulltext = this.getFulltextForCharacterCounting();
+    const isOnlyWhitespace = fulltext.length !== 0 && fulltext.trim().length === 0;
 
-    return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxChars || (!fulltext.trim().length && !anyMedia));
+    return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxChars || (isOnlyWhitespace && !anyMedia));
   };
 
-  handleSubmit = (e, overriddenVisibility = null) => {
+  handleSubmit = (e, overridePrivacy = null) => {
     if (this.props.text !== this.textareaRef.current.value) {
       // Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
       // Update the state to match the current text
@@ -142,19 +141,15 @@ class ComposeForm extends ImmutablePureComponent {
     // Submit unless there are media with missing descriptions
     if (this.props.mediaDescriptionConfirmation && this.props.media && this.props.media.some(item => !item.get('description'))) {
       const firstWithoutDescription = this.props.media.find(item => !item.get('description'));
-      this.props.onMediaDescriptionConfirm(this.props.history || null, firstWithoutDescription.get('id'), overriddenVisibility);
+      this.props.onMediaDescriptionConfirm(this.props.history || null, firstWithoutDescription.get('id'), overridePrivacy);
     } else {
-      if (overriddenVisibility) {
-        this.props.onChangeVisibility(overriddenVisibility);
-      }
-      this.props.onSubmit(this.props.history || null);
+      this.props.onSubmit(this.props.history || null, overridePrivacy);
     }
   };
 
-  //  Handles the secondary submit button.
-  handleSecondarySubmit = () => {
+  handleSecondarySubmit = (e) => {
     const { sideArm } = this.props;
-    this.handleSubmit(null, sideArm === 'none' ? null : sideArm);
+    this.handleSubmit(e, sideArm === 'none' ? null : sideArm);
   };
 
   onSuggestionsClearRequested = () => {
@@ -224,7 +219,6 @@ class ComposeForm extends ImmutablePureComponent {
       Promise.resolve().then(() => {
         this.textareaRef.current.setSelectionRange(selectionStart, selectionEnd);
         this.textareaRef.current.focus();
-        if (!this.props.singleColumn) this.textareaRef.current.scrollIntoView();
         this.setState({ highlighted: true });
         this.timeout = setTimeout(() => this.setState({ highlighted: false }), 700);
       }).catch(console.error);
@@ -248,103 +242,109 @@ class ComposeForm extends ImmutablePureComponent {
   };
 
   handleEmojiPick = (data) => {
-    const position = this.textareaRef.current.selectionStart;
+    const { text }     = this.props;
+    const position     = this.textareaRef.current.selectionStart;
+    const needsSpace   = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
 
-    this.props.onPickEmoji(position, data);
+    this.props.onPickEmoji(position, data, needsSpace);
   };
 
   render () {
-    const {
-      intl,
-      advancedOptions,
-      isSubmitting,
-      onChangeSpoilerness,
-      onPaste,
-      privacy,
-      sensitive,
-      showSearch,
-      sideArm,
-      spoilersAlwaysOn,
-      isEditing,
-    } = this.props;
+    const { intl, onPaste, autoFocus, withoutNavigation } = this.props;
     const { highlighted } = this.state;
     const disabled = this.props.isSubmitting;
 
     return (
       <form className='compose-form' onSubmit={this.handleSubmit}>
+        <ReplyIndicator />
+        {!withoutNavigation && <NavigationBar />}
         <WarningContainer />
 
-        <ReplyIndicatorContainer />
+        <div className={classNames('compose-form__highlightable', { active: highlighted })} ref={this.setRef}>
+          <div className='compose-form__scrollable'>
+            <EditIndicator />
 
-        <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef} aria-hidden={!this.props.spoiler}>
-          <AutosuggestInput
-            placeholder={intl.formatMessage(messages.spoiler_placeholder)}
-            value={this.props.spoilerText}
-            onChange={this.handleChangeSpoilerText}
-            onKeyDown={this.handleKeyDown}
-            disabled={!this.props.spoiler}
-            ref={this.setSpoilerText}
-            suggestions={this.props.suggestions}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            onSuggestionSelected={this.onSpoilerSuggestionSelected}
-            searchTokens={[':']}
-            id='cw-spoiler-input'
-            className='spoiler-input__input'
-            lang={this.props.lang}
-            autoFocus={false}
-            spellCheck
-          />
-        </div>
+            {this.props.spoiler && (
+              <div className='spoiler-input'>
+                <div className='spoiler-input__border' />
 
-        <div className={classNames('compose-form__highlightable', { active: highlighted })}>
-          <AutosuggestTextarea
-            ref={this.textareaRef}
-            placeholder={intl.formatMessage(messages.placeholder)}
-            disabled={disabled}
-            value={this.props.text}
-            onChange={this.handleChange}
-            suggestions={this.props.suggestions}
-            onFocus={this.handleFocus}
-            onKeyDown={this.handleKeyDown}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            onSuggestionSelected={this.onSuggestionSelected}
-            onPaste={onPaste}
-            autoFocus={!showSearch && !isMobile(window.innerWidth)}
-            lang={this.props.lang}
-          >
-            <TextareaIcons advancedOptions={advancedOptions} />
-            <div className='compose-form__modifiers'>
-              <UploadFormContainer />
-              <PollFormContainer />
-            </div>
-          </AutosuggestTextarea>
-          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
+                <AutosuggestInput
+                  placeholder={intl.formatMessage(messages.spoiler_placeholder)}
+                  value={this.props.spoilerText}
+                  disabled={disabled}
+                  onChange={this.handleChangeSpoilerText}
+                  onKeyDown={this.handleKeyDown}
+                  ref={this.setSpoilerText}
+                  suggestions={this.props.suggestions}
+                  onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                  onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                  onSuggestionSelected={this.onSpoilerSuggestionSelected}
+                  searchTokens={[':']}
+                  id='cw-spoiler-input'
+                  className='spoiler-input__input'
+                  lang={this.props.lang}
+                  spellCheck
+                />
 
-          <div className='compose-form__buttons-wrapper'>
-            <OptionsContainer
-              advancedOptions={advancedOptions}
-              disabled={isSubmitting}
-              onToggleSpoiler={this.props.spoilersAlwaysOn ? null : onChangeSpoilerness}
-              onUpload={onPaste}
-              isEditing={isEditing}
-              sensitive={sensitive || (spoilersAlwaysOn && this.props.spoilerText && this.props.spoilerText.length > 0)}
-              spoiler={spoilersAlwaysOn ? (this.props.spoilerText && this.props.spoilerText.length > 0) : this.props.spoiler}
+                <div className='spoiler-input__border' />
+              </div>
+            )}
+
+            <AutosuggestTextarea
+              ref={this.textareaRef}
+              placeholder={intl.formatMessage(messages.placeholder)}
+              disabled={disabled}
+              value={this.props.text}
+              onChange={this.handleChange}
+              suggestions={this.props.suggestions}
+              onFocus={this.handleFocus}
+              onKeyDown={this.handleKeyDown}
+              onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+              onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+              onSuggestionSelected={this.onSuggestionSelected}
+              onPaste={onPaste}
+              autoFocus={autoFocus}
+              lang={this.props.lang}
             />
-            <div className='character-counter__wrapper'>
-              <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
+          </div>
+
+          <UploadFormContainer />
+          <PollForm />
+
+          <div className='compose-form__footer'>
+            <div className='compose-form__dropdowns'>
+              <PrivacyDropdownContainer disabled={this.props.isEditing} />
+              <LanguageDropdown />
+            </div>
+
+            <div className='compose-form__actions'>
+              <div className='compose-form__buttons'>
+                <UploadButtonContainer />
+                <PollButtonContainer />
+                {!this.props.spoilerAlwaysOn && <SpoilerButtonContainer />}
+                <ContentTypeButton />
+                <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
+                <FederationButton />
+                <ThreadModeButton />
+                <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
+              </div>
+
+              <div className='compose-form__submit'>
+                <SecondaryPrivacyButton
+                  disabled={!this.canSubmit()}
+                  privacy={this.props.sideArm}
+                  isEditing={this.props.isEditing}
+                  onClick={this.handleSecondarySubmit}
+                />
+                <Button
+                  type='submit'
+                  text={intl.formatMessage(this.props.isEditing ? messages.saveChanges : (this.props.isInReply ? messages.reply : messages.publish))}
+                  disabled={!this.canSubmit()}
+                />
+              </div>
             </div>
           </div>
         </div>
-
-        <Publisher
-          disabled={!this.canSubmit()}
-          isEditing={isEditing}
-          onSecondarySubmit={this.handleSecondarySubmit}
-          privacy={privacy}
-          sideArm={sideArm}
-        />
       </form>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/compose/components/content_type_button.jsx b/app/javascript/flavours/glitch/features/compose/components/content_type_button.jsx
new file mode 100644
index 0000000000..c1d6860bde
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/content_type_button.jsx
@@ -0,0 +1,66 @@
+import { useCallback } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import CodeIcon from '@/material-icons/400-24px/code.svg?react';
+import DescriptionIcon from '@/material-icons/400-24px/description.svg?react';
+import MarkdownIcon from '@/material-icons/400-24px/markdown.svg?react';
+import { changeComposeContentType } from 'flavours/glitch/actions/compose';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+import { DropdownIconButton } from './dropdown_icon_button';
+
+const messages = defineMessages({
+  change_content_type: { id: 'compose.content-type.change', defaultMessage: 'Change advanced formatting options' },
+  plain_text_label: { id: 'compose.content-type.plain', defaultMessage: 'Plain text' },
+  plain_text_meta: { id: 'compose.content-type.plain_meta', defaultMessage: 'Write with no advanced formatting' },
+  markdown_label: { id: 'compose.content-type.markdown', defaultMessage: 'Markdown' },
+  markdown_meta: { id: 'compose.content-type.markdown_meta', defaultMessage: 'Format your posts using Markdown' },
+  html_label: { id: 'compose.content-type.html', defaultMessage: 'HTML' },
+  html_meta: { id: 'compose.content-type.html_meta', defaultMessage: 'Format your posts using HTML' },
+});
+
+export const ContentTypeButton = () => {
+  const intl = useIntl();
+
+  const showButton = useAppSelector((state) => state.getIn(['local_settings', 'show_content_type_choice']));
+  const contentType = useAppSelector((state) => state.getIn(['compose', 'content_type']));
+  const dispatch = useAppDispatch();
+
+  const handleChange = useCallback((value) => {
+    dispatch(changeComposeContentType(value));
+  }, [dispatch]);
+
+  if (!showButton) {
+    return null;
+  }
+
+  const options = [
+    { icon: 'file-text', iconComponent: DescriptionIcon, value: 'text/plain', text: intl.formatMessage(messages.plain_text_label), meta: intl.formatMessage(messages.plain_text_meta) },
+    { icon: 'arrow-circle-down', iconComponent: MarkdownIcon, value: 'text/markdown', text: intl.formatMessage(messages.markdown_label), meta: intl.formatMessage(messages.markdown_meta) },
+    { icon: 'code', iconComponent: CodeIcon,  value: 'text/html', text: intl.formatMessage(messages.html_label), meta: intl.formatMessage(messages.html_meta) },
+  ];
+
+  const icon = {
+    'text/plain': 'file-text',
+    'text/markdown': 'arrow-circle-down',
+    'text/html': 'code',
+  }[contentType];
+
+  const iconComponent = {
+    'text/plain': DescriptionIcon,
+    'text/markdown': MarkdownIcon,
+    'text/html': CodeIcon,
+  }[contentType];
+
+  return (
+    <DropdownIconButton
+      icon={icon}
+      iconComponent={iconComponent}
+      onChange={handleChange}
+      options={options}
+      title={intl.formatMessage(messages.change_content_type)}
+      value={contentType}
+    />
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
deleted file mode 100644
index 4b9098835f..0000000000
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
+++ /dev/null
@@ -1,243 +0,0 @@
-//  Package imports.
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import classNames from 'classnames';
-
-import Overlay from 'react-overlays/Overlay';
-
-//  Components.
-import { IconButton } from 'flavours/glitch/components/icon_button';
-
-import DropdownMenu from './dropdown_menu';
-
-//  The component.
-export default class ComposerOptionsDropdown extends PureComponent {
-
-  static propTypes = {
-    isUserTouching: PropTypes.func,
-    disabled: PropTypes.bool,
-    icon: PropTypes.string,
-    iconComponent: PropTypes.func,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      icon: PropTypes.string,
-      iconComponent: PropTypes.func,
-      meta: PropTypes.string,
-      name: PropTypes.string.isRequired,
-      text: PropTypes.string,
-    })).isRequired,
-    onModalOpen: PropTypes.func,
-    onModalClose: PropTypes.func,
-    title: PropTypes.string,
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    container: PropTypes.func,
-    renderItemContents: PropTypes.func,
-    closeOnChange: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    closeOnChange: true,
-  };
-
-  state = {
-    open: false,
-    openedViaKeyboard: undefined,
-    placement: 'bottom',
-  };
-
-  //  Toggles opening and closing the dropdown.
-  handleToggle = ({ type }) => {
-    const { onModalOpen } = this.props;
-    const { open } = this.state;
-
-    if (this.props.isUserTouching && this.props.isUserTouching()) {
-      if (open) {
-        this.props.onModalClose();
-      } else {
-        const modal = this.handleMakeModal();
-        if (modal && onModalOpen) {
-          onModalOpen(modal);
-        }
-      }
-    } else {
-      if (open && this.activeElement) {
-        this.activeElement.focus({ preventScroll: true });
-      }
-      this.setState({ open: !open, openedViaKeyboard: type !== 'click' });
-    }
-  };
-
-  handleKeyDown = (e) => {
-    switch (e.key) {
-    case 'Escape':
-      this.handleClose();
-      break;
-    }
-  };
-
-  handleMouseDown = () => {
-    if (!this.state.open) {
-      this.activeElement = document.activeElement;
-    }
-  };
-
-  handleButtonKeyDown = (e) => {
-    switch(e.key) {
-    case ' ':
-    case 'Enter':
-      this.handleMouseDown();
-      break;
-    }
-  };
-
-  handleKeyPress = (e) => {
-    switch(e.key) {
-    case ' ':
-    case 'Enter':
-      this.handleToggle(e);
-      e.stopPropagation();
-      e.preventDefault();
-      break;
-    }
-  };
-
-  handleClose = () => {
-    if (this.state.open && this.activeElement) {
-      this.activeElement.focus({ preventScroll: true });
-    }
-    this.setState({ open: false });
-  };
-
-  handleItemClick = (e) => {
-    const {
-      items,
-      onChange,
-      onModalClose,
-      closeOnChange,
-    } = this.props;
-
-    const i = Number(e.currentTarget.getAttribute('data-index'));
-
-    const { name } = items[i];
-
-    e.preventDefault();  //  Prevents focus from changing
-    if (closeOnChange) onModalClose();
-    onChange(name);
-  };
-
-  //  Creates an action modal object.
-  handleMakeModal = () => {
-    const {
-      items,
-      onChange,
-      onModalOpen,
-      onModalClose,
-      value,
-    } = this.props;
-
-    //  Required props.
-    if (!(onChange && onModalOpen && onModalClose && items)) {
-      return null;
-    }
-
-    //  The object.
-    return {
-      renderItemContents: this.props.renderItemContents,
-      onClick: this.handleItemClick,
-      actions: items.map(
-        ({
-          name,
-          ...rest
-        }) => ({
-          ...rest,
-          active: value && name === value,
-          name,
-        }),
-      ),
-    };
-  };
-
-  setTargetRef = c => {
-    this.target = c;
-  };
-
-  findTarget = () => {
-    return this.target;
-  };
-
-  handleOverlayEnter = (state) => {
-    this.setState({ placement: state.placement });
-  };
-
-  //  Rendering.
-  render () {
-    const {
-      disabled,
-      title,
-      icon,
-      iconComponent,
-      items,
-      onChange,
-      value,
-      container,
-      renderItemContents,
-      closeOnChange,
-    } = this.props;
-    const { open, placement } = this.state;
-
-    return (
-      <div
-        className={classNames('privacy-dropdown', placement, { active: open })}
-        onKeyDown={this.handleKeyDown}
-        ref={this.setTargetRef}
-      >
-        <IconButton
-          active={open}
-          className='privacy-dropdown__value-icon'
-          disabled={disabled}
-          icon={icon}
-          iconComponent={iconComponent}
-          inverted
-          onClick={this.handleToggle}
-          onMouseDown={this.handleMouseDown}
-          onKeyDown={this.handleButtonKeyDown}
-          onKeyPress={this.handleKeyPress}
-          size={18}
-          style={{
-            height: null,
-            lineHeight: '27px',
-          }}
-          title={title}
-        />
-
-        <Overlay
-          containerPadding={20}
-          placement={placement}
-          show={open}
-          flip
-          target={this.findTarget}
-          container={container}
-          popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}
-        >
-          {({ props, placement }) => (
-            <div {...props}>
-              <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
-                <DropdownMenu
-                  items={items}
-                  renderItemContents={renderItemContents}
-                  onChange={onChange}
-                  onClose={this.handleClose}
-                  value={value}
-                  openedViaKeyboard={this.state.openedViaKeyboard}
-                  closeOnChange={closeOnChange}
-                />
-              </div>
-            </div>
-          )}
-        </Overlay>
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_icon_button.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown_icon_button.jsx
new file mode 100644
index 0000000000..0ced5a04ad
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_icon_button.jsx
@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import { useCallback, useState, useRef } from 'react';
+
+import Overlay from 'react-overlays/Overlay';
+
+import { IconButton } from 'flavours/glitch/components/icon_button';
+
+import DropdownMenu from './dropdown_menu';
+
+export const DropdownIconButton = ({ value, disabled, icon, onChange, iconComponent, title, options }) => {
+  const containerRef = useRef(null);
+
+  const [activeElement, setActiveElement] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [placement, setPlacement] = useState('bottom');
+
+  const handleToggle = useCallback(() => {
+    if (open && activeElement) {
+      activeElement.focus({ preventScroll: true });
+      setActiveElement(null);
+    }
+
+    setOpen(!open);
+  }, [open, setOpen, activeElement, setActiveElement]);
+
+  const handleClose = useCallback(() => {
+    if (open && activeElement) {
+      activeElement.focus({ preventScroll: true });
+      setActiveElement(null);
+    }
+
+    setOpen(false);
+  }, [open, setOpen, activeElement, setActiveElement]);
+
+  const handleOverlayEnter = useCallback((state) => {
+    setPlacement(state.placement);
+  }, [setPlacement]);
+
+  return (
+    <div ref={containerRef}>
+      <IconButton
+        disabled={disabled}
+        icon={icon}
+        onClick={handleToggle}
+        iconComponent={iconComponent}
+        title={title}
+        active={open}
+        size={18}
+        inverted
+      />
+
+      <Overlay show={open} offset={[5, 5]} placement={placement} flip target={containerRef} popperConfig={{ strategy: 'fixed', onFirstUpdate: handleOverlayEnter }}>
+        {({ props, placement }) => (
+          <div {...props}>
+            <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
+              <DropdownMenu
+                items={options}
+                value={value}
+                onClose={handleClose}
+                onChange={onChange}
+              />
+            </div>
+          </div>
+        )}
+      </Overlay>
+    </div>
+  );
+};
+
+DropdownIconButton.propTypes = {
+  value: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  iconComponent: PropTypes.func.isRequired,
+  options: PropTypes.array.isRequired,
+  title: PropTypes.string.isRequired,
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
index e5f24b51f9..2f1adf2fd1 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
@@ -1,4 +1,3 @@
-//  Package imports.
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
@@ -6,101 +5,34 @@ import classNames from 'classnames';
 
 import { supportsPassiveEvents } from 'detect-passive-events';
 
-//  Components.
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 
 const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
 
-//  The component.
-export default class ComposerOptionsDropdownContent extends PureComponent {
+// copied from PrivacyDropdown; will require refactor with upstream down the line
+class DropdownMenu extends PureComponent {
 
   static propTypes = {
-    items: PropTypes.arrayOf(PropTypes.shape({
-      icon: PropTypes.string,
-      iconComponent: PropTypes.func,
-      meta: PropTypes.node,
-      name: PropTypes.string.isRequired,
-      text: PropTypes.node,
-    })),
-    onChange: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
     style: PropTypes.object,
-    value: PropTypes.string,
-    renderItemContents: PropTypes.func,
-    openedViaKeyboard: PropTypes.bool,
-    closeOnChange: PropTypes.bool,
+    items: PropTypes.array.isRequired,
+    value: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   };
 
-  static defaultProps = {
-    style: {},
-    closeOnChange: true,
-  };
-
-  state = {
-    value: this.props.openedViaKeyboard ? this.props.items[0].name : undefined,
-  };
-
-  //  When the document is clicked elsewhere, we close the dropdown.
-  handleDocumentClick = (e) => {
+  handleDocumentClick = e => {
     if (this.node && !this.node.contains(e.target)) {
       this.props.onClose();
       e.stopPropagation();
     }
   };
 
-  //  Stores our node in `this.node`.
-  setRef = (node) => {
-    this.node = node;
-  };
-
-  //  On mounting, we add our listeners.
-  componentDidMount () {
-    document.addEventListener('click', this.handleDocumentClick, { capture: true });
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-    if (this.focusedItem) {
-      this.focusedItem.focus({ preventScroll: true });
-    } else {
-      this.node.firstChild.focus({ preventScroll: true });
-    }
-  }
-
-  //  On unmounting, we remove our listeners.
-  componentWillUnmount () {
-    document.removeEventListener('click', this.handleDocumentClick, { capture: true });
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  handleClick = (e) => {
-    const i = Number(e.currentTarget.getAttribute('data-index'));
-
-    const {
-      onChange,
-      onClose,
-      closeOnChange,
-      items,
-    } = this.props;
-
-    const { name } = items[i];
-
-    e.preventDefault();  //  Prevents change in focus on click
-    if (closeOnChange) {
-      onClose();
-    }
-    onChange(name);
-  };
-
-  // Handle changes differently whether the dropdown is a list of options or actions
-  handleChange = (name) => {
-    if (this.props.value) {
-      this.props.onChange(name);
-    } else {
-      this.setState({ value: name });
-    }
-  };
-
-  handleKeyDown = (e) => {
-    const index = Number(e.currentTarget.getAttribute('data-index'));
+  handleKeyDown = e => {
     const { items } = this.props;
+    const value = e.currentTarget.getAttribute('data-index');
+    const index = items.findIndex(item => {
+      return (item.value === value);
+    });
     let element = null;
 
     switch(e.key) {
@@ -108,7 +40,6 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
       this.props.onClose();
       break;
     case 'Enter':
-    case ' ':
       this.handleClick(e);
       break;
     case 'ArrowDown':
@@ -134,72 +65,61 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
 
     if (element) {
       element.focus();
-      this.handleChange(items[Number(element.getAttribute('data-index'))].name);
+      this.props.onChange(element.getAttribute('data-index'));
       e.preventDefault();
       e.stopPropagation();
     }
   };
 
+  handleClick = e => {
+    const value = e.currentTarget.getAttribute('data-index');
+
+    e.preventDefault();
+
+    this.props.onClose();
+    this.props.onChange(value);
+  };
+
+  componentDidMount () {
+    document.addEventListener('click', this.handleDocumentClick, { capture: true });
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+    if (this.focusedItem) this.focusedItem.focus({ preventScroll: true });
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('click', this.handleDocumentClick, { capture: true });
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+  }
+
+  setRef = c => {
+    this.node = c;
+  };
+
   setFocusRef = c => {
     this.focusedItem = c;
   };
 
-  renderItem = (item, i) => {
-    const { name, icon, iconComponent, meta, text } = item;
-
-    const active = (name === (this.props.value || this.state.value));
-
-    const computedClass = classNames('privacy-dropdown__option', { active });
-
-    let contents = this.props.renderItemContents && this.props.renderItemContents(item, i);
-
-    if (!contents) {
-      contents = (
-        <>
-          {icon && (
-            <div className='privacy-dropdown__option__icon'>
-              <Icon className='icon' id={icon} icon={iconComponent} />
-            </div>
-          )}
-
-          <div className='privacy-dropdown__option__content'>
-            <strong>{text}</strong>
-            {meta}
-          </div>
-        </>
-      );
-    }
-
-    return (
-      <div
-        className={computedClass}
-        onClick={this.handleClick}
-        onKeyDown={this.handleKeyDown}
-        role='option'
-        aria-selected={active}
-        tabIndex={0}
-        key={name}
-        data-index={i}
-        ref={active ? this.setFocusRef : null}
-      >
-        {contents}
-      </div>
-    );
-  };
-
-  //  Rendering.
   render () {
-    const {
-      items,
-      style,
-    } = this.props;
+    const { style, items, value } = this.props;
 
-    //  The result.
     return (
       <div style={{ ...style }} role='listbox' ref={this.setRef}>
-        {!!items && items.map((item, i) => this.renderItem(item, i))}
+        {items.map(item => (
+          <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
+            <div className='privacy-dropdown__option__icon'>
+              <Icon id={item.icon} icon={item.iconComponent} />
+            </div>
+
+            <div className='privacy-dropdown__option__content'>
+              <strong>{item.text}</strong>
+              {item.meta}
+            </div>
+          </div>
+        ))}
       </div>
     );
   }
 
 }
+
+export default DropdownMenu;
diff --git a/app/javascript/flavours/glitch/features/compose/components/edit_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/edit_indicator.jsx
new file mode 100644
index 0000000000..060e760f06
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/edit_indicator.jsx
@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import { cancelReplyCompose } from 'flavours/glitch/actions/compose';
+import { Icon } from 'flavours/glitch/components/icon';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { Permalink } from 'flavours/glitch/components/permalink';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
+
+const messages = defineMessages({
+  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
+});
+
+export const EditIndicator = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const id = useSelector(state => state.getIn(['compose', 'id']));
+  const status = useSelector(state => state.getIn(['statuses', id]));
+  const account = useSelector(state => state.getIn(['accounts', status?.get('account')]));
+
+  const handleCancelClick = useCallback(() => {
+    dispatch(cancelReplyCompose());
+  }, [dispatch]);
+
+  if (!status) {
+    return null;
+  }
+
+  const content = { __html: status.get('contentHtml') };
+
+  return (
+    <div className='edit-indicator'>
+      <div className='edit-indicator__header'>
+        <div className='edit-indicator__display-name'>
+          <Permalink href={account.get('url')} to={`/@${account.get('acct')}`}>@{account.get('acct')}</Permalink>
+          ·
+          <Permalink href={status.get('url')} to={`/@${account.get('acct')}/${status.get('id')}`}><RelativeTimestamp timestamp={status.get('created_at')} /></Permalink>
+        </div>
+
+        <div className='edit-indicator__cancel'>
+          <IconButton title={intl.formatMessage(messages.cancel)} icon='times' iconComponent={CloseIcon} onClick={handleCancelClick} inverted />
+        </div>
+      </div>
+
+      <div className='edit-indicator__content translate' dangerouslySetInnerHTML={content} />
+
+      {(status.get('poll') || status.get('media_attachments').size > 0) && (
+        <div className='edit-indicator__attachments'>
+          {status.get('poll') && <><Icon icon={BarChart4BarsIcon} /><FormattedMessage id='reply_indicator.poll' defaultMessage='Poll' /></>}
+          {status.get('media_attachments').size > 0 && <><Icon icon={PhotoLibraryIcon} /><FormattedMessage id='reply_indicator.attachments' defaultMessage='{count, plural, one {# attachment} other {# attachments}}' values={{ count: status.get('media_attachments').size }} /></>}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
index c371ec8570..db746eb780 100644
--- a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
@@ -10,6 +10,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
+import MoodIcon from '@/material-icons/400-24px/mood.svg?react';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { useSystemEmojiFont } from 'flavours/glitch/initial_state';
 import { assetHost } from 'flavours/glitch/utils/config';
 
@@ -323,8 +325,6 @@ class EmojiPickerDropdown extends PureComponent {
     onPickEmoji: PropTypes.func.isRequired,
     onSkinTone: PropTypes.func.isRequired,
     skinTone: PropTypes.number.isRequired,
-    button: PropTypes.node,
-    disabled: PropTypes.bool,
   };
 
   state = {
@@ -382,23 +382,24 @@ class EmojiPickerDropdown extends PureComponent {
   };
 
   render () {
-    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis, button } = this.props;
+    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
     const title = intl.formatMessage(messages.emoji);
     const { active, loading } = this.state;
 
     return (
-      <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
-        <div ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
-          {button || <img
-            className={classNames('emojione', { 'pulse-loading': active && loading })}
-            alt='blobCat emoji'
-            src={`${assetHost}/blobCat.png`}
-          />}
-        </div>
+      <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
+        <IconButton
+          title={title}
+          aria-expanded={active}
+          active={active}
+          iconComponent={MoodIcon}
+          onClick={this.onToggle}
+          inverted
+        />
 
         <Overlay show={active} placement={'bottom'} flip target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
           {({ props, placement })=> (
-            <div {...props} style={{ ...props.style, width: 299 }}>
+            <div {...props} style={{ ...props.style }}>
               <div className={`dropdown-animation ${placement}`}>
                 <EmojiPickerMenu
                   custom_emojis={this.props.custom_emojis}
diff --git a/app/javascript/flavours/glitch/features/compose/components/federation_button.jsx b/app/javascript/flavours/glitch/features/compose/components/federation_button.jsx
new file mode 100644
index 0000000000..2ac0a9d3ec
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/federation_button.jsx
@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import ShareIcon from '@/material-icons/400-24px/share.svg?react';
+import ShareOffIcon from '@/material-icons/400-24px/share_off.svg?react';
+import { changeComposeAdvancedOption } from 'flavours/glitch/actions/compose';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+import { DropdownIconButton } from './dropdown_icon_button';
+
+const messages = defineMessages({
+  change_federation_settings: { id: 'compose.change_federation', defaultMessage: 'Change federation settings' },
+  local_only_label: { id: 'federation.local_only.short', defaultMessage: 'Local-only' },
+  local_only_meta: { id: 'federation.local_only.long', defaultMessage: 'Prevent this post from reaching other servers' },
+  federated_label: { id: 'federation.federated.short', defaultMessage: 'Federated' },
+  federated_meta: { id: 'federation.federated.long', defaultMessage: 'Allow this post to reach other servers' },
+});
+
+export const FederationButton = () => {
+  const intl = useIntl();
+
+  const isEditing = useAppSelector((state) => state.getIn(['compose', 'id']) !== null);
+  const do_not_federate = useAppSelector((state) => state.getIn(['compose', 'advanced_options', 'do_not_federate']));
+  const dispatch = useAppDispatch();
+
+  const handleChange = useCallback((value) => {
+    dispatch(changeComposeAdvancedOption('do_not_federate', value === 'local-only'));
+  }, [dispatch]);
+
+  const options = [
+    { icon: 'link', iconComponent: ShareIcon, value: 'federated', text: intl.formatMessage(messages.federated_label), meta: intl.formatMessage(messages.federated_meta) },
+    { icon: 'link-slash', iconComponent: ShareOffIcon, value: 'local-only', text: intl.formatMessage(messages.local_only_label), meta: intl.formatMessage(messages.local_only_meta) },
+  ];
+
+  return (
+    <DropdownIconButton
+      disabled={isEditing}
+      icon={do_not_federate ? 'link-slash' : 'link'}
+      iconComponent={do_not_federate ? ShareOffIcon : ShareIcon}
+      onChange={handleChange}
+      options={options}
+      title={intl.formatMessage(messages.change_federation_settings)}
+      value={do_not_federate ? 'local-only' : 'federated'}
+    />
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/header.jsx b/app/javascript/flavours/glitch/features/compose/components/header.jsx
deleted file mode 100644
index bdcb51cd92..0000000000
--- a/app/javascript/flavours/glitch/features/compose/components/header.jsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { injectIntl, defineMessages } from 'react-intl';
-
-import { Link } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import LogoutIcon from '@/material-icons/400-24px/logout.svg?react';
-import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
-import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
-import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
-import PublicIcon from '@/material-icons/400-24px/public.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-import { signOutLink } from 'flavours/glitch/utils/backend_links';
-import { conditionalRender } from 'flavours/glitch/utils/react_helpers';
-
-
-const messages = defineMessages({
-  community: {
-    defaultMessage: 'Local timeline',
-    id: 'navigation_bar.community_timeline',
-  },
-  home_timeline: {
-    defaultMessage: 'Home',
-    id: 'tabs_bar.home',
-  },
-  logout: {
-    defaultMessage: 'Logout',
-    id: 'navigation_bar.logout',
-  },
-  notifications: {
-    defaultMessage: 'Notifications',
-    id: 'tabs_bar.notifications',
-  },
-  public: {
-    defaultMessage: 'Federated timeline',
-    id: 'navigation_bar.public_timeline',
-  },
-  settings: {
-    defaultMessage: 'App settings',
-    id: 'navigation_bar.app_settings',
-  },
-  start: {
-    defaultMessage: 'Getting started',
-    id: 'getting_started.heading',
-  },
-});
-
-class Header extends ImmutablePureComponent {
-
-  static propTypes = {
-    columns: ImmutablePropTypes.list,
-    unreadNotifications: PropTypes.number,
-    showNotificationsBadge: PropTypes.bool,
-    intl: PropTypes.object,
-    onSettingsClick: PropTypes.func,
-    onLogout: PropTypes.func.isRequired,
-  };
-
-  handleLogoutClick = e => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.props.onLogout();
-
-    return false;
-  };
-
-  render () {
-    const { intl, columns, unreadNotifications, showNotificationsBadge, onSettingsClick } = this.props;
-
-    //  Only renders the component if the column isn't being shown.
-    const renderForColumn = conditionalRender.bind(null,
-      columnId => !columns || !columns.some(
-        column => column.get('id') === columnId,
-      ),
-    );
-
-    //  The result.
-    return (
-      <nav className='drawer__header'>
-        <Link
-          aria-label={intl.formatMessage(messages.start)}
-          title={intl.formatMessage(messages.start)}
-          to='/getting-started'
-          className='drawer__tab'
-        ><Icon id='bars' icon={MenuIcon} /></Link>
-        {renderForColumn('HOME', (
-          <Link
-            aria-label={intl.formatMessage(messages.home_timeline)}
-            title={intl.formatMessage(messages.home_timeline)}
-            to='/home'
-            className='drawer__tab'
-          ><Icon id='home' icon={HomeIcon} /></Link>
-        ))}
-        {renderForColumn('NOTIFICATIONS', (
-          <Link
-            aria-label={intl.formatMessage(messages.notifications)}
-            title={intl.formatMessage(messages.notifications)}
-            to='/notifications'
-            className='drawer__tab'
-          >
-            <span className='icon-badge-wrapper'>
-              <Icon id='bell' icon={NotificationsIcon} />
-              { showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
-            </span>
-          </Link>
-        ))}
-        {renderForColumn('COMMUNITY', (
-          <Link
-            aria-label={intl.formatMessage(messages.community)}
-            title={intl.formatMessage(messages.community)}
-            to='/public/local'
-            className='drawer__tab'
-          ><Icon id='users' icon={PeopleIcon} /></Link>
-        ))}
-        {renderForColumn('PUBLIC', (
-          <Link
-            aria-label={intl.formatMessage(messages.public)}
-            title={intl.formatMessage(messages.public)}
-            to='/public'
-            className='drawer__tab'
-          ><Icon id='globe' icon={PublicIcon} /></Link>
-        ))}
-        <a
-          aria-label={intl.formatMessage(messages.settings)}
-          onClick={onSettingsClick}
-          href='/settings/preferences'
-          title={intl.formatMessage(messages.settings)}
-          className='drawer__tab'
-        ><Icon id='cogs' icon={ManufacturingIcon} /></a>
-        <a
-          aria-label={intl.formatMessage(messages.logout)}
-          onClick={this.handleLogoutClick}
-          href={signOutLink}
-          title={intl.formatMessage(messages.logout)}
-          className='drawer__tab'
-        ><Icon id='sign-out' icon={LogoutIcon} /></a>
-      </nav>
-    );
-  }
-
-}
-
-export default injectIntl(Header);
diff --git a/app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx
index a067f686e1..db1ce9cece 100644
--- a/app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx
@@ -9,10 +9,11 @@ import { supportsPassiveEvents } from 'detect-passive-events';
 import fuzzysort from 'fuzzysort';
 import Overlay from 'react-overlays/Overlay';
 
+import CancelIcon from '@/material-icons/400-24px/cancel-fill.svg?react';
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
+import TranslateIcon from '@/material-icons/400-24px/translate.svg?react';
+import { Icon } from 'flavours/glitch/components/icon';
 import { languages as preloadedLanguages } from 'flavours/glitch/initial_state';
-import { loupeIcon, deleteIcon } from 'flavours/glitch/utils/icons';
-
-import TextIconButton from './text_icon_button';
 
 const messages = defineMessages({
   changeLanguage: { id: 'compose.language.change', defaultMessage: 'Change language' },
@@ -231,7 +232,7 @@ class LanguageDropdownMenu extends PureComponent {
       <div ref={this.setRef}>
         <div className='emoji-mart-search'>
           <input type='search' value={searchValue} onChange={this.handleSearchChange} onKeyDown={this.handleSearchKeyDown} placeholder={intl.formatMessage(messages.search)} />
-          <button type='button' className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}>{!isSearching ? loupeIcon : deleteIcon}</button>
+          <button type='button' className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}><Icon icon={!isSearching ? SearchIcon : CancelIcon} /></button>
         </div>
 
         <div className='language-dropdown__dropdown__results emoji-mart-scroll' role='listbox' ref={this.setListRef}>
@@ -297,20 +298,24 @@ class LanguageDropdown extends PureComponent {
   render () {
     const { value, intl, frequentlyUsedLanguages } = this.props;
     const { open, placement } = this.state;
+    const current = preloadedLanguages.find(lang => lang[0] === value) ?? [];
 
     return (
-      <div className={classNames('privacy-dropdown', placement, { active: open })}>
-        <div className='privacy-dropdown__value' ref={this.setTargetRef} >
-          <TextIconButton
-            className='privacy-dropdown__value-icon'
-            label={value && value.toUpperCase()}
-            title={intl.formatMessage(messages.changeLanguage)}
-            active={open}
-            onClick={this.handleToggle}
-          />
-        </div>
+      <div ref={this.setTargetRef} onKeyDown={this.handleKeyDown}>
+        <button
+          type='button'
+          title={intl.formatMessage(messages.changeLanguage)}
+          aria-expanded={open}
+          onClick={this.handleToggle}
+          onMouseDown={this.handleMouseDown}
+          onKeyDown={this.handleButtonKeyDown}
+          className={classNames('dropdown-button', { active: open })}
+        >
+          <Icon icon={TranslateIcon} />
+          <span className='dropdown-button__label'>{current[2] ?? value}</span>
+        </button>
 
-        <Overlay show={open} placement={'bottom'} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
+        <Overlay show={open} offset={[5, 5]} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
           {({ props, placement }) => (
             <div {...props}>
               <div className={`dropdown-animation language-dropdown__dropdown ${placement}`} >
diff --git a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
index fed84359fa..ef9d01bd20 100644
--- a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
@@ -1,54 +1,36 @@
-import PropTypes from 'prop-types';
+import { useCallback } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useSelector, useDispatch } from 'react-redux';
 
-import { Permalink } from 'flavours/glitch/components/permalink';
-import { profileLink } from 'flavours/glitch/utils/backend_links';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import { cancelReplyCompose } from 'flavours/glitch/actions/compose';
+import Account from 'flavours/glitch/components/account';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { me } from 'flavours/glitch/initial_state';
 
-import { Avatar } from '../../../components/avatar';
+import { ActionBar } from './action_bar';
 
-import ActionBar from './action_bar';
 
-export default class NavigationBar extends ImmutablePureComponent {
+const messages = defineMessages({
+  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
+});
 
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    onLogout: PropTypes.func.isRequired,
-    onClose: PropTypes.func,
-  };
+export const NavigationBar = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const account = useSelector(state => state.getIn(['accounts', me]));
+  const isReplying = useSelector(state => !!state.getIn(['compose', 'in_reply_to']));
 
-  render () {
-    const username = this.props.account.get('acct');
-    return (
-      <div className='navigation-bar'>
-        <Permalink className='avatar' href={this.props.account.get('url')} to={`/@${username}`}>
-          <span style={{ display: 'none' }}>{username}</span>
-          <Avatar account={this.props.account} size={46} />
-        </Permalink>
+  const handleCancelClick = useCallback(() => {
+    dispatch(cancelReplyCompose());
+  }, [dispatch]);
 
-        <div className='navigation-bar__profile'>
-          <span>
-            <Permalink className='acct' href={this.props.account.get('url')} to={`/@${username}`}>
-              <strong className='navigation-bar__profile-account'>@{username}</strong>
-            </Permalink>
-          </span>
-
-          { profileLink !== undefined && (
-            <a
-              href={profileLink}
-              className='navigation-bar__profile-edit'
-            ><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
-          )}
-        </div>
-
-        <div className='navigation-bar__actions'>
-          <ActionBar account={this.props.account} onLogout={this.props.onLogout} />
-        </div>
-      </div>
-    );
-  }
-
-}
+  return (
+    <div className='navigation-bar'>
+      <Account account={account} minimal />
+      {isReplying ? <IconButton title={intl.formatMessage(messages.cancel)} iconComponent={CloseIcon} onClick={handleCancelClick} /> : <ActionBar />}
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx
deleted file mode 100644
index 5460960364..0000000000
--- a/app/javascript/flavours/glitch/features/compose/components/options.jsx
+++ /dev/null
@@ -1,330 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import Toggle from 'react-toggle';
-
-import AttachFileIcon from '@/material-icons/400-24px/attach_file.svg?react';
-import BrushIcon from '@/material-icons/400-24px/brush.svg?react';
-import CodeIcon from '@/material-icons/400-24px/code.svg?react';
-import DescriptionIcon from '@/material-icons/400-24px/description.svg?react';
-import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import MarkdownIcon from '@/material-icons/400-24px/markdown.svg?react';
-import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react';
-import { IconButton } from 'flavours/glitch/components/icon_button';
-import { pollLimits } from 'flavours/glitch/initial_state';
-
-
-import DropdownContainer from '../containers/dropdown_container';
-import LanguageDropdown from '../containers/language_dropdown_container';
-import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
-
-import TextIconButton from './text_icon_button';
-
-const messages = defineMessages({
-  advanced_options_icon_title: {
-    defaultMessage: 'Advanced options',
-    id: 'advanced_options.icon_title',
-  },
-  attach: {
-    defaultMessage: 'Attach...',
-    id: 'compose.attach',
-  },
-  content_type: {
-    defaultMessage: 'Content type',
-    id: 'content-type.change',
-  },
-  doodle: {
-    defaultMessage: 'Draw something',
-    id: 'compose.attach.doodle',
-  },
-  html: {
-    defaultMessage: 'HTML',
-    id: 'compose.content-type.html',
-  },
-  local_only_long: {
-    defaultMessage: 'Do not post to other instances',
-    id: 'advanced_options.local-only.long',
-  },
-  local_only_short: {
-    defaultMessage: 'Local-only',
-    id: 'advanced_options.local-only.short',
-  },
-  markdown: {
-    defaultMessage: 'Markdown',
-    id: 'compose.content-type.markdown',
-  },
-  plain: {
-    defaultMessage: 'Plain text',
-    id: 'compose.content-type.plain',
-  },
-  spoiler: {
-    defaultMessage: 'Hide text behind warning',
-    id: 'compose_form.spoiler',
-  },
-  threaded_mode_long: {
-    defaultMessage: 'Automatically opens a reply on posting',
-    id: 'advanced_options.threaded_mode.long',
-  },
-  threaded_mode_short: {
-    defaultMessage: 'Threaded mode',
-    id: 'advanced_options.threaded_mode.short',
-  },
-  upload: {
-    defaultMessage: 'Upload a file',
-    id: 'compose.attach.upload',
-  },
-  add_poll: {
-    defaultMessage: 'Add a poll',
-    id: 'poll_button.add_poll',
-  },
-  remove_poll: {
-    defaultMessage: 'Remove poll',
-    id: 'poll_button.remove_poll',
-  },
-});
-
-const mapStateToProps = (state, { name }) => ({
-  checked: state.getIn(['compose', 'advanced_options', name]),
-});
-
-class ToggleOptionImpl extends ImmutablePureComponent {
-
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    checked: PropTypes.bool,
-    onChangeAdvancedOption: PropTypes.func.isRequired,
-  };
-
-  handleChange = () => {
-    this.props.onChangeAdvancedOption(this.props.name);
-  };
-
-  render() {
-    const { meta, text, checked } = this.props;
-
-    return (
-      <>
-        <div className='privacy-dropdown__option__icon'>
-          <Toggle checked={checked} onChange={this.handleChange} />
-        </div>
-
-        <div className='privacy-dropdown__option__content'>
-          <strong>{text}</strong>
-          {meta}
-        </div>
-      </>
-    );
-  }
-
-}
-
-const ToggleOption = connect(mapStateToProps)(ToggleOptionImpl);
-
-class ComposerOptions extends ImmutablePureComponent {
-
-  static propTypes = {
-    acceptContentTypes: PropTypes.string,
-    advancedOptions: ImmutablePropTypes.map,
-    disabled: PropTypes.bool,
-    allowMedia: PropTypes.bool,
-    allowPoll: PropTypes.bool,
-    hasPoll: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    onChangeAdvancedOption: PropTypes.func.isRequired,
-    onChangeContentType: PropTypes.func.isRequired,
-    onTogglePoll: PropTypes.func.isRequired,
-    onDoodleOpen: PropTypes.func.isRequired,
-    onToggleSpoiler: PropTypes.func,
-    onUpload: PropTypes.func.isRequired,
-    contentType: PropTypes.string,
-    resetFileKey: PropTypes.number,
-    spoiler: PropTypes.bool,
-    showContentTypeChoice: PropTypes.bool,
-    isEditing: PropTypes.bool,
-  };
-
-  handleChangeFiles = ({ target: { files } }) => {
-    const { onUpload } = this.props;
-    if (files.length) {
-      onUpload(files);
-    }
-  };
-
-  handleClickAttach = (name) => {
-    const { fileElement } = this;
-    const { onDoodleOpen } = this.props;
-
-    switch (name) {
-    case 'upload':
-      if (fileElement) {
-        fileElement.click();
-      }
-      return;
-    case 'doodle':
-      onDoodleOpen();
-      return;
-    }
-  };
-
-  handleRefFileElement = (fileElement) => {
-    this.fileElement = fileElement;
-  };
-
-  renderToggleItemContents = (item) => {
-    const { onChangeAdvancedOption } = this.props;
-    const { name, meta, text } = item;
-
-    return <ToggleOption name={name} text={text} meta={meta} onChangeAdvancedOption={onChangeAdvancedOption} />;
-  };
-
-  render () {
-    const {
-      acceptContentTypes,
-      advancedOptions,
-      contentType,
-      disabled,
-      allowMedia,
-      allowPoll,
-      hasPoll,
-      onChangeAdvancedOption,
-      onChangeContentType,
-      onTogglePoll,
-      onToggleSpoiler,
-      resetFileKey,
-      spoiler,
-      showContentTypeChoice,
-      isEditing,
-      intl: { formatMessage },
-    } = this.props;
-
-    const contentTypeItems = {
-      plain: {
-        icon: 'file-text',
-        iconComponent: DescriptionIcon,
-        name: 'text/plain',
-        text: formatMessage(messages.plain),
-      },
-      html: {
-        icon: 'code',
-        iconComponent: CodeIcon,
-        name: 'text/html',
-        text: formatMessage(messages.html),
-      },
-      markdown: {
-        icon: 'arrow-circle-down',
-        iconComponent: MarkdownIcon,
-        name: 'text/markdown',
-        text: formatMessage(messages.markdown),
-      },
-    };
-
-    //  The result.
-    return (
-      <div className='compose-form__buttons'>
-        <input
-          accept={acceptContentTypes}
-          disabled={disabled || !allowMedia}
-          key={resetFileKey}
-          onChange={this.handleChangeFiles}
-          ref={this.handleRefFileElement}
-          type='file'
-          multiple
-          style={{ display: 'none' }}
-        />
-        <DropdownContainer
-          disabled={disabled || !allowMedia}
-          icon='paperclip'
-          iconComponent={AttachFileIcon}
-          items={[
-            {
-              icon: 'cloud-upload',
-              iconComponent: UploadFileIcon,
-              name: 'upload',
-              text: formatMessage(messages.upload),
-            },
-            {
-              icon: 'paint-brush',
-              iconComponent: BrushIcon,
-              name: 'doodle',
-              text: formatMessage(messages.doodle),
-            },
-          ]}
-          onChange={this.handleClickAttach}
-          title={formatMessage(messages.attach)}
-        />
-        {!!pollLimits && (
-          <IconButton
-            active={hasPoll}
-            disabled={disabled || !allowPoll}
-            icon='tasks'
-            iconComponent={InsertChartIcon}
-            inverted
-            onClick={onTogglePoll}
-            size={18}
-            style={{
-              height: null,
-              lineHeight: null,
-            }}
-            title={formatMessage(hasPoll ? messages.remove_poll : messages.add_poll)}
-          />
-        )}
-        <PrivacyDropdownContainer disabled={disabled || isEditing} />
-        {showContentTypeChoice && (
-          <DropdownContainer
-            disabled={disabled}
-            icon={(contentTypeItems[contentType.split('/')[1]] || {}).icon}
-            iconComponent={(contentTypeItems[contentType.split('/')[1]] || {}).iconComponent}
-            items={[
-              contentTypeItems.plain,
-              contentTypeItems.html,
-              contentTypeItems.markdown,
-            ]}
-            onChange={onChangeContentType}
-            title={formatMessage(messages.content_type)}
-            value={contentType}
-          />
-        )}
-        {onToggleSpoiler && (
-          <TextIconButton
-            active={spoiler}
-            ariaControls='cw-spoiler-input'
-            label='CW'
-            onClick={onToggleSpoiler}
-            title={formatMessage(messages.spoiler)}
-          />
-        )}
-        <LanguageDropdown />
-        <DropdownContainer
-          disabled={disabled || isEditing}
-          icon='ellipsis-h'
-          iconComponent={MoreHorizIcon}
-          items={advancedOptions ? [
-            {
-              meta: formatMessage(messages.local_only_long),
-              name: 'do_not_federate',
-              text: formatMessage(messages.local_only_short),
-            },
-            {
-              meta: formatMessage(messages.threaded_mode_long),
-              name: 'threaded_mode',
-              text: formatMessage(messages.threaded_mode_short),
-            },
-          ] : null}
-          onChange={onChangeAdvancedOption}
-          renderItemContents={this.renderToggleItemContents}
-          title={formatMessage(messages.advanced_options_icon_title)}
-          closeOnChange={false}
-        />
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(ComposerOptions);
diff --git a/app/javascript/flavours/glitch/features/compose/components/poll_button.jsx b/app/javascript/flavours/glitch/features/compose/components/poll_button.jsx
new file mode 100644
index 0000000000..345497abd3
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/poll_button.jsx
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
+
+import { IconButton } from '../../../components/icon_button';
+
+const messages = defineMessages({
+  add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
+  remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
+});
+
+const iconStyle = {
+  height: null,
+  lineHeight: '27px',
+};
+
+class PollButton extends PureComponent {
+
+  static propTypes = {
+    disabled: PropTypes.bool,
+    active: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  handleClick = () => {
+    this.props.onClick();
+  };
+
+  render () {
+    const { intl, active, disabled } = this.props;
+
+    return (
+      <div className='compose-form__poll-button'>
+        <IconButton
+          icon='tasks'
+          iconComponent={BarChart4BarsIcon}
+          title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
+          disabled={disabled}
+          onClick={this.handleClick}
+          className={`compose-form__poll-button-icon ${active ? 'active' : ''}`}
+          size={18}
+          inverted
+          style={iconStyle}
+        />
+      </div>
+    );
+  }
+
+}
+
+export default injectIntl(PollButton);
diff --git a/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx b/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
index 6cc5ee8516..34b35088fc 100644
--- a/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
@@ -1,179 +1,163 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useCallback } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useDispatch, useSelector } from 'react-redux';
 
-
-import AddIcon from '@/material-icons/400-24px/add.svg?react';
-import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import {
+  changePollSettings,
+  changePollOption,
+  clearComposeSuggestions,
+  fetchComposeSuggestions,
+  selectComposeSuggestion,
+} from 'flavours/glitch/actions/compose';
 import AutosuggestInput from 'flavours/glitch/components/autosuggest_input';
-import { Icon }  from 'flavours/glitch/components/icon';
-import { IconButton } from 'flavours/glitch/components/icon_button';
 import { pollLimits } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
-  option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
-  add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
-  remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
-  poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
-  single_choice: { id: 'compose_form.poll.single_choice', defaultMessage: 'Allow one choice' },
-  multiple_choices: { id: 'compose_form.poll.multiple_choices', defaultMessage: 'Allow multiple choices' },
+  option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Option {number}' },
+  add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add option' },
+  remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this option' },
+  duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll length' },
+  type: { id: 'compose_form.poll.type', defaultMessage: 'Style' },
+  switchToMultiple: { id: 'compose_form.poll.switch_to_multiple', defaultMessage: 'Change poll to allow multiple choices' },
+  switchToSingle: { id: 'compose_form.poll.switch_to_single', defaultMessage: 'Change poll to allow for a single choice' },
   minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
   hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
   days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
+  singleChoice: { id: 'compose_form.poll.single', defaultMessage: 'Pick one' },
+  multipleChoice: { id: 'compose_form.poll.multiple', defaultMessage: 'Multiple choice' },
 });
 
-class OptionIntl extends PureComponent {
+const Select = ({ label, options, value, onChange }) => {
+  return (
+    <label className='compose-form__poll__select'>
+      <span className='compose-form__poll__select__label'>{label}</span>
 
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    lang: PropTypes.string,
-    index: PropTypes.number.isRequired,
-    isPollMultiple: PropTypes.bool,
-    autoFocus: PropTypes.bool,
-    onChange: PropTypes.func.isRequired,
-    onRemove: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    onClearSuggestions: PropTypes.func.isRequired,
-    onFetchSuggestions: PropTypes.func.isRequired,
-    onSuggestionSelected: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
+      <select className='compose-form__poll__select__value' value={value} onChange={onChange}>
+        {options.map((option, i) => (
+          <option key={i} value={option.value}>{option.label}</option>
+        ))}
+      </select>
+    </label>
+  );
+};
 
-  handleOptionTitleChange = e => {
-    this.props.onChange(this.props.index, e.target.value);
-  };
+Select.propTypes = {
+  label: PropTypes.node,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.node,
+    value: PropTypes.any,
+  })),
+};
 
-  handleOptionRemove = () => {
-    this.props.onRemove(this.props.index);
-  };
+const Option = ({ multipleChoice, index, title, autoFocus }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const suggestions = useSelector(state => state.getIn(['compose', 'suggestions']));
+  const lang = useSelector(state => state.getIn(['compose', 'language']));
 
-  onSuggestionsClearRequested = () => {
-    this.props.onClearSuggestions();
-  };
+  const handleChange = useCallback(({ target: { value } }) => {
+    dispatch(changePollOption(index, value));
+  }, [dispatch, index]);
 
-  onSuggestionsFetchRequested = (token) => {
-    this.props.onFetchSuggestions(token);
-  };
+  const handleSuggestionsFetchRequested = useCallback(token => {
+    dispatch(fetchComposeSuggestions(token));
+  }, [dispatch]);
 
-  onSuggestionSelected = (tokenStart, token, value) => {
-    this.props.onSuggestionSelected(tokenStart, token, value, ['poll', 'options', this.props.index]);
-  };
+  const handleSuggestionsClearRequested = useCallback(() => {
+    dispatch(clearComposeSuggestions());
+  }, [dispatch]);
 
-  render () {
-    const { isPollMultiple, title, lang, index, autoFocus, intl } = this.props;
+  const handleSuggestionSelected = useCallback((tokenStart, token, value) => {
+    dispatch(selectComposeSuggestion(tokenStart, token, value, ['poll', 'options', index]));
+  }, [dispatch, index]);
 
-    return (
-      <li>
-        <label className='poll__option editable'>
-          <span className={classNames('poll__input', { checkbox: isPollMultiple })} />
+  return (
+    <label className={classNames('poll__option editable', { empty: index > 1 && title.length === 0 })}>
+      <span className={classNames('poll__input', { checkbox: multipleChoice })} />
 
-          <AutosuggestInput
-            placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
-            maxLength={pollLimits.max_option_chars}
-            value={title}
-            lang={lang}
-            spellCheck
-            onChange={this.handleOptionTitleChange}
-            suggestions={this.props.suggestions}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            onSuggestionSelected={this.onSuggestionSelected}
-            searchTokens={[':']}
-            autoFocus={autoFocus}
-          />
-        </label>
+      <AutosuggestInput
+        placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
+        maxLength={pollLimits.max_option_chars}
+        value={title}
+        lang={lang}
+        spellCheck
+        onChange={handleChange}
+        suggestions={suggestions}
+        onSuggestionsFetchRequested={handleSuggestionsFetchRequested}
+        onSuggestionsClearRequested={handleSuggestionsClearRequested}
+        onSuggestionSelected={handleSuggestionSelected}
+        searchTokens={[':']}
+        autoFocus={autoFocus}
+      />
+    </label>
+  );
+};
 
-        <div className='poll__cancel'>
-          <IconButton disabled={index < pollLimits.min_options} title={intl.formatMessage(messages.remove_option)} icon='times' iconComponent={CloseIcon} onClick={this.handleOptionRemove} />
-        </div>
-      </li>
-    );
+Option.propTypes = {
+  title: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  multipleChoice: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+};
+
+export const PollForm = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const poll = useSelector(state => state.getIn(['compose', 'poll']));
+  const options = poll?.get('options');
+  const expiresIn = poll?.get('expires_in');
+  const isMultiple = poll?.get('multiple');
+
+  const handleDurationChange = useCallback(({ target: { value } }) => {
+    dispatch(changePollSettings(value, isMultiple));
+  }, [dispatch, isMultiple]);
+
+  const handleTypeChange = useCallback(({ target: { value } }) => {
+    dispatch(changePollSettings(expiresIn, value === 'true'));
+  }, [dispatch, expiresIn]);
+
+  if (poll === null) {
+    return null;
   }
 
-}
+  return (
+    <div className='compose-form__poll'>
+      {options.map((title, i) => (
+        <Option
+          title={title}
+          key={i}
+          index={i}
+          multipleChoice={isMultiple}
+          autoFocus={i === 0}
+        />
+      ))}
 
-const Option = injectIntl(OptionIntl);
+      <div className='compose-form__poll__footer'>
+        <Select label={intl.formatMessage(messages.duration)} options={[
+          { value: 300, label: intl.formatMessage(messages.minutes, { number: 5 })},
+          { value: 1800, label: intl.formatMessage(messages.minutes, { number: 30 })},
+          { value: 3600, label: intl.formatMessage(messages.hours, { number: 1 })},
+          { value: 21600, label: intl.formatMessage(messages.hours, { number: 6 })},
+          { value: 43200, label: intl.formatMessage(messages.hours, { number: 12 })},
+          { value: 86400, label: intl.formatMessage(messages.days, { number: 1 })},
+          { value: 259200, label: intl.formatMessage(messages.days, { number: 3 })},
+          { value: 604800, label: intl.formatMessage(messages.days, { number: 7 })},
+        ]} value={expiresIn} onChange={handleDurationChange} />
 
-class PollForm extends ImmutablePureComponent {
+        <div className='compose-form__poll__footer__sep' />
 
-  static propTypes = {
-    options: ImmutablePropTypes.list,
-    lang: PropTypes.string,
-    expiresIn: PropTypes.number,
-    isMultiple: PropTypes.bool,
-    onChangeOption: PropTypes.func.isRequired,
-    onAddOption: PropTypes.func.isRequired,
-    onRemoveOption: PropTypes.func.isRequired,
-    onChangeSettings: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    onClearSuggestions: PropTypes.func.isRequired,
-    onFetchSuggestions: PropTypes.func.isRequired,
-    onSuggestionSelected: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleAddOption = () => {
-    this.props.onAddOption('');
-  };
-
-  handleSelectDuration = e => {
-    this.props.onChangeSettings(e.target.value, this.props.isMultiple);
-  };
-
-  handleSelectMultiple = e => {
-    this.props.onChangeSettings(this.props.expiresIn, e.target.value === 'true');
-  };
-
-  render () {
-    const { options, lang, expiresIn, isMultiple, onChangeOption, onRemoveOption, intl, ...other } = this.props;
-
-    if (!options) {
-      return null;
-    }
-
-    const autoFocusIndex = options.indexOf('');
-
-    return (
-      <div className='compose-form__poll-wrapper'>
-        <ul>
-          {options.map((title, i) => <Option title={title} lang={lang} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} autoFocus={i === autoFocusIndex} {...other} />)}
-          {options.size < pollLimits.max_options && (
-            <label className='poll__text editable'>
-              <span className={classNames('poll__input')} style={{ opacity: 0 }} />
-              <button className='button button-secondary' onClick={this.handleAddOption} type='button'><Icon id='plus' icon={AddIcon} /> <FormattedMessage {...messages.add_option} /></button>
-            </label>
-          )}
-        </ul>
-
-        <div className='poll__footer'>
-          {/* eslint-disable-next-line jsx-a11y/no-onchange */}
-          <select value={isMultiple ? 'true' : 'false'} onChange={this.handleSelectMultiple}>
-            <option value='false'>{intl.formatMessage(messages.single_choice)}</option>
-            <option value='true'>{intl.formatMessage(messages.multiple_choices)}</option>
-          </select>
-
-          {/* eslint-disable-next-line jsx-a11y/no-onchange */}
-          <select value={expiresIn} onChange={this.handleSelectDuration}>
-            <option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option>
-            <option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option>
-            <option value={3600}>{intl.formatMessage(messages.hours, { number: 1 })}</option>
-            <option value={21600}>{intl.formatMessage(messages.hours, { number: 6 })}</option>
-            <option value={43200}>{intl.formatMessage(messages.hours, { number: 12 })}</option>
-            <option value={86400}>{intl.formatMessage(messages.days, { number: 1 })}</option>
-            <option value={259200}>{intl.formatMessage(messages.days, { number: 3 })}</option>
-            <option value={604800}>{intl.formatMessage(messages.days, { number: 7 })}</option>
-          </select>
-        </div>
+        <Select label={intl.formatMessage(messages.type)} options={[
+          { value: false, label: intl.formatMessage(messages.singleChoice) },
+          { value: true, label: intl.formatMessage(messages.multipleChoice) },
+        ]} value={isMultiple} onChange={handleTypeChange} />
       </div>
-    );
-  }
-
-}
-
-export default injectIntl(PollForm);
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
index 7980c1007e..8a49f71511 100644
--- a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
@@ -3,25 +3,151 @@ import { PureComponent } from 'react';
 
 import { injectIntl, defineMessages } from 'react-intl';
 
-import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
-import MailIcon from '@/material-icons/400-24px/mail.svg?react';
-import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import classNames from 'classnames';
 
-import Dropdown from './dropdown';
+import { supportsPassiveEvents } from 'detect-passive-events';
+import Overlay from 'react-overlays/Overlay';
+
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
+import { Icon }  from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for all' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Visible for all, but opted-out of discovery features' },
-  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers only' },
-  private_long: { id: 'privacy.private.long', defaultMessage: 'Visible for followers only' },
-  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
-  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Visible for mentioned users only' },
-  change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' },
+  public_long: { id: 'privacy.public.long', defaultMessage: 'Anyone on and off Mastodon' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Quiet public' },
+  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Fewer algorithmic fanfares' },
+  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers' },
+  private_long: { id: 'privacy.private.long', defaultMessage: 'Only your followers' },
+  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Specific people' },
+  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Everyone mentioned in the post' },
+  change_privacy: { id: 'privacy.change', defaultMessage: 'Change post privacy' },
+  unlisted_extra: { id: 'privacy.unlisted.additional', defaultMessage: 'This behaves exactly like public, except the post will not appear in live feeds or hashtags, explore, or Mastodon search, even if you are opted-in account-wide.' },
 });
 
+const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
+
+class PrivacyDropdownMenu extends PureComponent {
+
+  static propTypes = {
+    style: PropTypes.object,
+    items: PropTypes.array.isRequired,
+    value: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+  };
+
+  handleDocumentClick = e => {
+    if (this.node && !this.node.contains(e.target)) {
+      this.props.onClose();
+      e.stopPropagation();
+    }
+  };
+
+  handleKeyDown = e => {
+    const { items } = this.props;
+    const value = e.currentTarget.getAttribute('data-index');
+    const index = items.findIndex(item => {
+      return (item.value === value);
+    });
+    let element = null;
+
+    switch(e.key) {
+    case 'Escape':
+      this.props.onClose();
+      break;
+    case 'Enter':
+      this.handleClick(e);
+      break;
+    case 'ArrowDown':
+      element = this.node.childNodes[index + 1] || this.node.firstChild;
+      break;
+    case 'ArrowUp':
+      element = this.node.childNodes[index - 1] || this.node.lastChild;
+      break;
+    case 'Tab':
+      if (e.shiftKey) {
+        element = this.node.childNodes[index - 1] || this.node.lastChild;
+      } else {
+        element = this.node.childNodes[index + 1] || this.node.firstChild;
+      }
+      break;
+    case 'Home':
+      element = this.node.firstChild;
+      break;
+    case 'End':
+      element = this.node.lastChild;
+      break;
+    }
+
+    if (element) {
+      element.focus();
+      this.props.onChange(element.getAttribute('data-index'));
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  handleClick = e => {
+    const value = e.currentTarget.getAttribute('data-index');
+
+    e.preventDefault();
+
+    this.props.onClose();
+    this.props.onChange(value);
+  };
+
+  componentDidMount () {
+    document.addEventListener('click', this.handleDocumentClick, { capture: true });
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+    if (this.focusedItem) this.focusedItem.focus({ preventScroll: true });
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('click', this.handleDocumentClick, { capture: true });
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+  }
+
+  setRef = c => {
+    this.node = c;
+  };
+
+  setFocusRef = c => {
+    this.focusedItem = c;
+  };
+
+  render () {
+    const { style, items, value } = this.props;
+
+    return (
+      <div style={{ ...style }} role='listbox' ref={this.setRef}>
+        {items.map(item => (
+          <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
+            <div className='privacy-dropdown__option__icon'>
+              <Icon id={item.icon} icon={item.iconComponent} />
+            </div>
+
+            <div className='privacy-dropdown__option__content'>
+              <strong>{item.text}</strong>
+              {item.meta}
+            </div>
+
+            {item.extra && (
+              <div className='privacy-dropdown__option__additional' title={item.extra}>
+                <Icon id='info-circle' icon={InfoIcon} />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+}
+
 class PrivacyDropdown extends PureComponent {
 
   static propTypes = {
@@ -36,62 +162,118 @@ class PrivacyDropdown extends PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  render () {
-    const { value, onChange, onModalOpen, onModalClose, disabled, noDirect, container, isUserTouching, intl: { formatMessage } } = this.props;
+  state = {
+    open: false,
+    placement: 'bottom',
+  };
 
-    //  We predefine our privacy items so that we can easily pick the
-    //  dropdown icon later.
-    const privacyItems = {
-      direct: {
-        icon: 'envelope',
-        iconComponent: MailIcon,
-        meta: formatMessage(messages.direct_long),
-        name: 'direct',
-        text: formatMessage(messages.direct_short),
-      },
-      private: {
-        icon: 'lock',
-        iconComponent: LockIcon,
-        meta: formatMessage(messages.private_long),
-        name: 'private',
-        text: formatMessage(messages.private_short),
-      },
-      public: {
-        icon: 'globe',
-        iconComponent: PublicIcon,
-        meta: formatMessage(messages.public_long),
-        name: 'public',
-        text: formatMessage(messages.public_short),
-      },
-      unlisted: {
-        icon: 'unlock',
-        iconComponent: LockOpenIcon,
-        meta: formatMessage(messages.unlisted_long),
-        name: 'unlisted',
-        text: formatMessage(messages.unlisted_short),
-      },
-    };
-
-    const items = [privacyItems.public, privacyItems.unlisted, privacyItems.private];
-
-    if (!noDirect) {
-      items.push(privacyItems.direct);
+  handleToggle = () => {
+    if (this.state.open && this.activeElement) {
+      this.activeElement.focus({ preventScroll: true });
     }
 
+    this.setState({ open: !this.state.open });
+  };
+
+  handleKeyDown = e => {
+    switch(e.key) {
+    case 'Escape':
+      this.handleClose();
+      break;
+    }
+  };
+
+  handleMouseDown = () => {
+    if (!this.state.open) {
+      this.activeElement = document.activeElement;
+    }
+  };
+
+  handleButtonKeyDown = (e) => {
+    switch(e.key) {
+    case ' ':
+    case 'Enter':
+      this.handleMouseDown();
+      break;
+    }
+  };
+
+  handleClose = () => {
+    if (this.state.open && this.activeElement) {
+      this.activeElement.focus({ preventScroll: true });
+    }
+    this.setState({ open: false });
+  };
+
+  handleChange = value => {
+    this.props.onChange(value);
+  };
+
+  UNSAFE_componentWillMount () {
+    const { intl: { formatMessage } } = this.props;
+
+    this.options = [
+      { icon: 'globe', iconComponent: PublicIcon, value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) },
+      { icon: 'unlock', iconComponent: QuietTimeIcon,  value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long), extra: formatMessage(messages.unlisted_extra) },
+      { icon: 'lock', iconComponent: LockIcon, value: 'private', text: formatMessage(messages.private_short), meta: formatMessage(messages.private_long) },
+    ];
+
+    if (!this.props.noDirect) {
+      this.options.push(
+        { icon: 'at', iconComponent: AlternateEmailIcon, value: 'direct', text: formatMessage(messages.direct_short), meta: formatMessage(messages.direct_long) },
+      );
+    }
+  }
+
+  setTargetRef = c => {
+    this.target = c;
+  };
+
+  findTarget = () => {
+    return this.target;
+  };
+
+  handleOverlayEnter = (state) => {
+    this.setState({ placement: state.placement });
+  };
+
+  render () {
+    const { value, container, disabled, intl } = this.props;
+    const { open, placement } = this.state;
+
+    const valueOption = this.options.find(item => item.value === value);
+
     return (
-      <Dropdown
-        disabled={disabled}
-        icon={(privacyItems[value] || {}).icon}
-        iconComponent={(privacyItems[value] || {}).iconComponent}
-        items={items}
-        onChange={onChange}
-        isUserTouching={isUserTouching}
-        onModalClose={onModalClose}
-        onModalOpen={onModalOpen}
-        title={formatMessage(messages.change_privacy)}
-        container={container}
-        value={value}
-      />
+      <div ref={this.setTargetRef} onKeyDown={this.handleKeyDown}>
+        <button
+          type='button'
+          title={intl.formatMessage(messages.change_privacy)}
+          aria-expanded={open}
+          onClick={this.handleToggle}
+          onMouseDown={this.handleMouseDown}
+          onKeyDown={this.handleButtonKeyDown}
+          disabled={disabled}
+          className={classNames('dropdown-button', { active: open })}
+        >
+          <Icon id={valueOption.icon} icon={valueOption.iconComponent} />
+          <span className='dropdown-button__label'>{valueOption.text}</span>
+        </button>
+
+        <Overlay show={open} offset={[5, 5]} placement={placement} flip target={this.findTarget} container={container} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
+          {({ props, placement }) => (
+            <div {...props}>
+              <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
+                <PrivacyDropdownMenu
+                  items={this.options}
+                  value={value}
+                  onClose={this.handleClose}
+                  onChange={this.handleChange}
+                />
+              </div>
+            </div>
+          )}
+        </Overlay>
+      </div>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.jsx b/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
deleted file mode 100644
index ff825ca0c9..0000000000
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
-import MailIcon from '@/material-icons/400-24px/mail.svg?react';
-import PublicIcon from '@/material-icons/400-24px/public.svg?react';
-import { Button } from 'flavours/glitch/components/button';
-import { Icon } from 'flavours/glitch/components/icon';
-
-
-const messages = defineMessages({
-  publish: {
-    defaultMessage: 'Publish',
-    id: 'compose_form.publish',
-  },
-  publishLoud: {
-    defaultMessage: '{publish}!',
-    id: 'compose_form.publish_loud',
-  },
-  saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Save changes' },
-  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  private: { id: 'privacy.private.short', defaultMessage: 'Followers only' },
-  direct: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
-});
-
-class Publisher extends ImmutablePureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    onSecondarySubmit: PropTypes.func,
-    privacy: PropTypes.oneOf(['direct', 'private', 'unlisted', 'public']),
-    sideArm: PropTypes.oneOf(['none', 'direct', 'private', 'unlisted', 'public']),
-    isEditing: PropTypes.bool,
-  };
-
-  render () {
-    const { disabled, intl, onSecondarySubmit, privacy, sideArm, isEditing } = this.props;
-
-    const privacyIcons = {
-      direct: {
-        id: 'envelope',
-        icon: MailIcon,
-      },
-      private: {
-        id: 'lock',
-        icon: LockIcon,
-      },
-      public: {
-        id: 'globe',
-        icon: PublicIcon,
-      },
-      unlisted: {
-        id: 'unlock',
-        icon: LockOpenIcon,
-      },
-    };
-
-    let publishText;
-    if (isEditing) {
-      publishText = intl.formatMessage(messages.saveChanges);
-    } else if (privacy === 'private' || privacy === 'direct') {
-      const icon = privacyIcons[privacy];
-      publishText = (
-        <span>
-          <Icon {...icon} /> {intl.formatMessage(messages.publish)}
-        </span>
-      );
-    } else {
-      publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
-    }
-
-    const privacyNames = {
-      public: messages.public,
-      unlisted: messages.unlisted,
-      private: messages.private,
-      direct: messages.direct,
-    };
-
-    return (
-      <div className='compose-form__publish'>
-        {sideArm && !isEditing && sideArm !== 'none' && (
-          <div className='compose-form__publish-button-wrapper'>
-            <Button
-              className='side_arm'
-              disabled={disabled}
-              onClick={onSecondarySubmit}
-              style={{ padding: null }}
-              text={<Icon {...privacyIcons[sideArm]} />}
-              title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
-            />
-          </div>
-        )}
-        <div className='compose-form__publish-button-wrapper'>
-          <Button
-            className='primary'
-            type='submit'
-            text={publishText}
-            title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
-            disabled={disabled}
-          />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(Publisher);
diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
index 8af8cd441a..b24f7ced99 100644
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@@ -1,75 +1,47 @@
-import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
+import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import { Avatar } from 'flavours/glitch/components/avatar';
+import { DisplayName } from 'flavours/glitch/components/display_name';
+import { Icon } from 'flavours/glitch/components/icon';
+import { Permalink } from 'flavours/glitch/components/permalink';
 
+export const ReplyIndicator = () => {
+  const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
+  const status = useSelector(state => state.getIn(['statuses', inReplyToId]));
+  const account = useSelector(state => state.getIn(['accounts', status?.get('account')]));
 
-import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import AttachmentList from 'flavours/glitch/components/attachment_list';
-import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
+  if (!status) {
+    return null;
+  }
 
-import { Avatar } from '../../../components/avatar';
-import { DisplayName } from '../../../components/display_name';
-import { IconButton } from '../../../components/icon_button';
+  const content = { __html: status.get('contentHtml') };
 
-const messages = defineMessages({
-  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
-});
+  return (
+    <div className='reply-indicator'>
+      <div className='reply-indicator__line' />
 
-class ReplyIndicator extends ImmutablePureComponent {
+      <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'>
+        <Avatar account={account} size={46} />
+      </Permalink>
 
-  static propTypes = {
-    status: ImmutablePropTypes.map,
-    onCancel: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    ...WithOptionalRouterPropTypes,
-  };
-
-  handleClick = () => {
-    this.props.onCancel();
-  };
-
-  handleAccountClick = (e) => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.props.history?.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
-    }
-  };
-
-  render () {
-    const { status, intl } = this.props;
-
-    if (!status) {
-      return null;
-    }
-
-    const content = { __html: status.get('contentHtml') };
-
-    return (
-      <div className='reply-indicator'>
-        <div className='reply-indicator__header'>
-          <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' iconComponent={CloseIcon} onClick={this.handleClick} inverted /></div>
-
-          <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' target='_blank' rel='noopener noreferrer'>
-            <div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
-            <DisplayName account={status.get('account')} inline />
-          </a>
-        </div>
+      <div className='reply-indicator__main'>
+        <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='detailed-status__display-name'>
+          <DisplayName account={account} />
+        </Permalink>
 
         <div className='reply-indicator__content translate' dangerouslySetInnerHTML={content} />
 
-        {status.get('media_attachments').size > 0 && (
-          <AttachmentList
-            compact
-            media={status.get('media_attachments')}
-          />
+        {(status.get('poll') || status.get('media_attachments').size > 0) && (
+          <div className='reply-indicator__attachments'>
+            {status.get('poll') && <><Icon icon={BarChart4BarsIcon} /><FormattedMessage id='reply_indicator.poll' defaultMessage='Poll' /></>}
+            {status.get('media_attachments').size > 0 && <><Icon icon={PhotoLibraryIcon} /><FormattedMessage id='reply_indicator.attachments' defaultMessage='{count, plural, one {# attachment} other {# attachments}}' values={{ count: status.get('media_attachments').size }} /></>}
+          </div>
         )}
       </div>
-    );
-  }
-
-}
-
-export default withOptionalRouter(injectIntl(ReplyIndicator));
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/search.jsx b/app/javascript/flavours/glitch/features/compose/components/search.jsx
index fa995663f0..4b64038f57 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx
@@ -8,7 +8,6 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-
 import CancelIcon from '@/material-icons/400-24px/cancel-fill.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import SearchIcon from '@/material-icons/400-24px/search.svg?react';
@@ -186,9 +185,9 @@ class Search extends PureComponent {
   };
 
   handleURLClick = () => {
-    const { onOpenURL, history } = this.props;
+    const { value, onOpenURL, history } = this.props;
 
-    onOpenURL(history);
+    onOpenURL(value, history);
     this._unfocus();
   };
 
@@ -331,7 +330,7 @@ class Search extends PureComponent {
           type='text'
           placeholder={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)}
           aria-label={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)}
-          value={value || ''}
+          value={value}
           onChange={this.handleChange}
           onKeyDown={this.handleKeyDown}
           onFocus={this.handleFocus}
@@ -339,8 +338,8 @@ class Search extends PureComponent {
         />
 
         <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' icon={SearchIcon}  className={hasValue ? '' : 'active'} />
-          <Icon id='times-circle' icon={CancelIcon} className={hasValue ? 'active' : ''} />
+          <Icon id='search' icon={SearchIcon} className={hasValue ? '' : 'active'} />
+          <Icon id='times-circle' icon={CancelIcon} className={hasValue ? 'active' : ''} aria-label={intl.formatMessage(messages.placeholder)} />
         </div>
 
         <div className='search__popout'>
diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
index 0eb2239f80..b759eac90b 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
@@ -13,7 +13,6 @@ import { Icon }  from 'flavours/glitch/components/icon';
 import { LoadMore } from 'flavours/glitch/components/load_more';
 import { SearchSection } from 'flavours/glitch/features/explore/components/search_section';
 
-
 import { ImmutableHashtag as Hashtag } from '../../../components/hashtag';
 import AccountContainer from '../../../containers/account_container';
 import StatusContainer from '../../../containers/status_container';
@@ -77,10 +76,10 @@ class SearchResults extends ImmutablePureComponent {
 
     return (
       <div className='search-results'>
-        <header className='search-results__header'>
+        <div className='search-results__header'>
           <Icon id='search' icon={SearchIcon} />
           <FormattedMessage id='explore.search_results' defaultMessage='Search results' />
-        </header>
+        </div>
 
         {accounts}
         {hashtags}
diff --git a/app/javascript/flavours/glitch/features/compose/components/secondary_privacy_button.jsx b/app/javascript/flavours/glitch/features/compose/components/secondary_privacy_button.jsx
new file mode 100644
index 0000000000..c78d7b8617
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/secondary_privacy_button.jsx
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
+import { Button } from 'flavours/glitch/components/button';
+import { Icon } from 'flavours/glitch/components/icon';
+
+const messages = defineMessages({
+  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Quiet public' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers' },
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Specific people' },
+});
+
+export const SecondaryPrivacyButton = ({ disabled, privacy, isEditing, onClick }) => {
+  const intl = useIntl();
+
+  if (isEditing || !privacy || privacy === 'none') {
+    return null;
+  }
+
+  const privacyProps = {
+    direct: { icon: 'envelope', iconComponent: MailIcon, title: messages.direct },
+    private: { icon: 'lock', iconComponent: LockIcon, title: messages.private },
+    public: { icon: 'globe', iconComponent: PublicIcon, title: messages.public },
+    unlisted: { icon: 'unlock', iconComponent: QuietTimeIcon, title: messages.unlisted },
+  };
+
+  return (
+    <Button className='secondary-post-button' disabled={disabled} onClick={onClick} title={intl.formatMessage(privacyProps[privacy].title)}>
+      <Icon id={privacyProps[privacy].id} icon={privacyProps[privacy].iconComponent} />
+    </Button>
+  );
+};
+
+SecondaryPrivacyButton.propTypes = {
+  disabled: PropTypes.bool,
+  privacy: PropTypes.string,
+  isEditing: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx b/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx
new file mode 100644
index 0000000000..deb401bfb7
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx
@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+const messages = defineMessages({
+  marked: {
+    id: 'compose_form.sensitive.marked',
+    defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}',
+  },
+  unmarked: {
+    id: 'compose_form.sensitive.unmarked',
+    defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}',
+  },
+});
+
+export const SensitiveButton = () => {
+  const intl = useIntl();
+
+  const spoilersAlwaysOn = useAppSelector((state) => state.getIn(['local_settings', 'always_show_spoilers_field']));
+  const spoilerText = useAppSelector((state) => state.getIn(['compose', 'spoiler_text']));
+  const sensitive = useAppSelector((state) => state.getIn(['compose', 'sensitive']));
+  const spoiler = useAppSelector((state) => state.getIn(['compose', 'spoiler']));
+  const mediaCount = useAppSelector((state) => state.getIn(['compose', 'media_attachments']).size);
+  const disabled = spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler;
+
+  const active = sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0);
+
+  const dispatch = useAppDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(changeComposeSensitivity());
+  }, [dispatch]);
+
+  return (
+    <div className='compose-form__sensitive-button'>
+      <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked, { count: mediaCount })}>
+        <input
+          name='mark-sensitive'
+          type='checkbox'
+          checked={active}
+          onChange={handleClick}
+          disabled={disabled}
+        />
+
+        <FormattedMessage
+          id='compose_form.sensitive.hide'
+          defaultMessage='{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}'
+          values={{ count: mediaCount }}
+        />
+      </label>
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx
deleted file mode 100644
index 74706833d9..0000000000
--- a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import ForumIcon from '@/material-icons/400-24px/forum.svg?react';
-import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-
-
-const messages = defineMessages({
-  localOnly: {
-    defaultMessage: 'This post is local-only',
-    id: 'advanced_options.local-only.tooltip',
-  },
-  threadedMode: {
-    defaultMessage: 'Threaded mode enabled',
-    id: 'advanced_options.threaded_mode.tooltip',
-  },
-});
-
-//  We use an array of tuples here instead of an object because it
-//  preserves order.
-const iconMap = [
-  ['do_not_federate', 'home', HomeIcon, messages.localOnly],
-  ['threaded_mode', 'comments', ForumIcon, messages.threadedMode],
-];
-
-class TextareaIcons extends ImmutablePureComponent {
-
-  static propTypes = {
-    advancedOptions: ImmutablePropTypes.map,
-    intl: PropTypes.object.isRequired,
-  };
-
-  render () {
-    const { advancedOptions, intl } = this.props;
-    return (
-      <div className='compose-form__textarea-icons'>
-        {advancedOptions && iconMap.map(
-          ([key, icon, iconComponent, message]) => advancedOptions.get(key) && (
-            <span
-              className='textarea_icon'
-              key={key}
-              title={intl.formatMessage(message)}
-            >
-              <Icon id={icon} icon={iconComponent} />
-            </span>
-          ),
-        )}
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(TextareaIcons);
diff --git a/app/javascript/flavours/glitch/features/compose/components/thread_mode_button.jsx b/app/javascript/flavours/glitch/features/compose/components/thread_mode_button.jsx
new file mode 100644
index 0000000000..65b1b72897
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/thread_mode_button.jsx
@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import QuickreplyIcon from '@/material-icons/400-24px/quickreply.svg?react';
+import { changeComposeAdvancedOption } from 'flavours/glitch/actions/compose';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+const messages = defineMessages({
+  enable_threaded_mode: { id: 'compose.enable_threaded_mode', defaultMessage: 'Enable threaded more' },
+  disable_threaded_mode: { id: 'compose.disable_threaded_mode', defaultMessage: 'Disable threaded more' },
+});
+
+export const ThreadModeButton = () => {
+  const intl = useIntl();
+
+  const isEditing = useAppSelector((state) => state.getIn(['compose', 'id']) !== null);
+  const active = useAppSelector((state) => state.getIn(['compose', 'advanced_options', 'threaded_mode']));
+
+  const dispatch = useAppDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(changeComposeAdvancedOption('threaded_mode', !active));
+  }, [active, dispatch]);
+
+  const title = intl.formatMessage(active ? messages.disable_threaded_mode : messages.enable_threaded_mode);
+
+  return (
+    <IconButton
+      disabled={isEditing}
+      icon=''
+      onClick={handleClick}
+      iconComponent={QuickreplyIcon}
+      title={title}
+      active={active}
+      size={18}
+      inverted
+    />
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.jsx b/app/javascript/flavours/glitch/features/compose/components/upload.jsx
index c317fc4fc1..2568aacb54 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload.jsx
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 
 import { FormattedMessage } from 'react-intl';
 
+import classNames from 'classnames';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -9,16 +11,17 @@ import spring from 'react-motion/lib/spring';
 
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
-import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { Icon }  from 'flavours/glitch/components/icon';
 
-
 import Motion from '../../ui/util/optional_motion';
 
 export default class Upload extends ImmutablePureComponent {
 
   static propTypes = {
     media: ImmutablePropTypes.map.isRequired,
+    sensitive: PropTypes.bool,
     onUndo: PropTypes.func.isRequired,
     onOpenFocalPoint: PropTypes.func.isRequired,
   };
@@ -34,7 +37,7 @@ export default class Upload extends ImmutablePureComponent {
   };
 
   render () {
-    const { media } = this.props;
+    const { media, sensitive } = this.props;
 
     if (!media) {
       return null;
@@ -44,22 +47,26 @@ export default class Upload extends ImmutablePureComponent {
     const focusY = media.getIn(['meta', 'focus', 'y']);
     const x = ((focusX /  2) + .5) * 100;
     const y = ((focusY / -2) + .5) * 100;
+    const missingDescription = (media.get('description') || '').length === 0;
 
     return (
       <div className='compose-form__upload'>
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
           {({ scale }) => (
-            <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
+            <div className='compose-form__upload__thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: !sensitive ? `url(${media.get('preview_url')})` : null, backgroundPosition: `${x}% ${y}%` }}>
+              {sensitive && <Blurhash
+                hash={media.get('blurhash')}
+                className='compose-form__upload__preview'
+              />}
+
               <div className='compose-form__upload__actions'>
-                <button type='button' className='icon-button' onClick={this.handleUndoClick}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
-                <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
+                <button type='button' className='icon-button compose-form__upload__delete' onClick={this.handleUndoClick}><Icon icon={CloseIcon} /></button>
+                <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
               </div>
 
-              {(media.get('description') || '').length === 0 && (
-                <div className='compose-form__upload__warning'>
-                  <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button>
-                </div>
-              )}
+              <div className='compose-form__upload__warning'>
+                <button type='button' className={classNames('icon-button', { active: missingDescription })} onClick={this.handleFocalPointClick}>{missingDescription && <Icon icon={WarningIcon} />} ALT</button>
+              </div>
             </div>
           )}
         </Motion>
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx
new file mode 100644
index 0000000000..4b8f7213b7
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx
@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+
+const messages = defineMessages({
+  upload: { id: 'upload_button.label', defaultMessage: 'Add images, a video or an audio file' },
+});
+
+const makeMapStateToProps = () => {
+  const mapStateToProps = state => ({
+    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
+  });
+
+  return mapStateToProps;
+};
+
+const iconStyle = {
+  height: null,
+  lineHeight: '27px',
+};
+
+class UploadButton extends ImmutablePureComponent {
+
+  static propTypes = {
+    disabled: PropTypes.bool,
+    onSelectFile: PropTypes.func.isRequired,
+    style: PropTypes.object,
+    resetFileKey: PropTypes.number,
+    acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  handleChange = (e) => {
+    if (e.target.files.length > 0) {
+      this.props.onSelectFile(e.target.files);
+    }
+  };
+
+  handleClick = () => {
+    this.fileElement.click();
+  };
+
+  setRef = (c) => {
+    this.fileElement = c;
+  };
+
+  render () {
+    const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
+
+    const message = intl.formatMessage(messages.upload);
+
+    return (
+      <div className='compose-form__upload-button'>
+        <IconButton icon='paperclip' iconComponent={PhotoLibraryIcon} title={message} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
+        <label>
+          <span style={{ display: 'none' }}>{message}</span>
+          <input
+            key={resetFileKey}
+            ref={this.setRef}
+            type='file'
+            multiple
+            accept={acceptContentTypes.toArray().join(',')}
+            onChange={this.handleChange}
+            disabled={disabled}
+            style={{ display: 'none' }}
+          />
+        </label>
+      </div>
+    );
+  }
+
+}
+
+export default connect(makeMapStateToProps)(injectIntl(UploadButton));
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_form.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_form.jsx
index cf2e53ad90..5c6406c3ba 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_form.jsx
@@ -1,10 +1,11 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import SensitiveButtonContainer from '../containers/sensitive_button_container';
 import UploadContainer from '../containers/upload_container';
 import UploadProgressContainer from '../containers/upload_progress_container';
 
+import { SensitiveButton } from './sensitive_button';
+
 export default class UploadForm extends ImmutablePureComponent {
 
   static propTypes = {
@@ -15,17 +16,19 @@ export default class UploadForm extends ImmutablePureComponent {
     const { mediaIds } = this.props;
 
     return (
-      <div className='compose-form__upload-wrapper'>
+      <>
         <UploadProgressContainer />
 
-        <div className='compose-form__uploads-wrapper'>
-          {mediaIds.map(id => (
-            <UploadContainer id={id} key={id} />
-          ))}
-        </div>
+        {mediaIds.size > 0 && (
+          <div className='compose-form__uploads'>
+            {mediaIds.map(id => (
+              <UploadContainer id={id} key={id} />
+            ))}
+          </div>
+        )}
 
-        {!mediaIds.isEmpty() && <SensitiveButtonContainer />}
-      </div>
+        {!mediaIds.isEmpty() && <SensitiveButton />}
+      </>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
index f4408b5460..7af5d9090e 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
@@ -35,9 +35,7 @@ export default class UploadProgress extends PureComponent {
 
     return (
       <div className='upload-progress'>
-        <div className='upload-progress__icon'>
-          <Icon id='upload' icon={UploadFileIcon} />
-        </div>
+        <Icon id='upload' icon={UploadFileIcon} />
 
         <div className='upload-progress__message'>
           {message}
diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
index c717058eaf..6de24cc706 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
@@ -11,8 +11,6 @@ import {
   fetchComposeSuggestions,
   selectComposeSuggestion,
   changeComposeSpoilerText,
-  changeComposeSpoilerness,
-  changeComposeVisibility,
   insertEmojiCompose,
   uploadCompose,
 } from '../../../actions/compose';
@@ -58,11 +56,13 @@ const mapStateToProps = state => ({
   text: state.getIn(['compose', 'text']),
   suggestions: state.getIn(['compose', 'suggestions']),
   spoiler: state.getIn(['local_settings', 'always_show_spoilers_field']) || state.getIn(['compose', 'spoiler']),
+  spoilerAlwaysOn: state.getIn(['local_settings', 'always_show_spoilers_field']),
   spoilerText: state.getIn(['compose', 'spoiler_text']),
   privacy: state.getIn(['compose', 'privacy']),
   focusDate: state.getIn(['compose', 'focusDate']),
   caretPosition: state.getIn(['compose', 'caretPosition']),
   preselectDate: state.getIn(['compose', 'preselectDate']),
+  preselectOnReply: state.getIn(['local_settings', 'preselect_on_reply']),
   isSubmitting: state.getIn(['compose', 'is_submitting']),
   isEditing: state.getIn(['compose', 'id']) !== null,
   isChangingUpload: state.getIn(['compose', 'is_changing_upload']),
@@ -70,14 +70,9 @@ const mapStateToProps = state => ({
   anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
   isInReply: state.getIn(['compose', 'in_reply_to']) !== null,
   lang: state.getIn(['compose', 'language']),
-  advancedOptions: state.getIn(['compose', 'advanced_options']),
-  media: state.getIn(['compose', 'media_attachments']),
   sideArm: sideArmPrivacy(state),
-  sensitive: state.getIn(['compose', 'sensitive']),
-  showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
-  spoilersAlwaysOn: state.getIn(['local_settings', 'always_show_spoilers_field']),
+  media: state.getIn(['compose', 'media_attachments']),
   mediaDescriptionConfirmation: state.getIn(['local_settings', 'confirm_missing_media_description']),
-  preselectOnReply: state.getIn(['local_settings', 'preselect_on_reply']),
 });
 
 const mapDispatchToProps = (dispatch, { intl }) => ({
@@ -86,8 +81,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(changeCompose(text));
   },
 
-  onSubmit (router) {
-    dispatch(submitCompose(router));
+  onSubmit (router, overridePrivacy = null) {
+    dispatch(submitCompose(router, overridePrivacy));
   },
 
   onClearSuggestions () {
@@ -102,37 +97,26 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(selectComposeSuggestion(position, token, suggestion, path));
   },
 
-  onChangeSpoilerText (text) {
-    dispatch(changeComposeSpoilerText(text));
+  onChangeSpoilerText (checked) {
+    dispatch(changeComposeSpoilerText(checked));
   },
 
   onPaste (files) {
     dispatch(uploadCompose(files));
   },
 
-  onPickEmoji (position, emoji) {
-    dispatch(insertEmojiCompose(position, emoji));
+  onPickEmoji (position, data, needsSpace) {
+    dispatch(insertEmojiCompose(position, data, needsSpace));
   },
 
-  onChangeSpoilerness() {
-    dispatch(changeComposeSpoilerness());
-  },
-
-  onChangeVisibility(value) {
-    dispatch(changeComposeVisibility(value));
-  },
-
-  onMediaDescriptionConfirm(routerHistory, mediaId, overriddenVisibility = null) {
+  onMediaDescriptionConfirm (routerHistory, mediaId, overridePrivacy = null) {
     dispatch(openModal({
       modalType: 'CONFIRM',
       modalProps: {
         message: intl.formatMessage(messages.missingDescriptionMessage),
         confirm: intl.formatMessage(messages.missingDescriptionConfirm),
         onConfirm: () => {
-          if (overriddenVisibility) {
-            dispatch(changeComposeVisibility(overriddenVisibility));
-          }
-          dispatch(submitCompose(routerHistory));
+          dispatch(submitCompose(routerHistory, overridePrivacy));
         },
         secondary: intl.formatMessage(messages.missingDescriptionEdit),
         onSecondary: () => dispatch(openModal({
diff --git a/app/javascript/flavours/glitch/features/compose/containers/dropdown_container.js b/app/javascript/flavours/glitch/features/compose/containers/dropdown_container.js
deleted file mode 100644
index aa156b8e56..0000000000
--- a/app/javascript/flavours/glitch/features/compose/containers/dropdown_container.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { connect } from 'react-redux';
-
-import { openModal, closeModal } from 'flavours/glitch/actions/modal';
-import { isUserTouching } from 'flavours/glitch/is_mobile';
-
-import Dropdown from '../components/dropdown';
-
-const mapDispatchToProps = dispatch => ({
-  isUserTouching,
-  onModalOpen: props => dispatch(openModal({ modalType: 'ACTIONS', modalProps: props })),
-  onModalClose: () => dispatch(closeModal({ modalType: undefined, ignoreFocus: false })),
-});
-
-export default connect(null, mapDispatchToProps)(Dropdown);
diff --git a/app/javascript/flavours/glitch/features/compose/containers/header_container.js b/app/javascript/flavours/glitch/features/compose/containers/header_container.js
deleted file mode 100644
index 5b78c8b9cd..0000000000
--- a/app/javascript/flavours/glitch/features/compose/containers/header_container.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { connect }   from 'react-redux';
-
-import { openModal } from 'flavours/glitch/actions/modal';
-import { logOut } from 'flavours/glitch/utils/log_out';
-
-import Header from '../components/header';
-
-const messages = defineMessages({
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
-});
-
-const mapStateToProps = state => {
-  return {
-    columns: state.getIn(['settings', 'columns']),
-    unreadNotifications: state.getIn(['notifications', 'unread']),
-    showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
-  };
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  onSettingsClick (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    dispatch(openModal({ modalType: 'SETTINGS', modalProps: {} }));
-  },
-  onLogout () {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
-  },
-});
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Header));
diff --git a/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js b/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js
deleted file mode 100644
index 459fffd910..0000000000
--- a/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { connect }   from 'react-redux';
-
-import { openModal } from 'flavours/glitch/actions/modal';
-import { logOut } from 'flavours/glitch/utils/log_out';
-
-import { me } from '../../../initial_state';
-import NavigationBar from '../components/navigation_bar';
-
-const messages = defineMessages({
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
-});
-
-const mapStateToProps = state => {
-  return {
-    account: state.getIn(['accounts', me]),
-  };
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  onLogout () {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
-  },
-});
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NavigationBar));
diff --git a/app/javascript/flavours/glitch/features/compose/containers/options_container.js b/app/javascript/flavours/glitch/features/compose/containers/options_container.js
deleted file mode 100644
index c44d3ce305..0000000000
--- a/app/javascript/flavours/glitch/features/compose/containers/options_container.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { connect } from 'react-redux';
-
-import {
-  changeComposeAdvancedOption,
-  changeComposeContentType,
-  addPoll,
-  removePoll,
-} from 'flavours/glitch/actions/compose';
-import { openModal } from 'flavours/glitch/actions/modal';
-
-import Options from '../components/options';
-
-function mapStateToProps (state) {
-  const poll = state.getIn(['compose', 'poll']);
-  const media = state.getIn(['compose', 'media_attachments']);
-  const pending_media = state.getIn(['compose', 'pending_media_attachments']);
-  return {
-    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray().join(','),
-    resetFileKey: state.getIn(['compose', 'resetFileKey']),
-    hasPoll: !!poll,
-    allowMedia: !poll && (media ? media.size + pending_media < 4 && !media.some(item => ['video', 'audio'].includes(item.get('type'))) : pending_media < 4),
-    allowPoll: !(media && !!media.size),
-    showContentTypeChoice: state.getIn(['local_settings', 'show_content_type_choice']),
-    contentType: state.getIn(['compose', 'content_type']),
-  };
-}
-
-const mapDispatchToProps = (dispatch) => ({
-
-  onChangeAdvancedOption(option, value) {
-    dispatch(changeComposeAdvancedOption(option, value));
-  },
-
-  onChangeContentType(value) {
-    dispatch(changeComposeContentType(value));
-  },
-
-  onTogglePoll() {
-    dispatch((_, getState) => {
-      if (getState().getIn(['compose', 'poll'])) {
-        dispatch(removePoll());
-      } else {
-        dispatch(addPoll());
-      }
-    });
-  },
-
-  onDoodleOpen() {
-    dispatch(openModal({
-      modalType: 'DOODLE',
-      modalProps: { noEsc: true, noClose: true },
-    }));
-  },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Options);
diff --git a/app/javascript/flavours/glitch/features/compose/containers/poll_button_container.js b/app/javascript/flavours/glitch/features/compose/containers/poll_button_container.js
new file mode 100644
index 0000000000..9de388f64a
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/containers/poll_button_container.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+
+import { addPoll, removePoll } from '../../../actions/compose';
+import PollButton from '../components/poll_button';
+
+const mapStateToProps = state => ({
+  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
+  active: state.getIn(['compose', 'poll']) !== null,
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick () {
+    dispatch((_, getState) => {
+      if (getState().getIn(['compose', 'poll'])) {
+        dispatch(removePoll());
+      } else {
+        dispatch(addPoll());
+      }
+    });
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(PollButton);
diff --git a/app/javascript/flavours/glitch/features/compose/containers/poll_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/poll_form_container.js
deleted file mode 100644
index 177ffcea6a..0000000000
--- a/app/javascript/flavours/glitch/features/compose/containers/poll_form_container.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { connect } from 'react-redux';
-
-import {
-  addPollOption,
-  removePollOption,
-  changePollOption,
-  changePollSettings,
-  clearComposeSuggestions,
-  fetchComposeSuggestions,
-  selectComposeSuggestion,
-} from '../../../actions/compose';
-import PollForm from '../components/poll_form';
-
-const mapStateToProps = state => ({
-  suggestions: state.getIn(['compose', 'suggestions']),
-  options: state.getIn(['compose', 'poll', 'options']),
-  lang: state.getIn(['compose', 'language']),
-  expiresIn: state.getIn(['compose', 'poll', 'expires_in']),
-  isMultiple: state.getIn(['compose', 'poll', 'multiple']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onAddOption(title) {
-    dispatch(addPollOption(title));
-  },
-
-  onRemoveOption(index) {
-    dispatch(removePollOption(index));
-  },
-
-  onChangeOption(index, title) {
-    dispatch(changePollOption(index, title));
-  },
-
-  onChangeSettings(expiresIn, isMultiple) {
-    dispatch(changePollSettings(expiresIn, isMultiple));
-  },
-
-  onClearSuggestions () {
-    dispatch(clearComposeSuggestions());
-  },
-
-  onFetchSuggestions (token) {
-    dispatch(fetchComposeSuggestions(token));
-  },
-
-  onSuggestionSelected (position, token, accountId, path) {
-    dispatch(selectComposeSuggestion(position, token, accountId, path));
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(PollForm);
diff --git a/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js b/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js
deleted file mode 100644
index 1147e448af..0000000000
--- a/app/javascript/flavours/glitch/features/compose/containers/reply_indicator_container.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { connect } from 'react-redux';
-
-import { cancelReplyCompose } from '../../../actions/compose';
-import { makeGetStatus } from '../../../selectors';
-import ReplyIndicator from '../components/reply_indicator';
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = state => {
-    let statusId = state.getIn(['compose', 'id'], null);
-    let editing  = true;
-
-    if (statusId === null) {
-      statusId = state.getIn(['compose', 'in_reply_to']);
-      editing  = false;
-    }
-
-    return {
-      status: getStatus(state, { id: statusId }),
-      editing,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = dispatch => ({
-
-  onCancel () {
-    dispatch(cancelReplyCompose());
-  },
-
-});
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(ReplyIndicator);
diff --git a/app/javascript/flavours/glitch/features/compose/containers/search_container.js b/app/javascript/flavours/glitch/features/compose/containers/search_container.js
index 93b8645ac6..d2da52c8c0 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/search_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/search_container.js
@@ -42,8 +42,8 @@ const mapDispatchToProps = dispatch => ({
     dispatch(showSearch());
   },
 
-  onOpenURL (routerHistory) {
-    dispatch(openURL(routerHistory));
+  onOpenURL (q, routerHistory) {
+    dispatch(openURL(q, routerHistory));
   },
 
   onClickSearchResult (q, type) {
diff --git a/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.jsx b/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.jsx
deleted file mode 100644
index 5a57332dd9..0000000000
--- a/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-
-import { connect } from 'react-redux';
-
-import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
-
-const messages = defineMessages({
-  marked: {
-    id: 'compose_form.sensitive.marked',
-    defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}',
-  },
-  unmarked: {
-    id: 'compose_form.sensitive.unmarked',
-    defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}',
-  },
-});
-
-const mapStateToProps = state => {
-  const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']);
-  const spoilerText = state.getIn(['compose', 'spoiler_text']);
-  return {
-    active: state.getIn(['compose', 'sensitive']) || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0),
-    disabled: state.getIn(['compose', 'spoiler']),
-    mediaCount: state.getIn(['compose', 'media_attachments']).size,
-  };
-};
-
-const mapDispatchToProps = dispatch => ({
-
-  onClick () {
-    dispatch(changeComposeSensitivity());
-  },
-
-});
-
-class SensitiveButton extends PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    disabled: PropTypes.bool,
-    mediaCount: PropTypes.number,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  render () {
-    const { active, disabled, mediaCount, onClick, intl } = this.props;
-
-    return (
-      <div className='compose-form__sensitive-button'>
-        <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked, { count: mediaCount })}>
-          <input
-            name='mark-sensitive'
-            type='checkbox'
-            checked={active}
-            onChange={onClick}
-            disabled={disabled}
-          />
-
-          <FormattedMessage
-            id='compose_form.sensitive.hide'
-            defaultMessage='{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}'
-            values={{ count: mediaCount }}
-          />
-        </label>
-      </div>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));
diff --git a/app/javascript/flavours/glitch/features/compose/containers/spoiler_button_container.js b/app/javascript/flavours/glitch/features/compose/containers/spoiler_button_container.js
new file mode 100644
index 0000000000..fce1816fe8
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/containers/spoiler_button_container.js
@@ -0,0 +1,32 @@
+import { injectIntl, defineMessages } from 'react-intl';
+
+import { connect } from 'react-redux';
+
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+
+import { changeComposeSpoilerness } from '../../../actions/compose';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
+  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
+});
+
+const mapStateToProps = (state, { intl }) => ({
+  iconComponent: WarningIcon,
+  title: intl.formatMessage(state.getIn(['compose', 'spoiler']) ? messages.marked : messages.unmarked),
+  active: state.getIn(['compose', 'spoiler']),
+  ariaControls: 'cw-spoiler-input',
+  size: 18,
+  inverted: true,
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick () {
+    dispatch(changeComposeSpoilerness());
+  },
+
+});
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(IconButton));
diff --git a/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js b/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
new file mode 100644
index 0000000000..7c4757b6c3
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+
+import { uploadCompose } from '../../../actions/compose';
+import UploadButton from '../components/upload_button';
+
+const mapStateToProps = state => ({
+  disabled: state.getIn(['compose', 'poll']) !== null || state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
+  resetFileKey: state.getIn(['compose', 'resetFileKey']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onSelectFile (files) {
+    dispatch(uploadCompose(files));
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(UploadButton);
diff --git a/app/javascript/flavours/glitch/features/compose/containers/upload_container.js b/app/javascript/flavours/glitch/features/compose/containers/upload_container.js
index 77bb90db87..5afe6eaa1a 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/upload_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/upload_container.js
@@ -5,6 +5,7 @@ import Upload from '../components/upload';
 
 const mapStateToProps = (state, { id }) => ({
   media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
+  sensitive: state.getIn(['compose', 'sensitive']),
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/app/javascript/flavours/glitch/features/compose/containers/warning_container.jsx b/app/javascript/flavours/glitch/features/compose/containers/warning_container.jsx
index f339ccdfbf..c3efe80e8c 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/warning_container.jsx
+++ b/app/javascript/flavours/glitch/features/compose/containers/warning_container.jsx
@@ -5,7 +5,6 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { me } from 'flavours/glitch/initial_state';
-import { profileLink, privacyPolicyLink } from 'flavours/glitch/utils/backend_links';
 import { HASHTAG_PATTERN_REGEX } from 'flavours/glitch/utils/hashtags';
 
 import Warning from '../components/warning';
@@ -18,7 +17,7 @@ const mapStateToProps = state => ({
 
 const WarningWrapper = ({ needsLockWarning, hashtagWarning, directMessageWarning }) => {
   if (needsLockWarning) {
-    return <Warning message={<FormattedMessage id='compose_form.lock_disclaimer' defaultMessage='Your account is not {locked}. Anyone can follow you to view your follower-only posts.' values={{ locked: <a href={profileLink}><FormattedMessage id='compose_form.lock_disclaimer.lock' defaultMessage='locked' /></a> }} />} />;
+    return <Warning message={<FormattedMessage id='compose_form.lock_disclaimer' defaultMessage='Your account is not {locked}. Anyone can follow you to view your follower-only posts.' values={{ locked: <a href='/settings/profile'><FormattedMessage id='compose_form.lock_disclaimer.lock' defaultMessage='locked' /></a> }} />} />;
   }
 
   if (hashtagWarning) {
@@ -28,7 +27,7 @@ const WarningWrapper = ({ needsLockWarning, hashtagWarning, directMessageWarning
   if (directMessageWarning) {
     const message = (
       <span>
-        <FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> {!!privacyPolicyLink && <a href={privacyPolicyLink} target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a>}
+        <FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> <a href='/terms' target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a>
       </span>
     );
 
diff --git a/app/javascript/flavours/glitch/features/compose/index.jsx b/app/javascript/flavours/glitch/features/compose/index.jsx
index 86d5f31485..0bba28b787 100644
--- a/app/javascript/flavours/glitch/features/compose/index.jsx
+++ b/app/javascript/flavours/glitch/features/compose/index.jsx
@@ -3,93 +3,180 @@ import { PureComponent } from 'react';
 
 import { injectIntl, defineMessages } from 'react-intl';
 
-import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
+import { Link } from 'react-router-dom';
 
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import spring from 'react-motion/lib/spring';
 
-import { mountCompose, unmountCompose, cycleElefriendCompose } from 'flavours/glitch/actions/compose';
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
+import LogoutIcon from '@/material-icons/400-24px/logout.svg?react';
+import ManufacturingIcon from '@/material-icons/400-24px/manufacturing-fill.svg?react';
+import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
+import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import { openModal } from 'flavours/glitch/actions/modal';
 import Column from 'flavours/glitch/components/column';
+import { Icon }  from 'flavours/glitch/components/icon';
+import glitchedElephant1 from 'flavours/glitch/images/mbstobon-ui-0.png';
+import glitchedElephant2 from 'flavours/glitch/images/mbstobon-ui-1.png';
+import glitchedElephant3 from 'flavours/glitch/images/mbstobon-ui-2.png';
+import { logOut } from 'flavours/glitch/utils/log_out';
 
+import elephantUIPlane from '../../../../images/elephant_ui_plane.svg';
+import { changeComposing, mountCompose, unmountCompose } from '../../actions/compose';
 import { mascot } from '../../initial_state';
+import { isMobile } from '../../is_mobile';
 import Motion from '../ui/util/optional_motion';
 
 import ComposeFormContainer from './containers/compose_form_container';
-import HeaderContainer from './containers/header_container';
-import NavigationContainer from './containers/navigation_container';
 import SearchContainer from './containers/search_container';
 import SearchResultsContainer from './containers/search_results_container';
 
 const messages = defineMessages({
+  start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
+  home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
+  notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
+  public: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
+  community: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
+  settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
+  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
+  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
+  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
 const mapStateToProps = (state, ownProps) => ({
-  elefriend: state.getIn(['compose', 'elefriend']),
+  columns: state.getIn(['settings', 'columns']),
   showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : false,
+  unreadNotifications: state.getIn(['notifications', 'unread']),
+  showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']),
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  onClickElefriend () {
-    dispatch(cycleElefriendCompose());
-  },
-
-  onMount () {
-    dispatch(mountCompose());
-  },
-
-  onUnmount () {
-    dispatch(unmountCompose());
-  },
-});
+// ~4% chance you'll end up with an unexpected friend
+// glitch-soc/mastodon repo created_at date: 2017-04-20T21:55:28Z
+const glitchProbability = 1 - 0.0420215528;
+const totalElefriends = 3;
 
 class Compose extends PureComponent {
 
   static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    columns: ImmutablePropTypes.list.isRequired,
     multiColumn: PropTypes.bool,
     showSearch: PropTypes.bool,
-    elefriend: PropTypes.number,
-    onClickElefriend: PropTypes.func,
-    onMount: PropTypes.func,
-    onUnmount: PropTypes.func,
+    unreadNotifications: PropTypes.number,
+    showNotificationsBadge: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
 
+  state = {
+    elefriend: Math.random() < glitchProbability ? Math.floor(Math.random() * totalElefriends) : totalElefriends,
+  };
+
   componentDidMount () {
-    this.props.onMount();
+    const { dispatch } = this.props;
+    dispatch(mountCompose());
   }
 
   componentWillUnmount () {
-    this.props.onUnmount();
+    const { dispatch } = this.props;
+    dispatch(unmountCompose());
   }
 
+  handleLogoutClick = e => {
+    const { dispatch, intl } = this.props;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    dispatch(openModal({
+      modalType: 'CONFIRM',
+      modalProps: {
+        message: intl.formatMessage(messages.logoutMessage),
+        confirm: intl.formatMessage(messages.logoutConfirm),
+        closeWhenConfirm: false,
+        onConfirm: () => logOut(),
+      },
+    }));
+
+    return false;
+  };
+
+  handleSettingsClick = e => {
+    const { dispatch } = this.props;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    dispatch(openModal({ modalType: 'SETTINGS', modalProps: {} }));
+  };
+
+  onFocus = () => {
+    this.props.dispatch(changeComposing(true));
+  };
+
+  onBlur = () => {
+    this.props.dispatch(changeComposing(false));
+  };
+
+  cycleElefriend = () => {
+    this.setState((state) => ({ elefriend: (state.elefriend + 1) % totalElefriends }));
+  };
+
   render () {
-    const {
-      elefriend,
-      intl,
-      multiColumn,
-      onClickElefriend,
-      showSearch,
-    } = this.props;
-    const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
+    const { multiColumn, showSearch, showNotificationsBadge, unreadNotifications, intl } = this.props;
+
+    const elefriend = [glitchedElephant1, glitchedElephant2, glitchedElephant3, elephantUIPlane][this.state.elefriend];
 
     if (multiColumn) {
-      return (
-        <div className={computedClass} role='region' aria-label={intl.formatMessage(messages.compose)}>
-          <HeaderContainer />
+      const { columns } = this.props;
 
-          {multiColumn && <SearchContainer />}
+      return (
+        <div className='drawer' role='region' aria-label={intl.formatMessage(messages.compose)}>
+          <nav className='drawer__header'>
+            <Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)} aria-label={intl.formatMessage(messages.start)}><Icon id='bars' icon={MenuIcon} /></Link>
+            {!columns.some(column => column.get('id') === 'HOME') && (
+              <Link to='/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><Icon id='home' icon={HomeIcon} /></Link>
+            )}
+            {!columns.some(column => column.get('id') === 'NOTIFICATIONS') && (
+              <Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}>
+                <span className='icon-badge-wrapper'>
+                  <Icon id='bell' icon={NotificationsIcon} />
+                  {showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
+                </span>
+              </Link>
+            )}
+            {!columns.some(column => column.get('id') === 'COMMUNITY') && (
+              <Link to='/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><Icon id='users' icon={PeopleIcon} /></Link>
+            )}
+            {!columns.some(column => column.get('id') === 'PUBLIC') && (
+              <Link to='/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><Icon id='globe' icon={PublicIcon} /></Link>
+            )}
+            <a
+              onClick={this.handleSettingsClick}
+              href='/settings/preferences'
+              className='drawer__tab'
+              title={intl.formatMessage(messages.settings)}
+              aria-label={intl.formatMessage(messages.settings)}
+            >
+              <Icon id='cogs' icon={ManufacturingIcon} />
+            </a>
+            <a href='/auth/sign_out' className='drawer__tab' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)} onClick={this.handleLogoutClick}><Icon id='sign-out' icon={LogoutIcon} /></a>
+          </nav>
+
+          {multiColumn && <SearchContainer /> }
 
           <div className='drawer__pager'>
-            <div className='drawer__inner'>
-              <NavigationContainer />
+            <div className='drawer__inner' onFocus={this.onFocus}>
+              <ComposeFormContainer autoFocus={!isMobile(window.innerWidth)} />
 
-              <ComposeFormContainer />
-
-              <div className='drawer__inner__mastodon'>
-                {mascot ? <img alt='' draggable='false' src={mascot} /> : <button className='mastodon' onClick={onClickElefriend} />}
+              {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- this is not a feature but a visual easter egg */}
+              <div className='drawer__inner__mastodon' onClick={this.cycleElefriend}>
+                <img alt='' draggable='false' src={mascot || elefriend} />
               </div>
             </div>
 
@@ -106,8 +193,7 @@ class Compose extends PureComponent {
     }
 
     return (
-      <Column>
-        <NavigationContainer />
+      <Column onFocus={this.onFocus}>
         <ComposeFormContainer />
 
         <Helmet>
@@ -119,4 +205,4 @@ class Compose extends PureComponent {
 
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Compose));
+export default connect(mapStateToProps)(injectIntl(Compose));
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.jsx b/app/javascript/flavours/glitch/features/getting_started/index.jsx
index 866904eafb..a3464f146a 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.jsx
+++ b/app/javascript/flavours/glitch/features/getting_started/index.jsx
@@ -32,7 +32,7 @@ import { preferencesLink } from 'flavours/glitch/utils/backend_links';
 
 
 import { me, showTrends } from '../../initial_state';
-import NavigationBar from '../compose/components/navigation_bar';
+import { NavigationBar } from '../compose/components/navigation_bar';
 import ColumnLink from '../ui/components/column_link';
 import ColumnSubheading from '../ui/components/column_subheading';
 
diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx b/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx
index 00744fa2ae..10d4097eef 100644
--- a/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx
@@ -10,9 +10,9 @@ import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react';
 import ImageIcon from '@/material-icons/400-24px/image.svg?react';
 import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
 import { preferencesLink } from 'flavours/glitch/utils/backend_links';
 
-
 import LocalSettingsNavigationItem from './item';
 
 const messages = defineMessages({
@@ -60,7 +60,8 @@ class LocalSettingsNavigation extends PureComponent {
           active={index === 2}
           index={2}
           onNavigate={onNavigate}
-          textIcon='CW'
+          icon='warning'
+          iconComponent={WarningIcon}
           title={intl.formatMessage(messages.content_warnings)}
         />
         <LocalSettingsNavigationItem
diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx
index 54fd19311f..ad5e36b19d 100644
--- a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx
@@ -13,7 +13,6 @@ export default class LocalSettingsPage extends PureComponent {
     className: PropTypes.string,
     href: PropTypes.string,
     icon: PropTypes.string,
-    textIcon: PropTypes.string,
     iconComponent: PropTypes.func,
     index: PropTypes.number.isRequired,
     onNavigate: PropTypes.func,
@@ -36,7 +35,6 @@ export default class LocalSettingsPage extends PureComponent {
       href,
       icon,
       iconComponent,
-      textIcon,
       onNavigate,
       title,
     } = this.props;
@@ -45,7 +43,7 @@ export default class LocalSettingsPage extends PureComponent {
       active,
     }, className);
 
-    const iconElem = icon ? <Icon id={icon} icon={iconComponent} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
+    const iconElem = icon ? <Icon id={icon} icon={iconComponent} /> : null;
 
     if (href) return (
       <a
diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
index dab63c4ce6..849a553e06 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
@@ -28,9 +28,9 @@ const messages = defineMessages({
   pop_in_left: { id: 'settings.pop_in_left', defaultMessage: 'Left' },
   pop_in_right: { id: 'settings.pop_in_right', defaultMessage:  'Right' },
   public: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  private: { id: 'privacy.private.short', defaultMessage: 'Followers only' },
-  direct: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Quiet public' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers' },
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Specific people' },
 });
 
 class LocalSettingsPage extends PureComponent {
diff --git a/app/javascript/flavours/glitch/features/standalone/compose/index.jsx b/app/javascript/flavours/glitch/features/standalone/compose/index.jsx
index c36e843f5a..a0482c3ce5 100644
--- a/app/javascript/flavours/glitch/features/standalone/compose/index.jsx
+++ b/app/javascript/flavours/glitch/features/standalone/compose/index.jsx
@@ -1,21 +1,15 @@
-import { PureComponent } from 'react';
+import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container';
+import LoadingBarContainer from 'flavours/glitch/features/ui/containers/loading_bar_container';
+import ModalContainer from 'flavours/glitch/features/ui/containers/modal_container';
+import NotificationsContainer from 'flavours/glitch/features/ui/containers/notifications_container';
 
-import ComposeFormContainer from '../../compose/containers/compose_form_container';
-import LoadingBarContainer from '../../ui/containers/loading_bar_container';
-import ModalContainer from '../../ui/containers/modal_container';
-import NotificationsContainer from '../../ui/containers/notifications_container';
+const Compose = () => (
+  <>
+    <ComposeFormContainer autoFocus withoutNavigation />
+    <NotificationsContainer />
+    <ModalContainer />
+    <LoadingBarContainer className='loading-bar' />
+  </>
+);
 
-export default class Compose extends PureComponent {
-
-  render () {
-    return (
-      <div>
-        <ComposeFormContainer autoFocus />
-        <NotificationsContainer />
-        <ModalContainer />
-        <LoadingBarContainer className='loading-bar' />
-      </div>
-    );
-  }
-
-}
+export default Compose;
diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
index 3f9ba99e4f..a99d76c1a4 100644
--- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/compose_panel.jsx
@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import { mountCompose, unmountCompose } from 'flavours/glitch/actions/compose';
 import ServerBanner from 'flavours/glitch/components/server_banner';
 import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container';
-import NavigationContainer from 'flavours/glitch/features/compose/containers/navigation_container';
 import SearchContainer from 'flavours/glitch/features/compose/containers/search_container';
 
 import LinkFooter from './link_footer';
@@ -46,10 +45,7 @@ class ComposePanel extends PureComponent {
         )}
 
         {signedIn && (
-          <>
-            <NavigationContainer />
-            <ComposeFormContainer singleColumn />
-          </>
+          <ComposeFormContainer singleColumn />
         )}
 
         <LinkFooter />
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
index caed29c252..d584277dc3 100644
--- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
@@ -21,7 +21,7 @@ import { Button } from 'flavours/glitch/components/button';
 import { GIFV } from 'flavours/glitch/components/gifv';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import Audio from 'flavours/glitch/features/audio';
-import CharacterCounter from 'flavours/glitch/features/compose/components/character_counter';
+import { CharacterCounter } from 'flavours/glitch/features/compose/components/character_counter';
 import UploadProgress from 'flavours/glitch/features/compose/components/upload_progress';
 import { Tesseract as fetchTesseract } from 'flavours/glitch/features/ui/util/async-components';
 import { me } from 'flavours/glitch/initial_state';
diff --git a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
index 2d95cabef8..fa81ea81a3 100644
--- a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
@@ -108,7 +108,6 @@ class MuteModal extends PureComponent {
           <div>
             <span><FormattedMessage id='mute_modal.duration' defaultMessage='Duration' />: </span>
 
-            {/* eslint-disable-next-line jsx-a11y/no-onchange */}
             <select value={muteDuration} onChange={this.changeMuteDuration}>
               <option value={0}>{intl.formatMessage(messages.indefinite)}</option>
               <option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option>
diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json
index 8ea84f27a7..d97baad36e 100644
--- a/app/javascript/flavours/glitch/locales/en.json
+++ b/app/javascript/flavours/glitch/locales/en.json
@@ -5,13 +5,6 @@
   "account.follows_you": "Follows you",
   "account.suspended_disclaimer_full": "This user has been suspended by a moderator.",
   "account.view_full_profile": "View full profile",
-  "advanced_options.icon_title": "Advanced options",
-  "advanced_options.local-only.long": "Do not post to other instances",
-  "advanced_options.local-only.short": "Local-only",
-  "advanced_options.local-only.tooltip": "This post is local-only",
-  "advanced_options.threaded_mode.long": "Automatically opens a reply on posting",
-  "advanced_options.threaded_mode.short": "Threaded mode",
-  "advanced_options.threaded_mode.tooltip": "Threaded mode enabled",
   "boost_modal.missing_description": "This toot contains some media without description",
   "column.favourited_by": "Favourited by",
   "column.heading": "Misc",
@@ -21,15 +14,19 @@
   "column_subheading.lists": "Lists",
   "column_subheading.navigation": "Navigation",
   "community.column_settings.allow_local_only": "Show local-only toots",
-  "compose.attach": "Attach...",
-  "compose.attach.doodle": "Draw something",
-  "compose.attach.upload": "Upload a file",
+  "compose.change_federation": "Change federation settings",
+  "compose.content-type.change": "Change advanced formatting options",
   "compose.content-type.html": "HTML",
+  "compose.content-type.html_meta": "Format your posts using HTML",
   "compose.content-type.markdown": "Markdown",
+  "compose.content-type.markdown_meta": "Format your posts using Markdown",
   "compose.content-type.plain": "Plain text",
-  "compose_form.poll.multiple_choices": "Allow multiple choices",
-  "compose_form.poll.single_choice": "Allow one choice",
-  "compose_form.spoiler": "Hide text behind warning",
+  "compose.content-type.plain_meta": "Write with no advanced formatting",
+  "compose.disable_threaded_mode": "Disable threaded more",
+  "compose.enable_threaded_mode": "Enable threaded more",
+  "compose_form.sensitive.hide": "{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}",
+  "compose_form.sensitive.marked": "{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}",
+  "compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}",
   "confirmation_modal.do_not_ask_again": "Do not ask for confirmation again",
   "confirmations.deprecated_settings.confirm": "Use Mastodon preferences",
   "confirmations.deprecated_settings.message": "Some of the glitch-soc device-specific {app_settings} you are using have been replaced by Mastodon {preferences} and will be overriden:",
@@ -40,10 +37,13 @@
   "confirmations.unfilter.confirm": "Show",
   "confirmations.unfilter.edit_filter": "Edit filter",
   "confirmations.unfilter.filters": "Matching {count, plural, one {filter} other {filters}}",
-  "content-type.change": "Content type",
   "direct.group_by_conversations": "Group by conversation",
   "endorsed_accounts_editor.endorsed_accounts": "Featured accounts",
   "favourite_modal.combo": "You can press {combo} to skip this next time",
+  "federation.federated.long": "Allow this post to reach other servers",
+  "federation.federated.short": "Federated",
+  "federation.local_only.long": "Prevent this post from reaching other servers",
+  "federation.local_only.short": "Local-only",
   "firehose.column_settings.allow_local_only": "Show local-only posts in \"All\"",
   "home.column_settings.advanced": "Advanced",
   "home.column_settings.filter_regex": "Filter out by regular expressions",
diff --git a/app/javascript/flavours/glitch/packs/share.jsx b/app/javascript/flavours/glitch/packs/share.jsx
index 21f1da638d..7a4e333653 100644
--- a/app/javascript/flavours/glitch/packs/share.jsx
+++ b/app/javascript/flavours/glitch/packs/share.jsx
@@ -10,10 +10,12 @@ function loaded() {
 
   if (mountNode) {
     const attr = mountNode.getAttribute('data-props');
-    if(!attr) return;
+
+    if (!attr) return;
 
     const props = JSON.parse(attr);
     const root = createRoot(mountNode);
+
     root.render(<ComposeContainer {...props} />);
   }
 }
diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js
index e1e13d6886..15bf1a1690 100644
--- a/app/javascript/flavours/glitch/reducers/compose.js
+++ b/app/javascript/flavours/glitch/reducers/compose.js
@@ -4,7 +4,6 @@ import {
   COMPOSE_MOUNT,
   COMPOSE_UNMOUNT,
   COMPOSE_CHANGE,
-  COMPOSE_CYCLE_ELEFRIEND,
   COMPOSE_REPLY,
   COMPOSE_REPLY_CANCEL,
   COMPOSE_DIRECT,
@@ -34,6 +33,7 @@ import {
   COMPOSE_SPOILER_TEXT_CHANGE,
   COMPOSE_VISIBILITY_CHANGE,
   COMPOSE_LANGUAGE_CHANGE,
+  COMPOSE_COMPOSING_CHANGE,
   COMPOSE_CONTENT_TYPE_CHANGE,
   COMPOSE_EMOJI_INSERT,
   COMPOSE_UPLOAD_CHANGE_REQUEST,
@@ -43,9 +43,7 @@ import {
   COMPOSE_RESET,
   COMPOSE_POLL_ADD,
   COMPOSE_POLL_REMOVE,
-  COMPOSE_POLL_OPTION_ADD,
   COMPOSE_POLL_OPTION_CHANGE,
-  COMPOSE_POLL_OPTION_REMOVE,
   COMPOSE_POLL_SETTINGS_CHANGE,
   INIT_MEDIA_EDIT_MODAL,
   COMPOSE_CHANGE_MEDIA_DESCRIPTION,
@@ -63,12 +61,6 @@ import { overwrite } from '../utils/js_helpers';
 import { privacyPreference } from '../utils/privacy_preference';
 import { uuid } from '../uuid';
 
-const totalElefriends = 3;
-
-// ~4% chance you'll end up with an unexpected friend
-// glitch-soc/mastodon repo created_at date: 2017-04-20T21:55:28Z
-const glitchProbability = 1 - 0.0420215528;
-
 const initialState = ImmutableMap({
   mounted: 0,
   advanced_options: ImmutableMap({
@@ -76,7 +68,6 @@ const initialState = ImmutableMap({
     threaded_mode: false,
   }),
   sensitive: false,
-  elefriend: Math.random() < glitchProbability ? Math.floor(Math.random() * totalElefriends) : totalElefriends,
   spoiler: false,
   spoiler_text: '',
   privacy: null,
@@ -87,9 +78,10 @@ const initialState = ImmutableMap({
   caretPosition: null,
   preselectDate: null,
   in_reply_to: null,
+  is_composing: false,
   is_submitting: false,
-  is_uploading: false,
   is_changing_upload: false,
+  is_uploading: false,
   progress: 0,
   isUploadingThumbnail: false,
   thumbnailProgress: 0,
@@ -252,7 +244,7 @@ function removeMedia(state, mediaId) {
 
 const insertSuggestion = (state, position, token, completion, path) => {
   return state.withMutations(map => {
-    map.updateIn(path, oldText => `${oldText.slice(0, position)}${completion}${completion[0] === ':' ? '\u200B' : ' '}${oldText.slice(position + token.length)}`);
+    map.updateIn(path, oldText => `${oldText.slice(0, position)}${completion} ${oldText.slice(position + token.length)}`);
     map.set('suggestion_token', null);
     map.set('suggestions', ImmutableList());
     if (path.length === 1 && path[0] === 'text') {
@@ -294,14 +286,15 @@ const sortHashtagsByUse = (state, tags) => {
   return sorted;
 };
 
-const insertEmoji = (state, position, emojiData) => {
-  const emoji = emojiData.native;
+const insertEmoji = (state, position, emojiData, needsSpace) => {
+  const oldText = state.get('text');
+  const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native;
 
-  return state.withMutations(map => {
-    map.update('text', oldText => `${oldText.slice(0, position)}${emoji}\u200B${oldText.slice(position)}`);
-    map.set('focusDate', new Date());
-    map.set('caretPosition', position + emoji.length + 1);
-    map.set('idempotencyKey', uuid());
+  return state.merge({
+    text: `${oldText.slice(0, position)}${emoji} ${oldText.slice(position)}`,
+    focusDate: new Date(),
+    caretPosition: position + emoji.length + 1,
+    idempotencyKey: uuid(),
   });
 };
 
@@ -363,6 +356,18 @@ const updateSuggestionTags = (state, token) => {
   });
 };
 
+const updatePoll = (state, index, value) => state.updateIn(['poll', 'options'], options => {
+  const tmp = options.set(index, value).filterNot(x => x.trim().length === 0);
+
+  if (tmp.size === 0) {
+    return tmp.push('').push('');
+  } else if (tmp.size < pollLimits.max_options) {
+    return tmp.push('');
+  }
+
+  return tmp;
+});
+
 export default function compose(state = initialState, action) {
   switch(action.type) {
   case STORE_HYDRATE:
@@ -370,7 +375,9 @@ export default function compose(state = initialState, action) {
   case COMPOSE_MOUNT:
     return state.set('mounted', state.get('mounted') + 1);
   case COMPOSE_UNMOUNT:
-    return state.set('mounted', Math.max(state.get('mounted') - 1, 0));
+    return state
+      .set('mounted', Math.max(state.get('mounted') - 1, 0))
+      .set('is_composing', false);
   case COMPOSE_ADVANCED_OPTIONS_CHANGE:
     return state
       .set('advanced_options', state.get('advanced_options').set(action.option, !!overwrite(!state.getIn(['advanced_options', action.option]), action.value)))
@@ -408,9 +415,8 @@ export default function compose(state = initialState, action) {
     return state
       .set('text', action.text)
       .set('idempotencyKey', uuid());
-  case COMPOSE_CYCLE_ELEFRIEND:
-    return state
-      .set('elefriend', (state.get('elefriend') + 1) % totalElefriends);
+  case COMPOSE_COMPOSING_CHANGE:
+    return state.set('is_composing', action.value);
   case COMPOSE_REPLY:
     return state.withMutations(map => {
       map.set('id', null);
@@ -553,7 +559,7 @@ export default function compose(state = initialState, action) {
       return state;
     }
   case COMPOSE_EMOJI_INSERT:
-    return insertEmoji(state, action.position, action.emoji);
+    return insertEmoji(state, action.position, action.emoji, action.needsSpace);
   case COMPOSE_UPLOAD_CHANGE_SUCCESS:
     return state
       .set('is_changing_upload', false)
@@ -642,12 +648,8 @@ export default function compose(state = initialState, action) {
     return state.set('poll', initialPoll);
   case COMPOSE_POLL_REMOVE:
     return state.set('poll', null);
-  case COMPOSE_POLL_OPTION_ADD:
-    return state.updateIn(['poll', 'options'], options => options.push(action.title));
   case COMPOSE_POLL_OPTION_CHANGE:
-    return state.setIn(['poll', 'options', action.index], action.title);
-  case COMPOSE_POLL_OPTION_REMOVE:
-    return state.updateIn(['poll', 'options'], options => options.delete(action.index));
+    return updatePoll(state, action.index, action.title);
   case COMPOSE_POLL_SETTINGS_CHANGE:
     return state.update('poll', poll => poll.set('expires_in', action.expiresIn).set('multiple', action.isMultiple));
   case COMPOSE_LANGUAGE_CHANGE:
diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index ec2a7e7ced..a59bb2d441 100644
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -24,13 +24,14 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  border: 0;
   box-shadow: none;
   font-family: inherit;
   background: $ui-base-color;
   color: $darker-text-color;
   border-radius: 4px;
-  font-size: 14px;
+  border: 1px solid lighten($ui-base-color, 8%);
+  font-size: 17px;
+  line-height: normal;
   margin: 0;
 }
 
diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index 2f4027b03f..5963f3ee6e 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -1336,6 +1336,9 @@ a.sparkline {
 
     &__label {
       padding: 15px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
     }
 
     &__rules {
@@ -1346,6 +1349,9 @@ a.sparkline {
   &__rule {
     cursor: pointer;
     padding: 15px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index a796bce674..7dc8e340c3 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -8,7 +8,7 @@
 
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: darken($ui-base-color, 7%);
+  background: darken($ui-base-color, 8%);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 305c519d5d..e5c98f28bb 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -299,21 +299,16 @@
   }
 }
 
-.text-icon,
-.text-icon-button {
-  font-weight: 600;
-  font-size: 11px;
-  line-height: 27px;
-  cursor: default;
-}
-
 .text-icon-button {
   color: $lighter-text-color;
   border: 0;
   border-radius: 4px;
   background: transparent;
   cursor: pointer;
+  font-weight: 600;
+  font-size: 11px;
   padding: 0 3px;
+  line-height: 27px;
   white-space: nowrap;
 
   &:hover,
@@ -373,46 +368,155 @@ body > [data-popper-placement] {
   }
 }
 
-.compose-form {
-  padding: 10px; // glitch: reduced padding
+.autosuggest-textarea {
+  &__textarea {
+    background: transparent;
+    min-height: 100px;
+    padding-bottom: 0;
+    resize: none;
+    scrollbar-color: initial;
 
-  &__sensitive-button {
-    padding: 10px;
-    padding-top: 0;
-    font-size: 14px;
-    font-weight: 500;
-
-    &.active {
-      color: $highlight-text-color;
-    }
-
-    input[type='checkbox'] {
-      appearance: none;
-      display: inline-block;
-      position: relative;
-      border: 1px solid $ui-primary-color;
-      box-sizing: border-box;
-      width: 18px;
-      height: 18px;
-      flex: 0 0 auto;
-      margin-inline-end: 10px;
-      top: -1px;
-      border-radius: 4px;
-      vertical-align: middle;
-      cursor: inherit;
-
-      &:checked {
-        border-color: $highlight-text-color;
-        background: $highlight-text-color
-          url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>")
-          center center no-repeat;
-      }
+    &::-webkit-scrollbar {
+      all: unset;
     }
   }
 
-  .compose-form__warning {
+  &__suggestions {
+    box-shadow: var(--dropdown-shadow);
+    background: $ui-base-color;
+    border: 1px solid lighten($ui-base-color, 14%);
+    border-radius: 0 0 4px 4px;
+    color: $secondary-text-color;
+    font-size: 14px;
+    padding: 0;
+
+    &__item {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      height: 48px;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: $secondary-text-color;
+
+      &:last-child {
+        border-radius: 0 0 4px 4px;
+      }
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.selected {
+        background: $ui-highlight-color;
+        color: $primary-text-color;
+
+        .autosuggest-account .display-name__account {
+          color: inherit;
+        }
+      }
+    }
+  }
+}
+
+.autosuggest-account,
+.autosuggest-emoji,
+.autosuggest-hashtag {
+  flex: 1 0 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 8px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.autosuggest-account {
+  .display-name {
+    font-weight: 400;
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+  }
+
+  .display-name__account {
+    display: block;
+    line-height: 16px;
+    font-size: 12px;
+    color: $dark-text-color;
+  }
+}
+
+.autosuggest-hashtag {
+  justify-content: space-between;
+
+  &__name {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__uses {
+    flex: 0 0 auto;
+    text-align: end;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.autosuggest-emoji {
+  &__name {
+    flex: 1 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.autosuggest-account .account__avatar,
+.autosuggest-emoji img {
+  display: block;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+}
+
+.compose-form {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+
+  .layout-multiple-columns &,
+  .column & {
+    padding: 15px;
+  }
+
+  &__highlightable {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    flex: 0 1 auto;
+    border-radius: 4px;
+    border: 1px solid lighten($ui-base-color, 8%);
+    transition: border-color 300ms linear;
+    min-height: 0;
+    position: relative;
+    background: $ui-base-color;
+    overflow-y: auto;
+
+    &.active {
+      transition: none;
+      border-color: $ui-highlight-color;
+    }
+  }
+
+  &__warning {
     color: $inverted-text-color;
-    margin-bottom: 10px;
     background: $ui-primary-color;
     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
     padding: 8px 10px;
@@ -444,32 +548,27 @@ body > [data-popper-placement] {
     }
   }
 
-  .emoji-picker-dropdown {
-    position: absolute;
-    top: 0;
-    inset-inline-end: 0;
-  }
-
-  .compose-form__autosuggest-wrapper {
-    position: relative;
-  }
-
-  .autosuggest-textarea,
-  .autosuggest-input,
   .spoiler-input {
-    position: relative;
-    width: 100%;
-  }
+    display: flex;
+    align-items: stretch;
 
-  .spoiler-input {
-    height: 0;
-    transform-origin: bottom;
-    opacity: 0;
+    &__border {
+      background: url('~images/warning-stripes.svg') repeat-y;
+      width: 5px;
+      flex: 0 0 auto;
 
-    &.spoiler-input--visible {
-      height: 36px;
-      margin-bottom: 11px;
-      opacity: 1;
+      &:first-child {
+        border-start-start-radius: 4px;
+      }
+
+      &:last-child {
+        border-start-end-radius: 4px;
+      }
+    }
+
+    .autosuggest-input {
+      flex: 1 1 auto;
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
     }
   }
 
@@ -479,292 +578,367 @@ body > [data-popper-placement] {
     box-sizing: border-box;
     width: 100%;
     margin: 0;
-    color: $inverted-text-color;
-    background: $simple-background-color;
-    padding: 10px;
+    color: $secondary-text-color;
+    background: $ui-base-color;
     font-family: inherit;
     font-size: 14px;
-    resize: vertical;
+    padding: 12px;
+    line-height: normal;
     border: 0;
     outline: 0;
 
-    &::placeholder {
-      color: $dark-text-color;
-    }
-
     &:focus {
       outline: 0;
     }
-
-    @media screen and (width <= 600px) {
-      font-size: 16px;
-    }
   }
 
   .spoiler-input__input {
-    border-radius: 4px;
+    padding: 12px 12px - 5px;
+    background: mix($ui-base-color, $ui-highlight-color, 85%);
+    color: $highlight-text-color;
   }
 
-  .autosuggest-textarea__textarea {
-    min-height: 100px;
-    border-radius: 4px 4px 0 0;
-    padding-bottom: 0;
-    padding-right: 10px + 22px; // Cannot use inline-end because of dir=auto
-    resize: none;
-    scrollbar-color: initial;
-
-    &::-webkit-scrollbar {
-      all: unset;
-    }
-
-    @media screen and (width <= 600px) {
-      height: 100px !important; // Prevent auto-resize textarea
-      resize: vertical;
-    }
-  }
-
-  .autosuggest-textarea__suggestions-wrapper {
-    position: relative;
-    height: 0;
-  }
-
-  .autosuggest-textarea__suggestions {
-    box-sizing: border-box;
-    display: none;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    z-index: 99;
-    box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-    background: $ui-secondary-color;
-    border-radius: 0 0 4px 4px;
-    color: $inverted-text-color;
-    font-size: 14px;
-    padding: 6px;
-
-    &.autosuggest-textarea__suggestions--visible {
-      display: block;
-    }
-  }
-
-  .autosuggest-textarea__suggestions__item {
-    padding: 10px;
-    cursor: pointer;
-    border-radius: 4px;
-
-    &:hover,
-    &:focus,
-    &:active,
-    &.selected {
-      background: darken($ui-secondary-color, 10%);
-    }
-  }
-
-  .autosuggest-account,
-  .autosuggest-emoji,
-  .autosuggest-hashtag {
+  &__dropdowns {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    justify-content: flex-start;
-    line-height: 18px;
-    font-size: 14px;
-  }
+    gap: 8px;
 
-  .autosuggest-hashtag {
-    justify-content: space-between;
-
-    &__name {
-      flex: 1 1 auto;
+    & > div {
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    strong {
-      font-weight: 500;
-    }
-
-    &__uses {
-      flex: 0 0 auto;
-      text-align: end;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .autosuggest-account-icon,
-  .autosuggest-emoji img {
-    display: block;
-    margin-inline-end: 8px;
-    width: 16px;
-    height: 16px;
-  }
-
-  .autosuggest-account .display-name__account {
-    color: $lighter-text-color;
-  }
-
-  .compose-form__modifiers {
-    color: $inverted-text-color;
-    font-family: inherit;
-    font-size: 14px;
-    background: $simple-background-color;
-
-    .compose-form__upload-wrapper {
-      overflow: hidden;
-    }
-
-    .compose-form__uploads-wrapper {
       display: flex;
-      flex-direction: row;
-      padding: 5px;
-      flex-wrap: wrap;
+    }
+  }
+
+  &__uploads {
+    display: flex;
+    gap: 8px;
+    padding: 0 12px;
+    flex-wrap: wrap;
+    align-self: stretch;
+    align-items: flex-start;
+    align-content: flex-start;
+    justify-content: center;
+  }
+
+  &__upload {
+    flex: 1 1 0;
+    min-width: calc(50% - 8px);
+
+    &__actions {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 8px;
     }
 
-    .compose-form__upload {
-      flex: 1 1 0;
-      min-width: 40%;
-      margin: 5px;
-
-      &__actions {
-        background: linear-gradient(
-          180deg,
-          rgba($base-shadow-color, 0.8) 0,
-          rgba($base-shadow-color, 0.35) 80%,
-          transparent
-        );
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-      }
-
-      .icon-button {
-        flex: 0 1 auto;
-        color: $secondary-text-color;
-        font-size: 14px;
-        font-weight: 500;
-        padding: 10px;
-        font-family: inherit;
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: lighten($secondary-text-color, 7%);
-        }
-      }
-
-      &__warning {
-        position: absolute;
-        z-index: 2;
-        bottom: 0;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-        box-sizing: border-box;
-        background: linear-gradient(
-          0deg,
-          rgba($base-shadow-color, 0.8) 0,
-          rgba($base-shadow-color, 0.35) 80%,
-          transparent
-        );
-      }
+    &__preview {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 6px;
+      z-index: -1;
+      top: 0;
+      inset-inline-start: 0;
     }
 
-    .compose-form__upload-thumbnail {
-      border-radius: 4px;
-      background-color: $base-shadow-color;
+    &__thumbnail {
+      width: 100%;
+      height: 144px;
+      border-radius: 6px;
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
-      height: 140px;
-      width: 100%;
       overflow: hidden;
     }
+
+    .icon-button {
+      flex: 0 0 auto;
+      color: $white;
+      background: rgba(0, 0, 0, 75%);
+      border-radius: 6px;
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 500;
+      padding: 4px 8px;
+      font-family: inherit;
+
+      .icon {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    .icon-button.compose-form__upload__delete {
+      padding: 3px;
+      border-radius: 50%;
+
+      .icon {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    &__warning {
+      position: absolute;
+      z-index: 2;
+      bottom: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      padding: 8px;
+
+      .icon-button.active {
+        color: #ffbe2e;
+        background: rgba(0, 0, 0, 75%);
+      }
+    }
   }
 
-  .compose-form__buttons-wrapper {
-    padding: 10px;
-    background: darken($simple-background-color, 8%);
-    border-radius: 0 0 4px 4px;
-    display: flex;
-    justify-content: space-between;
-    flex: 0 0 auto;
+  // glitch: reintroduce sensitive button
+  &__sensitive-button {
+    padding: 0 12px;
 
-    .compose-form__buttons {
+    input[type='checkbox'] {
+      appearance: none;
+      display: block;
+      border: 1px solid $ui-primary-color;
+      box-sizing: border-box;
+      width: 17px;
+      height: 17px;
+      border-radius: 4px;
+      flex: 0 0 auto;
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: $highlight-text-color;
+        border-width: 4px;
+      }
+
+      &:checked {
+        background-color: $highlight-text-color;
+        border-color: $highlight-text-color;
+      }
+
+      &::-moz-focus-inner {
+        outline: 0 !important;
+        border: 0;
+      }
+
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    padding-top: 0;
+  }
+
+  &__submit {
+    display: flex;
+    flex: 1 0 100%; // glitch: always on its own line
+    max-width: 100%;
+    overflow: hidden;
+    gap: 5px; // glitch: handle secondary post privacy
+    align-items: stretch; // glitch: handle secondary post privacy
+
+    .button.secondary-post-button {
+      flex: 0 1 auto;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex: 1 1 auto;
+
+    & > div {
       display: flex;
-      gap: 2px;
-
-      .icon-button {
-        height: 100%;
-      }
-
-      .compose-form__upload-button-icon {
-        line-height: 27px;
-      }
-
-      .compose-form__sensitive-button {
-        display: none;
-
-        &.compose-form__sensitive-button--visible {
-          display: block;
-        }
-
-        .compose-form__sensitive-button__icon {
-          line-height: 27px;
-        }
-      }
     }
 
-    .icon-button,
-    .text-icon-button {
-      box-sizing: content-box;
-      padding: 0 3px;
+    .icon-button {
+      padding: 3px;
     }
 
-    .character-counter__wrapper {
-      align-self: center;
-      margin-inline-end: 4px;
+    .icon-button .icon {
+      width: 18px;
+      height: 18px;
     }
   }
 
-  .compose-form__publish {
+  &__actions {
     display: flex;
-    justify-content: flex-end;
-    min-width: 0;
+    align-items: center;
     flex: 0 0 auto;
-    column-gap: 5px;
+    gap: 12px;
+    flex-wrap: wrap;
 
-    .compose-form__publish-button-wrapper {
-      padding-top: 10px;
+    .button {
+      display: block; // Otherwise text-ellipsis doesn't work
+      font-size: 14px;
+      line-height: normal;
+      font-weight: 700;
+      flex: 1 1 auto;
+      padding: 5px 12px;
+      border-radius: 4px;
+    }
 
-      button {
-        padding: 7px 10px;
-        text-align: center;
+    .icon-button {
+      box-sizing: content-box;
+      color: $highlight-text-color;
 
-        & > span {
-          display: flex;
-          gap: 5px;
-          align-items: center;
-        }
+      &:hover,
+      &:focus,
+      &:active {
+        color: $highlight-text-color;
       }
 
-      .side_arm {
-        height: 100%;
+      &.disabled {
+        color: $highlight-text-color;
+        opacity: 0.5;
+      }
+
+      &.active {
+        background: $ui-highlight-color;
+        color: $primary-text-color;
       }
     }
   }
+
+  &__poll {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: 8px;
+
+    .poll__option {
+      padding: 0 12px;
+      gap: 8px;
+
+      &.empty:not(:focus-within) {
+        opacity: 0.5;
+      }
+    }
+
+    .poll__input {
+      width: 17px;
+      height: 17px;
+      border-color: $darker-text-color;
+    }
+
+    &__footer {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding-inline-start: 37px;
+      padding-inline-end: 40px;
+
+      &__sep {
+        width: 1px;
+        height: 22px;
+        background: lighten($ui-base-color, 8%);
+        flex: 0 0 auto;
+      }
+    }
+
+    &__select {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1 1 auto;
+      min-width: 0;
+
+      &__label {
+        flex: 0 0 auto;
+        font-size: 11px;
+        font-weight: 500;
+        line-height: 16px;
+        letter-spacing: 0.5px;
+        color: $darker-text-color;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      &__value {
+        flex: 0 0 auto;
+        appearance: none;
+        background: transparent;
+        border: none;
+        padding: 0;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        letter-spacing: 0.1px;
+        color: $highlight-text-color;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+.dropdown-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  color: $highlight-text-color;
+  border-radius: 6px;
+  border: 1px solid $highlight-text-color;
+  padding: 4px 8px;
+  font-size: 13px;
+  line-height: normal;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .icon {
+    width: 15px;
+    height: 15px;
+    flex: 0 0 auto;
+  }
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 auto;
+  }
+
+  &.active {
+    background: $ui-highlight-color;
+    border-color: $ui-highlight-color;
+    color: $primary-text-color;
+  }
 }
 
 .character-counter {
   cursor: default;
   font-family: $font-sans-serif, sans-serif;
   font-size: 14px;
-  font-weight: 600;
-  color: $lighter-text-color;
+  font-weight: 400;
+  line-height: normal;
+  color: $darker-text-color;
+  flex: 1 0 auto;
+  text-align: end;
 
   &.character-counter--over {
-    color: $warning-red;
+    color: $error-red;
   }
 }
 
@@ -774,28 +948,6 @@ body > [data-popper-placement] {
     opacity 0.4s ease;
 }
 
-.compose-form__textarea-icons {
-  display: block;
-  position: absolute;
-  top: 29px;
-  inset-inline-end: 5px;
-  bottom: 5px;
-  overflow: hidden;
-
-  & > .textarea_icon {
-    display: block;
-    margin-top: 2px;
-    margin-inline-start: 2px;
-    width: 24px;
-    height: 24px;
-    color: $lighter-text-color;
-    font-size: 18px;
-    line-height: 24px;
-    text-align: center;
-    opacity: 0.8;
-  }
-}
-
 .sign-in-banner {
   padding: 10px;
 
@@ -832,40 +984,6 @@ body > [data-popper-placement] {
   }
 }
 
-.reply-indicator {
-  border-radius: 4px;
-  margin-bottom: 10px;
-  background: $ui-primary-color;
-  padding: 10px;
-  min-height: 23px;
-  overflow-y: auto;
-  flex: 0 2 auto;
-}
-
-.reply-indicator__header {
-  margin-bottom: 5px;
-  overflow: hidden;
-}
-
-.reply-indicator__cancel {
-  float: right;
-  line-height: 24px;
-}
-
-.reply-indicator__display-name {
-  color: $inverted-text-color;
-  display: block;
-  max-width: 100%;
-  line-height: 24px;
-  overflow: hidden;
-  text-decoration: none;
-}
-
-.reply-indicator__display-avatar {
-  float: left;
-  margin-inline-end: 5px;
-}
-
 .status__content--with-action {
   cursor: pointer;
 }
@@ -875,14 +993,15 @@ body > [data-popper-placement] {
 }
 
 .status__content,
+.edit-indicator__content,
 .reply-indicator__content {
   position: relative;
-  font-size: 15px;
-  line-height: 20px;
   word-wrap: break-word;
   font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 15px;
+  line-height: 20px;
   padding-top: 2px;
   color: $primary-text-color;
 
@@ -970,6 +1089,174 @@ body > [data-popper-placement] {
   overflow: visible;
 }
 
+.reply-indicator {
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr);
+  grid-template-rows: 46px max-content;
+  gap: 0 10px;
+
+  .detailed-status__display-name {
+    margin-bottom: 4px;
+  }
+
+  .detailed-status__display-avatar {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: span 1;
+  }
+
+  &__main {
+    grid-column-start: 2;
+    grid-row-start: 1;
+    grid-row-end: span 2;
+  }
+
+  .display-name {
+    font-size: 14px;
+    line-height: 16px;
+
+    &__account {
+      display: none;
+    }
+  }
+
+  &__line {
+    grid-column-start: 1;
+    grid-row-start: 2;
+    grid-row-end: span 1;
+    position: relative;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      inset-inline-start: 50%;
+      top: 4px;
+      transform: translateX(-50%);
+      background: lighten($ui-base-color, 8%);
+      width: 2px;
+      height: calc(100% + 32px - 8px); // Account for gap to next element
+    }
+  }
+
+  &__content {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    padding: 0;
+    max-height: 4 * 20px;
+    overflow: hidden;
+    color: $darker-text-color;
+  }
+
+  &__attachments {
+    margin-top: 4px;
+    color: $darker-text-color;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.edit-indicator {
+  border-radius: 4px 4px 0 0;
+  background: lighten($ui-base-color, 4%);
+  padding: 12px;
+  overflow-y: auto;
+  flex: 0 0 auto;
+  border-bottom: 0.5px solid lighten($ui-base-color, 8%);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: $darker-text-color;
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__cancel {
+    display: flex;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &__display-name {
+    display: flex;
+    gap: 4px;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__content {
+    color: $secondary-text-color;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    padding-top: 0 !important;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    max-height: 4 * 20px;
+    overflow: hidden;
+
+    a {
+      color: $highlight-text-color;
+    }
+  }
+
+  &__attachments {
+    color: $darker-text-color;
+    font-size: 12px;
+    line-height: 16px;
+    opacity: 0.75;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.edit-indicator__content,
+.reply-indicator__content {
+  .emojione {
+    width: 18px;
+    height: 18px;
+    margin: -3px 0 0;
+  }
+}
+
 .announcements__item__content {
   word-wrap: break-word;
   overflow-y: auto;
@@ -1664,15 +1951,6 @@ body > [data-popper-placement] {
   line-height: 18px;
 }
 
-.reply-indicator__content {
-  color: $inverted-text-color;
-  font-size: 14px;
-
-  a {
-    color: $lighter-text-color;
-  }
-}
-
 .domain {
   padding: 10px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -1886,7 +2164,6 @@ a .account__avatar {
 }
 
 .status__display-name,
-.reply-indicator__display-name,
 .detailed-status__display-name,
 a.account__display-name {
   &:hover .display-name strong {
@@ -2145,57 +2422,45 @@ a.account__display-name {
 }
 
 .navigation-bar {
-  padding: 10px; // glitch: reduced padding
   display: flex;
   align-items: center;
   flex-shrink: 0;
   cursor: default;
   gap: 10px;
-  color: $darker-text-color;
 
-  strong {
-    color: $secondary-text-color;
+  .column > & {
+    padding: 15px;
   }
 
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
+  .account {
+    border-bottom: 0;
+    padding: 0;
+    flex: 1 1 auto;
+    min-width: 0;
 
-  .navigation-bar__actions {
-    position: relative;
+    &__display-name {
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.15px;
+      font-weight: 500;
 
-    .compose__action-bar .icon-button {
-      pointer-events: auto;
-      transform: scale(1, 1) translate(0, 0);
-      opacity: 1;
-
-      .icon {
-        width: 24px;
-        height: 24px;
+      .display-name__account {
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.1px;
       }
     }
   }
-}
 
-.navigation-bar__profile {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  line-height: 20px;
-}
+  .icon-button {
+    padding: 8px;
+    color: $secondary-text-color;
+  }
 
-.navigation-bar__profile-account {
-  display: inline;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.navigation-bar__profile-edit {
-  display: inline;
-  color: inherit;
-  text-decoration: none;
+  .icon-button .icon {
+    width: 24px;
+    height: 24px;
+  }
 }
 
 .dropdown-animation {
@@ -2369,6 +2634,7 @@ a.account__display-name {
   &__panels {
     display: flex;
     justify-content: center;
+    gap: 16px;
     width: 100%;
     height: 100%;
     min-height: 100vh;
@@ -2401,7 +2667,6 @@ a.account__display-name {
       flex-direction: column;
 
       @media screen and (min-width: $no-gap-breakpoint) {
-        padding: 0 10px;
         max-width: 600px;
       }
     }
@@ -2651,6 +2916,7 @@ $ui-header-height: 55px;
 
   .columns-area__panels {
     min-height: calc(100vh - $ui-header-height);
+    gap: 0;
   }
 
   .columns-area__panels__pane--navigational {
@@ -3050,21 +3316,6 @@ $ui-header-height: 55px;
   }
 }
 
-.compose-form__highlightable {
-  display: flex;
-  flex-direction: column;
-  flex: 0 1 auto;
-  border-radius: 4px;
-  transition: box-shadow 300ms linear;
-  min-height: 0;
-  position: relative;
-
-  &.active {
-    transition: none;
-    box-shadow: 0 0 0 6px rgba(lighten($highlight-text-color, 8%), 0.7);
-  }
-}
-
 .compose-panel {
   width: 285px;
   margin-top: 10px;
@@ -3093,32 +3344,9 @@ $ui-header-height: 55px;
     }
   }
 
-  .navigation-bar {
-    flex: 0 1 48px;
-  }
-
   .compose-form {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 310px;
-    padding-bottom: 71px;
-    margin-bottom: -71px;
-  }
-
-  .compose-form__autosuggest-wrapper {
-    overflow-y: auto;
-    background-color: $white;
-    border-radius: 4px 4px 0 0;
-    flex: 0 1 auto;
-  }
-
-  .autosuggest-textarea__textarea {
-    overflow-y: hidden;
-  }
-
-  .compose-form__upload-thumbnail {
-    height: 80px;
+    flex: 1 1 auto;
+    min-height: 0;
   }
 }
 
@@ -3138,6 +3366,10 @@ $ui-header-height: 55px;
     height: 30px;
     width: auto;
   }
+
+  &__logo {
+    margin-bottom: 12px;
+  }
 }
 
 .navigation-panel,
@@ -3169,7 +3401,7 @@ $ui-header-height: 55px;
   position: absolute;
   top: 0;
   inset-inline-start: 0;
-  background: $ui-base-color;
+  background: darken($ui-base-color, 4%);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -3185,7 +3417,7 @@ $ui-header-height: 55px;
 }
 
 .drawer__inner__mastodon {
-  background: $ui-base-color
+  background: darken($ui-base-color, 4%)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
     no-repeat bottom / 100% auto;
   flex: 1;
@@ -3202,71 +3434,25 @@ $ui-header-height: 55px;
     user-select: none;
   }
 
-  > .mastodon {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: 0;
-    cursor: inherit;
-  }
-
   @media screen and (height >= 640px) {
     display: block;
   }
 }
 
-.pseudo-drawer {
-  background: lighten($ui-base-color, 13%);
-  font-size: 13px;
-  text-align: start;
-}
-
 .drawer__header {
   flex: 0 0 auto;
   font-size: 16px;
-  background: $ui-base-color;
+  background: darken($ui-base-color, 4%);
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
   border-radius: 4px;
   overflow: hidden;
 
-  a:hover {
-    background: lighten($ui-base-color, 3%);
-  }
-}
-
-@for $i from 0 through 3 {
-  .mbstobon-#{$i} .drawer__inner__mastodon {
-    @if $i == 3 {
-      background:
-        url('~flavours/glitch/images/wave-drawer.png')
-          no-repeat
-          bottom /
-          100%
-          auto,
-        $ui-base-color;
-    } @else {
-      background:
-        url('~flavours/glitch/images/wave-drawer-glitched.png')
-          no-repeat
-          bottom /
-          100%
-          auto,
-        $ui-base-color;
-    }
-
-    & > .mastodon {
-      background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png')
-        no-repeat
-        left
-        bottom /
-        contain;
-
-      @if $i != 3 {
-        filter: contrast(50%) brightness(50%);
-      }
-    }
+  a:hover,
+  a:focus,
+  a:active {
+    background: $ui-base-color;
   }
 }
 
@@ -3478,7 +3664,7 @@ $ui-header-height: 55px;
 
   &--transparent {
     background: transparent;
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
 
     &:hover,
     &:focus,
@@ -4960,10 +5146,7 @@ a.status-card {
 }
 
 .emoji-picker-dropdown__menu {
-  background: $simple-background-color;
   position: relative;
-  box-shadow: var(--dropdown-shadow);
-  border-radius: 4px;
   margin-top: 5px;
   z-index: 2;
 
@@ -4986,11 +5169,12 @@ a.status-card {
 .emoji-picker-dropdown__modifiers__menu {
   position: absolute;
   z-index: 4;
-  top: -4px;
-  inset-inline-start: -8px;
-  background: $simple-background-color;
+  top: -5px;
+  inset-inline-start: -9px;
+  background: var(--dropdown-background-color);
+  border: 1px solid var(--dropdown-border-color);
   border-radius: 4px;
-  box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+  box-shadow: var(--dropdown-shadow);
   overflow: hidden;
 
   button {
@@ -5003,7 +5187,7 @@ a.status-card {
     &:hover,
     &:focus,
     &:active {
-      background: rgba($ui-secondary-color, 0.4);
+      background: var(--dropdown-border-color);
     }
   }
 
@@ -5072,15 +5256,17 @@ a.status-card {
 }
 
 .upload-progress {
-  padding: 10px;
-  color: $lighter-text-color;
+  color: $darker-text-color;
   overflow: hidden;
   display: flex;
-  gap: 10px;
+  gap: 8px;
+  align-items: center;
+  padding: 0 12px;
 
   .icon {
     width: 24px;
     height: 24px;
+    color: $ui-highlight-color;
   }
 
   span {
@@ -5099,7 +5285,7 @@ a.status-card {
   width: 100%;
   height: 6px;
   border-radius: 6px;
-  background: darken($simple-background-color, 8%);
+  background: darken($ui-base-color, 8%);
   position: relative;
   margin-top: 5px;
 }
@@ -5153,12 +5339,16 @@ a.status-card {
   filter: none;
 }
 
-.privacy-dropdown__dropdown {
-  background: $simple-background-color;
+.privacy-dropdown__dropdown,
+.language-dropdown__dropdown {
   box-shadow: var(--dropdown-shadow);
+  background: var(--dropdown-background-color);
+  border: 1px solid var(--dropdown-border-color);
+  padding: 4px;
   border-radius: 4px;
   overflow: hidden;
   z-index: 2;
+  width: 300px;
 
   &.top {
     transform-origin: 50% 100%;
@@ -5179,29 +5369,41 @@ a.status-card {
 }
 
 .privacy-dropdown__option {
-  color: $inverted-text-color;
-  padding: 10px;
-  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  padding: 8px 12px;
   cursor: pointer;
   display: flex;
+  align-items: center;
+  gap: 12px;
+  border-radius: 4px;
+  color: $primary-text-color;
 
   &:hover,
+  &:active {
+    background: var(--dropdown-border-color);
+  }
+
+  &:focus,
   &.active {
     background: $ui-highlight-color;
     color: $primary-text-color;
     outline: 0;
 
-    .privacy-dropdown__option__content {
+    .privacy-dropdown__option__content,
+    .privacy-dropdown__option__content strong,
+    .privacy-dropdown__option__additional {
       color: $primary-text-color;
-
-      strong {
-        color: $primary-text-color;
-      }
     }
   }
 
-  &.active:hover {
-    background: lighten($ui-highlight-color, 4%);
+  &__additional {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $darker-text-color;
+    cursor: help;
   }
 }
 
@@ -5209,17 +5411,16 @@ a.status-card {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-inline-end: 10px;
 }
 
 .privacy-dropdown__option__content {
   flex: 1 1 auto;
-  color: $lighter-text-color;
+  color: $darker-text-color;
 
   strong {
+    color: $primary-text-color;
     font-weight: 500;
     display: block;
-    color: $inverted-text-color;
 
     @each $lang in $cjk-langs {
       &:lang(#{$lang}) {
@@ -5343,64 +5544,78 @@ a.status-card {
 
 .language-dropdown {
   &__dropdown {
-    background: $simple-background-color;
-    box-shadow: var(--dropdown-shadow);
-    border-radius: 4px;
-    overflow: hidden;
-    z-index: 2;
-
-    &.top {
-      transform-origin: 50% 100%;
-    }
-
-    &.bottom {
-      transform-origin: 50% 0;
-    }
+    padding: 0;
 
     .emoji-mart-search {
-      padding-inline-end: 10px;
+      padding: 10px;
+      background: var(--dropdown-background-color);
+
+      input {
+        padding: 8px 12px;
+        background: $ui-base-color;
+        border: 1px solid lighten($ui-base-color, 8%);
+        color: $darker-text-color;
+
+        @media screen and (width <= 600px) {
+          font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 0.5px;
+        }
+      }
     }
 
     .emoji-mart-search-icon {
-      inset-inline-end: 10px + 5px;
+      inset-inline-end: 15px;
+      opacity: 1;
+      color: $darker-text-color;
+
+      .icon {
+        width: 18px;
+        height: 18px;
+      }
+
+      &:disabled {
+        opacity: 0.38;
+      }
     }
 
     .emoji-mart-scroll {
       padding: 0 10px 10px;
+      background: var(--dropdown-background-color);
     }
 
     &__results {
       &__item {
         cursor: pointer;
-        color: $inverted-text-color;
+        color: $primary-text-color;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.25px;
         font-weight: 500;
-        padding: 10px;
+        padding: 8px 12px;
         border-radius: 4px;
-        display: flex;
-        gap: 6px;
-        align-items: center;
-
-        &:focus,
-        &:active,
-        &:hover {
-          background: $ui-secondary-color;
-        }
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
 
         &__common-name {
           color: $darker-text-color;
+          font-weight: 400;
         }
 
+        &:active,
+        &:hover {
+          background: var(--dropdown-border-color);
+        }
+
+        &:focus,
         &.active {
           background: $ui-highlight-color;
           color: $primary-text-color;
           outline: 0;
 
           .language-dropdown__dropdown__results__item__common-name {
-            color: $secondary-text-color;
-          }
-
-          &:hover {
-            background: lighten($ui-highlight-color, 4%);
+            color: $primary-text-color;
           }
         }
       }
@@ -5409,9 +5624,13 @@ a.status-card {
 }
 
 .search {
-  margin-bottom: 10px;
+  margin-bottom: 32px;
   position: relative;
 
+  .layout-multiple-columns & {
+    margin-bottom: 10px;
+  }
+
   &__popout {
     box-sizing: border-box;
     display: none;
@@ -5420,6 +5639,7 @@ a.status-card {
     margin-top: -2px;
     width: 100%;
     background: $ui-base-color;
+    border: 1px solid lighten($ui-base-color, 8%);
     border-radius: 0 0 4px 4px;
     box-shadow: var(--dropdown-shadow);
     z-index: 99;
@@ -5428,7 +5648,7 @@ a.status-card {
 
     h4 {
       text-transform: uppercase;
-      color: $dark-text-color;
+      color: $darker-text-color;
       font-weight: 500;
       padding: 0 10px;
       margin-bottom: 10px;
@@ -5436,6 +5656,7 @@ a.status-card {
 
     .icon-button {
       padding: 0;
+      color: $darker-text-color;
     }
 
     .icon {
@@ -5451,7 +5672,7 @@ a.status-card {
       }
 
       &__message {
-        color: $dark-text-color;
+        color: $darker-text-color;
         padding: 0 10px;
       }
 
@@ -5507,6 +5728,10 @@ a.status-card {
   }
 
   &.active {
+    .search__input {
+      border-radius: 4px 4px 0 0;
+    }
+
     .search__popout {
       display: block;
     }
@@ -5517,14 +5742,9 @@ a.status-card {
   @include search-input;
 
   display: block;
-  padding: 15px;
-  padding-inline-end: 30px;
-  line-height: 18px;
-  font-size: 16px;
-
-  &::placeholder {
-    color: lighten($darker-text-color, 4%);
-  }
+  padding: 12px 16px;
+  padding-inline-start: 16px + 15px + 8px;
+  line-height: normal;
 
   &::-moz-focus-inner {
     border: 0;
@@ -5535,10 +5755,6 @@ a.status-card {
   &:active {
     outline: 0 !important;
   }
-
-  &:focus {
-    background: lighten($ui-base-color, 4%);
-  }
 }
 
 .search__icon {
@@ -5553,21 +5769,21 @@ a.status-card {
 
   .icon {
     position: absolute;
-    top: 13px;
-    inset-inline-end: 10px;
+    top: 12px + 2px;
+    inset-inline-start: 16px - 2px;
     display: inline-block;
     opacity: 0;
     transition: all 100ms linear;
     transition-property: transform, opacity;
-    width: 24px;
-    height: 24px;
-    color: $secondary-text-color;
+    width: 20px;
+    height: 20px;
+    color: $darker-text-color;
     cursor: default;
     pointer-events: none;
 
     &.active {
       pointer-events: auto;
-      opacity: 0.3;
+      opacity: 1;
     }
   }
 
@@ -5582,16 +5798,10 @@ a.status-card {
 
   .icon-times-circle {
     transform: rotate(0deg);
-    color: $action-button-color;
     cursor: pointer;
 
     &.active {
       transform: rotate(90deg);
-      opacity: 1;
-    }
-
-    &:hover {
-      color: lighten($action-button-color, 7%);
     }
   }
 }
@@ -6212,6 +6422,11 @@ a.status-card {
     }
   }
 
+  .dialog-option {
+    align-items: center;
+    gap: 12px;
+  }
+
   .dialog-option .poll__input {
     border-color: $inverted-text-color;
     color: $ui-secondary-color;
@@ -6220,8 +6435,8 @@ a.status-card {
     justify-content: center;
 
     svg {
-      width: 8px;
-      height: auto;
+      width: 15px;
+      height: 15px;
     }
 
     &:active,
@@ -7491,90 +7706,6 @@ noscript {
   }
 }
 
-@media screen and (width <= 630px) and (height <= 400px) {
-  $duration: 400ms;
-  $delay: 100ms;
-
-  .search {
-    will-change: margin-top;
-    transition: margin-top $duration $delay;
-  }
-
-  .navigation-bar {
-    will-change: padding-bottom;
-    transition: padding-bottom $duration $delay;
-  }
-
-  .navigation-bar {
-    & > a:first-child {
-      will-change: margin-top, margin-inline-start, margin-inline-end, width;
-      transition:
-        margin-top $duration $delay,
-        margin-inline-start $duration ($duration + $delay),
-        margin-inline-end $duration ($duration + $delay);
-    }
-
-    & > .navigation-bar__profile-edit {
-      will-change: margin-top;
-      transition: margin-top $duration $delay;
-    }
-
-    .navigation-bar__actions {
-      & > .icon-button.close {
-        will-change: opacity transform;
-        transition:
-          opacity $duration * 0.5 $delay,
-          transform $duration $delay;
-      }
-
-      & > .compose__action-bar .icon-button {
-        will-change: opacity transform;
-        transition:
-          opacity $duration * 0.5 $delay + $duration * 0.5,
-          transform $duration $delay;
-      }
-    }
-  }
-
-  .is-composing {
-    .search {
-      margin-top: -50px;
-    }
-
-    .navigation-bar {
-      padding-bottom: 0;
-
-      & > a:first-child {
-        margin: -100px 10px 0 -50px;
-      }
-
-      .navigation-bar__profile {
-        padding-top: 2px;
-      }
-
-      .navigation-bar__profile-edit {
-        position: absolute;
-        margin-top: -60px;
-      }
-
-      .navigation-bar__actions {
-        .icon-button.close {
-          pointer-events: auto;
-          opacity: 1;
-          transform: scale(1, 1) translate(0, 0);
-          bottom: 5px;
-        }
-
-        .compose__action-bar .icon-button {
-          pointer-events: none;
-          opacity: 0;
-          transform: scale(0, 1) translate(100%, 0);
-        }
-      }
-    }
-  }
-}
-
 .embed-modal {
   width: auto;
   max-width: 80vw;
@@ -9543,11 +9674,14 @@ noscript {
 
 .link-footer {
   flex: 0 0 auto;
-  padding: 10px;
   padding-top: 20px;
   z-index: 1;
   font-size: 13px;
 
+  .column & {
+    padding: 15px;
+  }
+
   p {
     color: $dark-text-color;
     margin-bottom: 20px;
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index 6d72e43924..632f1da8c7 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -40,13 +40,12 @@
   .compose-form {
     width: 400px;
     margin: 0 auto;
-    padding: 20px 0;
-    margin-top: 40px;
+    padding: 10px 0;
+    padding-bottom: 20px;
     box-sizing: border-box;
 
     @media screen and (width <= 400px) {
       width: 100%;
-      margin-top: 0;
       padding: 20px;
     }
   }
@@ -56,13 +55,15 @@
   width: 400px;
   margin: 0 auto;
   display: flex;
-  font-size: 13px;
-  line-height: 18px;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 20px;
   box-sizing: border-box;
   padding: 20px 0;
   margin-top: 40px;
   margin-bottom: 10px;
-  border-bottom: 1px solid $ui-base-color;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 
   @media screen and (width <= 440px) {
     width: 100%;
@@ -73,6 +74,7 @@
   .avatar {
     width: 40px;
     height: 40px;
+    flex: 0 0 auto;
     @include avatar-size(40px);
 
     margin-inline-end: 10px;
@@ -90,13 +92,14 @@
   .name {
     flex: 1 1 auto;
     color: $secondary-text-color;
-    width: calc(100% - 90px);
 
     .username {
       display: block;
-      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
       text-overflow: ellipsis;
       overflow: hidden;
+      color: $primary-text-color;
     }
   }
 
@@ -104,7 +107,7 @@
     display: block;
     font-size: 32px;
     line-height: 40px;
-    margin-inline-start: 10px;
+    flex: 0 0 auto;
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss
index 1c2386f02d..ae607f484a 100644
--- a/app/javascript/flavours/glitch/styles/contrast/diff.scss
+++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss
@@ -1,20 +1,7 @@
-.compose-form {
-  .compose-form__modifiers {
-    .compose-form__upload {
-      &-description {
-        input {
-          &::placeholder {
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-}
-
 .status__content a,
-.link-footer a,
 .reply-indicator__content a,
+.edit-indicator__content a,
+.link-footer a,
 .status__content__read-more-button,
 .status__content__translate-button {
   text-decoration: underline;
@@ -42,7 +29,9 @@
   }
 }
 
-.status__content a {
+.status__content a,
+.reply-indicator__content a,
+.edit-indicator__content a {
   color: $highlight-text-color;
 }
 
@@ -50,24 +39,10 @@
   color: $darker-text-color;
 }
 
-.compose-form__poll-wrapper .button.button-secondary,
-.compose-form .autosuggest-textarea__textarea::placeholder,
-.compose-form .spoiler-input__input::placeholder,
-.report-dialog-modal__textarea::placeholder,
-.language-dropdown__dropdown__results__item__common-name,
-.compose-form .icon-button {
+.report-dialog-modal__textarea::placeholder {
   color: $inverted-text-color;
 }
 
-.text-icon-button.active {
-  color: $ui-highlight-color;
-}
-
-.language-dropdown__dropdown__results__item.active {
-  background: $ui-highlight-color;
-  font-weight: 500;
-}
-
 .link-button:disabled {
   cursor: not-allowed;
 
diff --git a/app/javascript/flavours/glitch/styles/emoji_picker.scss b/app/javascript/flavours/glitch/styles/emoji_picker.scss
index c7247c3a57..fec0c10ddb 100644
--- a/app/javascript/flavours/glitch/styles/emoji_picker.scss
+++ b/app/javascript/flavours/glitch/styles/emoji_picker.scss
@@ -1,7 +1,6 @@
 .emoji-mart {
   font-size: 13px;
   display: inline-block;
-  color: $inverted-text-color;
 
   &,
   * {
@@ -15,13 +14,13 @@
 }
 
 .emoji-mart-bar {
-  border: 0 solid darken($ui-secondary-color, 8%);
+  border: 0 solid var(--dropdown-border-color);
 
   &:first-child {
     border-bottom-width: 1px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
-    background: $ui-secondary-color;
+    background: var(--dropdown-border-color);
   }
 
   &:last-child {
@@ -36,7 +35,6 @@
   display: flex;
   justify-content: space-between;
   padding: 0 6px;
-  color: $lighter-text-color;
   line-height: 0;
 }
 
@@ -50,9 +48,10 @@
   cursor: pointer;
   background: transparent;
   border: 0;
+  color: $darker-text-color;
 
   &:hover {
-    color: darken($lighter-text-color, 4%);
+    color: lighten($darker-text-color, 4%);
   }
 }
 
@@ -60,7 +59,7 @@
   color: $highlight-text-color;
 
   &:hover {
-    color: darken($highlight-text-color, 4%);
+    color: lighten($highlight-text-color, 4%);
   }
 
   .emoji-mart-anchor-bar {
@@ -95,7 +94,7 @@
   height: 270px;
   max-height: 35vh;
   padding: 0 6px 6px;
-  background: $simple-background-color;
+  background: var(--dropdown-background-color);
   will-change: transform;
 
   &::-webkit-scrollbar-track:hover,
@@ -107,7 +106,7 @@
 .emoji-mart-search {
   padding: 10px;
   padding-inline-end: 45px;
-  background: $simple-background-color;
+  background: var(--dropdown-background-color);
   position: relative;
 
   input {
@@ -118,9 +117,9 @@
     font-family: inherit;
     display: block;
     width: 100%;
-    background: rgba($ui-secondary-color, 0.3);
-    color: $inverted-text-color;
-    border: 1px solid $ui-secondary-color;
+    background: $ui-base-color;
+    color: $darker-text-color;
+    border: 1px solid lighten($ui-base-color, 8%);
     border-radius: 4px;
 
     &::-moz-focus-inner {
@@ -155,11 +154,10 @@
   &:disabled {
     cursor: default;
     pointer-events: none;
-    opacity: 0.3;
   }
 
   svg {
-    fill: $action-button-color;
+    fill: $darker-text-color;
   }
 }
 
@@ -180,7 +178,7 @@
     inset-inline-start: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($ui-secondary-color, 0.7);
+    background-color: var(--dropdown-border-color);
     border-radius: 100%;
   }
 }
@@ -197,7 +195,7 @@
     width: 100%;
     font-weight: 500;
     padding: 5px 6px;
-    background: $simple-background-color;
+    background: var(--dropdown-background-color);
   }
 }
 
@@ -241,7 +239,7 @@
 
 .emoji-mart-no-results {
   font-size: 14px;
-  color: $light-text-color;
+  color: $dark-text-color;
   text-align: center;
   padding: 5px 6px;
   padding-top: 70px;
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 0f3a6fa32f..1025a1bbaa 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -145,10 +145,6 @@ html {
   }
 }
 
-.compose-form__autosuggest-wrapper,
-.poll__option input[type='text'],
-.compose-form .spoiler-input__input,
-.compose-form__poll-wrapper select,
 .search__input,
 .setting-text,
 .report-dialog-modal__textarea,
@@ -172,28 +168,11 @@ html {
   border-bottom: 0;
 }
 
-.compose-form__poll-wrapper select {
-  background: $simple-background-color
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
-    no-repeat right 8px center / auto 16px;
-}
-
-.compose-form__poll-wrapper,
-.compose-form__poll-wrapper .poll__footer {
-  border-top-color: lighten($ui-base-color, 8%);
-}
-
 .notification__filter-bar {
   border: 1px solid lighten($ui-base-color, 8%);
   border-top: 0;
 }
 
-.compose-form .compose-form__buttons-wrapper {
-  background: $ui-base-color;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-}
-
 .drawer__header,
 .drawer__inner {
   background: $white;
@@ -206,52 +185,6 @@ html {
     no-repeat bottom / 100% auto;
 }
 
-// Change the colors used in compose-form
-.compose-form {
-  .compose-form__modifiers {
-    .compose-form__upload__actions .icon-button,
-    .compose-form__upload__warning .icon-button {
-      color: lighten($white, 7%);
-
-      &:active,
-      &:focus,
-      &:hover {
-        color: $white;
-      }
-    }
-  }
-
-  .compose-form__buttons-wrapper {
-    background: darken($ui-base-color, 6%);
-  }
-
-  .autosuggest-textarea__suggestions {
-    background: darken($ui-base-color, 6%);
-  }
-
-  .autosuggest-textarea__suggestions__item {
-    &:hover,
-    &:focus,
-    &:active,
-    &.selected {
-      background: lighten($ui-base-color, 4%);
-    }
-  }
-}
-
-.emoji-mart-bar {
-  border-color: lighten($ui-base-color, 4%);
-
-  &:first-child {
-    background: darken($ui-base-color, 6%);
-  }
-}
-
-.emoji-mart-search input {
-  background: rgba($ui-base-color, 0.3);
-  border-color: $ui-base-color;
-}
-
 .upload-progress__backdrop {
   background: $ui-base-color;
 }
@@ -283,46 +216,11 @@ html {
   background: $ui-base-color;
 }
 
-.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
-  color: $white;
-}
-
 .account-gallery__item a {
   background-color: $ui-base-color;
 }
 
-// Change the colors used in the dropdown menu
-.dropdown-menu {
-  background: $white;
-
-  &__arrow::before {
-    background-color: $white;
-  }
-
-  &__item {
-    color: $darker-text-color;
-
-    &--dangerous {
-      color: $error-value-color;
-    }
-
-    a,
-    button {
-      background: $white;
-    }
-  }
-}
-
 // Change the text colors on inverted background
-.privacy-dropdown__option.active,
-.privacy-dropdown__option:hover,
-.privacy-dropdown__option.active .privacy-dropdown__option__content,
-.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
-.privacy-dropdown__option:hover .privacy-dropdown__option__content,
-.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
-.dropdown-menu__item:not(.dropdown-menu__item--dangerous) a:active,
-.dropdown-menu__item:not(.dropdown-menu__item--dangerous) a:focus,
-.dropdown-menu__item:not(.dropdown-menu__item--dangerous) a:hover,
 .actions-modal ul li:not(:empty) a.active,
 .actions-modal ul li:not(:empty) a.active button,
 .actions-modal ul li:not(:empty) a:active,
@@ -331,7 +229,6 @@ html {
 .actions-modal ul li:not(:empty) a:focus button,
 .actions-modal ul li:not(:empty) a:hover,
 .actions-modal ul li:not(:empty) a:hover button,
-.language-dropdown__dropdown__results__item.active,
 .admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
 .simple_form .block-button,
 .simple_form .button,
@@ -339,19 +236,6 @@ html {
   color: $white;
 }
 
-.language-dropdown__dropdown__results__item
-  .language-dropdown__dropdown__results__item__common-name {
-  color: lighten($ui-base-color, 8%);
-}
-
-.language-dropdown__dropdown__results__item.active
-  .language-dropdown__dropdown__results__item__common-name {
-  color: darken($ui-base-color, 12%);
-}
-
-.dropdown-menu__separator,
-.dropdown-menu__item.edited-timestamp__history__item,
-.dropdown-menu__container__header,
 .compare-history-modal .report-modal__target,
 .report-dialog-modal .poll__option.dialog-option {
   border-bottom-color: lighten($ui-base-color, 4%);
@@ -385,10 +269,7 @@ html {
 
 .reactions-bar__item:hover,
 .reactions-bar__item:focus,
-.reactions-bar__item:active,
-.language-dropdown__dropdown__results__item:hover,
-.language-dropdown__dropdown__results__item:focus,
-.language-dropdown__dropdown__results__item:active {
+.reactions-bar__item:active {
   background-color: $ui-base-color;
 }
 
@@ -631,11 +512,6 @@ html {
   }
 }
 
-.reply-indicator {
-  background: transparent;
-  border: 1px solid lighten($ui-base-color, 8%);
-}
-
 .status__content,
 .reply-indicator__content {
   a {
@@ -745,3 +621,30 @@ html {
     filter: contrast(75%) brightness(75%) !important;
   }
 }
+
+.compose-form__actions .icon-button.active,
+.dropdown-button.active,
+.privacy-dropdown__option.active,
+.privacy-dropdown__option:focus,
+.language-dropdown__dropdown__results__item:focus,
+.language-dropdown__dropdown__results__item.active,
+.privacy-dropdown__option:focus .privacy-dropdown__option__content,
+.privacy-dropdown__option:focus .privacy-dropdown__option__content strong,
+.privacy-dropdown__option.active .privacy-dropdown__option__content,
+.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
+.language-dropdown__dropdown__results__item:focus
+  .language-dropdown__dropdown__results__item__common-name,
+.language-dropdown__dropdown__results__item.active
+  .language-dropdown__dropdown__results__item__common-name {
+  color: $white;
+}
+
+.compose-form .spoiler-input__input {
+  color: lighten($ui-highlight-color, 8%);
+}
+
+.compose-form .autosuggest-textarea__textarea,
+.compose-form__highlightable,
+.poll__option input[type='text'] {
+  background: darken($ui-base-color, 10%);
+}
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
index 250e200fc6..3cf5561ca3 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
@@ -34,7 +34,7 @@ $ui-button-tertiary-border-color: $blurple-500 !default;
 
 $primary-text-color: $black !default;
 $darker-text-color: $classic-base-color !default;
-$highlight-text-color: darken($ui-highlight-color, 8%) !default;
+$highlight-text-color: $ui-highlight-color !default;
 $dark-text-color: #444b5d;
 $action-button-color: #606984;
 
@@ -55,3 +55,8 @@ $account-background-color: $white !default;
 }
 
 $emojis-requiring-inversion: 'chains';
+
+.theme-mastodon-light {
+  --dropdown-border-color: #d9e1e8;
+  --dropdown-background-color: #fff;
+}
diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss
index 0b7220b21d..60e7d62245 100644
--- a/app/javascript/flavours/glitch/styles/modal.scss
+++ b/app/javascript/flavours/glitch/styles/modal.scss
@@ -1,5 +1,5 @@
 .modal-layout {
-  background: $ui-base-color
+  background: darken($ui-base-color, 4%)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
     repeat-x bottom fixed;
   display: flex;
diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss
index 4566a013a6..f12fd827de 100644
--- a/app/javascript/flavours/glitch/styles/polls.scss
+++ b/app/javascript/flavours/glitch/styles/polls.scss
@@ -58,6 +58,8 @@
   &__option {
     position: relative;
     display: flex;
+    align-items: flex-start;
+    gap: 8px;
     padding: 6px 0;
     line-height: 18px;
     cursor: default;
@@ -84,16 +86,22 @@
       box-sizing: border-box;
       width: 100%;
       font-size: 14px;
-      color: $inverted-text-color;
+      color: $secondary-text-color;
       outline: 0;
       font-family: inherit;
-      background: $simple-background-color;
-      border: 1px solid darken($simple-background-color, 14%);
+      background: $ui-base-color;
+      border: 1px solid $darker-text-color;
       border-radius: 4px;
-      padding: 6px 10px;
+      padding: 8px 12px;
 
       &:focus {
-        border-color: $highlight-text-color;
+        border-color: $ui-highlight-color;
+      }
+
+      @media screen and (width <= 600px) {
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
       }
     }
 
@@ -102,26 +110,20 @@
     }
 
     &.editable {
-      display: flex;
       align-items: center;
       overflow: visible;
     }
   }
 
   &__input {
-    display: inline-block;
+    display: block;
     position: relative;
     border: 1px solid $ui-primary-color;
     box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    margin-inline-end: 10px;
-    top: -1px;
+    width: 17px;
+    height: 17px;
     border-radius: 50%;
-    vertical-align: middle;
-    margin-top: auto;
-    margin-bottom: auto;
-    flex: 0 0 18px;
+    flex: 0 0 auto;
 
     &.checkbox {
       border-radius: 4px;
@@ -165,6 +167,15 @@
     }
   }
 
+  &__option.editable &__input {
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: $ui-primary-color;
+      border-width: 1px;
+    }
+  }
+
   &__number {
     display: inline-block;
     width: 45px;
@@ -215,92 +226,6 @@
   }
 }
 
-.compose-form__poll-wrapper {
-  border-top: 1px solid darken($simple-background-color, 8%);
-  overflow-x: hidden;
-
-  ul {
-    padding: 10px;
-  }
-
-  .poll__input {
-    &:active,
-    &:focus,
-    &:hover {
-      border-color: $ui-button-focus-background-color;
-    }
-  }
-
-  .poll__footer {
-    border-top: 1px solid darken($simple-background-color, 8%);
-    padding: 10px;
-    display: flex;
-    align-items: center;
-
-    button,
-    select {
-      width: 100%;
-      flex: 1 1 50%;
-
-      &:focus {
-        border-color: $highlight-text-color;
-      }
-    }
-  }
-
-  .button.button-secondary {
-    font-size: 14px;
-    font-weight: 400;
-    padding: 6px 10px;
-    height: auto;
-    line-height: inherit;
-    color: $action-button-color;
-    border-color: $action-button-color;
-    margin-inline-end: 5px;
-
-    &:hover,
-    &:focus,
-    &.active {
-      border-color: $action-button-color;
-      background-color: $action-button-color;
-      color: $ui-button-color;
-    }
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-
-    .poll__option {
-      flex: 0 0 auto;
-      width: calc(100% - (23px + 6px));
-      margin-inline-end: 6px;
-    }
-  }
-
-  select {
-    appearance: none;
-    box-sizing: border-box;
-    font-size: 14px;
-    color: $inverted-text-color;
-    display: inline-block;
-    width: auto;
-    outline: 0;
-    font-family: inherit;
-    background: $simple-background-color
-      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
-      no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($simple-background-color, 14%);
-    border-radius: 4px;
-    padding: 6px 10px;
-    padding-inline-end: 30px;
-  }
-
-  .icon-button.disabled {
-    color: darken($simple-background-color, 14%);
-  }
-}
-
 .muted .poll {
   color: $dark-text-color;
 
diff --git a/app/javascript/images/warning-stripes.svg b/app/javascript/images/warning-stripes.svg
new file mode 100755
index 0000000000..9d68acdada
--- /dev/null
+++ b/app/javascript/images/warning-stripes.svg
@@ -0,0 +1,25 @@
+<svg width="5" height="80" viewBox="0 0 5 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_253_1286)">
+<rect width="5" height="80" fill="url(#paint0_linear_253_1286)"/>
+<line x1="-0.860365" y1="6.80136" x2="10.6078" y2="-1.22871" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="14.8314" x2="10.6078" y2="6.80132" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="22.8615" x2="10.6078" y2="14.8314" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="30.8916" x2="10.6078" y2="22.8615" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="38.9216" x2="10.6078" y2="30.8915" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="46.9517" x2="10.6078" y2="38.9216" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="54.9818" x2="10.6078" y2="46.9517" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="63.0118" x2="10.6078" y2="54.9817" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="71.0419" x2="10.6078" y2="63.0118" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="79.072" x2="10.6078" y2="71.0419" stroke="black" stroke-width="3"/>
+<line x1="-0.860365" y1="87.102" x2="10.6078" y2="79.072" stroke="black" stroke-width="3"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_253_1286" x1="2.5" y1="0" x2="2.5" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEC84B"/>
+<stop offset="1" stop-color="#F79009"/>
+</linearGradient>
+<clipPath id="clip0_253_1286">
+<rect width="5" height="80" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap
index 1c37278483..dc955b7abe 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap
@@ -9,7 +9,11 @@ exports[`<AutosuggestEmoji /> renders emoji with custom url 1`] = `
     className="emojione"
     src="http://example.com/emoji.png"
   />
-  :foobar:
+  <div
+    className="autosuggest-emoji__name"
+  >
+    :foobar:
+  </div>
 </div>
 `;
 
@@ -22,6 +26,10 @@ exports[`<AutosuggestEmoji /> renders native emoji 1`] = `
     className="emojione"
     src="/emoji/1f499.svg"
   />
-  :foobar:
+  <div
+    className="autosuggest-emoji__name"
+  >
+    :foobar:
+  </div>
 </div>
 `;
diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx
index f82dd9153a..4a99dd0bbf 100644
--- a/app/javascript/mastodon/components/account.jsx
+++ b/app/javascript/mastodon/components/account.jsx
@@ -37,10 +37,10 @@ class Account extends ImmutablePureComponent {
   static propTypes = {
     size: PropTypes.number,
     account: ImmutablePropTypes.record,
-    onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
-    onMute: PropTypes.func.isRequired,
-    onMuteNotifications: PropTypes.func.isRequired,
+    onFollow: PropTypes.func,
+    onBlock: PropTypes.func,
+    onMute: PropTypes.func,
+    onMuteNotifications: PropTypes.func,
     intl: PropTypes.object.isRequired,
     hidden: PropTypes.bool,
     minimal: PropTypes.bool,
diff --git a/app/javascript/mastodon/components/autosuggest_emoji.jsx b/app/javascript/mastodon/components/autosuggest_emoji.jsx
index 28f628b4ac..adea1d9f4b 100644
--- a/app/javascript/mastodon/components/autosuggest_emoji.jsx
+++ b/app/javascript/mastodon/components/autosuggest_emoji.jsx
@@ -35,7 +35,7 @@ export default class AutosuggestEmoji extends PureComponent {
           alt={emoji.native || emoji.colons}
         />
 
-        {emoji.colons}
+        <div className='autosuggest-emoji__name'>{emoji.colons}</div>
       </div>
     );
   }
diff --git a/app/javascript/mastodon/components/autosuggest_hashtag.tsx b/app/javascript/mastodon/components/autosuggest_hashtag.tsx
index e83d493c2c..036946b0f1 100644
--- a/app/javascript/mastodon/components/autosuggest_hashtag.tsx
+++ b/app/javascript/mastodon/components/autosuggest_hashtag.tsx
@@ -1,5 +1,3 @@
-import { FormattedMessage } from 'react-intl';
-
 import { ShortNumber } from 'mastodon/components/short_number';
 
 interface Props {
@@ -16,27 +14,18 @@ interface Props {
   };
 }
 
-export const AutosuggestHashtag: React.FC<Props> = ({ tag }) => {
-  const weeklyUses = tag.history && (
-    <ShortNumber
-      value={tag.history.reduce((total, day) => total + day.uses * 1, 0)}
-    />
-  );
-
-  return (
-    <div className='autosuggest-hashtag'>
-      <div className='autosuggest-hashtag__name'>
-        #<strong>{tag.name}</strong>
-      </div>
-      {tag.history !== undefined && (
-        <div className='autosuggest-hashtag__uses'>
-          <FormattedMessage
-            id='autosuggest_hashtag.per_week'
-            defaultMessage='{count} per week'
-            values={{ count: weeklyUses }}
-          />
-        </div>
-      )}
+export const AutosuggestHashtag: React.FC<Props> = ({ tag }) => (
+  <div className='autosuggest-hashtag'>
+    <div className='autosuggest-hashtag__name'>
+      #<strong>{tag.name}</strong>
     </div>
-  );
-};
+
+    {tag.history !== undefined && (
+      <div className='autosuggest-hashtag__uses'>
+        <ShortNumber
+          value={tag.history.reduce((total, day) => total + day.uses * 1, 0)}
+        />
+      </div>
+    )}
+  </div>
+);
diff --git a/app/javascript/mastodon/components/autosuggest_input.jsx b/app/javascript/mastodon/components/autosuggest_input.jsx
index 06cbb5d75b..f707a18e1d 100644
--- a/app/javascript/mastodon/components/autosuggest_input.jsx
+++ b/app/javascript/mastodon/components/autosuggest_input.jsx
@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
+import Overlay from 'react-overlays/Overlay';
+
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 
 import AutosuggestEmoji from './autosuggest_emoji';
@@ -195,34 +197,37 @@ export default class AutosuggestInput extends ImmutablePureComponent {
 
     return (
       <div className='autosuggest-input'>
-        <label>
-          <span style={{ display: 'none' }}>{placeholder}</span>
+        <input
+          type='text'
+          ref={this.setInput}
+          disabled={disabled}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          value={value}
+          onChange={this.onChange}
+          onKeyDown={this.onKeyDown}
+          onKeyUp={onKeyUp}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          dir='auto'
+          aria-autocomplete='list'
+          aria-label={placeholder}
+          id={id}
+          className={className}
+          maxLength={maxLength}
+          lang={lang}
+          spellCheck={spellCheck}
+        />
 
-          <input
-            type='text'
-            ref={this.setInput}
-            disabled={disabled}
-            placeholder={placeholder}
-            autoFocus={autoFocus}
-            value={value}
-            onChange={this.onChange}
-            onKeyDown={this.onKeyDown}
-            onKeyUp={onKeyUp}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            dir='auto'
-            aria-autocomplete='list'
-            id={id}
-            className={className}
-            maxLength={maxLength}
-            lang={lang}
-            spellCheck={spellCheck}
-          />
-        </label>
-
-        <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
-          {suggestions.map(this.renderSuggestion)}
-        </div>
+        <Overlay show={!(suggestionsHidden || suggestions.isEmpty())} offset={[0, 0]} placement='bottom' target={this.input} popperConfig={{ strategy: 'fixed' }}>
+          {({ props }) => (
+            <div {...props}>
+              <div className='autosuggest-textarea__suggestions' style={{ width: this.input?.clientWidth }}>
+                {suggestions.map(this.renderSuggestion)}
+              </div>
+            </div>
+          )}
+        </Overlay>
       </div>
     );
   }
diff --git a/app/javascript/mastodon/components/autosuggest_textarea.jsx b/app/javascript/mastodon/components/autosuggest_textarea.jsx
index 4d173af59d..07fbccacc9 100644
--- a/app/javascript/mastodon/components/autosuggest_textarea.jsx
+++ b/app/javascript/mastodon/components/autosuggest_textarea.jsx
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
+import Overlay from 'react-overlays/Overlay';
 import Textarea from 'react-textarea-autosize';
 
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
@@ -52,7 +53,6 @@ const AutosuggestTextarea = forwardRef(({
   onFocus,
   autoFocus = true,
   lang,
-  children,
 }, textareaRef) => {
 
   const [suggestionsHidden, setSuggestionsHidden] = useState(true);
@@ -183,40 +183,38 @@ const AutosuggestTextarea = forwardRef(({
     );
   };
 
-  return [
-    <div className='compose-form__autosuggest-wrapper' key='autosuggest-wrapper'>
-      <div className='autosuggest-textarea'>
-        <label>
-          <span style={{ display: 'none' }}>{placeholder}</span>
+  return (
+    <div className='autosuggest-textarea'>
+      <Textarea
+        ref={textareaRef}
+        className='autosuggest-textarea__textarea'
+        disabled={disabled}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onKeyUp={onKeyUp}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onPaste={handlePaste}
+        dir='auto'
+        aria-autocomplete='list'
+        aria-label={placeholder}
+        lang={lang}
+      />
 
-          <Textarea
-            ref={textareaRef}
-            className='autosuggest-textarea__textarea'
-            disabled={disabled}
-            placeholder={placeholder}
-            autoFocus={autoFocus}
-            value={value}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            onKeyUp={onKeyUp}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            onPaste={handlePaste}
-            dir='auto'
-            aria-autocomplete='list'
-            lang={lang}
-          />
-        </label>
-      </div>
-      {children}
-    </div>,
-
-    <div className='autosuggest-textarea__suggestions-wrapper' key='suggestions-wrapper'>
-      <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
-        {suggestions.map(renderSuggestion)}
-      </div>
-    </div>,
-  ];
+      <Overlay show={!(suggestionsHidden || suggestions.isEmpty())} offset={[0, 0]} placement='bottom' target={textareaRef} popperConfig={{ strategy: 'fixed' }}>
+        {({ props }) => (
+          <div {...props}>
+            <div className='autosuggest-textarea__suggestions' style={{ width: textareaRef.current?.clientWidth }}>
+              {suggestions.map(renderSuggestion)}
+            </div>
+          </div>
+        )}
+      </Overlay>
+    </div>
+  );
 });
 
 AutosuggestTextarea.propTypes = {
@@ -232,7 +230,6 @@ AutosuggestTextarea.propTypes = {
   onKeyDown: PropTypes.func,
   onPaste: PropTypes.func.isRequired,
   onFocus:PropTypes.func,
-  children: PropTypes.node,
   autoFocus: PropTypes.bool,
   lang: PropTypes.string,
 };
diff --git a/app/javascript/mastodon/components/dropdown_menu.jsx b/app/javascript/mastodon/components/dropdown_menu.jsx
index 04c8bb0980..f6c08dd43b 100644
--- a/app/javascript/mastodon/components/dropdown_menu.jsx
+++ b/app/javascript/mastodon/components/dropdown_menu.jsx
@@ -165,7 +165,7 @@ class Dropdown extends PureComponent {
     children: PropTypes.node,
     icon: PropTypes.string,
     iconComponent: PropTypes.func,
-    items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
+    items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]),
     loading: PropTypes.bool,
     size: PropTypes.number,
     title: PropTypes.string,
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index ff4fe92525..1171351c51 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -70,9 +70,9 @@ export const defaultMediaVisibility = (status) => {
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers only' },
-  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Quiet public' },
+  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers' },
+  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Specific people' },
   edited: { id: 'status.edited', defaultMessage: 'Edited {date}' },
 });
 
diff --git a/app/javascript/mastodon/components/visibility_icon.tsx b/app/javascript/mastodon/components/visibility_icon.tsx
index d6ad4095eb..753dc02737 100644
--- a/app/javascript/mastodon/components/visibility_icon.tsx
+++ b/app/javascript/mastodon/components/visibility_icon.tsx
@@ -2,8 +2,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
 
 import { Icon } from './icon';
 
@@ -11,14 +11,17 @@ type Visibility = 'public' | 'unlisted' | 'private' | 'direct';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  unlisted_short: {
+    id: 'privacy.unlisted.short',
+    defaultMessage: 'Quiet public',
+  },
   private_short: {
     id: 'privacy.private.short',
-    defaultMessage: 'Followers only',
+    defaultMessage: 'Followers',
   },
   direct_short: {
     id: 'privacy.direct.short',
-    defaultMessage: 'Mentioned people only',
+    defaultMessage: 'Specific people',
   },
 });
 
@@ -35,7 +38,7 @@ export const VisibilityIcon: React.FC<{ visibility: Visibility }> = ({
     },
     unlisted: {
       icon: 'unlock',
-      iconComponent: LockOpenIcon,
+      iconComponent: QuietTimeIcon,
       text: intl.formatMessage(messages.unlisted_short),
     },
     private: {
diff --git a/app/javascript/mastodon/containers/compose_container.jsx b/app/javascript/mastodon/containers/compose_container.jsx
index f76550678e..171f14d3b2 100644
--- a/app/javascript/mastodon/containers/compose_container.jsx
+++ b/app/javascript/mastodon/containers/compose_container.jsx
@@ -1,14 +1,12 @@
-import { PureComponent } from 'react';
-
 import { Provider } from 'react-redux';
 
-import { fetchCustomEmojis } from '../actions/custom_emojis';
-import { hydrateStore } from '../actions/store';
-import Compose from '../features/standalone/compose';
-import initialState from '../initial_state';
-import { IntlProvider } from '../locales';
-import { store } from '../store';
-
+import { fetchCustomEmojis } from 'mastodon/actions/custom_emojis';
+import { hydrateStore } from 'mastodon/actions/store';
+import { Router } from 'mastodon/components/router';
+import Compose from 'mastodon/features/standalone/compose';
+import initialState from 'mastodon/initial_state';
+import { IntlProvider } from 'mastodon/locales';
+import { store } from 'mastodon/store';
 
 if (initialState) {
   store.dispatch(hydrateStore(initialState));
@@ -16,16 +14,14 @@ if (initialState) {
 
 store.dispatch(fetchCustomEmojis());
 
-export default class ComposeContainer extends PureComponent {
+const ComposeContainer = () => (
+  <IntlProvider>
+    <Provider store={store}>
+      <Router>
+        <Compose />
+      </Router>
+    </Provider>
+  </IntlProvider>
+);
 
-  render () {
-    return (
-      <IntlProvider>
-        <Provider store={store}>
-          <Compose />
-        </Provider>
-      </IntlProvider>
-    );
-  }
-
-}
+export default ComposeContainer;
diff --git a/app/javascript/mastodon/features/compose/components/action_bar.jsx b/app/javascript/mastodon/features/compose/components/action_bar.jsx
index 411ad77c79..be52eac11e 100644
--- a/app/javascript/mastodon/features/compose/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/compose/components/action_bar.jsx
@@ -1,13 +1,13 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useCallback } from 'react';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { useDispatch } from 'react-redux';
 
-import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
-
-import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import { openModal } from 'mastodon/actions/modal';
+import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
+import { logOut } from 'mastodon/utils/log_out';
 
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
@@ -23,51 +23,52 @@ const messages = defineMessages({
   filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
+  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
+  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
-class ActionBar extends PureComponent {
+export const ActionBar = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
 
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    onLogout: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
+  const handleLogoutClick = useCallback(() => {
+    dispatch(openModal({
+      modalType: 'CONFIRM',
+      modalProps: {
+        message: intl.formatMessage(messages.logoutMessage),
+        confirm: intl.formatMessage(messages.logoutConfirm),
+        closeWhenConfirm: false,
+        onConfirm: () => logOut(),
+      },
+    }));
+  }, [dispatch, intl]);
 
-  handleLogout = () => {
-    this.props.onLogout();
-  };
+  let menu = [];
 
-  render () {
-    const { intl } = this.props;
+  menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
+  menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' });
+  menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' });
+  menu.push(null);
+  menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' });
+  menu.push({ text: intl.formatMessage(messages.favourites), to: '/favourites' });
+  menu.push({ text: intl.formatMessage(messages.bookmarks), to: '/bookmarks' });
+  menu.push({ text: intl.formatMessage(messages.lists), to: '/lists' });
+  menu.push({ text: intl.formatMessage(messages.followed_tags), to: '/followed_tags' });
+  menu.push(null);
+  menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' });
+  menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
+  menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
+  menu.push({ text: intl.formatMessage(messages.filters), href: '/filters' });
+  menu.push(null);
+  menu.push({ text: intl.formatMessage(messages.logout), action: handleLogoutClick });
 
-    let menu = [];
-
-    menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
-    menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' });
-    menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' });
-    menu.push(null);
-    menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' });
-    menu.push({ text: intl.formatMessage(messages.favourites), to: '/favourites' });
-    menu.push({ text: intl.formatMessage(messages.bookmarks), to: '/bookmarks' });
-    menu.push({ text: intl.formatMessage(messages.lists), to: '/lists' });
-    menu.push({ text: intl.formatMessage(messages.followed_tags), to: '/followed_tags' });
-    menu.push(null);
-    menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' });
-    menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
-    menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
-    menu.push({ text: intl.formatMessage(messages.filters), href: '/filters' });
-    menu.push(null);
-    menu.push({ text: intl.formatMessage(messages.logout), action: this.handleLogout });
-
-    return (
-      <div className='compose__action-bar'>
-        <div className='compose__action-bar-dropdown'>
-          <DropdownMenuContainer items={menu} icon='bars' iconComponent={MenuIcon} size={24} direction='right' />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(ActionBar);
+  return (
+    <DropdownMenuContainer
+      items={menu}
+      icon='bars'
+      iconComponent={MoreHorizIcon}
+      size={24}
+      direction='right'
+    />
+  );
+};
diff --git a/app/javascript/mastodon/features/compose/components/autosuggest_account.jsx b/app/javascript/mastodon/features/compose/components/autosuggest_account.jsx
index 0a73bc1020..fe684c1483 100644
--- a/app/javascript/mastodon/features/compose/components/autosuggest_account.jsx
+++ b/app/javascript/mastodon/features/compose/components/autosuggest_account.jsx
@@ -15,7 +15,7 @@ export default class AutosuggestAccount extends ImmutablePureComponent {
 
     return (
       <div className='autosuggest-account' title={account.get('acct')}>
-        <div className='autosuggest-account-icon'><Avatar account={account} size={18} /></div>
+        <Avatar account={account} size={24} />
         <DisplayName account={account} />
       </div>
     );
diff --git a/app/javascript/mastodon/features/compose/components/character_counter.jsx b/app/javascript/mastodon/features/compose/components/character_counter.jsx
index 42452b30f6..f400d1fe2f 100644
--- a/app/javascript/mastodon/features/compose/components/character_counter.jsx
+++ b/app/javascript/mastodon/features/compose/components/character_counter.jsx
@@ -1,26 +1,18 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
 
 import { length } from 'stringz';
 
-export default class CharacterCounter extends PureComponent {
+export const CharacterCounter = ({ text, max }) => {
+  const diff = max - length(text);
 
-  static propTypes = {
-    text: PropTypes.string.isRequired,
-    max: PropTypes.number.isRequired,
-  };
-
-  checkRemainingText (diff) {
-    if (diff < 0) {
-      return <span className='character-counter character-counter--over'>{diff}</span>;
-    }
-
-    return <span className='character-counter'>{diff}</span>;
+  if (diff < 0) {
+    return <span className='character-counter character-counter--over'>{diff}</span>;
   }
 
-  render () {
-    const diff = this.props.max - length(this.props.text);
-    return this.checkRemainingText(diff);
-  }
+  return <span className='character-counter'>{diff}</span>;
+};
 
-}
+CharacterCounter.propTypes = {
+  text: PropTypes.string.isRequired,
+  max: PropTypes.number.isRequired,
+};
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.jsx b/app/javascript/mastodon/features/compose/components/compose_form.jsx
index a70c774c37..809a041235 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.jsx
+++ b/app/javascript/mastodon/features/compose/components/compose_form.jsx
@@ -10,8 +10,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { length } from 'stringz';
 
-import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import { Icon }  from 'mastodon/components/icon';
 import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
 
 import AutosuggestInput from '../../../components/autosuggest_input';
@@ -21,25 +19,27 @@ import { maxChars } from '../../../initial_state';
 import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
 import LanguageDropdown from '../containers/language_dropdown_container';
 import PollButtonContainer from '../containers/poll_button_container';
-import PollFormContainer from '../containers/poll_form_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
-import ReplyIndicatorContainer from '../containers/reply_indicator_container';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
 import UploadFormContainer from '../containers/upload_form_container';
 import WarningContainer from '../containers/warning_container';
 import { countableText } from '../util/counter';
 
-import CharacterCounter from './character_counter';
+import { CharacterCounter } from './character_counter';
+import { EditIndicator } from './edit_indicator';
+import { NavigationBar } from './navigation_bar';
+import { PollForm } from "./poll_form";
+import { ReplyIndicator } from './reply_indicator';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
-  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
-  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
-  publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
-  saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Save changes' },
+  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Content warning (optional)' },
+  publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
+  saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Update' },
+  reply: { id: 'compose_form.reply', defaultMessage: 'Reply' },
 });
 
 class ComposeForm extends ImmutablePureComponent {
@@ -66,6 +66,7 @@ class ComposeForm extends ImmutablePureComponent {
     onPaste: PropTypes.func.isRequired,
     onPickEmoji: PropTypes.func.isRequired,
     autoFocus: PropTypes.bool,
+    withoutNavigation: PropTypes.bool,
     anyMedia: PropTypes.bool,
     isInReply: PropTypes.bool,
     singleColumn: PropTypes.bool,
@@ -224,93 +225,90 @@ class ComposeForm extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, onPaste, autoFocus } = this.props;
+    const { intl, onPaste, autoFocus, withoutNavigation } = this.props;
     const { highlighted } = this.state;
     const disabled = this.props.isSubmitting;
 
-    let publishText = '';
-
-    if (this.props.isEditing) {
-      publishText = intl.formatMessage(messages.saveChanges);
-    } else if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
-      publishText = <><Icon id='lock' icon={LockIcon} /> {intl.formatMessage(messages.publish)}</>;
-    } else {
-      publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
-    }
-
     return (
       <form className='compose-form' onSubmit={this.handleSubmit}>
+        <ReplyIndicator />
+        {!withoutNavigation && <NavigationBar />}
         <WarningContainer />
 
-        <ReplyIndicatorContainer />
+        <div className={classNames('compose-form__highlightable', { active: highlighted })} ref={this.setRef}>
+          <div className='compose-form__scrollable'>
+            <EditIndicator />
 
-        <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef} aria-hidden={!this.props.spoiler}>
-          <AutosuggestInput
-            placeholder={intl.formatMessage(messages.spoiler_placeholder)}
-            value={this.props.spoilerText}
-            onChange={this.handleChangeSpoilerText}
-            onKeyDown={this.handleKeyDown}
-            disabled={!this.props.spoiler}
-            ref={this.setSpoilerText}
-            suggestions={this.props.suggestions}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            onSuggestionSelected={this.onSpoilerSuggestionSelected}
-            searchTokens={[':']}
-            id='cw-spoiler-input'
-            className='spoiler-input__input'
-            lang={this.props.lang}
-            spellCheck
-          />
-        </div>
+            {this.props.spoiler && (
+              <div className='spoiler-input'>
+                <div className='spoiler-input__border' />
 
-        <div className={classNames('compose-form__highlightable', { active: highlighted })}>
-          <AutosuggestTextarea
-            ref={this.textareaRef}
-            placeholder={intl.formatMessage(messages.placeholder)}
-            disabled={disabled}
-            value={this.props.text}
-            onChange={this.handleChange}
-            suggestions={this.props.suggestions}
-            onFocus={this.handleFocus}
-            onKeyDown={this.handleKeyDown}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            onSuggestionSelected={this.onSuggestionSelected}
-            onPaste={onPaste}
-            autoFocus={autoFocus}
-            lang={this.props.lang}
-          >
-            <div className='compose-form__modifiers'>
-              <UploadFormContainer />
-              <PollFormContainer />
-            </div>
-          </AutosuggestTextarea>
-          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
+                <AutosuggestInput
+                  placeholder={intl.formatMessage(messages.spoiler_placeholder)}
+                  value={this.props.spoilerText}
+                  disabled={disabled}
+                  onChange={this.handleChangeSpoilerText}
+                  onKeyDown={this.handleKeyDown}
+                  ref={this.setSpoilerText}
+                  suggestions={this.props.suggestions}
+                  onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                  onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                  onSuggestionSelected={this.onSpoilerSuggestionSelected}
+                  searchTokens={[':']}
+                  id='cw-spoiler-input'
+                  className='spoiler-input__input'
+                  lang={this.props.lang}
+                  spellCheck
+                />
 
-          <div className='compose-form__buttons-wrapper'>
-            <div className='compose-form__buttons'>
-              <UploadButtonContainer />
-              <PollButtonContainer />
+                <div className='spoiler-input__border' />
+              </div>
+            )}
+
+            <AutosuggestTextarea
+              ref={this.textareaRef}
+              placeholder={intl.formatMessage(messages.placeholder)}
+              disabled={disabled}
+              value={this.props.text}
+              onChange={this.handleChange}
+              suggestions={this.props.suggestions}
+              onFocus={this.handleFocus}
+              onKeyDown={this.handleKeyDown}
+              onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+              onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+              onSuggestionSelected={this.onSuggestionSelected}
+              onPaste={onPaste}
+              autoFocus={autoFocus}
+              lang={this.props.lang}
+            />
+          </div>
+
+          <UploadFormContainer />
+          <PollForm />
+
+          <div className='compose-form__footer'>
+            <div className='compose-form__dropdowns'>
               <PrivacyDropdownContainer disabled={this.props.isEditing} />
-              <SpoilerButtonContainer />
               <LanguageDropdown />
             </div>
 
-            <div className='character-counter__wrapper'>
-              <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
-            </div>
-          </div>
-        </div>
+            <div className='compose-form__actions'>
+              <div className='compose-form__buttons'>
+                <UploadButtonContainer />
+                <PollButtonContainer />
+                <SpoilerButtonContainer />
+                <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
+                <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
+              </div>
 
-        <div className='compose-form__publish'>
-          <div className='compose-form__publish-button-wrapper'>
-            <Button
-              type='submit'
-              text={publishText}
-              disabled={!this.canSubmit()}
-              block
-            />
+              <div className='compose-form__submit'>
+                <Button
+                  type='submit'
+                  text={intl.formatMessage(this.props.isEditing ? messages.saveChanges : (this.props.isInReply ? messages.reply : messages.publish))}
+                  disabled={!this.canSubmit()}
+                />
+              </div>
+            </div>
           </div>
         </div>
       </form>
diff --git a/app/javascript/mastodon/features/compose/components/edit_indicator.jsx b/app/javascript/mastodon/features/compose/components/edit_indicator.jsx
new file mode 100644
index 0000000000..6cdaaebea5
--- /dev/null
+++ b/app/javascript/mastodon/features/compose/components/edit_indicator.jsx
@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import BarChart4BarsIcon from 'mastodon/../material-icons/400-24px/bar_chart_4_bars.svg?react';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
+import PhotoLibraryIcon from 'mastodon/../material-icons/400-24px/photo_library.svg?react';
+import { cancelReplyCompose } from 'mastodon/actions/compose';
+import { Icon } from 'mastodon/components/icon';
+import { IconButton } from 'mastodon/components/icon_button';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
+
+const messages = defineMessages({
+  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
+});
+
+export const EditIndicator = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const id = useSelector(state => state.getIn(['compose', 'id']));
+  const status = useSelector(state => state.getIn(['statuses', id]));
+  const account = useSelector(state => state.getIn(['accounts', status?.get('account')]));
+
+  const handleCancelClick = useCallback(() => {
+    dispatch(cancelReplyCompose());
+  }, [dispatch]);
+
+  if (!status) {
+    return null;
+  }
+
+  const content = { __html: status.get('contentHtml') };
+
+  return (
+    <div className='edit-indicator'>
+      <div className='edit-indicator__header'>
+        <div className='edit-indicator__display-name'>
+          <Link to={`/@${account.get('acct')}`}>@{account.get('acct')}</Link>
+          ·
+          <Link to={`/@${account.get('acct')}/${status.get('id')}`}><RelativeTimestamp timestamp={status.get('created_at')} /></Link>
+        </div>
+
+        <div className='edit-indicator__cancel'>
+          <IconButton title={intl.formatMessage(messages.cancel)} icon='times' iconComponent={CloseIcon} onClick={handleCancelClick} inverted />
+        </div>
+      </div>
+
+      <div className='edit-indicator__content translate' dangerouslySetInnerHTML={content} />
+
+      {(status.get('poll') || status.get('media_attachments').size > 0) && (
+        <div className='edit-indicator__attachments'>
+          {status.get('poll') && <><Icon icon={BarChart4BarsIcon} /><FormattedMessage id='reply_indicator.poll' defaultMessage='Poll' /></>}
+          {status.get('media_attachments').size > 0 && <><Icon icon={PhotoLibraryIcon} /><FormattedMessage id='reply_indicator.attachments' defaultMessage='{count, plural, one {# attachment} other {# attachments}}' values={{ count: status.get('media_attachments').size }} /></>}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
index 4a590bccd7..9949d2c001 100644
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
@@ -10,6 +10,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
+import MoodIcon from 'mastodon/../material-icons/400-24px/mood.svg?react';
+import { IconButton } from 'mastodon/components/icon_button';
 import { assetHost } from 'mastodon/utils/config';
 
 import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
@@ -321,7 +323,6 @@ class EmojiPickerDropdown extends PureComponent {
     onPickEmoji: PropTypes.func.isRequired,
     onSkinTone: PropTypes.func.isRequired,
     skinTone: PropTypes.number.isRequired,
-    button: PropTypes.node,
   };
 
   state = {
@@ -379,23 +380,24 @@ class EmojiPickerDropdown extends PureComponent {
   };
 
   render () {
-    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis, button } = this.props;
+    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
     const title = intl.formatMessage(messages.emoji);
     const { active, loading } = this.state;
 
     return (
-      <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
-        <div ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
-          {button || <img
-            className={classNames('emojione', { 'pulse-loading': active && loading })}
-            alt='blobCat emoji'
-            src={`${assetHost}/blobCat.png`}
-          />}
-        </div>
+      <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
+        <IconButton
+          title={title}
+          aria-expanded={active}
+          active={active}
+          iconComponent={MoodIcon}
+          onClick={this.onToggle}
+          inverted
+        />
 
         <Overlay show={active} placement={'bottom'} target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
           {({ props, placement })=> (
-            <div {...props} style={{ ...props.style, width: 299 }}>
+            <div {...props} style={{ ...props.style }}>
               <div className={`dropdown-animation ${placement}`}>
                 <EmojiPickerMenu
                   custom_emojis={this.props.custom_emojis}
diff --git a/app/javascript/mastodon/features/compose/components/language_dropdown.jsx b/app/javascript/mastodon/features/compose/components/language_dropdown.jsx
index 13d1c2e1a7..2783ca8be2 100644
--- a/app/javascript/mastodon/features/compose/components/language_dropdown.jsx
+++ b/app/javascript/mastodon/features/compose/components/language_dropdown.jsx
@@ -9,10 +9,11 @@ import { supportsPassiveEvents } from 'detect-passive-events';
 import fuzzysort from 'fuzzysort';
 import Overlay from 'react-overlays/Overlay';
 
+import CancelIcon from 'mastodon/../material-icons/400-24px/cancel-fill.svg?react';
+import SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react';
+import TranslateIcon from 'mastodon/../material-icons/400-24px/translate.svg?react';
+import { Icon } from 'mastodon/components/icon';
 import { languages as preloadedLanguages } from 'mastodon/initial_state';
-import { loupeIcon, deleteIcon } from 'mastodon/utils/icons';
-
-import TextIconButton from './text_icon_button';
 
 const messages = defineMessages({
   changeLanguage: { id: 'compose.language.change', defaultMessage: 'Change language' },
@@ -231,7 +232,7 @@ class LanguageDropdownMenu extends PureComponent {
       <div ref={this.setRef}>
         <div className='emoji-mart-search'>
           <input type='search' value={searchValue} onChange={this.handleSearchChange} onKeyDown={this.handleSearchKeyDown} placeholder={intl.formatMessage(messages.search)} />
-          <button type='button' className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}>{!isSearching ? loupeIcon : deleteIcon}</button>
+          <button type='button' className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}><Icon icon={!isSearching ? SearchIcon : CancelIcon} /></button>
         </div>
 
         <div className='language-dropdown__dropdown__results emoji-mart-scroll' role='listbox' ref={this.setListRef}>
@@ -297,20 +298,24 @@ class LanguageDropdown extends PureComponent {
   render () {
     const { value, intl, frequentlyUsedLanguages } = this.props;
     const { open, placement } = this.state;
+    const current = preloadedLanguages.find(lang => lang[0] === value) ?? [];
 
     return (
-      <div className={classNames('privacy-dropdown', placement, { active: open })}>
-        <div className='privacy-dropdown__value' ref={this.setTargetRef} >
-          <TextIconButton
-            className='privacy-dropdown__value-icon'
-            label={value && value.toUpperCase()}
-            title={intl.formatMessage(messages.changeLanguage)}
-            active={open}
-            onClick={this.handleToggle}
-          />
-        </div>
+      <div ref={this.setTargetRef} onKeyDown={this.handleKeyDown}>
+        <button
+          type='button'
+          title={intl.formatMessage(messages.changeLanguage)}
+          aria-expanded={open}
+          onClick={this.handleToggle}
+          onMouseDown={this.handleMouseDown}
+          onKeyDown={this.handleButtonKeyDown}
+          className={classNames('dropdown-button', { active: open })}
+        >
+          <Icon icon={TranslateIcon} />
+          <span className='dropdown-button__label'>{current[2] ?? value}</span>
+        </button>
 
-        <Overlay show={open} placement={'bottom'} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
+        <Overlay show={open} offset={[5, 5]} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
           {({ props, placement }) => (
             <div {...props}>
               <div className={`dropdown-animation language-dropdown__dropdown ${placement}`} >
diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.jsx b/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
index 2f0bb79f89..ebf59e4c83 100644
--- a/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
+++ b/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
@@ -1,50 +1,36 @@
-import PropTypes from 'prop-types';
+import { useCallback } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 
-import { Link } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
+import { cancelReplyCompose } from 'mastodon/actions/compose';
+import Account from 'mastodon/components/account';
+import { IconButton } from 'mastodon/components/icon_button';
+import { me } from 'mastodon/initial_state';
 
-import { Avatar } from '../../../components/avatar';
+import { ActionBar } from './action_bar';
 
-import ActionBar from './action_bar';
 
-export default class NavigationBar extends ImmutablePureComponent {
+const messages = defineMessages({
+  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
+});
 
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    onLogout: PropTypes.func.isRequired,
-    onClose: PropTypes.func,
-  };
+export const NavigationBar = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const account = useSelector(state => state.getIn(['accounts', me]));
+  const isReplying = useSelector(state => !!state.getIn(['compose', 'in_reply_to']));
 
-  render () {
-    const username = this.props.account.get('acct');
-    return (
-      <div className='navigation-bar'>
-        <Link to={`/@${username}`}>
-          <span style={{ display: 'none' }}>{username}</span>
-          <Avatar account={this.props.account} size={46} />
-        </Link>
+  const handleCancelClick = useCallback(() => {
+    dispatch(cancelReplyCompose());
+  }, [dispatch]);
 
-        <div className='navigation-bar__profile'>
-          <span>
-            <Link to={`/@${username}`}>
-              <strong className='navigation-bar__profile-account'>@{username}</strong>
-            </Link>
-          </span>
-
-          <span>
-            <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
-          </span>
-        </div>
-
-        <div className='navigation-bar__actions'>
-          <ActionBar account={this.props.account} onLogout={this.props.onLogout} />
-        </div>
-      </div>
-    );
-  }
-
-}
+  return (
+    <div className='navigation-bar'>
+      <Account account={account} minimal />
+      {isReplying ? <IconButton title={intl.formatMessage(messages.cancel)} iconComponent={CloseIcon} onClick={handleCancelClick} /> : <ActionBar />}
+    </div>
+  );
+};
diff --git a/app/javascript/mastodon/features/compose/components/poll_button.jsx b/app/javascript/mastodon/features/compose/components/poll_button.jsx
index 4900d38119..345497abd3 100644
--- a/app/javascript/mastodon/features/compose/components/poll_button.jsx
+++ b/app/javascript/mastodon/features/compose/components/poll_button.jsx
@@ -3,11 +3,10 @@ import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl } from 'react-intl';
 
-import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 
 import { IconButton } from '../../../components/icon_button';
 
-
 const messages = defineMessages({
   add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
   remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
@@ -22,7 +21,6 @@ class PollButton extends PureComponent {
 
   static propTypes = {
     disabled: PropTypes.bool,
-    unavailable: PropTypes.bool,
     active: PropTypes.bool,
     onClick: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -33,17 +31,13 @@ class PollButton extends PureComponent {
   };
 
   render () {
-    const { intl, active, unavailable, disabled } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
+    const { intl, active, disabled } = this.props;
 
     return (
       <div className='compose-form__poll-button'>
         <IconButton
           icon='tasks'
-          iconComponent={InsertChartIcon}
+          iconComponent={BarChart4BarsIcon}
           title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
           disabled={disabled}
           onClick={this.handleClick}
diff --git a/app/javascript/mastodon/features/compose/components/poll_form.jsx b/app/javascript/mastodon/features/compose/components/poll_form.jsx
index 2955d94bcc..1a476ca685 100644
--- a/app/javascript/mastodon/features/compose/components/poll_form.jsx
+++ b/app/javascript/mastodon/features/compose/components/poll_form.jsx
@@ -1,190 +1,162 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useCallback } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useDispatch, useSelector } from 'react-redux';
 
-import AddIcon from '@/material-icons/400-24px/add.svg?react';
-import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import {
+  changePollSettings,
+  changePollOption,
+  clearComposeSuggestions,
+  fetchComposeSuggestions,
+  selectComposeSuggestion,
+} from 'mastodon/actions/compose';
 import AutosuggestInput from 'mastodon/components/autosuggest_input';
-import { Icon }  from 'mastodon/components/icon';
-import { IconButton } from 'mastodon/components/icon_button';
-import { pollMinOptions } from 'mastodon/initial_state';
 
 const messages = defineMessages({
-  option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
-  add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
-  remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
-  poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
+  option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Option {number}' },
+  add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add option' },
+  remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this option' },
+  duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll length' },
+  type: { id: 'compose_form.poll.type', defaultMessage: 'Style' },
   switchToMultiple: { id: 'compose_form.poll.switch_to_multiple', defaultMessage: 'Change poll to allow multiple choices' },
   switchToSingle: { id: 'compose_form.poll.switch_to_single', defaultMessage: 'Change poll to allow for a single choice' },
   minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
   hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
   days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
+  singleChoice: { id: 'compose_form.poll.single', defaultMessage: 'Pick one' },
+  multipleChoice: { id: 'compose_form.poll.multiple', defaultMessage: 'Multiple choice' },
 });
 
-class OptionIntl extends PureComponent {
+const Select = ({ label, options, value, onChange }) => {
+  return (
+    <label className='compose-form__poll__select'>
+      <span className='compose-form__poll__select__label'>{label}</span>
 
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    lang: PropTypes.string,
-    index: PropTypes.number.isRequired,
-    isPollMultiple: PropTypes.bool,
-    autoFocus: PropTypes.bool,
-    onChange: PropTypes.func.isRequired,
-    onRemove: PropTypes.func.isRequired,
-    onToggleMultiple: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    onClearSuggestions: PropTypes.func.isRequired,
-    onFetchSuggestions: PropTypes.func.isRequired,
-    onSuggestionSelected: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
+      <select className='compose-form__poll__select__value' value={value} onChange={onChange}>
+        {options.map((option, i) => (
+          <option key={i} value={option.value}>{option.label}</option>
+        ))}
+      </select>
+    </label>
+  );
+};
 
-  handleOptionTitleChange = e => {
-    this.props.onChange(this.props.index, e.target.value);
-  };
+Select.propTypes = {
+  label: PropTypes.node,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.node,
+    value: PropTypes.any,
+  })),
+};
 
-  handleOptionRemove = () => {
-    this.props.onRemove(this.props.index);
-  };
+const Option = ({ multipleChoice, index, title, autoFocus }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const suggestions = useSelector(state => state.getIn(['compose', 'suggestions']));
+  const lang = useSelector(state => state.getIn(['compose', 'language']));
 
+  const handleChange = useCallback(({ target: { value } }) => {
+    dispatch(changePollOption(index, value));
+  }, [dispatch, index]);
 
-  handleToggleMultiple = e => {
-    this.props.onToggleMultiple();
-    e.preventDefault();
-    e.stopPropagation();
-  };
+  const handleSuggestionsFetchRequested = useCallback(token => {
+    dispatch(fetchComposeSuggestions(token));
+  }, [dispatch]);
 
-  handleCheckboxKeypress = e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      this.handleToggleMultiple(e);
-    }
-  };
+  const handleSuggestionsClearRequested = useCallback(() => {
+    dispatch(clearComposeSuggestions());
+  }, [dispatch]);
 
-  onSuggestionsClearRequested = () => {
-    this.props.onClearSuggestions();
-  };
+  const handleSuggestionSelected = useCallback((tokenStart, token, value) => {
+    dispatch(selectComposeSuggestion(tokenStart, token, value, ['poll', 'options', index]));
+  }, [dispatch, index]);
 
-  onSuggestionsFetchRequested = (token) => {
-    this.props.onFetchSuggestions(token);
-  };
+  return (
+    <label className={classNames('poll__option editable', { empty: index > 1 && title.length === 0 })}>
+      <span className={classNames('poll__input', { checkbox: multipleChoice })} />
 
-  onSuggestionSelected = (tokenStart, token, value) => {
-    this.props.onSuggestionSelected(tokenStart, token, value, ['poll', 'options', this.props.index]);
-  };
+      <AutosuggestInput
+        placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
+        maxLength={100}
+        value={title}
+        lang={lang}
+        spellCheck
+        onChange={handleChange}
+        suggestions={suggestions}
+        onSuggestionsFetchRequested={handleSuggestionsFetchRequested}
+        onSuggestionsClearRequested={handleSuggestionsClearRequested}
+        onSuggestionSelected={handleSuggestionSelected}
+        searchTokens={[':']}
+        autoFocus={autoFocus}
+      />
+    </label>
+  );
+};
 
-  render () {
-    const { isPollMultiple, title, lang, index, autoFocus, intl } = this.props;
+Option.propTypes = {
+  title: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  multipleChoice: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+};
 
-    return (
-      <li>
-        <label className='poll__option editable'>
-          <span
-            className={classNames('poll__input', { checkbox: isPollMultiple })}
-            onClick={this.handleToggleMultiple}
-            onKeyPress={this.handleCheckboxKeypress}
-            role='button'
-            tabIndex={0}
-            title={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
-            aria-label={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
-          />
+export const PollForm = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const poll = useSelector(state => state.getIn(['compose', 'poll']));
+  const options = poll?.get('options');
+  const expiresIn = poll?.get('expires_in');
+  const isMultiple = poll?.get('multiple');
 
-          <AutosuggestInput
-            placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
-            maxLength={100}
-            value={title}
-            lang={lang}
-            spellCheck
-            onChange={this.handleOptionTitleChange}
-            suggestions={this.props.suggestions}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            onSuggestionSelected={this.onSuggestionSelected}
-            searchTokens={[':']}
-            autoFocus={autoFocus}
-          />
-        </label>
+  const handleDurationChange = useCallback(({ target: { value } }) => {
+    dispatch(changePollSettings(value, isMultiple));
+  }, [dispatch, isMultiple]);
 
-        <div className='poll__cancel'>
-          <IconButton disabled={index < pollMinOptions} title={intl.formatMessage(messages.remove_option)} icon='times' iconComponent={CloseIcon} onClick={this.handleOptionRemove} />
-        </div>
-      </li>
-    );
+  const handleTypeChange = useCallback(({ target: { value } }) => {
+    dispatch(changePollSettings(expiresIn, value === 'true'));
+  }, [dispatch, expiresIn]);
+
+  if (poll === null) {
+    return null;
   }
 
-}
+  return (
+    <div className='compose-form__poll'>
+      {options.map((title, i) => (
+        <Option
+          title={title}
+          key={i}
+          index={i}
+          multipleChoice={isMultiple}
+          autoFocus={i === 0}
+        />
+      ))}
 
-const Option = injectIntl(OptionIntl);
+      <div className='compose-form__poll__footer'>
+        <Select label={intl.formatMessage(messages.duration)} options={[
+          { value: 300, label: intl.formatMessage(messages.minutes, { number: 5 })},
+          { value: 1800, label: intl.formatMessage(messages.minutes, { number: 30 })},
+          { value: 3600, label: intl.formatMessage(messages.hours, { number: 1 })},
+          { value: 21600, label: intl.formatMessage(messages.hours, { number: 6 })},
+          { value: 43200, label: intl.formatMessage(messages.hours, { number: 12 })},
+          { value: 86400, label: intl.formatMessage(messages.days, { number: 1 })},
+          { value: 259200, label: intl.formatMessage(messages.days, { number: 3 })},
+          { value: 604800, label: intl.formatMessage(messages.days, { number: 7 })},
+        ]} value={expiresIn} onChange={handleDurationChange} />
 
-class PollForm extends ImmutablePureComponent {
+        <div className='compose-form__poll__footer__sep' />
 
-  static propTypes = {
-    options: ImmutablePropTypes.list,
-    lang: PropTypes.string,
-    expiresIn: PropTypes.number,
-    isMultiple: PropTypes.bool,
-    onChangeOption: PropTypes.func.isRequired,
-    onAddOption: PropTypes.func.isRequired,
-    onRemoveOption: PropTypes.func.isRequired,
-    onChangeSettings: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    onClearSuggestions: PropTypes.func.isRequired,
-    onFetchSuggestions: PropTypes.func.isRequired,
-    onSuggestionSelected: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleAddOption = () => {
-    this.props.onAddOption('');
-  };
-
-  handleSelectDuration = e => {
-    this.props.onChangeSettings(e.target.value, this.props.isMultiple);
-  };
-
-  handleToggleMultiple = () => {
-    this.props.onChangeSettings(this.props.expiresIn, !this.props.isMultiple);
-  };
-
-  render () {
-    const { options, lang, expiresIn, isMultiple, onChangeOption, onRemoveOption, intl, ...other } = this.props;
-
-    if (!options) {
-      return null;
-    }
-
-    const autoFocusIndex = options.indexOf('');
-
-    return (
-      <div className='compose-form__poll-wrapper'>
-        <ul>
-          {options.map((title, i) => <Option title={title} lang={lang} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} onToggleMultiple={this.handleToggleMultiple} autoFocus={i === autoFocusIndex} {...other} />)}
-        </ul>
-
-        <div className='poll__footer'>
-          <button type='button' disabled={options.size >= 5} className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' icon={AddIcon} /> <FormattedMessage {...messages.add_option} /></button>
-
-          {/* eslint-disable-next-line jsx-a11y/no-onchange */}
-          <select value={expiresIn} onChange={this.handleSelectDuration}>
-            <option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option>
-            <option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option>
-            <option value={3600}>{intl.formatMessage(messages.hours, { number: 1 })}</option>
-            <option value={21600}>{intl.formatMessage(messages.hours, { number: 6 })}</option>
-            <option value={43200}>{intl.formatMessage(messages.hours, { number: 12 })}</option>
-            <option value={86400}>{intl.formatMessage(messages.days, { number: 1 })}</option>
-            <option value={259200}>{intl.formatMessage(messages.days, { number: 3 })}</option>
-            <option value={604800}>{intl.formatMessage(messages.days, { number: 7 })}</option>
-          </select>
-        </div>
+        <Select label={intl.formatMessage(messages.type)} options={[
+          { value: false, label: intl.formatMessage(messages.singleChoice) },
+          { value: true, label: intl.formatMessage(messages.multipleChoice) },
+        ]} value={isMultiple} onChange={handleTypeChange} />
       </div>
-    );
-  }
-
-}
-
-export default injectIntl(PollForm);
+    </div>
+  );
+};
diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx b/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
index c3446b8d60..82f9027388 100644
--- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
+++ b/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
@@ -5,28 +5,27 @@ import { injectIntl, defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
 
-
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 
-import { IconButton } from '../../../components/icon_button';
-
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for all' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Visible for all, but opted-out of discovery features' },
-  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers only' },
-  private_long: { id: 'privacy.private.long', defaultMessage: 'Visible for followers only' },
-  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
-  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Visible for mentioned users only' },
-  change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' },
+  public_long: { id: 'privacy.public.long', defaultMessage: 'Anyone on and off Mastodon' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Quiet public' },
+  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Fewer algorithmic fanfares' },
+  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers' },
+  private_long: { id: 'privacy.private.long', defaultMessage: 'Only your followers' },
+  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Specific people' },
+  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Everyone mentioned in the post' },
+  change_privacy: { id: 'privacy.change', defaultMessage: 'Change post privacy' },
+  unlisted_extra: { id: 'privacy.unlisted.additional', defaultMessage: 'This behaves exactly like public, except the post will not appear in live feeds or hashtags, explore, or Mastodon search, even if you are opted-in account-wide.' },
 });
 
 const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
@@ -135,6 +134,12 @@ class PrivacyDropdownMenu extends PureComponent {
               <strong>{item.text}</strong>
               {item.meta}
             </div>
+
+            {item.extra && (
+              <div className='privacy-dropdown__option__additional' title={item.extra}>
+                <Icon id='info-circle' icon={InfoIcon} />
+              </div>
+            )}
           </div>
         ))}
       </div>
@@ -163,30 +168,11 @@ class PrivacyDropdown extends PureComponent {
   };
 
   handleToggle = () => {
-    if (this.props.isUserTouching && this.props.isUserTouching()) {
-      if (this.state.open) {
-        this.props.onModalClose();
-      } else {
-        this.props.onModalOpen({
-          actions: this.options.map(option => ({ ...option, active: option.value === this.props.value })),
-          onClick: this.handleModalActionClick,
-        });
-      }
-    } else {
-      if (this.state.open && this.activeElement) {
-        this.activeElement.focus({ preventScroll: true });
-      }
-      this.setState({ open: !this.state.open });
+    if (this.state.open && this.activeElement) {
+      this.activeElement.focus({ preventScroll: true });
     }
-  };
 
-  handleModalActionClick = (e) => {
-    e.preventDefault();
-
-    const { value } = this.options[e.currentTarget.getAttribute('data-index')];
-
-    this.props.onModalClose();
-    this.props.onChange(value);
+    this.setState({ open: !this.state.open });
   };
 
   handleKeyDown = e => {
@@ -228,7 +214,7 @@ class PrivacyDropdown extends PureComponent {
 
     this.options = [
       { icon: 'globe', iconComponent: PublicIcon, value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) },
-      { icon: 'unlock', iconComponent: LockOpenIcon,  value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long) },
+      { icon: 'unlock', iconComponent: QuietTimeIcon,  value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long), extra: formatMessage(messages.unlisted_extra) },
       { icon: 'lock', iconComponent: LockIcon, value: 'private', text: formatMessage(messages.private_short), meta: formatMessage(messages.private_long) },
     ];
 
@@ -259,23 +245,21 @@ class PrivacyDropdown extends PureComponent {
 
     return (
       <div ref={this.setTargetRef} onKeyDown={this.handleKeyDown}>
-        <IconButton
-          className='privacy-dropdown__value-icon'
-          icon={valueOption.icon}
-          iconComponent={valueOption.iconComponent}
+        <button
+          type='button'
           title={intl.formatMessage(messages.change_privacy)}
-          size={18}
-          expanded={open}
-          active={open}
-          inverted
+          aria-expanded={open}
           onClick={this.handleToggle}
           onMouseDown={this.handleMouseDown}
           onKeyDown={this.handleButtonKeyDown}
-          style={{ height: null, lineHeight: '27px' }}
           disabled={disabled}
-        />
+          className={classNames('dropdown-button', { active: open })}
+        >
+          <Icon id={valueOption.icon} icon={valueOption.iconComponent} />
+          <span className='dropdown-button__label'>{valueOption.text}</span>
+        </button>
 
-        <Overlay show={open} placement={placement} flip target={this.findTarget} container={container} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
+        <Overlay show={open} offset={[5, 5]} placement={placement} flip target={this.findTarget} container={container} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
           {({ props, placement }) => (
             <div {...props}>
               <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
diff --git a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
index 8051e01db4..b7959e211d 100644
--- a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
@@ -1,74 +1,48 @@
-import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useSelector } from 'react-redux';
 
-import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import AttachmentList from 'mastodon/components/attachment_list';
-import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
+import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
+import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import { Avatar } from 'mastodon/components/avatar';
+import { DisplayName } from 'mastodon/components/display_name';
+import { Icon } from 'mastodon/components/icon';
 
-import { Avatar } from '../../../components/avatar';
-import { DisplayName } from '../../../components/display_name';
-import { IconButton } from '../../../components/icon_button';
+export const ReplyIndicator = () => {
+  const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
+  const status = useSelector(state => state.getIn(['statuses', inReplyToId]));
+  const account = useSelector(state => state.getIn(['accounts', status?.get('account')]));
 
-const messages = defineMessages({
-  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
-});
+  if (!status) {
+    return null;
+  }
 
-class ReplyIndicator extends ImmutablePureComponent {
+  const content = { __html: status.get('contentHtml') };
 
-  static propTypes = {
-    status: ImmutablePropTypes.map,
-    onCancel: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    ...WithOptionalRouterPropTypes,
-  };
+  return (
+    <div className='reply-indicator'>
+      <div className='reply-indicator__line' />
 
-  handleClick = () => {
-    this.props.onCancel();
-  };
+      <Link to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'>
+        <Avatar account={account} size={46} />
+      </Link>
 
-  handleAccountClick = (e) => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.props.history?.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
-    }
-  };
-
-  render () {
-    const { status, intl } = this.props;
-
-    if (!status) {
-      return null;
-    }
-
-    const content = { __html: status.get('contentHtml') };
-
-    return (
-      <div className='reply-indicator'>
-        <div className='reply-indicator__header'>
-          <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' iconComponent={CloseIcon} onClick={this.handleClick} inverted /></div>
-
-          <a href={`/@${status.getIn(['account', 'acct'])}`} onClick={this.handleAccountClick} className='reply-indicator__display-name'>
-            <div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
-            <DisplayName account={status.get('account')} />
-          </a>
-        </div>
+      <div className='reply-indicator__main'>
+        <Link to={`/@${account.get('acct')}`} className='detailed-status__display-name'>
+          <DisplayName account={account} />
+        </Link>
 
         <div className='reply-indicator__content translate' dangerouslySetInnerHTML={content} />
 
-        {status.get('media_attachments').size > 0 && (
-          <AttachmentList
-            compact
-            media={status.get('media_attachments')}
-          />
+        {(status.get('poll') || status.get('media_attachments').size > 0) && (
+          <div className='reply-indicator__attachments'>
+            {status.get('poll') && <><Icon icon={BarChart4BarsIcon} /><FormattedMessage id='reply_indicator.poll' defaultMessage='Poll' /></>}
+            {status.get('media_attachments').size > 0 && <><Icon icon={PhotoLibraryIcon} /><FormattedMessage id='reply_indicator.attachments' defaultMessage='{count, plural, one {# attachment} other {# attachments}}' values={{ count: status.get('media_attachments').size }} /></>}
+          </div>
         )}
       </div>
-    );
-  }
-
-}
-
-export default withOptionalRouter(injectIntl(ReplyIndicator));
+    </div>
+  );
+};
diff --git a/app/javascript/mastodon/features/compose/components/upload.jsx b/app/javascript/mastodon/features/compose/components/upload.jsx
index 76d394af7a..861232d0ec 100644
--- a/app/javascript/mastodon/features/compose/components/upload.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload.jsx
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 
 import { FormattedMessage } from 'react-intl';
 
+import classNames from 'classnames';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -9,7 +11,8 @@ import spring from 'react-motion/lib/spring';
 
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
-import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';
 
 import Motion from '../../ui/util/optional_motion';
@@ -18,6 +21,7 @@ export default class Upload extends ImmutablePureComponent {
 
   static propTypes = {
     media: ImmutablePropTypes.map.isRequired,
+    sensitive: PropTypes.bool,
     onUndo: PropTypes.func.isRequired,
     onOpenFocalPoint: PropTypes.func.isRequired,
   };
@@ -33,7 +37,7 @@ export default class Upload extends ImmutablePureComponent {
   };
 
   render () {
-    const { media } = this.props;
+    const { media, sensitive } = this.props;
 
     if (!media) {
       return null;
@@ -43,22 +47,26 @@ export default class Upload extends ImmutablePureComponent {
     const focusY = media.getIn(['meta', 'focus', 'y']);
     const x = ((focusX /  2) + .5) * 100;
     const y = ((focusY / -2) + .5) * 100;
+    const missingDescription = (media.get('description') || '').length === 0;
 
     return (
       <div className='compose-form__upload'>
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
           {({ scale }) => (
-            <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
+            <div className='compose-form__upload__thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: !sensitive ? `url(${media.get('preview_url')})` : null, backgroundPosition: `${x}% ${y}%` }}>
+              {sensitive && <Blurhash
+                hash={media.get('blurhash')}
+                className='compose-form__upload__preview'
+              />}
+
               <div className='compose-form__upload__actions'>
-                <button type='button' className='icon-button' onClick={this.handleUndoClick}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
-                <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
+                <button type='button' className='icon-button compose-form__upload__delete' onClick={this.handleUndoClick}><Icon icon={CloseIcon} /></button>
+                <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
               </div>
 
-              {(media.get('description') || '').length === 0 && (
-                <div className='compose-form__upload__warning'>
-                  <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button>
-                </div>
-              )}
+              <div className='compose-form__upload__warning'>
+                <button type='button' className={classNames('icon-button', { active: missingDescription })} onClick={this.handleFocalPointClick}>{missingDescription && <Icon icon={WarningIcon} />} ALT</button>
+              </div>
             </div>
           )}
         </Motion>
diff --git a/app/javascript/mastodon/features/compose/components/upload_button.jsx b/app/javascript/mastodon/features/compose/components/upload_button.jsx
index 923d6a3c47..3866f239d7 100644
--- a/app/javascript/mastodon/features/compose/components/upload_button.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload_button.jsx
@@ -6,9 +6,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import AddPhotoAlternateIcon from '@/material-icons/400-24px/add_photo_alternate.svg?react';
-
-import { IconButton } from '../../../components/icon_button';
+import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import { IconButton } from 'mastodon/components/icon_button';
 
 const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add images, a video or an audio file' },
@@ -31,7 +30,6 @@ class UploadButton extends ImmutablePureComponent {
 
   static propTypes = {
     disabled: PropTypes.bool,
-    unavailable: PropTypes.bool,
     onSelectFile: PropTypes.func.isRequired,
     style: PropTypes.object,
     resetFileKey: PropTypes.number,
@@ -54,17 +52,13 @@ class UploadButton extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, resetFileKey, unavailable, disabled, acceptContentTypes } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
+    const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
 
     const message = intl.formatMessage(messages.upload);
 
     return (
       <div className='compose-form__upload-button'>
-        <IconButton icon='paperclip' iconComponent={AddPhotoAlternateIcon} title={message} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
+        <IconButton icon='paperclip' iconComponent={PhotoLibraryIcon} title={message} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
         <label>
           <span style={{ display: 'none' }}>{message}</span>
           <input
diff --git a/app/javascript/mastodon/features/compose/components/upload_form.jsx b/app/javascript/mastodon/features/compose/components/upload_form.jsx
index cf2e53ad90..46bac7823b 100644
--- a/app/javascript/mastodon/features/compose/components/upload_form.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload_form.jsx
@@ -1,7 +1,6 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import SensitiveButtonContainer from '../containers/sensitive_button_container';
 import UploadContainer from '../containers/upload_container';
 import UploadProgressContainer from '../containers/upload_progress_container';
 
@@ -15,17 +14,17 @@ export default class UploadForm extends ImmutablePureComponent {
     const { mediaIds } = this.props;
 
     return (
-      <div className='compose-form__upload-wrapper'>
+      <>
         <UploadProgressContainer />
 
-        <div className='compose-form__uploads-wrapper'>
-          {mediaIds.map(id => (
-            <UploadContainer id={id} key={id} />
-          ))}
-        </div>
-
-        {!mediaIds.isEmpty() && <SensitiveButtonContainer />}
-      </div>
+        {mediaIds.size > 0 && (
+          <div className='compose-form__uploads'>
+            {mediaIds.map(id => (
+              <UploadContainer id={id} key={id} />
+            ))}
+          </div>
+        )}
+      </>
     );
   }
 
diff --git a/app/javascript/mastodon/features/compose/components/upload_progress.jsx b/app/javascript/mastodon/features/compose/components/upload_progress.jsx
index e4973b24fd..1276cded1f 100644
--- a/app/javascript/mastodon/features/compose/components/upload_progress.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload_progress.jsx
@@ -35,9 +35,7 @@ export default class UploadProgress extends PureComponent {
 
     return (
       <div className='upload-progress'>
-        <div className='upload-progress__icon'>
-          <Icon id='upload' icon={UploadFileIcon} />
-        </div>
+        <Icon id='upload' icon={UploadFileIcon} />
 
         <div className='upload-progress__message'>
           {message}
diff --git a/app/javascript/mastodon/features/compose/containers/navigation_container.js b/app/javascript/mastodon/features/compose/containers/navigation_container.js
deleted file mode 100644
index 70b4026d14..0000000000
--- a/app/javascript/mastodon/features/compose/containers/navigation_container.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { connect }   from 'react-redux';
-
-import { openModal } from 'mastodon/actions/modal';
-import { logOut } from 'mastodon/utils/log_out';
-
-import { me } from '../../../initial_state';
-import NavigationBar from '../components/navigation_bar';
-
-const messages = defineMessages({
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
-});
-
-const mapStateToProps = state => {
-  return {
-    account: state.getIn(['accounts', me]),
-  };
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  onLogout () {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
-  },
-});
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NavigationBar));
diff --git a/app/javascript/mastodon/features/compose/containers/poll_button_container.js b/app/javascript/mastodon/features/compose/containers/poll_button_container.js
index b7785ecbb4..9de388f64a 100644
--- a/app/javascript/mastodon/features/compose/containers/poll_button_container.js
+++ b/app/javascript/mastodon/features/compose/containers/poll_button_container.js
@@ -4,7 +4,7 @@ import { addPoll, removePoll } from '../../../actions/compose';
 import PollButton from '../components/poll_button';
 
 const mapStateToProps = state => ({
-  unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
+  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
   active: state.getIn(['compose', 'poll']) !== null,
 });
 
diff --git a/app/javascript/mastodon/features/compose/containers/poll_form_container.js b/app/javascript/mastodon/features/compose/containers/poll_form_container.js
deleted file mode 100644
index 177ffcea6a..0000000000
--- a/app/javascript/mastodon/features/compose/containers/poll_form_container.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { connect } from 'react-redux';
-
-import {
-  addPollOption,
-  removePollOption,
-  changePollOption,
-  changePollSettings,
-  clearComposeSuggestions,
-  fetchComposeSuggestions,
-  selectComposeSuggestion,
-} from '../../../actions/compose';
-import PollForm from '../components/poll_form';
-
-const mapStateToProps = state => ({
-  suggestions: state.getIn(['compose', 'suggestions']),
-  options: state.getIn(['compose', 'poll', 'options']),
-  lang: state.getIn(['compose', 'language']),
-  expiresIn: state.getIn(['compose', 'poll', 'expires_in']),
-  isMultiple: state.getIn(['compose', 'poll', 'multiple']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onAddOption(title) {
-    dispatch(addPollOption(title));
-  },
-
-  onRemoveOption(index) {
-    dispatch(removePollOption(index));
-  },
-
-  onChangeOption(index, title) {
-    dispatch(changePollOption(index, title));
-  },
-
-  onChangeSettings(expiresIn, isMultiple) {
-    dispatch(changePollSettings(expiresIn, isMultiple));
-  },
-
-  onClearSuggestions () {
-    dispatch(clearComposeSuggestions());
-  },
-
-  onFetchSuggestions (token) {
-    dispatch(fetchComposeSuggestions(token));
-  },
-
-  onSuggestionSelected (position, token, accountId, path) {
-    dispatch(selectComposeSuggestion(position, token, accountId, path));
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(PollForm);
diff --git a/app/javascript/mastodon/features/compose/containers/reply_indicator_container.js b/app/javascript/mastodon/features/compose/containers/reply_indicator_container.js
deleted file mode 100644
index 1147e448af..0000000000
--- a/app/javascript/mastodon/features/compose/containers/reply_indicator_container.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { connect } from 'react-redux';
-
-import { cancelReplyCompose } from '../../../actions/compose';
-import { makeGetStatus } from '../../../selectors';
-import ReplyIndicator from '../components/reply_indicator';
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = state => {
-    let statusId = state.getIn(['compose', 'id'], null);
-    let editing  = true;
-
-    if (statusId === null) {
-      statusId = state.getIn(['compose', 'in_reply_to']);
-      editing  = false;
-    }
-
-    return {
-      status: getStatus(state, { id: statusId }),
-      editing,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = dispatch => ({
-
-  onCancel () {
-    dispatch(cancelReplyCompose());
-  },
-
-});
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(ReplyIndicator);
diff --git a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.jsx b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.jsx
deleted file mode 100644
index 18283ee98d..0000000000
--- a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-
-import { connect } from 'react-redux';
-
-import { changeComposeSensitivity } from 'mastodon/actions/compose';
-
-const messages = defineMessages({
-  marked: {
-    id: 'compose_form.sensitive.marked',
-    defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}',
-  },
-  unmarked: {
-    id: 'compose_form.sensitive.unmarked',
-    defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}',
-  },
-});
-
-const mapStateToProps = state => ({
-  active: state.getIn(['compose', 'sensitive']),
-  disabled: state.getIn(['compose', 'spoiler']),
-  mediaCount: state.getIn(['compose', 'media_attachments']).size,
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onClick () {
-    dispatch(changeComposeSensitivity());
-  },
-
-});
-
-class SensitiveButton extends PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    disabled: PropTypes.bool,
-    mediaCount: PropTypes.number,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  render () {
-    const { active, disabled, mediaCount, onClick, intl } = this.props;
-
-    return (
-      <div className='compose-form__sensitive-button'>
-        <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked, { count: mediaCount })}>
-          <input
-            name='mark-sensitive'
-            type='checkbox'
-            checked={active}
-            onChange={onClick}
-            disabled={disabled}
-          />
-
-          <FormattedMessage
-            id='compose_form.sensitive.hide'
-            defaultMessage='{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}'
-            values={{ count: mediaCount }}
-          />
-        </label>
-      </div>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));
diff --git a/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js b/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js
index b3d7a71335..a241417735 100644
--- a/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js
+++ b/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js
@@ -2,8 +2,10 @@ import { injectIntl, defineMessages } from 'react-intl';
 
 import { connect } from 'react-redux';
 
+import WarningIcon from 'mastodon/../material-icons/400-24px/warning.svg?react';
+import { IconButton } from 'mastodon/components/icon_button';
+
 import { changeComposeSpoilerness } from '../../../actions/compose';
-import TextIconButton from '../components/text_icon_button';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
@@ -11,10 +13,12 @@ const messages = defineMessages({
 });
 
 const mapStateToProps = (state, { intl }) => ({
-  label: 'CW',
+  iconComponent: WarningIcon,
   title: intl.formatMessage(state.getIn(['compose', 'spoiler']) ? messages.marked : messages.unmarked),
   active: state.getIn(['compose', 'spoiler']),
   ariaControls: 'cw-spoiler-input',
+  size: 18,
+  inverted: true,
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -25,4 +29,4 @@ const mapDispatchToProps = dispatch => ({
 
 });
 
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton));
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(IconButton));
diff --git a/app/javascript/mastodon/features/compose/containers/upload_button_container.js b/app/javascript/mastodon/features/compose/containers/upload_button_container.js
index 42195da617..7c4757b6c3 100644
--- a/app/javascript/mastodon/features/compose/containers/upload_button_container.js
+++ b/app/javascript/mastodon/features/compose/containers/upload_button_container.js
@@ -4,8 +4,7 @@ import { uploadCompose } from '../../../actions/compose';
 import UploadButton from '../components/upload_button';
 
 const mapStateToProps = state => ({
-  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
-  unavailable: state.getIn(['compose', 'poll']) !== null,
+  disabled: state.getIn(['compose', 'poll']) !== null || state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
   resetFileKey: state.getIn(['compose', 'resetFileKey']),
 });
 
diff --git a/app/javascript/mastodon/features/compose/containers/upload_container.js b/app/javascript/mastodon/features/compose/containers/upload_container.js
index 77bb90db87..a17a691444 100644
--- a/app/javascript/mastodon/features/compose/containers/upload_container.js
+++ b/app/javascript/mastodon/features/compose/containers/upload_container.js
@@ -5,6 +5,7 @@ import Upload from '../components/upload';
 
 const mapStateToProps = (state, { id }) => ({
   media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
+  sensitive: state.getIn(['compose', 'spoiler']),
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/app/javascript/mastodon/features/compose/index.jsx b/app/javascript/mastodon/features/compose/index.jsx
index ea3a149501..ce8eb9e05d 100644
--- a/app/javascript/mastodon/features/compose/index.jsx
+++ b/app/javascript/mastodon/features/compose/index.jsx
@@ -30,7 +30,6 @@ import { isMobile } from '../../is_mobile';
 import Motion from '../ui/util/optional_motion';
 
 import ComposeFormContainer from './containers/compose_form_container';
-import NavigationContainer from './containers/navigation_container';
 import SearchContainer from './containers/search_container';
 import SearchResultsContainer from './containers/search_results_container';
 
@@ -129,8 +128,6 @@ class Compose extends PureComponent {
 
           <div className='drawer__pager'>
             <div className='drawer__inner' onFocus={this.onFocus}>
-              <NavigationContainer onClose={this.onBlur} />
-
               <ComposeFormContainer autoFocus={!isMobile(window.innerWidth)} />
 
               <div className='drawer__inner__mastodon'>
@@ -152,7 +149,6 @@ class Compose extends PureComponent {
 
     return (
       <Column onFocus={this.onFocus}>
-        <NavigationContainer onClose={this.onBlur} />
         <ComposeFormContainer />
 
         <Helmet>
diff --git a/app/javascript/mastodon/features/getting_started/index.jsx b/app/javascript/mastodon/features/getting_started/index.jsx
index 53bb22ddb2..21a5c2a519 100644
--- a/app/javascript/mastodon/features/getting_started/index.jsx
+++ b/app/javascript/mastodon/features/getting_started/index.jsx
@@ -26,7 +26,7 @@ import ColumnHeader from 'mastodon/components/column_header';
 import LinkFooter from 'mastodon/features/ui/components/link_footer';
 
 import { me, showTrends } from '../../initial_state';
-import NavigationContainer from '../compose/containers/navigation_container';
+import { NavigationBar } from '../compose/components/navigation_bar';
 import ColumnLink from '../ui/components/column_link';
 import ColumnSubheading from '../ui/components/column_subheading';
 
@@ -143,7 +143,7 @@ class GettingStarted extends ImmutablePureComponent {
 
     return (
       <Column>
-        {(signedIn && !multiColumn) ? <NavigationContainer /> : <ColumnHeader title={intl.formatMessage(messages.menu)} icon='bars' iconComponent={MenuIcon} multiColumn={multiColumn} />}
+        {(signedIn && !multiColumn) ? <NavigationBar /> : <ColumnHeader title={intl.formatMessage(messages.menu)} icon='bars' iconComponent={MenuIcon} multiColumn={multiColumn} />}
 
         <div className='getting-started scrollable scrollable--flex'>
           <div className='getting-started__wrapper'>
diff --git a/app/javascript/mastodon/features/standalone/compose/index.jsx b/app/javascript/mastodon/features/standalone/compose/index.jsx
index c36e843f5a..241d9aadfd 100644
--- a/app/javascript/mastodon/features/standalone/compose/index.jsx
+++ b/app/javascript/mastodon/features/standalone/compose/index.jsx
@@ -1,21 +1,15 @@
-import { PureComponent } from 'react';
+import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
+import LoadingBarContainer from 'mastodon/features/ui/containers/loading_bar_container';
+import ModalContainer from 'mastodon/features/ui/containers/modal_container';
+import NotificationsContainer from 'mastodon/features/ui/containers/notifications_container';
 
-import ComposeFormContainer from '../../compose/containers/compose_form_container';
-import LoadingBarContainer from '../../ui/containers/loading_bar_container';
-import ModalContainer from '../../ui/containers/modal_container';
-import NotificationsContainer from '../../ui/containers/notifications_container';
+const Compose = () => (
+  <>
+    <ComposeFormContainer autoFocus withoutNavigation />
+    <NotificationsContainer />
+    <ModalContainer />
+    <LoadingBarContainer className='loading-bar' />
+  </>
+);
 
-export default class Compose extends PureComponent {
-
-  render () {
-    return (
-      <div>
-        <ComposeFormContainer autoFocus />
-        <NotificationsContainer />
-        <ModalContainer />
-        <LoadingBarContainer className='loading-bar' />
-      </div>
-    );
-  }
-
-}
+export default Compose;
diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.jsx b/app/javascript/mastodon/features/ui/components/compose_panel.jsx
index 713ecb472b..e6ac79bdd9 100644
--- a/app/javascript/mastodon/features/ui/components/compose_panel.jsx
+++ b/app/javascript/mastodon/features/ui/components/compose_panel.jsx
@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import { changeComposing, mountCompose, unmountCompose } from 'mastodon/actions/compose';
 import ServerBanner from 'mastodon/components/server_banner';
 import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
-import NavigationContainer from 'mastodon/features/compose/containers/navigation_container';
 import SearchContainer from 'mastodon/features/compose/containers/search_container';
 
 import LinkFooter from './link_footer';
@@ -56,10 +55,7 @@ class ComposePanel extends PureComponent {
         )}
 
         {signedIn && (
-          <>
-            <NavigationContainer onClose={this.onBlur} />
-            <ComposeFormContainer singleColumn />
-          </>
+          <ComposeFormContainer singleColumn />
         )}
 
         <LinkFooter />
diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx b/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
index 25ad1e2e9f..5f430d5392 100644
--- a/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
@@ -21,7 +21,7 @@ import { Button } from 'mastodon/components/button';
 import { GIFV } from 'mastodon/components/gifv';
 import { IconButton } from 'mastodon/components/icon_button';
 import Audio from 'mastodon/features/audio';
-import CharacterCounter from 'mastodon/features/compose/components/character_counter';
+import { CharacterCounter } from 'mastodon/features/compose/components/character_counter';
 import UploadProgress from 'mastodon/features/compose/components/upload_progress';
 import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components';
 import { me } from 'mastodon/initial_state';
diff --git a/app/javascript/mastodon/features/ui/components/mute_modal.jsx b/app/javascript/mastodon/features/ui/components/mute_modal.jsx
index 2d95cabef8..fa81ea81a3 100644
--- a/app/javascript/mastodon/features/ui/components/mute_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/mute_modal.jsx
@@ -108,7 +108,6 @@ class MuteModal extends PureComponent {
           <div>
             <span><FormattedMessage id='mute_modal.duration' defaultMessage='Duration' />: </span>
 
-            {/* eslint-disable-next-line jsx-a11y/no-onchange */}
             <select value={muteDuration} onChange={this.changeMuteDuration}>
               <option value={0}>{intl.formatMessage(messages.indefinite)}</option>
               <option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option>
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.jsx b/app/javascript/mastodon/features/ui/components/navigation_panel.jsx
index 3f7f82b6a6..bb7708e600 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.jsx
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.jsx
@@ -77,7 +77,6 @@ class NavigationPanel extends Component {
       <div className='navigation-panel'>
         <div className='navigation-panel__logo'>
           <Link to='/' className='column-link column-link--logo'><WordmarkLogo /></Link>
-          {!banner && <hr />}
         </div>
 
         {banner &&
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index be7209d04a..4befe77949 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -89,7 +89,6 @@
   "announcement.announcement": "Announcement",
   "attachments_list.unprocessed": "(unprocessed)",
   "audio.hide": "Hide audio",
-  "autosuggest_hashtag.per_week": "{count} per week",
   "boost_modal.combo": "You can press {combo} to skip this next time",
   "bundle_column_error.copy_stacktrace": "Copy error report",
   "bundle_column_error.error.body": "The requested page could not be rendered. It could be due to a bug in our code, or a browser compatibility issue.",
@@ -146,22 +145,22 @@
   "compose_form.lock_disclaimer": "Your account is not {locked}. Anyone can follow you to view your follower-only posts.",
   "compose_form.lock_disclaimer.lock": "locked",
   "compose_form.placeholder": "What's on your mind?",
-  "compose_form.poll.add_option": "Add a choice",
+  "compose_form.poll.add_option": "Add option",
   "compose_form.poll.duration": "Poll duration",
-  "compose_form.poll.option_placeholder": "Choice {number}",
-  "compose_form.poll.remove_option": "Remove this choice",
+  "compose_form.poll.multiple": "Multiple choice",
+  "compose_form.poll.option_placeholder": "Option {number}",
+  "compose_form.poll.remove_option": "Remove this option",
+  "compose_form.poll.single": "Pick one",
   "compose_form.poll.switch_to_multiple": "Change poll to allow multiple choices",
   "compose_form.poll.switch_to_single": "Change poll to allow for a single choice",
-  "compose_form.publish": "Publish",
+  "compose_form.poll.type": "Style",
+  "compose_form.publish": "Post",
   "compose_form.publish_form": "New post",
-  "compose_form.publish_loud": "{publish}!",
-  "compose_form.save_changes": "Save changes",
-  "compose_form.sensitive.hide": "{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}",
-  "compose_form.sensitive.marked": "{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}",
-  "compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}",
+  "compose_form.reply": "Reply",
+  "compose_form.save_changes": "Update",
   "compose_form.spoiler.marked": "Remove content warning",
   "compose_form.spoiler.unmarked": "Add content warning",
-  "compose_form.spoiler_placeholder": "Write your warning here",
+  "compose_form.spoiler_placeholder": "Content warning (optional)",
   "confirmation_modal.cancel": "Cancel",
   "confirmations.block.block_and_report": "Block & Report",
   "confirmations.block.confirm": "Block",
@@ -408,7 +407,6 @@
   "navigation_bar.direct": "Private mentions",
   "navigation_bar.discover": "Discover",
   "navigation_bar.domain_blocks": "Blocked domains",
-  "navigation_bar.edit_profile": "Edit profile",
   "navigation_bar.explore": "Explore",
   "navigation_bar.favourites": "Favorites",
   "navigation_bar.filters": "Muted words",
@@ -526,14 +524,15 @@
   "poll_button.add_poll": "Add a poll",
   "poll_button.remove_poll": "Remove poll",
   "privacy.change": "Change post privacy",
-  "privacy.direct.long": "Visible for mentioned users only",
-  "privacy.direct.short": "Mentioned people only",
-  "privacy.private.long": "Visible for followers only",
-  "privacy.private.short": "Followers only",
-  "privacy.public.long": "Visible for all",
+  "privacy.direct.long": "Everyone mentioned in the post",
+  "privacy.direct.short": "Specific people",
+  "privacy.private.long": "Only your followers",
+  "privacy.private.short": "Followers",
+  "privacy.public.long": "Anyone on and off Mastodon",
   "privacy.public.short": "Public",
-  "privacy.unlisted.long": "Visible for all, but opted-out of discovery features",
-  "privacy.unlisted.short": "Unlisted",
+  "privacy.unlisted.additional": "This behaves exactly like public, except the post will not appear in live feeds or hashtags, explore, or Mastodon search, even if you are opted-in account-wide.",
+  "privacy.unlisted.long": "Fewer algorithmic fanfares",
+  "privacy.unlisted.short": "Quiet public",
   "privacy_policy.last_updated": "Last updated {date}",
   "privacy_policy.title": "Privacy Policy",
   "recommended": "Recommended",
@@ -551,7 +550,9 @@
   "relative_time.minutes": "{number}m",
   "relative_time.seconds": "{number}s",
   "relative_time.today": "today",
+  "reply_indicator.attachments": "{count, plural, one {# attachment} other {# attachments}}",
   "reply_indicator.cancel": "Cancel",
+  "reply_indicator.poll": "Poll",
   "report.block": "Block",
   "report.block_explanation": "You will not see their posts. They will not be able to see your posts or follow you. They will be able to tell that they are blocked.",
   "report.categories.legal": "Legal",
@@ -715,10 +716,8 @@
   "upload_error.poll": "File upload not allowed with polls.",
   "upload_form.audio_description": "Describe for people who are deaf or hard of hearing",
   "upload_form.description": "Describe for people who are blind or have low vision",
-  "upload_form.description_missing": "No description added",
   "upload_form.edit": "Edit",
   "upload_form.thumbnail": "Change thumbnail",
-  "upload_form.undo": "Delete",
   "upload_form.video_description": "Describe for people who are deaf, hard of hearing, blind or have low vision",
   "upload_modal.analyzing_picture": "Analyzing picture…",
   "upload_modal.apply": "Apply",
diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js
index 541c429368..c7914d52e4 100644
--- a/app/javascript/mastodon/reducers/compose.js
+++ b/app/javascript/mastodon/reducers/compose.js
@@ -40,9 +40,7 @@ import {
   COMPOSE_RESET,
   COMPOSE_POLL_ADD,
   COMPOSE_POLL_REMOVE,
-  COMPOSE_POLL_OPTION_ADD,
   COMPOSE_POLL_OPTION_CHANGE,
-  COMPOSE_POLL_OPTION_REMOVE,
   COMPOSE_POLL_SETTINGS_CHANGE,
   INIT_MEDIA_EDIT_MODAL,
   COMPOSE_CHANGE_MEDIA_DESCRIPTION,
@@ -282,6 +280,18 @@ const updateSuggestionTags = (state, token) => {
   });
 };
 
+const updatePoll = (state, index, value) => state.updateIn(['poll', 'options'], options => {
+  const tmp = options.set(index, value).filterNot(x => x.trim().length === 0);
+
+  if (tmp.size === 0) {
+    return tmp.push('').push('');
+  } else if (tmp.size < 4) {
+    return tmp.push('');
+  }
+
+  return tmp;
+});
+
 export default function compose(state = initialState, action) {
   switch(action.type) {
   case STORE_HYDRATE:
@@ -518,12 +528,8 @@ export default function compose(state = initialState, action) {
     return state.set('poll', initialPoll);
   case COMPOSE_POLL_REMOVE:
     return state.set('poll', null);
-  case COMPOSE_POLL_OPTION_ADD:
-    return state.updateIn(['poll', 'options'], options => options.push(action.title));
   case COMPOSE_POLL_OPTION_CHANGE:
-    return state.setIn(['poll', 'options', action.index], action.title);
-  case COMPOSE_POLL_OPTION_REMOVE:
-    return state.updateIn(['poll', 'options'], options => options.delete(action.index));
+    return updatePoll(state, action.index, action.title);
   case COMPOSE_POLL_SETTINGS_CHANGE:
     return state.update('poll', poll => poll.set('expires_in', action.expiresIn).set('multiple', action.isMultiple));
   case COMPOSE_LANGUAGE_CHANGE:
diff --git a/app/javascript/material-icons/400-24px/bar_chart_4_bars-fill.svg b/app/javascript/material-icons/400-24px/bar_chart_4_bars-fill.svg
new file mode 100644
index 0000000000..63215a3e09
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/bar_chart_4_bars-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-120v-80h800v80H80Zm40-120v-280h120v280H120Zm200 0v-480h120v480H320Zm200 0v-360h120v360H520Zm200 0v-600h120v600H720Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/bar_chart_4_bars.svg b/app/javascript/material-icons/400-24px/bar_chart_4_bars.svg
new file mode 100644
index 0000000000..63215a3e09
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/bar_chart_4_bars.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-120v-80h800v80H80Zm40-120v-280h120v280H120Zm200 0v-480h120v480H320Zm200 0v-360h120v360H520Zm200 0v-600h120v600H720Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/mood-fill.svg b/app/javascript/material-icons/400-24px/mood-fill.svg
new file mode 100644
index 0000000000..9480d0fb92
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/mood-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/mood.svg b/app/javascript/material-icons/400-24px/mood.svg
new file mode 100644
index 0000000000..46cafa7680
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/mood.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/photo_library-fill.svg b/app/javascript/material-icons/400-24px/photo_library-fill.svg
new file mode 100644
index 0000000000..e68aec8321
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/photo_library-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-400h400L622-580l-92 120-62-80-108 140Zm-40 160q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/photo_library.svg b/app/javascript/material-icons/400-24px/photo_library.svg
new file mode 100644
index 0000000000..3b22224b83
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/photo_library.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-400h400L622-580l-92 120-62-80-108 140Zm-40 160q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/quickreply-fill.svg b/app/javascript/material-icons/400-24px/quickreply-fill.svg
new file mode 100644
index 0000000000..a9ce9705ac
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/quickreply-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M760-40v-200h-80v-240h200l-68 160h88L760-40ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v240H600v320H240L80-80Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/quickreply.svg b/app/javascript/material-icons/400-24px/quickreply.svg
new file mode 100644
index 0000000000..522093e3cc
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/quickreply.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v240h-80v-240H160v525l46-45h394v80H240L80-80Zm80-240v-480 480ZM760-40v-200h-80v-240h200l-68 160h88L760-40Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/quiet_time-fill.svg b/app/javascript/material-icons/400-24px/quiet_time-fill.svg
new file mode 100644
index 0000000000..aed5740db3
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/quiet_time-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M524-40q-84 0-157.5-32t-128-86.5Q184-213 152-286.5T120-444q0-146 93-257.5T450-840q-18 99 11 193.5T561-481q71 71 165.5 100T920-370q-26 144-138 237T524-40Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/quiet_time.svg b/app/javascript/material-icons/400-24px/quiet_time.svg
new file mode 100644
index 0000000000..552da6658d
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/quiet_time.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M524-40q-84 0-157.5-32t-128-86.5Q184-213 152-286.5T120-444q0-146 93-257.5T450-840q-18 99 11 193.5T561-481q71 71 165.5 100T920-370q-26 144-138 237T524-40Zm0-80q88 0 163-44t118-121q-86-8-163-43.5T504-425q-61-61-97-138t-43-163q-77 43-120.5 118.5T200-444q0 135 94.5 229.5T524-120Zm-20-305Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/share_off-fill.svg b/app/javascript/material-icons/400-24px/share_off-fill.svg
new file mode 100644
index 0000000000..3b6a05d118
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/share_off-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-440q83 0 141.5 58.5T440-240q0 83-58.5 141.5T240-40q-83 0-141.5-58.5T40-240q0-83 58.5-141.5T240-440Zm0 228 70 71 29-28-71-71 71-71-28-28-71 71-71-71-28 28 71 71-71 71 28 28 71-71Zm480-428q-23 0-44-8.5T638-672L356-508q1 4 1.5 7.5t1.5 7.5q-27-13-57-20t-62-7q-32 0-62 7t-57 20q5-45 38.5-76t80.5-31q23 0 44 8.5t38 23.5l282-164q-2-6-3-13.5t-1-14.5q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35Zm0 560q-50 0-85-35t-35-85q0-7 1-14.5t3-13.5l-87-50q-4-27-12.5-52T483-378l155 90q17-15 38-23.5t44-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/share_off.svg b/app/javascript/material-icons/400-24px/share_off.svg
new file mode 100644
index 0000000000..00bb28659b
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/share_off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M720-720q17 0 28.5-11.5T760-760q0-17-11.5-28.5T720-800q-17 0-28.5 11.5T680-760q0 17 11.5 28.5T720-720Zm0 560q17 0 28.5-11.5T760-200q0-17-11.5-28.5T720-240q-17 0-28.5 11.5T680-200q0 17 11.5 28.5T720-160Zm0-600Zm0 560ZM240-40q-83 0-141.5-58.5T40-240q0-83 58.5-141.5T240-440q83 0 141.5 58.5T440-240q0 83-58.5 141.5T240-40ZM121-493q5-45 38.5-76t80.5-31q23 0 44 8.5t38 23.5l282-164q-2-6-3-13.5t-1-14.5q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-23 0-44-8.5T638-672L356-508q1 4 1.5 7.5t1.5 7.5q-27-13-57-20t-62-7q-32 0-62 7t-57 20ZM720-80q-50 0-85-35t-35-85q0-7 1-14.5t3-13.5l-87-50q-4-27-12.5-52T483-378l155 90q17-15 38-23.5t44-8.5q50 0 85 35t35 85q0 50-35 85t-85 35ZM240-212l70 71 29-28-71-71 71-71-28-28-71 71-71-71-28 28 71 71-71 71 28 28 71-71Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/translate-fill.svg b/app/javascript/material-icons/400-24px/translate-fill.svg
new file mode 100644
index 0000000000..ecaaf37f1e
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/translate-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56 202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63 148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/translate.svg b/app/javascript/material-icons/400-24px/translate.svg
new file mode 100644
index 0000000000..ecaaf37f1e
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/translate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56 202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63 148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/warning-fill.svg b/app/javascript/material-icons/400-24px/warning-fill.svg
new file mode 100644
index 0000000000..c3727d3f57
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/warning-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m40-120 440-760 440 760H40Zm440-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/warning.svg b/app/javascript/material-icons/400-24px/warning.svg
new file mode 100644
index 0000000000..238299e606
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/packs/share.jsx b/app/javascript/packs/share.jsx
index 0f3b84549d..7b5723091c 100644
--- a/app/javascript/packs/share.jsx
+++ b/app/javascript/packs/share.jsx
@@ -13,10 +13,12 @@ function loaded() {
 
   if (mountNode) {
     const attr = mountNode.getAttribute('data-props');
-    if(!attr) return;
+
+    if (!attr) return;
 
     const props = JSON.parse(attr);
     const root = createRoot(mountNode);
+
     root.render(<ComposeContainer {...props} />);
   }
 }
diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss
index 1c2386f02d..ae607f484a 100644
--- a/app/javascript/styles/contrast/diff.scss
+++ b/app/javascript/styles/contrast/diff.scss
@@ -1,20 +1,7 @@
-.compose-form {
-  .compose-form__modifiers {
-    .compose-form__upload {
-      &-description {
-        input {
-          &::placeholder {
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-}
-
 .status__content a,
-.link-footer a,
 .reply-indicator__content a,
+.edit-indicator__content a,
+.link-footer a,
 .status__content__read-more-button,
 .status__content__translate-button {
   text-decoration: underline;
@@ -42,7 +29,9 @@
   }
 }
 
-.status__content a {
+.status__content a,
+.reply-indicator__content a,
+.edit-indicator__content a {
   color: $highlight-text-color;
 }
 
@@ -50,24 +39,10 @@
   color: $darker-text-color;
 }
 
-.compose-form__poll-wrapper .button.button-secondary,
-.compose-form .autosuggest-textarea__textarea::placeholder,
-.compose-form .spoiler-input__input::placeholder,
-.report-dialog-modal__textarea::placeholder,
-.language-dropdown__dropdown__results__item__common-name,
-.compose-form .icon-button {
+.report-dialog-modal__textarea::placeholder {
   color: $inverted-text-color;
 }
 
-.text-icon-button.active {
-  color: $ui-highlight-color;
-}
-
-.language-dropdown__dropdown__results__item.active {
-  background: $ui-highlight-color;
-  font-weight: 500;
-}
-
 .link-button:disabled {
   cursor: not-allowed;
 
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 3a27c974ad..3c75854d9b 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -145,10 +145,6 @@ html {
   }
 }
 
-.compose-form__autosuggest-wrapper,
-.poll__option input[type='text'],
-.compose-form .spoiler-input__input,
-.compose-form__poll-wrapper select,
 .search__input,
 .setting-text,
 .report-dialog-modal__textarea,
@@ -172,28 +168,11 @@ html {
   border-bottom: 0;
 }
 
-.compose-form__poll-wrapper select {
-  background: $simple-background-color
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
-    no-repeat right 8px center / auto 16px;
-}
-
-.compose-form__poll-wrapper,
-.compose-form__poll-wrapper .poll__footer {
-  border-top-color: lighten($ui-base-color, 8%);
-}
-
 .notification__filter-bar {
   border: 1px solid lighten($ui-base-color, 8%);
   border-top: 0;
 }
 
-.compose-form .compose-form__buttons-wrapper {
-  background: $ui-base-color;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-}
-
 .drawer__header,
 .drawer__inner {
   background: $white;
@@ -206,52 +185,6 @@ html {
     no-repeat bottom / 100% auto;
 }
 
-// Change the colors used in compose-form
-.compose-form {
-  .compose-form__modifiers {
-    .compose-form__upload__actions .icon-button,
-    .compose-form__upload__warning .icon-button {
-      color: lighten($white, 7%);
-
-      &:active,
-      &:focus,
-      &:hover {
-        color: $white;
-      }
-    }
-  }
-
-  .compose-form__buttons-wrapper {
-    background: darken($ui-base-color, 6%);
-  }
-
-  .autosuggest-textarea__suggestions {
-    background: darken($ui-base-color, 6%);
-  }
-
-  .autosuggest-textarea__suggestions__item {
-    &:hover,
-    &:focus,
-    &:active,
-    &.selected {
-      background: lighten($ui-base-color, 4%);
-    }
-  }
-}
-
-.emoji-mart-bar {
-  border-color: lighten($ui-base-color, 4%);
-
-  &:first-child {
-    background: darken($ui-base-color, 6%);
-  }
-}
-
-.emoji-mart-search input {
-  background: rgba($ui-base-color, 0.3);
-  border-color: $ui-base-color;
-}
-
 .upload-progress__backdrop {
   background: $ui-base-color;
 }
@@ -283,46 +216,11 @@ html {
   background: $ui-base-color;
 }
 
-.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
-  color: $white;
-}
-
 .account-gallery__item a {
   background-color: $ui-base-color;
 }
 
-// Change the colors used in the dropdown menu
-.dropdown-menu {
-  background: $white;
-
-  &__arrow::before {
-    background-color: $white;
-  }
-
-  &__item {
-    color: $darker-text-color;
-
-    &--dangerous {
-      color: $error-value-color;
-    }
-
-    a,
-    button {
-      background: $white;
-    }
-  }
-}
-
 // Change the text colors on inverted background
-.privacy-dropdown__option.active,
-.privacy-dropdown__option:hover,
-.privacy-dropdown__option.active .privacy-dropdown__option__content,
-.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
-.privacy-dropdown__option:hover .privacy-dropdown__option__content,
-.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
-.dropdown-menu__item:not(.dropdown-menu__item--dangerous) a:active,
-.dropdown-menu__item:not(.dropdown-menu__item--dangerous) a:focus,
-.dropdown-menu__item:not(.dropdown-menu__item--dangerous) a:hover,
 .actions-modal ul li:not(:empty) a.active,
 .actions-modal ul li:not(:empty) a.active button,
 .actions-modal ul li:not(:empty) a:active,
@@ -331,7 +229,6 @@ html {
 .actions-modal ul li:not(:empty) a:focus button,
 .actions-modal ul li:not(:empty) a:hover,
 .actions-modal ul li:not(:empty) a:hover button,
-.language-dropdown__dropdown__results__item.active,
 .admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
 .simple_form .block-button,
 .simple_form .button,
@@ -339,19 +236,6 @@ html {
   color: $white;
 }
 
-.language-dropdown__dropdown__results__item
-  .language-dropdown__dropdown__results__item__common-name {
-  color: lighten($ui-base-color, 8%);
-}
-
-.language-dropdown__dropdown__results__item.active
-  .language-dropdown__dropdown__results__item__common-name {
-  color: darken($ui-base-color, 12%);
-}
-
-.dropdown-menu__separator,
-.dropdown-menu__item.edited-timestamp__history__item,
-.dropdown-menu__container__header,
 .compare-history-modal .report-modal__target,
 .report-dialog-modal .poll__option.dialog-option {
   border-bottom-color: lighten($ui-base-color, 4%);
@@ -385,10 +269,7 @@ html {
 
 .reactions-bar__item:hover,
 .reactions-bar__item:focus,
-.reactions-bar__item:active,
-.language-dropdown__dropdown__results__item:hover,
-.language-dropdown__dropdown__results__item:focus,
-.language-dropdown__dropdown__results__item:active {
+.reactions-bar__item:active {
   background-color: $ui-base-color;
 }
 
@@ -631,11 +512,6 @@ html {
   }
 }
 
-.reply-indicator {
-  background: transparent;
-  border: 1px solid lighten($ui-base-color, 8%);
-}
-
 .status__content,
 .reply-indicator__content {
   a {
@@ -675,3 +551,30 @@ html {
     background-color: rgba($ui-highlight-color, 0.15);
   }
 }
+
+.compose-form__actions .icon-button.active,
+.dropdown-button.active,
+.privacy-dropdown__option.active,
+.privacy-dropdown__option:focus,
+.language-dropdown__dropdown__results__item:focus,
+.language-dropdown__dropdown__results__item.active,
+.privacy-dropdown__option:focus .privacy-dropdown__option__content,
+.privacy-dropdown__option:focus .privacy-dropdown__option__content strong,
+.privacy-dropdown__option.active .privacy-dropdown__option__content,
+.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
+.language-dropdown__dropdown__results__item:focus
+  .language-dropdown__dropdown__results__item__common-name,
+.language-dropdown__dropdown__results__item.active
+  .language-dropdown__dropdown__results__item__common-name {
+  color: $white;
+}
+
+.compose-form .spoiler-input__input {
+  color: lighten($ui-highlight-color, 8%);
+}
+
+.compose-form .autosuggest-textarea__textarea,
+.compose-form__highlightable,
+.poll__option input[type='text'] {
+  background: darken($ui-base-color, 10%);
+}
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index ac8a831215..3cf5561ca3 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -5,7 +5,7 @@ $white: #ffffff;
 $classic-base-color: #282c37;
 $classic-primary-color: #9baec8;
 $classic-secondary-color: #d9e1e8;
-$classic-highlight-color: #858afa;
+$classic-highlight-color: #6364ff;
 
 $blurple-600: #563acc; // Iris
 $blurple-500: #6364ff; // Brand purple
@@ -34,7 +34,7 @@ $ui-button-tertiary-border-color: $blurple-500 !default;
 
 $primary-text-color: $black !default;
 $darker-text-color: $classic-base-color !default;
-$highlight-text-color: darken($ui-highlight-color, 8%) !default;
+$highlight-text-color: $ui-highlight-color !default;
 $dark-text-color: #444b5d;
 $action-button-color: #606984;
 
@@ -55,3 +55,8 @@ $account-background-color: $white !default;
 }
 
 $emojis-requiring-inversion: 'chains';
+
+.theme-mastodon-light {
+  --dropdown-border-color: #d9e1e8;
+  --dropdown-background-color: #fff;
+}
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index dcfab6bd01..d7f8586dd2 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -15,13 +15,14 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  border: 0;
   box-shadow: none;
   font-family: inherit;
   background: $ui-base-color;
   color: $darker-text-color;
   border-radius: 4px;
-  font-size: 14px;
+  border: 1px solid lighten($ui-base-color, 8%);
+  font-size: 17px;
+  line-height: normal;
   margin: 0;
 }
 
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 89c2adaea3..33996c8a7e 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1330,6 +1330,9 @@ a.sparkline {
 
     &__label {
       padding: 15px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
     }
 
     &__rules {
@@ -1340,6 +1343,9 @@ a.sparkline {
   &__rule {
     cursor: pointer;
     padding: 15px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
   }
 }
 
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 6714b24268..28dad81da5 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -8,7 +8,7 @@
 
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: darken($ui-base-color, 7%);
+  background: darken($ui-base-color, 8%);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 803fd50053..7b772abf82 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -368,46 +368,155 @@ body > [data-popper-placement] {
   }
 }
 
-.compose-form {
-  padding: 15px;
+.autosuggest-textarea {
+  &__textarea {
+    background: transparent;
+    min-height: 100px;
+    padding-bottom: 0;
+    resize: none;
+    scrollbar-color: initial;
 
-  &__sensitive-button {
-    padding: 10px;
-    padding-top: 0;
-    font-size: 14px;
-    font-weight: 500;
-
-    &.active {
-      color: $highlight-text-color;
-    }
-
-    input[type='checkbox'] {
-      appearance: none;
-      display: inline-block;
-      position: relative;
-      border: 1px solid $ui-primary-color;
-      box-sizing: border-box;
-      width: 18px;
-      height: 18px;
-      flex: 0 0 auto;
-      margin-inline-end: 10px;
-      top: -1px;
-      border-radius: 4px;
-      vertical-align: middle;
-      cursor: inherit;
-
-      &:checked {
-        border-color: $highlight-text-color;
-        background: $highlight-text-color
-          url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>")
-          center center no-repeat;
-      }
+    &::-webkit-scrollbar {
+      all: unset;
     }
   }
 
-  .compose-form__warning {
+  &__suggestions {
+    box-shadow: var(--dropdown-shadow);
+    background: $ui-base-color;
+    border: 1px solid lighten($ui-base-color, 14%);
+    border-radius: 0 0 4px 4px;
+    color: $secondary-text-color;
+    font-size: 14px;
+    padding: 0;
+
+    &__item {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      height: 48px;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: $secondary-text-color;
+
+      &:last-child {
+        border-radius: 0 0 4px 4px;
+      }
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.selected {
+        background: $ui-highlight-color;
+        color: $primary-text-color;
+
+        .autosuggest-account .display-name__account {
+          color: inherit;
+        }
+      }
+    }
+  }
+}
+
+.autosuggest-account,
+.autosuggest-emoji,
+.autosuggest-hashtag {
+  flex: 1 0 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 8px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.autosuggest-account {
+  .display-name {
+    font-weight: 400;
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+  }
+
+  .display-name__account {
+    display: block;
+    line-height: 16px;
+    font-size: 12px;
+    color: $dark-text-color;
+  }
+}
+
+.autosuggest-hashtag {
+  justify-content: space-between;
+
+  &__name {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__uses {
+    flex: 0 0 auto;
+    text-align: end;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.autosuggest-emoji {
+  &__name {
+    flex: 1 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.autosuggest-account .account__avatar,
+.autosuggest-emoji img {
+  display: block;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+}
+
+.compose-form {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+
+  .layout-multiple-columns &,
+  .column & {
+    padding: 15px;
+  }
+
+  &__highlightable {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    flex: 0 1 auto;
+    border-radius: 4px;
+    border: 1px solid lighten($ui-base-color, 8%);
+    transition: border-color 300ms linear;
+    min-height: 0;
+    position: relative;
+    background: $ui-base-color;
+    overflow-y: auto;
+
+    &.active {
+      transition: none;
+      border-color: $ui-highlight-color;
+    }
+  }
+
+  &__warning {
     color: $inverted-text-color;
-    margin-bottom: 10px;
     background: $ui-primary-color;
     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
     padding: 8px 10px;
@@ -439,32 +548,27 @@ body > [data-popper-placement] {
     }
   }
 
-  .emoji-picker-dropdown {
-    position: absolute;
-    top: 0;
-    inset-inline-end: 0;
-  }
-
-  .compose-form__autosuggest-wrapper {
-    position: relative;
-  }
-
-  .autosuggest-textarea,
-  .autosuggest-input,
   .spoiler-input {
-    position: relative;
-    width: 100%;
-  }
+    display: flex;
+    align-items: stretch;
 
-  .spoiler-input {
-    height: 0;
-    transform-origin: bottom;
-    opacity: 0;
+    &__border {
+      background: url('~images/warning-stripes.svg') repeat-y;
+      width: 5px;
+      flex: 0 0 auto;
 
-    &.spoiler-input--visible {
-      height: 36px;
-      margin-bottom: 11px;
-      opacity: 1;
+      &:first-child {
+        border-start-start-radius: 4px;
+      }
+
+      &:last-child {
+        border-start-end-radius: 4px;
+      }
+    }
+
+    .autosuggest-input {
+      flex: 1 1 auto;
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
     }
   }
 
@@ -474,269 +578,303 @@ body > [data-popper-placement] {
     box-sizing: border-box;
     width: 100%;
     margin: 0;
-    color: $inverted-text-color;
-    background: $simple-background-color;
-    padding: 10px;
+    color: $secondary-text-color;
+    background: $ui-base-color;
     font-family: inherit;
     font-size: 14px;
-    resize: vertical;
+    padding: 12px;
+    line-height: normal;
     border: 0;
     outline: 0;
 
-    &::placeholder {
-      color: $dark-text-color;
-    }
-
     &:focus {
       outline: 0;
     }
-
-    @media screen and (width <= 600px) {
-      font-size: 16px;
-    }
   }
 
   .spoiler-input__input {
-    border-radius: 4px;
+    padding: 12px 12px - 5px;
+    background: mix($ui-base-color, $ui-highlight-color, 85%);
+    color: $highlight-text-color;
   }
 
-  .autosuggest-textarea__textarea {
-    min-height: 100px;
-    border-radius: 4px 4px 0 0;
-    padding-bottom: 0;
-    padding-right: 10px + 22px; // Cannot use inline-end because of dir=auto
-    resize: none;
-    scrollbar-color: initial;
-
-    &::-webkit-scrollbar {
-      all: unset;
-    }
-
-    @media screen and (width <= 600px) {
-      height: 100px !important; // Prevent auto-resize textarea
-      resize: vertical;
-    }
-  }
-
-  .autosuggest-textarea__suggestions-wrapper {
-    position: relative;
-    height: 0;
-  }
-
-  .autosuggest-textarea__suggestions {
-    box-sizing: border-box;
-    display: none;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    z-index: 99;
-    box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-    background: $ui-secondary-color;
-    border-radius: 0 0 4px 4px;
-    color: $inverted-text-color;
-    font-size: 14px;
-    padding: 6px;
-
-    &.autosuggest-textarea__suggestions--visible {
-      display: block;
-    }
-  }
-
-  .autosuggest-textarea__suggestions__item {
-    padding: 10px;
-    cursor: pointer;
-    border-radius: 4px;
-
-    &:hover,
-    &:focus,
-    &:active,
-    &.selected {
-      background: darken($ui-secondary-color, 10%);
-    }
-  }
-
-  .autosuggest-account,
-  .autosuggest-emoji,
-  .autosuggest-hashtag {
+  &__dropdowns {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    justify-content: flex-start;
-    line-height: 18px;
-    font-size: 14px;
-  }
+    gap: 8px;
 
-  .autosuggest-hashtag {
-    justify-content: space-between;
-
-    &__name {
-      flex: 1 1 auto;
+    & > div {
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    strong {
-      font-weight: 500;
-    }
-
-    &__uses {
-      flex: 0 0 auto;
-      text-align: end;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .autosuggest-account-icon,
-  .autosuggest-emoji img {
-    display: block;
-    margin-inline-end: 8px;
-    width: 16px;
-    height: 16px;
-  }
-
-  .autosuggest-account .display-name__account {
-    color: $lighter-text-color;
-  }
-
-  .compose-form__modifiers {
-    color: $inverted-text-color;
-    font-family: inherit;
-    font-size: 14px;
-    background: $simple-background-color;
-
-    .compose-form__upload-wrapper {
-      overflow: hidden;
-    }
-
-    .compose-form__uploads-wrapper {
       display: flex;
-      flex-direction: row;
-      padding: 5px;
-      flex-wrap: wrap;
+    }
+  }
+
+  &__uploads {
+    display: flex;
+    gap: 8px;
+    padding: 0 12px;
+    flex-wrap: wrap;
+    align-self: stretch;
+    align-items: flex-start;
+    align-content: flex-start;
+    justify-content: center;
+  }
+
+  &__upload {
+    flex: 1 1 0;
+    min-width: calc(50% - 8px);
+
+    &__actions {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 8px;
     }
 
-    .compose-form__upload {
-      flex: 1 1 0;
-      min-width: 40%;
-      margin: 5px;
-
-      &__actions {
-        background: linear-gradient(
-          180deg,
-          rgba($base-shadow-color, 0.8) 0,
-          rgba($base-shadow-color, 0.35) 80%,
-          transparent
-        );
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-      }
-
-      .icon-button {
-        flex: 0 1 auto;
-        color: $secondary-text-color;
-        font-size: 14px;
-        font-weight: 500;
-        padding: 10px;
-        font-family: inherit;
-
-        .icon {
-          width: 15px;
-          height: 15px;
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: lighten($secondary-text-color, 7%);
-        }
-      }
-
-      &__warning {
-        position: absolute;
-        z-index: 2;
-        bottom: 0;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-        box-sizing: border-box;
-        background: linear-gradient(
-          0deg,
-          rgba($base-shadow-color, 0.8) 0,
-          rgba($base-shadow-color, 0.35) 80%,
-          transparent
-        );
-      }
+    &__preview {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 6px;
+      z-index: -1;
+      top: 0;
+      inset-inline-start: 0;
     }
 
-    .compose-form__upload-thumbnail {
-      border-radius: 4px;
-      background-color: $base-shadow-color;
+    &__thumbnail {
+      width: 100%;
+      height: 144px;
+      border-radius: 6px;
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
-      height: 140px;
-      width: 100%;
       overflow: hidden;
     }
+
+    .icon-button {
+      flex: 0 0 auto;
+      color: $white;
+      background: rgba(0, 0, 0, 75%);
+      border-radius: 6px;
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 500;
+      padding: 4px 8px;
+      font-family: inherit;
+
+      .icon {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    .icon-button.compose-form__upload__delete {
+      padding: 3px;
+      border-radius: 50%;
+
+      .icon {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    &__warning {
+      position: absolute;
+      z-index: 2;
+      bottom: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      padding: 8px;
+
+      .icon-button.active {
+        color: #ffbe2e;
+        background: rgba(0, 0, 0, 75%);
+      }
+    }
   }
 
-  .compose-form__buttons-wrapper {
-    padding: 10px;
-    background: darken($simple-background-color, 8%);
-    border-radius: 0 0 4px 4px;
+  &__footer {
     display: flex;
-    justify-content: space-between;
-    flex: 0 0 auto;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    padding-top: 0;
+  }
 
-    .compose-form__buttons {
+  &__submit {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  &__buttons {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex: 1 1 auto;
+
+    & > div {
       display: flex;
-      gap: 2px;
-
-      .icon-button {
-        height: 100%;
-      }
-
-      .compose-form__upload-button-icon {
-        line-height: 27px;
-      }
-
-      .compose-form__sensitive-button {
-        display: none;
-
-        &.compose-form__sensitive-button--visible {
-          display: block;
-        }
-
-        .compose-form__sensitive-button__icon {
-          line-height: 27px;
-        }
-      }
     }
 
-    .icon-button,
-    .text-icon-button {
-      box-sizing: content-box;
-      padding: 0 3px;
+    .icon-button {
+      padding: 3px;
     }
 
-    .character-counter__wrapper {
-      align-self: center;
-      margin-inline-end: 4px;
+    .icon-button .icon {
+      width: 18px;
+      height: 18px;
     }
   }
 
-  .compose-form__publish {
+  &__actions {
     display: flex;
-    justify-content: flex-end;
-    min-width: 0;
+    align-items: center;
     flex: 0 0 auto;
+    gap: 12px;
+    flex-wrap: wrap;
 
-    .compose-form__publish-button-wrapper {
-      padding-top: 15px;
+    .button {
+      display: block; // Otherwise text-ellipsis doesn't work
+      font-size: 14px;
+      line-height: normal;
+      font-weight: 700;
+      flex: 1 1 auto;
+      padding: 5px 12px;
+      border-radius: 4px;
     }
+
+    .icon-button {
+      box-sizing: content-box;
+      color: $highlight-text-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $highlight-text-color;
+      }
+
+      &.disabled {
+        color: $highlight-text-color;
+        opacity: 0.5;
+      }
+
+      &.active {
+        background: $ui-highlight-color;
+        color: $primary-text-color;
+      }
+    }
+  }
+
+  &__poll {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: 8px;
+
+    .poll__option {
+      padding: 0 12px;
+      gap: 8px;
+
+      &.empty:not(:focus-within) {
+        opacity: 0.5;
+      }
+    }
+
+    .poll__input {
+      width: 17px;
+      height: 17px;
+      border-color: $darker-text-color;
+    }
+
+    &__footer {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding-inline-start: 37px;
+      padding-inline-end: 40px;
+
+      &__sep {
+        width: 1px;
+        height: 22px;
+        background: lighten($ui-base-color, 8%);
+        flex: 0 0 auto;
+      }
+    }
+
+    &__select {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1 1 auto;
+      min-width: 0;
+
+      &__label {
+        flex: 0 0 auto;
+        font-size: 11px;
+        font-weight: 500;
+        line-height: 16px;
+        letter-spacing: 0.5px;
+        color: $darker-text-color;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      &__value {
+        flex: 0 0 auto;
+        appearance: none;
+        background: transparent;
+        border: none;
+        padding: 0;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        letter-spacing: 0.1px;
+        color: $highlight-text-color;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+.dropdown-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  color: $highlight-text-color;
+  border-radius: 6px;
+  border: 1px solid $highlight-text-color;
+  padding: 4px 8px;
+  font-size: 13px;
+  line-height: normal;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .icon {
+    width: 15px;
+    height: 15px;
+    flex: 0 0 auto;
+  }
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 auto;
+  }
+
+  &.active {
+    background: $ui-highlight-color;
+    border-color: $ui-highlight-color;
+    color: $primary-text-color;
   }
 }
 
@@ -744,11 +882,14 @@ body > [data-popper-placement] {
   cursor: default;
   font-family: $font-sans-serif, sans-serif;
   font-size: 14px;
-  font-weight: 600;
-  color: $lighter-text-color;
+  font-weight: 400;
+  line-height: normal;
+  color: $darker-text-color;
+  flex: 1 0 auto;
+  text-align: end;
 
   &.character-counter--over {
-    color: $warning-red;
+    color: $error-red;
   }
 }
 
@@ -794,41 +935,6 @@ body > [data-popper-placement] {
   }
 }
 
-.reply-indicator {
-  border-radius: 4px;
-  margin-bottom: 10px;
-  background: $ui-primary-color;
-  padding: 10px;
-  min-height: 23px;
-  overflow-y: auto;
-  flex: 0 2 auto;
-}
-
-.reply-indicator__header {
-  margin-bottom: 5px;
-  overflow: hidden;
-}
-
-.reply-indicator__cancel {
-  float: right;
-  line-height: 24px;
-}
-
-.reply-indicator__display-name {
-  color: $inverted-text-color;
-  display: block;
-  max-width: 100%;
-  line-height: 24px;
-  overflow: hidden;
-  padding-inline-end: 25px;
-  text-decoration: none;
-}
-
-.reply-indicator__display-avatar {
-  float: left;
-  margin-inline-end: 5px;
-}
-
 .status__content--with-action {
   cursor: pointer;
 }
@@ -838,14 +944,15 @@ body > [data-popper-placement] {
 }
 
 .status__content,
+.edit-indicator__content,
 .reply-indicator__content {
   position: relative;
-  font-size: 15px;
-  line-height: 22px;
   word-wrap: break-word;
   font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 15px;
+  line-height: 22px;
   padding-top: 2px;
   color: $primary-text-color;
 
@@ -930,6 +1037,174 @@ body > [data-popper-placement] {
   }
 }
 
+.reply-indicator {
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr);
+  grid-template-rows: 46px max-content;
+  gap: 0 10px;
+
+  .detailed-status__display-name {
+    margin-bottom: 4px;
+  }
+
+  .detailed-status__display-avatar {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: span 1;
+  }
+
+  &__main {
+    grid-column-start: 2;
+    grid-row-start: 1;
+    grid-row-end: span 2;
+  }
+
+  .display-name {
+    font-size: 14px;
+    line-height: 16px;
+
+    &__account {
+      display: none;
+    }
+  }
+
+  &__line {
+    grid-column-start: 1;
+    grid-row-start: 2;
+    grid-row-end: span 1;
+    position: relative;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      inset-inline-start: 50%;
+      top: 4px;
+      transform: translateX(-50%);
+      background: lighten($ui-base-color, 8%);
+      width: 2px;
+      height: calc(100% + 32px - 8px); // Account for gap to next element
+    }
+  }
+
+  &__content {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    padding: 0;
+    max-height: 4 * 20px;
+    overflow: hidden;
+    color: $darker-text-color;
+  }
+
+  &__attachments {
+    margin-top: 4px;
+    color: $darker-text-color;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.edit-indicator {
+  border-radius: 4px 4px 0 0;
+  background: lighten($ui-base-color, 4%);
+  padding: 12px;
+  overflow-y: auto;
+  flex: 0 0 auto;
+  border-bottom: 0.5px solid lighten($ui-base-color, 8%);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: $darker-text-color;
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__cancel {
+    display: flex;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &__display-name {
+    display: flex;
+    gap: 4px;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__content {
+    color: $secondary-text-color;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    padding-top: 0 !important;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    max-height: 4 * 20px;
+    overflow: hidden;
+
+    a {
+      color: $highlight-text-color;
+    }
+  }
+
+  &__attachments {
+    color: $darker-text-color;
+    font-size: 12px;
+    line-height: 16px;
+    opacity: 0.75;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.edit-indicator__content,
+.reply-indicator__content {
+  .emojione {
+    width: 18px;
+    height: 18px;
+    margin: -3px 0 0;
+  }
+}
+
 .announcements__item__content {
   word-wrap: break-word;
   overflow-y: auto;
@@ -1458,15 +1733,6 @@ body > [data-popper-placement] {
   line-height: 18px;
 }
 
-.reply-indicator__content {
-  color: $inverted-text-color;
-  font-size: 14px;
-
-  a {
-    color: $lighter-text-color;
-  }
-}
-
 .domain {
   padding: 10px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -1677,7 +1943,6 @@ a .account__avatar {
 }
 
 .status__display-name,
-.reply-indicator__display-name,
 .detailed-status__display-name,
 a.account__display-name {
   &:hover .display-name strong {
@@ -1935,57 +2200,45 @@ a.account__display-name {
 }
 
 .navigation-bar {
-  padding: 15px;
   display: flex;
   align-items: center;
   flex-shrink: 0;
   cursor: default;
   gap: 10px;
-  color: $darker-text-color;
 
-  strong {
-    color: $secondary-text-color;
+  .column > & {
+    padding: 15px;
   }
 
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
+  .account {
+    border-bottom: 0;
+    padding: 0;
+    flex: 1 1 auto;
+    min-width: 0;
 
-  .navigation-bar__actions {
-    position: relative;
+    &__display-name {
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.15px;
+      font-weight: 500;
 
-    .compose__action-bar .icon-button {
-      pointer-events: auto;
-      transform: scale(1, 1) translate(0, 0);
-      opacity: 1;
-
-      .icon {
-        width: 24px;
-        height: 24px;
+      .display-name__account {
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.1px;
       }
     }
   }
-}
 
-.navigation-bar__profile {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  line-height: 20px;
-}
+  .icon-button {
+    padding: 8px;
+    color: $secondary-text-color;
+  }
 
-.navigation-bar__profile-account {
-  display: inline;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.navigation-bar__profile-edit {
-  display: inline;
-  color: inherit;
-  text-decoration: none;
+  .icon-button .icon {
+    width: 24px;
+    height: 24px;
+  }
 }
 
 .dropdown-animation {
@@ -2163,6 +2416,7 @@ a.account__display-name {
   &__panels {
     display: flex;
     justify-content: center;
+    gap: 16px;
     width: 100%;
     height: 100%;
     min-height: 100vh;
@@ -2195,7 +2449,6 @@ a.account__display-name {
       flex-direction: column;
 
       @media screen and (min-width: $no-gap-breakpoint) {
-        padding: 0 10px;
         max-width: 600px;
       }
     }
@@ -2445,6 +2698,7 @@ $ui-header-height: 55px;
 
   .columns-area__panels {
     min-height: calc(100vh - $ui-header-height);
+    gap: 0;
   }
 
   .columns-area__panels__pane--navigational {
@@ -2844,21 +3098,6 @@ $ui-header-height: 55px;
   }
 }
 
-.compose-form__highlightable {
-  display: flex;
-  flex-direction: column;
-  flex: 0 1 auto;
-  border-radius: 4px;
-  transition: box-shadow 300ms linear;
-  min-height: 0;
-  position: relative;
-
-  &.active {
-    transition: none;
-    box-shadow: 0 0 0 6px rgba(lighten($highlight-text-color, 8%), 0.7);
-  }
-}
-
 .compose-panel {
   width: 285px;
   margin-top: 10px;
@@ -2887,32 +3126,9 @@ $ui-header-height: 55px;
     }
   }
 
-  .navigation-bar {
-    flex: 0 1 48px;
-  }
-
   .compose-form {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 310px;
-    padding-bottom: 71px;
-    margin-bottom: -71px;
-  }
-
-  .compose-form__autosuggest-wrapper {
-    overflow-y: auto;
-    background-color: $white;
-    border-radius: 4px 4px 0 0;
-    flex: 0 1 auto;
-  }
-
-  .autosuggest-textarea__textarea {
-    overflow-y: hidden;
-  }
-
-  .compose-form__upload-thumbnail {
-    height: 80px;
+    flex: 1 1 auto;
+    min-height: 0;
   }
 }
 
@@ -2932,6 +3148,10 @@ $ui-header-height: 55px;
     height: 30px;
     width: auto;
   }
+
+  &__logo {
+    margin-bottom: 12px;
+  }
 }
 
 .navigation-panel,
@@ -2963,7 +3183,7 @@ $ui-header-height: 55px;
   position: absolute;
   top: 0;
   inset-inline-start: 0;
-  background: $ui-base-color;
+  background: darken($ui-base-color, 4%);
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -2979,7 +3199,7 @@ $ui-header-height: 55px;
 }
 
 .drawer__inner__mastodon {
-  background: $ui-base-color
+  background: darken($ui-base-color, 4%)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
     no-repeat bottom / 100% auto;
   flex: 1;
@@ -3001,24 +3221,20 @@ $ui-header-height: 55px;
   }
 }
 
-.pseudo-drawer {
-  background: lighten($ui-base-color, 13%);
-  font-size: 13px;
-  text-align: start;
-}
-
 .drawer__header {
   flex: 0 0 auto;
   font-size: 16px;
-  background: $ui-base-color;
+  background: darken($ui-base-color, 4%);
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
   border-radius: 4px;
   overflow: hidden;
 
-  a:hover {
-    background: lighten($ui-base-color, 3%);
+  a:hover,
+  a:focus,
+  a:active {
+    background: $ui-base-color;
   }
 }
 
@@ -3228,7 +3444,7 @@ $ui-header-height: 55px;
 
   &--transparent {
     background: transparent;
-    color: $ui-secondary-color;
+    color: $secondary-text-color;
 
     &:hover,
     &:focus,
@@ -4533,10 +4749,7 @@ a.status-card {
 }
 
 .emoji-picker-dropdown__menu {
-  background: $simple-background-color;
   position: relative;
-  box-shadow: var(--dropdown-shadow);
-  border-radius: 4px;
   margin-top: 5px;
   z-index: 2;
 
@@ -4559,11 +4772,12 @@ a.status-card {
 .emoji-picker-dropdown__modifiers__menu {
   position: absolute;
   z-index: 4;
-  top: -4px;
-  inset-inline-start: -8px;
-  background: $simple-background-color;
+  top: -5px;
+  inset-inline-start: -9px;
+  background: var(--dropdown-background-color);
+  border: 1px solid var(--dropdown-border-color);
   border-radius: 4px;
-  box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+  box-shadow: var(--dropdown-shadow);
   overflow: hidden;
 
   button {
@@ -4576,7 +4790,7 @@ a.status-card {
     &:hover,
     &:focus,
     &:active {
-      background: rgba($ui-secondary-color, 0.4);
+      background: var(--dropdown-border-color);
     }
   }
 
@@ -4645,15 +4859,17 @@ a.status-card {
 }
 
 .upload-progress {
-  padding: 10px;
-  color: $lighter-text-color;
+  color: $darker-text-color;
   overflow: hidden;
   display: flex;
-  gap: 10px;
+  gap: 8px;
+  align-items: center;
+  padding: 0 12px;
 
   .icon {
     width: 24px;
     height: 24px;
+    color: $ui-highlight-color;
   }
 
   span {
@@ -4672,7 +4888,7 @@ a.status-card {
   width: 100%;
   height: 6px;
   border-radius: 6px;
-  background: darken($simple-background-color, 8%);
+  background: darken($ui-base-color, 8%);
   position: relative;
   margin-top: 5px;
 }
@@ -4726,12 +4942,16 @@ a.status-card {
   filter: none;
 }
 
-.privacy-dropdown__dropdown {
-  background: $simple-background-color;
+.privacy-dropdown__dropdown,
+.language-dropdown__dropdown {
   box-shadow: var(--dropdown-shadow);
+  background: var(--dropdown-background-color);
+  border: 1px solid var(--dropdown-border-color);
+  padding: 4px;
   border-radius: 4px;
   overflow: hidden;
   z-index: 2;
+  width: 300px;
 
   &.top {
     transform-origin: 50% 100%;
@@ -4752,28 +4972,41 @@ a.status-card {
 }
 
 .privacy-dropdown__option {
-  color: $inverted-text-color;
-  padding: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  padding: 8px 12px;
   cursor: pointer;
   display: flex;
+  align-items: center;
+  gap: 12px;
+  border-radius: 4px;
+  color: $primary-text-color;
 
   &:hover,
+  &:active {
+    background: var(--dropdown-border-color);
+  }
+
+  &:focus,
   &.active {
     background: $ui-highlight-color;
     color: $primary-text-color;
     outline: 0;
 
-    .privacy-dropdown__option__content {
+    .privacy-dropdown__option__content,
+    .privacy-dropdown__option__content strong,
+    .privacy-dropdown__option__additional {
       color: $primary-text-color;
-
-      strong {
-        color: $primary-text-color;
-      }
     }
   }
 
-  &.active:hover {
-    background: lighten($ui-highlight-color, 4%);
+  &__additional {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $darker-text-color;
+    cursor: help;
   }
 }
 
@@ -4781,17 +5014,16 @@ a.status-card {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-inline-end: 10px;
 }
 
 .privacy-dropdown__option__content {
   flex: 1 1 auto;
-  color: $lighter-text-color;
+  color: $darker-text-color;
 
   strong {
+    color: $primary-text-color;
     font-weight: 500;
     display: block;
-    color: $inverted-text-color;
 
     @each $lang in $cjk-langs {
       &:lang(#{$lang}) {
@@ -4803,64 +5035,78 @@ a.status-card {
 
 .language-dropdown {
   &__dropdown {
-    background: $simple-background-color;
-    box-shadow: var(--dropdown-shadow);
-    border-radius: 4px;
-    overflow: hidden;
-    z-index: 2;
-
-    &.top {
-      transform-origin: 50% 100%;
-    }
-
-    &.bottom {
-      transform-origin: 50% 0;
-    }
+    padding: 0;
 
     .emoji-mart-search {
-      padding-inline-end: 10px;
+      padding: 10px;
+      background: var(--dropdown-background-color);
+
+      input {
+        padding: 8px 12px;
+        background: $ui-base-color;
+        border: 1px solid lighten($ui-base-color, 8%);
+        color: $darker-text-color;
+
+        @media screen and (width <= 600px) {
+          font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 0.5px;
+        }
+      }
     }
 
     .emoji-mart-search-icon {
-      inset-inline-end: 10px + 5px;
+      inset-inline-end: 15px;
+      opacity: 1;
+      color: $darker-text-color;
+
+      .icon {
+        width: 18px;
+        height: 18px;
+      }
+
+      &:disabled {
+        opacity: 0.38;
+      }
     }
 
     .emoji-mart-scroll {
       padding: 0 10px 10px;
+      background: var(--dropdown-background-color);
     }
 
     &__results {
       &__item {
         cursor: pointer;
-        color: $inverted-text-color;
+        color: $primary-text-color;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.25px;
         font-weight: 500;
-        padding: 10px;
+        padding: 8px 12px;
         border-radius: 4px;
-        display: flex;
-        gap: 6px;
-        align-items: center;
-
-        &:focus,
-        &:active,
-        &:hover {
-          background: $ui-secondary-color;
-        }
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
 
         &__common-name {
           color: $darker-text-color;
+          font-weight: 400;
         }
 
+        &:active,
+        &:hover {
+          background: var(--dropdown-border-color);
+        }
+
+        &:focus,
         &.active {
           background: $ui-highlight-color;
           color: $primary-text-color;
           outline: 0;
 
           .language-dropdown__dropdown__results__item__common-name {
-            color: $secondary-text-color;
-          }
-
-          &:hover {
-            background: lighten($ui-highlight-color, 4%);
+            color: $primary-text-color;
           }
         }
       }
@@ -4869,9 +5115,13 @@ a.status-card {
 }
 
 .search {
-  margin-bottom: 10px;
+  margin-bottom: 32px;
   position: relative;
 
+  .layout-multiple-columns & {
+    margin-bottom: 10px;
+  }
+
   &__popout {
     box-sizing: border-box;
     display: none;
@@ -4880,6 +5130,7 @@ a.status-card {
     margin-top: -2px;
     width: 100%;
     background: $ui-base-color;
+    border: 1px solid lighten($ui-base-color, 8%);
     border-radius: 0 0 4px 4px;
     box-shadow: var(--dropdown-shadow);
     z-index: 99;
@@ -4888,7 +5139,7 @@ a.status-card {
 
     h4 {
       text-transform: uppercase;
-      color: $dark-text-color;
+      color: $darker-text-color;
       font-weight: 500;
       padding: 0 10px;
       margin-bottom: 10px;
@@ -4896,6 +5147,7 @@ a.status-card {
 
     .icon-button {
       padding: 0;
+      color: $darker-text-color;
     }
 
     .icon {
@@ -4911,7 +5163,7 @@ a.status-card {
       }
 
       &__message {
-        color: $dark-text-color;
+        color: $darker-text-color;
         padding: 0 10px;
       }
 
@@ -4967,6 +5219,10 @@ a.status-card {
   }
 
   &.active {
+    .search__input {
+      border-radius: 4px 4px 0 0;
+    }
+
     .search__popout {
       display: block;
     }
@@ -4977,14 +5233,9 @@ a.status-card {
   @include search-input;
 
   display: block;
-  padding: 15px;
-  padding-inline-end: 30px;
-  line-height: 18px;
-  font-size: 16px;
-
-  &::placeholder {
-    color: lighten($darker-text-color, 4%);
-  }
+  padding: 12px 16px;
+  padding-inline-start: 16px + 15px + 8px;
+  line-height: normal;
 
   &::-moz-focus-inner {
     border: 0;
@@ -4995,10 +5246,6 @@ a.status-card {
   &:active {
     outline: 0 !important;
   }
-
-  &:focus {
-    background: lighten($ui-base-color, 4%);
-  }
 }
 
 .search__icon {
@@ -5013,21 +5260,21 @@ a.status-card {
 
   .icon {
     position: absolute;
-    top: 13px;
-    inset-inline-end: 10px;
+    top: 12px + 2px;
+    inset-inline-start: 16px - 2px;
     display: inline-block;
     opacity: 0;
     transition: all 100ms linear;
     transition-property: transform, opacity;
-    width: 24px;
-    height: 24px;
-    color: $secondary-text-color;
+    width: 20px;
+    height: 20px;
+    color: $darker-text-color;
     cursor: default;
     pointer-events: none;
 
     &.active {
       pointer-events: auto;
-      opacity: 0.3;
+      opacity: 1;
     }
   }
 
@@ -5042,16 +5289,10 @@ a.status-card {
 
   .icon-times-circle {
     transform: rotate(0deg);
-    color: $action-button-color;
     cursor: pointer;
 
     &.active {
       transform: rotate(90deg);
-      opacity: 1;
-    }
-
-    &:hover {
-      color: lighten($action-button-color, 7%);
     }
   }
 }
@@ -5658,6 +5899,11 @@ a.status-card {
     }
   }
 
+  .dialog-option {
+    align-items: center;
+    gap: 12px;
+  }
+
   .dialog-option .poll__input {
     border-color: $inverted-text-color;
     color: $ui-secondary-color;
@@ -5666,8 +5912,8 @@ a.status-card {
     justify-content: center;
 
     svg {
-      width: 8px;
-      height: auto;
+      width: 15px;
+      height: 15px;
     }
 
     &:active,
@@ -6865,90 +7111,6 @@ noscript {
   }
 }
 
-@media screen and (width <= 630px) and (height <= 400px) {
-  $duration: 400ms;
-  $delay: 100ms;
-
-  .search {
-    will-change: margin-top;
-    transition: margin-top $duration $delay;
-  }
-
-  .navigation-bar {
-    will-change: padding-bottom;
-    transition: padding-bottom $duration $delay;
-  }
-
-  .navigation-bar {
-    & > a:first-child {
-      will-change: margin-top, margin-inline-start, margin-inline-end, width;
-      transition:
-        margin-top $duration $delay,
-        margin-inline-start $duration ($duration + $delay),
-        margin-inline-end $duration ($duration + $delay);
-    }
-
-    & > .navigation-bar__profile-edit {
-      will-change: margin-top;
-      transition: margin-top $duration $delay;
-    }
-
-    .navigation-bar__actions {
-      & > .icon-button.close {
-        will-change: opacity transform;
-        transition:
-          opacity $duration * 0.5 $delay,
-          transform $duration $delay;
-      }
-
-      & > .compose__action-bar .icon-button {
-        will-change: opacity transform;
-        transition:
-          opacity $duration * 0.5 $delay + $duration * 0.5,
-          transform $duration $delay;
-      }
-    }
-  }
-
-  .is-composing {
-    .search {
-      margin-top: -50px;
-    }
-
-    .navigation-bar {
-      padding-bottom: 0;
-
-      & > a:first-child {
-        margin: -100px 10px 0 -50px;
-      }
-
-      .navigation-bar__profile {
-        padding-top: 2px;
-      }
-
-      .navigation-bar__profile-edit {
-        position: absolute;
-        margin-top: -60px;
-      }
-
-      .navigation-bar__actions {
-        .icon-button.close {
-          pointer-events: auto;
-          opacity: 1;
-          transform: scale(1, 1) translate(0, 0);
-          bottom: 5px;
-        }
-
-        .compose__action-bar .icon-button {
-          pointer-events: none;
-          opacity: 0;
-          transform: scale(0, 1) translate(100%, 0);
-        }
-      }
-    }
-  }
-}
-
 .embed-modal {
   width: auto;
   max-width: 80vw;
@@ -8910,11 +9072,14 @@ noscript {
 
 .link-footer {
   flex: 0 0 auto;
-  padding: 10px;
   padding-top: 20px;
   z-index: 1;
   font-size: 13px;
 
+  .column & {
+    padding: 15px;
+  }
+
   p {
     color: $dark-text-color;
     margin-bottom: 20px;
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index b6e995787d..8a472d75b1 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -40,13 +40,12 @@
   .compose-form {
     width: 400px;
     margin: 0 auto;
-    padding: 20px 0;
-    margin-top: 40px;
+    padding: 10px 0;
+    padding-bottom: 20px;
     box-sizing: border-box;
 
     @media screen and (width <= 400px) {
       width: 100%;
-      margin-top: 0;
       padding: 20px;
     }
   }
@@ -56,13 +55,15 @@
   width: 400px;
   margin: 0 auto;
   display: flex;
-  font-size: 13px;
-  line-height: 18px;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 20px;
   box-sizing: border-box;
   padding: 20px 0;
   margin-top: 40px;
   margin-bottom: 10px;
-  border-bottom: 1px solid $ui-base-color;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 
   @media screen and (width <= 440px) {
     width: 100%;
@@ -71,9 +72,9 @@
   }
 
   .avatar {
-    width: 40px;
-    height: 40px;
-    margin-inline-end: 10px;
+    width: 48px;
+    height: 48px;
+    flex: 0 0 auto;
 
     img {
       width: 100%;
@@ -87,13 +88,14 @@
   .name {
     flex: 1 1 auto;
     color: $secondary-text-color;
-    width: calc(100% - 90px);
 
     .username {
       display: block;
-      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
       text-overflow: ellipsis;
       overflow: hidden;
+      color: $primary-text-color;
     }
   }
 
@@ -101,7 +103,7 @@
     display: block;
     font-size: 32px;
     line-height: 40px;
-    margin-inline-start: 10px;
+    flex: 0 0 auto;
   }
 }
 
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index c7247c3a57..fec0c10ddb 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -1,7 +1,6 @@
 .emoji-mart {
   font-size: 13px;
   display: inline-block;
-  color: $inverted-text-color;
 
   &,
   * {
@@ -15,13 +14,13 @@
 }
 
 .emoji-mart-bar {
-  border: 0 solid darken($ui-secondary-color, 8%);
+  border: 0 solid var(--dropdown-border-color);
 
   &:first-child {
     border-bottom-width: 1px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
-    background: $ui-secondary-color;
+    background: var(--dropdown-border-color);
   }
 
   &:last-child {
@@ -36,7 +35,6 @@
   display: flex;
   justify-content: space-between;
   padding: 0 6px;
-  color: $lighter-text-color;
   line-height: 0;
 }
 
@@ -50,9 +48,10 @@
   cursor: pointer;
   background: transparent;
   border: 0;
+  color: $darker-text-color;
 
   &:hover {
-    color: darken($lighter-text-color, 4%);
+    color: lighten($darker-text-color, 4%);
   }
 }
 
@@ -60,7 +59,7 @@
   color: $highlight-text-color;
 
   &:hover {
-    color: darken($highlight-text-color, 4%);
+    color: lighten($highlight-text-color, 4%);
   }
 
   .emoji-mart-anchor-bar {
@@ -95,7 +94,7 @@
   height: 270px;
   max-height: 35vh;
   padding: 0 6px 6px;
-  background: $simple-background-color;
+  background: var(--dropdown-background-color);
   will-change: transform;
 
   &::-webkit-scrollbar-track:hover,
@@ -107,7 +106,7 @@
 .emoji-mart-search {
   padding: 10px;
   padding-inline-end: 45px;
-  background: $simple-background-color;
+  background: var(--dropdown-background-color);
   position: relative;
 
   input {
@@ -118,9 +117,9 @@
     font-family: inherit;
     display: block;
     width: 100%;
-    background: rgba($ui-secondary-color, 0.3);
-    color: $inverted-text-color;
-    border: 1px solid $ui-secondary-color;
+    background: $ui-base-color;
+    color: $darker-text-color;
+    border: 1px solid lighten($ui-base-color, 8%);
     border-radius: 4px;
 
     &::-moz-focus-inner {
@@ -155,11 +154,10 @@
   &:disabled {
     cursor: default;
     pointer-events: none;
-    opacity: 0.3;
   }
 
   svg {
-    fill: $action-button-color;
+    fill: $darker-text-color;
   }
 }
 
@@ -180,7 +178,7 @@
     inset-inline-start: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($ui-secondary-color, 0.7);
+    background-color: var(--dropdown-border-color);
     border-radius: 100%;
   }
 }
@@ -197,7 +195,7 @@
     width: 100%;
     font-weight: 500;
     padding: 5px 6px;
-    background: $simple-background-color;
+    background: var(--dropdown-background-color);
   }
 }
 
@@ -241,7 +239,7 @@
 
 .emoji-mart-no-results {
   font-size: 14px;
-  color: $light-text-color;
+  color: $dark-text-color;
   text-align: center;
   padding: 5px 6px;
   padding-top: 70px;
diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
index 0b7220b21d..60e7d62245 100644
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -1,5 +1,5 @@
 .modal-layout {
-  background: $ui-base-color
+  background: darken($ui-base-color, 4%)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
     repeat-x bottom fixed;
   display: flex;
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index 8a26e611ca..939fca3364 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -52,6 +52,8 @@
   &__option {
     position: relative;
     display: flex;
+    align-items: flex-start;
+    gap: 8px;
     padding: 6px 0;
     line-height: 18px;
     cursor: default;
@@ -78,16 +80,22 @@
       box-sizing: border-box;
       width: 100%;
       font-size: 14px;
-      color: $inverted-text-color;
+      color: $secondary-text-color;
       outline: 0;
       font-family: inherit;
-      background: $simple-background-color;
-      border: 1px solid darken($simple-background-color, 14%);
+      background: $ui-base-color;
+      border: 1px solid $darker-text-color;
       border-radius: 4px;
-      padding: 6px 10px;
+      padding: 8px 12px;
 
       &:focus {
-        border-color: $highlight-text-color;
+        border-color: $ui-highlight-color;
+      }
+
+      @media screen and (width <= 600px) {
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
       }
     }
 
@@ -96,26 +104,20 @@
     }
 
     &.editable {
-      display: flex;
       align-items: center;
       overflow: visible;
     }
   }
 
   &__input {
-    display: inline-block;
+    display: block;
     position: relative;
     border: 1px solid $ui-primary-color;
     box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    margin-inline-end: 10px;
-    top: -1px;
+    width: 17px;
+    height: 17px;
     border-radius: 50%;
-    vertical-align: middle;
-    margin-top: auto;
-    margin-bottom: auto;
-    flex: 0 0 18px;
+    flex: 0 0 auto;
 
     &.checkbox {
       border-radius: 4px;
@@ -159,6 +161,15 @@
     }
   }
 
+  &__option.editable &__input {
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: $ui-primary-color;
+      border-width: 1px;
+    }
+  }
+
   &__number {
     display: inline-block;
     width: 45px;
@@ -209,90 +220,6 @@
   }
 }
 
-.compose-form__poll-wrapper {
-  border-top: 1px solid darken($simple-background-color, 8%);
-
-  ul {
-    padding: 10px;
-  }
-
-  .poll__input {
-    &:active,
-    &:focus,
-    &:hover {
-      border-color: $ui-button-focus-background-color;
-    }
-  }
-
-  .poll__footer {
-    border-top: 1px solid darken($simple-background-color, 8%);
-    padding: 10px;
-    display: flex;
-    align-items: center;
-
-    button,
-    select {
-      flex: 1 1 50%;
-
-      &:focus {
-        border-color: $highlight-text-color;
-      }
-    }
-  }
-
-  .button.button-secondary {
-    font-size: 14px;
-    font-weight: 400;
-    padding: 6px 10px;
-    height: auto;
-    line-height: inherit;
-    color: $action-button-color;
-    border-color: $action-button-color;
-    margin-inline-end: 5px;
-
-    &:hover,
-    &:focus,
-    &.active {
-      border-color: $action-button-color;
-      background-color: $action-button-color;
-      color: $ui-button-color;
-    }
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-
-    .poll__option {
-      flex: 0 0 auto;
-      width: calc(100% - (23px + 6px));
-      margin-inline-end: 6px;
-    }
-  }
-
-  select {
-    appearance: none;
-    box-sizing: border-box;
-    font-size: 14px;
-    color: $inverted-text-color;
-    display: inline-block;
-    width: auto;
-    outline: 0;
-    font-family: inherit;
-    background: $simple-background-color
-      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
-      no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($simple-background-color, 14%);
-    border-radius: 4px;
-    padding: 6px 10px;
-    padding-inline-end: 30px;
-  }
-
-  .icon-button.disabled {
-    color: darken($simple-background-color, 14%);
-  }
-}
-
 .muted .poll {
   color: $dark-text-color;
 
diff --git a/lib/mastodon/version.rb b/lib/mastodon/version.rb
index ee7ef9b452..60ea3ec91d 100644
--- a/lib/mastodon/version.rb
+++ b/lib/mastodon/version.rb
@@ -25,7 +25,7 @@ module Mastodon
     end
 
     def catstodon_revision
-      '1.0.4'
+      '1.0.5'
     end
 
     def build_metadata
diff --git a/spec/system/new_statuses_spec.rb b/spec/system/new_statuses_spec.rb
index a3b816b4d5..5a3f1b406b 100644
--- a/spec/system/new_statuses_spec.rb
+++ b/spec/system/new_statuses_spec.rb
@@ -24,7 +24,7 @@ describe 'NewStatuses', :sidekiq_inline do
 
     within('.compose-form') do
       fill_in "What's on your mind?", with: status_text
-      click_on 'Publish!'
+      click_on 'Post'
     end
 
     expect(subject).to have_css('.status__content__text', text: status_text)
@@ -37,7 +37,7 @@ describe 'NewStatuses', :sidekiq_inline do
 
     within('.compose-form') do
       fill_in "What's on your mind?", with: status_text
-      click_on 'Publish!'
+      click_on 'Post'
     end
 
     expect(subject).to have_css('.status__content__text', text: status_text)
diff --git a/spec/system/share_entrypoint_spec.rb b/spec/system/share_entrypoint_spec.rb
index fd02d1120c..126a816bcc 100644
--- a/spec/system/share_entrypoint_spec.rb
+++ b/spec/system/share_entrypoint_spec.rb
@@ -19,13 +19,13 @@ describe 'ShareEntrypoint' do
 
   it 'can be used to post a new status' do
     expect(subject).to have_css('div#mastodon-compose')
-    expect(subject).to have_css('.compose-form__publish-button-wrapper > button')
+    expect(subject).to have_css('.compose-form__submit')
 
     status_text = 'This is a new status!'
 
     within('.compose-form') do
       fill_in "What's on your mind?", with: status_text
-      click_on 'Publish!'
+      click_on 'Post'
     end
 
     expect(subject).to have_css('.notification-bar-message', text: 'Post published.')