diff --git a/app/javascript/core/embed.js b/app/javascript/core/embed.js
deleted file mode 100644
index d1e8f6b10896c4..00000000000000
--- a/app/javascript/core/embed.js
+++ /dev/null
@@ -1,25 +0,0 @@
-//  This file will be loaded on embed pages, regardless of theme.
-
-import 'packs/public-path';
-
-window.addEventListener('message', e => {
-  const data = e.data || {};
-
-  if (!window.parent || data.type !== 'setHeight') {
-    return;
-  }
-
-  function setEmbedHeight () {
-    window.parent.postMessage({
-      type: 'setHeight',
-      id: data.id,
-      height: document.getElementsByTagName('html')[0].scrollHeight,
-    }, '*');
-  }
-
-  if (['interactive', 'complete'].includes(document.readyState)) {
-    setEmbedHeight();
-  } else {
-    document.addEventListener('DOMContentLoaded', setEmbedHeight);
-  }
-});
diff --git a/app/javascript/core/embed.ts b/app/javascript/core/embed.ts
new file mode 100644
index 00000000000000..6766cd7788aec0
--- /dev/null
+++ b/app/javascript/core/embed.ts
@@ -0,0 +1,41 @@
+//  This file will be loaded on embed pages, regardless of theme.
+
+import 'packs/public-path';
+import ready from '../mastodon/ready';
+
+interface SetHeightMessage {
+  type: 'setHeight';
+  id: string;
+  height: number;
+}
+
+function isSetHeightMessage(data: unknown): data is SetHeightMessage {
+  if (
+    data &&
+    typeof data === 'object' &&
+    'type' in data &&
+    data.type === 'setHeight'
+  )
+    return true;
+  else return false;
+}
+
+window.addEventListener('message', (e) => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- typings are not correct, it can be null in very rare cases
+  if (!e.data || !isSetHeightMessage(e.data) || !window.parent) return;
+
+  const data = e.data;
+
+  ready(() => {
+    window.parent.postMessage(
+      {
+        type: 'setHeight',
+        id: data.id,
+        height: document.getElementsByTagName('html')[0].scrollHeight,
+      },
+      '*',
+    );
+  }).catch((e) => {
+    console.error('Error in setHeightMessage postMessage', e);
+  });
+});
diff --git a/app/javascript/core/settings.js b/app/javascript/core/settings.js
deleted file mode 100644
index 23367d2d312f1d..00000000000000
--- a/app/javascript/core/settings.js
+++ /dev/null
@@ -1,44 +0,0 @@
-//  This file will be loaded on settings pages, regardless of theme.
-
-import 'packs/public-path';
-import Rails from '@rails/ujs';
-
-Rails.delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => {
-  const avatar = document.getElementById(target.id + '-preview');
-  const [file] = target.files || [];
-  const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
-
-  avatar.src = url;
-});
-
-Rails.delegate(document, '.input-copy input', 'click', ({ target }) => {
-  target.focus();
-  target.select();
-  target.setSelectionRange(0, target.value.length);
-});
-
-Rails.delegate(document, '.input-copy button', 'click', ({ target }) => {
-  const input = target.parentNode.querySelector('.input-copy__wrapper input');
-
-  const oldReadOnly = input.readonly;
-
-  input.readonly = false;
-  input.focus();
-  input.select();
-  input.setSelectionRange(0, input.value.length);
-
-  try {
-    if (document.execCommand('copy')) {
-      input.blur();
-      target.parentNode.classList.add('copied');
-
-      setTimeout(() => {
-        target.parentNode.classList.remove('copied');
-      }, 700);
-    }
-  } catch (err) {
-    console.error(err);
-  }
-
-  input.readonly = oldReadOnly;
-});
diff --git a/app/javascript/core/settings.ts b/app/javascript/core/settings.ts
new file mode 100644
index 00000000000000..ea6a99ec80f671
--- /dev/null
+++ b/app/javascript/core/settings.ts
@@ -0,0 +1,70 @@
+//  This file will be loaded on settings pages, regardless of theme.
+
+import 'packs/public-path';
+import Rails from '@rails/ujs';
+
+Rails.delegate(
+  document,
+  '#edit_profile input[type=file]',
+  'change',
+  ({ target }) => {
+    if (!(target instanceof HTMLInputElement)) return;
+
+    const avatar = document.querySelector<HTMLImageElement>(
+      `img#${target.id}-preview`,
+    );
+
+    if (!avatar) return;
+
+    let file: File | undefined;
+    if (target.files) file = target.files[0];
+
+    const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
+
+    if (url) avatar.src = url;
+  },
+);
+
+Rails.delegate(document, '.input-copy input', 'click', ({ target }) => {
+  if (!(target instanceof HTMLInputElement)) return;
+
+  target.focus();
+  target.select();
+  target.setSelectionRange(0, target.value.length);
+});
+
+Rails.delegate(document, '.input-copy button', 'click', ({ target }) => {
+  if (!(target instanceof HTMLButtonElement)) return;
+
+  const input = target.parentNode?.querySelector<HTMLInputElement>(
+    '.input-copy__wrapper input',
+  );
+
+  if (!input) return;
+
+  const oldReadOnly = input.readOnly;
+
+  input.readOnly = false;
+  input.focus();
+  input.select();
+  input.setSelectionRange(0, input.value.length);
+
+  try {
+    if (document.execCommand('copy')) {
+      input.blur();
+
+      const parent = target.parentElement;
+
+      if (!parent) return;
+      parent.classList.add('copied');
+
+      setTimeout(() => {
+        parent.classList.remove('copied');
+      }, 700);
+    }
+  } catch (err) {
+    console.error(err);
+  }
+
+  input.readOnly = oldReadOnly;
+});
diff --git a/app/javascript/core/theme.yml b/app/javascript/core/theme.yml
index ab8de6afade5c1..12c23e20359ecf 100644
--- a/app/javascript/core/theme.yml
+++ b/app/javascript/core/theme.yml
@@ -7,7 +7,7 @@ pack:
   common:
     filename: common.js
     stylesheet: true
-  embed: embed.js
+  embed: embed.ts
   error:
   home:
   inert:
@@ -18,7 +18,7 @@ pack:
     stylesheet: true
   modal:
   public:
-  settings: settings.js
+  settings: settings.ts
   sign_up:
   share:
   remote_interaction_helper: remote_interaction_helper.ts
diff --git a/app/javascript/flavours/glitch/actions/blocks.js b/app/javascript/flavours/glitch/actions/blocks.js
index e293657ad36ef9..54296d0905c9a9 100644
--- a/app/javascript/flavours/glitch/actions/blocks.js
+++ b/app/javascript/flavours/glitch/actions/blocks.js
@@ -12,8 +12,6 @@ export const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST';
 export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS';
 export const BLOCKS_EXPAND_FAIL    = 'BLOCKS_EXPAND_FAIL';
 
-export const BLOCKS_INIT_MODAL = 'BLOCKS_INIT_MODAL';
-
 export function fetchBlocks() {
   return (dispatch, getState) => {
     dispatch(fetchBlocksRequest());
@@ -90,11 +88,12 @@ export function expandBlocksFail(error) {
 
 export function initBlockModal(account) {
   return dispatch => {
-    dispatch({
-      type: BLOCKS_INIT_MODAL,
-      account,
-    });
-
-    dispatch(openModal({ modalType: 'BLOCK' }));
+    dispatch(openModal({
+      modalType: 'BLOCK',
+      modalProps: {
+        accountId: account.get('id'),
+        acct: account.get('acct'),
+      },
+    }));
   };
 }
diff --git a/app/javascript/flavours/glitch/actions/domain_blocks.js b/app/javascript/flavours/glitch/actions/domain_blocks.js
index 718002613f4053..55c0a6ce9d0ab7 100644
--- a/app/javascript/flavours/glitch/actions/domain_blocks.js
+++ b/app/javascript/flavours/glitch/actions/domain_blocks.js
@@ -1,6 +1,8 @@
 import api, { getLinks } from '../api';
 
 import { blockDomainSuccess, unblockDomainSuccess } from "./domain_blocks_typed";
+import { openModal } from './modal';
+
 
 export * from "./domain_blocks_typed";
 
@@ -150,3 +152,12 @@ export function expandDomainBlocksFail(error) {
     error,
   };
 }
+
+export const initDomainBlockModal = account => dispatch => dispatch(openModal({
+  modalType: 'DOMAIN_BLOCK',
+  modalProps: {
+    domain: account.get('acct').split('@')[1],
+    acct: account.get('acct'),
+    accountId: account.get('id'),
+  },
+}));
diff --git a/app/javascript/flavours/glitch/actions/mutes.js b/app/javascript/flavours/glitch/actions/mutes.js
index fb041078b84488..99c113f4147302 100644
--- a/app/javascript/flavours/glitch/actions/mutes.js
+++ b/app/javascript/flavours/glitch/actions/mutes.js
@@ -12,10 +12,6 @@ export const MUTES_EXPAND_REQUEST = 'MUTES_EXPAND_REQUEST';
 export const MUTES_EXPAND_SUCCESS = 'MUTES_EXPAND_SUCCESS';
 export const MUTES_EXPAND_FAIL    = 'MUTES_EXPAND_FAIL';
 
-export const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL';
-export const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS';
-export const MUTES_CHANGE_DURATION = 'MUTES_CHANGE_DURATION';
-
 export function fetchMutes() {
   return (dispatch, getState) => {
     dispatch(fetchMutesRequest());
@@ -92,26 +88,12 @@ export function expandMutesFail(error) {
 
 export function initMuteModal(account) {
   return dispatch => {
-    dispatch({
-      type: MUTES_INIT_MODAL,
-      account,
-    });
-
-    dispatch(openModal({ modalType: 'MUTE' }));
-  };
-}
-
-export function toggleHideNotifications() {
-  return dispatch => {
-    dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS });
-  };
-}
-
-export function changeMuteDuration(duration) {
-  return dispatch => {
-    dispatch({
-      type: MUTES_CHANGE_DURATION,
-      duration,
-    });
+    dispatch(openModal({
+      modalType: 'MUTE',
+      modalProps: {
+        accountId: account.get('id'),
+        acct: account.get('acct'),
+      },
+    }));
   };
 }
diff --git a/app/javascript/flavours/glitch/components/check_box.tsx b/app/javascript/flavours/glitch/components/check_box.tsx
new file mode 100644
index 00000000000000..7da8ef0ac5602d
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/check_box.tsx
@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+
+import DoneIcon from '@/material-icons/400-24px/done.svg?react';
+
+import { Icon } from './icon';
+
+interface Props {
+  value: string;
+  checked: boolean;
+  name: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: React.ReactNode;
+}
+
+export const CheckBox: React.FC<Props> = ({
+  name,
+  value,
+  checked,
+  onChange,
+  label,
+}) => {
+  return (
+    <label className='check-box'>
+      <input
+        name={name}
+        type='checkbox'
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+
+      <span className={classNames('check-box__input', { checked })}>
+        {checked && <Icon id='check' icon={DoneIcon} />}
+      </span>
+
+      <span>{label}</span>
+    </label>
+  );
+};
diff --git a/app/javascript/flavours/glitch/components/relative_timestamp.tsx b/app/javascript/flavours/glitch/components/relative_timestamp.tsx
index 12530c2b17bceb..b9e1e4f8fd1ff7 100644
--- a/app/javascript/flavours/glitch/components/relative_timestamp.tsx
+++ b/app/javascript/flavours/glitch/components/relative_timestamp.tsx
@@ -102,7 +102,7 @@ const getUnitDelay = (units: string) => {
 };
 
 export const timeAgoString = (
-  intl: IntlShape,
+  intl: Pick<IntlShape, 'formatDate' | 'formatMessage'>,
   date: Date,
   now: number,
   year: number,
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
index eb2ddbdd80ea5b..37258d9d83ea29 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
@@ -72,11 +72,7 @@ class Header extends ImmutablePureComponent {
   };
 
   handleBlockDomain = () => {
-    const domain = this.props.account.get('acct').split('@')[1];
-
-    if (!domain) return;
-
-    this.props.onBlockDomain(domain);
+    this.props.onBlockDomain(this.props.account);
   };
 
   handleUnblockDomain = () => {
diff --git a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx
index c3a3de71ed9c3b..d42bb2c251eddc 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx
@@ -15,7 +15,7 @@ import {
   mentionCompose,
   directCompose,
 } from '../../../actions/compose';
-import { blockDomain, unblockDomain } from '../../../actions/domain_blocks';
+import { initDomainBlockModal, unblockDomain } from '../../../actions/domain_blocks';
 import { openModal } from '../../../actions/modal';
 import { initMuteModal } from '../../../actions/mutes';
 import { initReport } from '../../../actions/reports';
@@ -138,15 +138,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
-  onBlockDomain (domain) {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
-        confirm: intl.formatMessage(messages.blockDomainConfirm),
-        onConfirm: () => dispatch(blockDomain(domain)),
-      },
-    }));
+  onBlockDomain (account) {
+    dispatch(initDomainBlockModal(account));
   },
 
   onUnblockDomain (domain) {
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.jsx b/app/javascript/flavours/glitch/features/getting_started/index.jsx
index d27d134b306eeb..585abb8b6c56e0 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.jsx
+++ b/app/javascript/flavours/glitch/features/getting_started/index.jsx
@@ -11,6 +11,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
 import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
+import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
@@ -22,7 +23,6 @@ import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react
 import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
-import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
 import { fetchLists } from 'flavours/glitch/actions/lists';
 import { openModal } from 'flavours/glitch/actions/modal';
@@ -158,7 +158,7 @@ class GettingStarted extends ImmutablePureComponent {
     }
 
     if (showTrends) {
-      navItems.push(<ColumnLink key='explore' icon='explore' iconComponent={TagIcon} text={intl.formatMessage(messages.explore)} to='/explore' />);
+      navItems.push(<ColumnLink key='explore' icon='explore' iconComponent={ExploreIcon} text={intl.formatMessage(messages.explore)} to='/explore' />);
     }
 
     if (signedIn) {
diff --git a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
index cfac692324aa23..fa772b067d503d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
@@ -1,100 +1,116 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, FormattedMessage } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { blockAccount } from '../../../actions/accounts';
-import { closeModal } from '../../../actions/modal';
-import { initReport } from '../../../actions/reports';
-import { Button } from '../../../components/button';
-import { makeGetAccount } from '../../../selectors';
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = state => ({
-    account: getAccount(state, state.getIn(['blocks', 'new', 'account_id'])),
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onConfirm(account) {
-      dispatch(blockAccount(account.get('id')));
-    },
-
-    onBlockAndReport(account) {
-      dispatch(blockAccount(account.get('id')));
-      dispatch(initReport(account));
-    },
-
-    onClose() {
-      dispatch(closeModal({
-        modalType: undefined,
-        ignoreFocus: false,
-      }));
-    },
-  };
-};
+import { useCallback, useState } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { useDispatch } from 'react-redux';
+
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import BlockIcon from '@/material-icons/400-24px/block.svg?react';
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import { blockAccount } from 'flavours/glitch/actions/accounts';
+import { closeModal } from 'flavours/glitch/actions/modal';
+import { Button } from 'flavours/glitch/components/button';
+import { Icon } from 'flavours/glitch/components/icon';
+
+export const BlockModal = ({ accountId, acct }) => {
+  const dispatch = useDispatch();
+  const [expanded, setExpanded] = useState(false);
+
+  const domain = acct.split('@')[1];
+
+  const handleClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockAccount(accountId));
+  }, [dispatch, accountId]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+  }, [dispatch]);
+
+  const handleToggleLearnMore = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon icon={BlockIcon} />
+          </div>
+
+          <div>
+            <h1><FormattedMessage id='block_modal.title' defaultMessage='Block user?' /></h1>
+            <div>@{acct}</div>
+          </div>
+        </div>
 
-class BlockModal extends PureComponent {
-
-  static propTypes = {
-    account: PropTypes.object.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onBlockAndReport: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClose();
-    this.props.onConfirm(this.props.account);
-  };
-
-  handleSecondary = () => {
-    this.props.onClose();
-    this.props.onBlockAndReport(this.props.account);
-  };
-
-  handleCancel = () => {
-    this.props.onClose();
-  };
-
-  render () {
-    const { account } = this.props;
-
-    return (
-      <div className='modal-root__modal block-modal'>
-        <div className='block-modal__container'>
-          <p>
-            <FormattedMessage
-              id='confirmations.block.message'
-              defaultMessage='Are you sure you want to block {name}?'
-              values={{ name: <strong>@{account.get('acct')}</strong> }}
-            />
-          </p>
+        <div className='safety-action-modal__bullet-points'>
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_will_know' defaultMessage="They can see that they're blocked." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_cant_see_posts' defaultMessage="They can't see your posts and you won't see theirs." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
+            <div><FormattedMessage id='block_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mentions them." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_cant_mention' defaultMessage="They can't mention or follow you." /></div>
+          </div>
         </div>
+      </div>
 
-        <div className='block-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='block-modal__cancel-button'>
+      <div className={classNames('safety-action-modal__bottom', { active: expanded })}>
+        {domain && (
+          <div className='safety-action-modal__bottom__collapsible'>
+            <div className='safety-action-modal__caveats'>
+              <FormattedMessage
+                id='block_modal.remote_users_caveat'
+                defaultMessage='We will ask the server {domain} to respect your decision. However, compliance is not guaranteed since some servers may handle blocks differently. Public posts may still be visible to non-logged-in users.'
+                values={{ domain: <strong>{domain}</strong> }}
+              />
+            </div>
+          </div>
+        )}
+
+        <div className='safety-action-modal__actions'>
+          {domain && (
+            <button onClick={handleToggleLearnMore} className='link-button'>
+              {expanded ? <FormattedMessage id='block_modal.show_less' defaultMessage='Show less' /> : <FormattedMessage id='block_modal.show_more' defaultMessage='Show more' />}
+            </button>
+          )}
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          <Button onClick={this.handleSecondary} className='confirmation-modal__secondary-button'>
-            <FormattedMessage id='confirmations.block.block_and_report' defaultMessage='Block & Report' />
-          </Button>
-          <Button onClick={this.handleClick} autoFocus>
+          </button>
+
+          <Button onClick={handleClick}>
             <FormattedMessage id='confirmations.block.confirm' defaultMessage='Block' />
           </Button>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-}
+BlockModal.propTypes = {
+  accountId: PropTypes.string.isRequired,
+  acct: PropTypes.string.isRequired,
+};
 
-export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(BlockModal));
+export default BlockModal;
diff --git a/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx
new file mode 100644
index 00000000000000..b1ab81dab50c64
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx
@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { useDispatch } from 'react-redux';
+
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import DomainDisabledIcon from '@/material-icons/400-24px/domain_disabled.svg?react';
+import HistoryIcon from '@/material-icons/400-24px/history.svg?react';
+import PersonRemoveIcon from '@/material-icons/400-24px/person_remove.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import { blockAccount } from 'flavours/glitch/actions/accounts';
+import { blockDomain } from 'flavours/glitch/actions/domain_blocks';
+import { closeModal } from 'flavours/glitch/actions/modal';
+import { Button } from 'flavours/glitch/components/button';
+import { Icon } from 'flavours/glitch/components/icon';
+
+export const DomainBlockModal = ({ domain, accountId, acct }) => {
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockDomain(domain));
+  }, [dispatch, domain]);
+
+  const handleSecondaryClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockAccount(accountId));
+  }, [dispatch, accountId]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+  }, [dispatch]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon icon={DomainDisabledIcon} />
+          </div>
+
+          <div>
+            <h1><FormattedMessage id='domain_block_modal.title' defaultMessage='Block domain?' /></h1>
+            <div>{domain}</div>
+          </div>
+        </div>
+
+        <div className='safety-action-modal__bullet-points'>
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.they_wont_know' defaultMessage="They won't know they've been blocked." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.you_wont_see_posts' defaultMessage="You won't see posts or notifications from users on this server." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={PersonRemoveIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.you_will_lose_followers' defaultMessage='All your followers from this server will be removed.' /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.they_cant_follow' defaultMessage='Nobody from this server can follow you.' /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={HistoryIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.they_can_interact_with_old_posts' defaultMessage='People from this server can interact with your old posts.' /></div>
+          </div>
+        </div>
+      </div>
+
+      <div className='safety-action-modal__bottom'>
+        <div className='safety-action-modal__actions'>
+          <Button onClick={handleSecondaryClick} secondary>
+            <FormattedMessage id='domain_block_modal.block_account_instead' defaultMessage='Block @{name} instead' values={{ name: acct.split('@')[0] }} />
+          </Button>
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
+            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+          </button>
+
+          <Button onClick={handleClick}>
+            <FormattedMessage id='domain_block_modal.block' defaultMessage='Block server' />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+DomainBlockModal.propTypes = {
+  domain: PropTypes.string.isRequired,
+  accountId: PropTypes.string.isRequired,
+  acct: PropTypes.string.isRequired,
+};
+
+export default DomainBlockModal;
diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
index 4ecf07b0303e82..3f7e291e7b72c4 100644
--- a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
@@ -7,6 +7,7 @@ import Base from 'flavours/glitch/components/modal_root';
 import {
   MuteModal,
   BlockModal,
+  DomainBlockModal,
   ReportModal,
   SettingsModal,
   EmbedModal,
@@ -48,6 +49,7 @@ export const MODAL_COMPONENTS = {
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'MUTE': MuteModal,
   'BLOCK': BlockModal,
+  'DOMAIN_BLOCK': DomainBlockModal,
   'REPORT': ReportModal,
   'SETTINGS': SettingsModal,
   'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }),
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 fa81ea81a31d53..a161e2486156c3 100644
--- a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
@@ -1,138 +1,154 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useCallback, useState } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { connect } from 'react-redux';
+import classNames from 'classnames';
 
-import Toggle from 'react-toggle';
+import { useDispatch } from 'react-redux';
 
-import { muteAccount } from '../../../actions/accounts';
-import { closeModal } from '../../../actions/modal';
-import { toggleHideNotifications, changeMuteDuration } from '../../../actions/mutes';
-import { Button } from '../../../components/button';
+
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
+import { muteAccount } from 'flavours/glitch/actions/accounts';
+import { closeModal } from 'flavours/glitch/actions/modal';
+import { Button } from 'flavours/glitch/components/button';
+import { CheckBox } from 'flavours/glitch/components/check_box';
+import { Icon } from 'flavours/glitch/components/icon';
+import { RadioButton } from 'flavours/glitch/components/radio_button';
 
 const messages = defineMessages({
   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}}' },
-  indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Indefinite' },
+  indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Until I unmute them' },
+  hideFromNotifications: { id: 'mute_modal.hide_from_notifications', defaultMessage: 'Hide from notifications' },
 });
 
-const mapStateToProps = state => {
-  return {
-    account: state.getIn(['mutes', 'new', 'account']),
-    notifications: state.getIn(['mutes', 'new', 'notifications']),
-    muteDuration: state.getIn(['mutes', 'new', 'duration']),
-  };
+const RadioButtonLabel = ({ name, value, currentValue, onChange, label }) => (
+  <RadioButton
+    name={name}
+    value={value}
+    checked={value === currentValue}
+    onChange={onChange}
+    label={label}
+  />
+);
+
+RadioButtonLabel.propTypes = {
+  name: PropTypes.string,
+  value: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  currentValue: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  label: PropTypes.node,
 };
 
-const mapDispatchToProps = dispatch => {
-  return {
-    onConfirm(account, notifications, muteDuration) {
-      dispatch(muteAccount(account.get('id'), notifications, muteDuration));
-    },
-
-    onClose() {
-      dispatch(closeModal({
-        modalType: undefined,
-        ignoreFocus: false,
-      }));
-    },
-
-    onToggleNotifications() {
-      dispatch(toggleHideNotifications());
-    },
-
-    onChangeMuteDuration(e) {
-      dispatch(changeMuteDuration(e.target.value));
-    },
-  };
-};
+export const MuteModal = ({ accountId, acct }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [notifications, setNotifications] = useState(true);
+  const [muteDuration, setMuteDuration] = useState('0');
+  const [expanded, setExpanded] = useState(false);
+
+  const handleClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(muteAccount(accountId, notifications, muteDuration));
+  }, [dispatch, accountId, notifications, muteDuration]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+  }, [dispatch]);
+
+  const handleToggleNotifications = useCallback(({ target }) => {
+    setNotifications(target.checked);
+  }, [setNotifications]);
+
+  const handleChangeMuteDuration = useCallback(({ target }) => {
+    setMuteDuration(target.value);
+  }, [setMuteDuration]);
+
+  const handleToggleSettings = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon icon={VolumeOffIcon} />
+          </div>
+
+          <div>
+            <h1><FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' /></h1>
+            <div>@{acct}</div>
+          </div>
+        </div>
 
-class MuteModal extends PureComponent {
-
-  static propTypes = {
-    account: PropTypes.object.isRequired,
-    notifications: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    onToggleNotifications: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    muteDuration: PropTypes.number.isRequired,
-    onChangeMuteDuration: PropTypes.func.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClose();
-    this.props.onConfirm(this.props.account, this.props.notifications, this.props.muteDuration);
-  };
-
-  handleCancel = () => {
-    this.props.onClose();
-  };
-
-  toggleNotifications = () => {
-    this.props.onToggleNotifications();
-  };
-
-  changeMuteDuration = (e) => {
-    this.props.onChangeMuteDuration(e);
-  };
-
-  render () {
-    const { account, notifications, muteDuration, intl } = this.props;
-
-    return (
-      <div className='modal-root__modal mute-modal'>
-        <div className='mute-modal__container'>
-          <p>
-            <FormattedMessage
-              id='confirmations.mute.message'
-              defaultMessage='Are you sure you want to mute {name}?'
-              values={{ name: <strong>@{account.get('acct')}</strong> }}
-            />
-          </p>
-          <p className='mute-modal__explanation'>
-            <FormattedMessage
-              id='confirmations.mute.explanation'
-              defaultMessage='This will hide posts from them and posts mentioning them, but it will still allow them to see your posts and follow you.'
-            />
-          </p>
-          <div className='setting-toggle'>
-            <Toggle id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} />
-            <label className='setting-toggle__label' htmlFor='mute-modal__hide-notifications-checkbox'>
-              <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
-            </label>
+        <div className='safety-action-modal__bullet-points'>
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
+            <div><FormattedMessage id='mute_modal.they_wont_know' defaultMessage="They won't know they've been muted." /></div>
           </div>
+
           <div>
-            <span><FormattedMessage id='mute_modal.duration' defaultMessage='Duration' />: </span>
-
-            <select value={muteDuration} onChange={this.changeMuteDuration}>
-              <option value={0}>{intl.formatMessage(messages.indefinite)}</option>
-              <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={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 className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
+            <div><FormattedMessage id='mute_modal.you_wont_see_posts' defaultMessage="They can still see your posts, but you won't see theirs." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
+            <div><FormattedMessage id='mute_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mention them." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
+            <div><FormattedMessage id='mute_modal.they_can_mention_and_follow' defaultMessage="They can mention and follow you, but you won't see them." /></div>
+          </div>
+        </div>
+      </div>
+
+      <div className={classNames('safety-action-modal__bottom', { active: expanded })}>
+        <div className='safety-action-modal__bottom__collapsible'>
+          <div className='safety-action-modal__field-group'>
+            <RadioButtonLabel name='duration' value='0' label={intl.formatMessage(messages.indefinite)} currentValue={muteDuration} onChange={handleChangeMuteDuration} />
+            <RadioButtonLabel name='duration' value='86400' label={intl.formatMessage(messages.hours, { number: 24 })} currentValue={muteDuration} onChange={handleChangeMuteDuration} />
+            <RadioButtonLabel name='duration' value='604800' label={intl.formatMessage(messages.days, { number: 7 })} currentValue={muteDuration} onChange={handleChangeMuteDuration} />
+            <RadioButtonLabel name='duration' value='x' label={intl.formatMessage(messages.days, { number: 30 })} currentValue={muteDuration} onChange={handleChangeMuteDuration} />
+          </div>
+
+          <div className='safety-action-modal__field-group'>
+            <CheckBox label={intl.formatMessage(messages.hideFromNotifications)} checked={notifications} onChange={handleToggleNotifications} />
           </div>
         </div>
 
-        <div className='mute-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
+        <div className='safety-action-modal__actions'>
+          <button onClick={handleToggleSettings} className='link-button'>
+            {expanded ? <FormattedMessage id='mute_modal.hide_options' defaultMessage='Hide options' /> : <FormattedMessage id='mute_modal.show_options' defaultMessage='Show options' />}
+          </button>
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          <Button onClick={this.handleClick} autoFocus>
+          </button>
+
+          <Button onClick={handleClick}>
             <FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />
           </Button>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-}
+MuteModal.propTypes = {
+  accountId: PropTypes.string.isRequired,
+  acct: PropTypes.string.isRequired,
+};
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(MuteModal));
+export default MuteModal;
diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js
index 14d46d70434d99..6a140e3fd7e036 100644
--- a/app/javascript/flavours/glitch/features/ui/util/async-components.js
+++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js
@@ -126,6 +126,10 @@ export function BlockModal () {
   return import(/* webpackChunkName: "flavours/glitch/async/block_modal" */'../components/block_modal');
 }
 
+export function DomainBlockModal () {
+  return import(/* webpackChunkName: "flavours/glitch/async/modals/domain_block_modal" */'../components/domain_block_modal');
+}
+
 export function ReportModal () {
   return import(/* webpackChunkName: "flavours/glitch/async/report_modal" */'../components/report_modal');
 }
diff --git a/app/javascript/flavours/glitch/packs/public.jsx b/app/javascript/flavours/glitch/packs/public.jsx
deleted file mode 100644
index 53854e70fb11d4..00000000000000
--- a/app/javascript/flavours/glitch/packs/public.jsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import { createRoot }  from 'react-dom/client';
-
-import 'packs/public-path';
-
-import { IntlMessageFormat }  from 'intl-messageformat';
-import { defineMessages } from 'react-intl';
-
-import Rails from '@rails/ujs';
-import axios from 'axios';
-import { throttle } from 'lodash';
-
-import { timeAgoString }  from 'flavours/glitch/components/relative_timestamp';
-import emojify  from 'flavours/glitch/features/emoji/emoji';
-import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
-import { loadLocale, getLocale } from 'flavours/glitch/locales';
-import { loadPolyfills } from 'flavours/glitch/polyfills';
-import ready from 'flavours/glitch/ready';
-
-import 'cocoon-js-vanilla';
-
-const messages = defineMessages({
-  usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' },
-  passwordExceedsLength: { id: 'password_confirmation.exceeds_maxlength', defaultMessage: 'Password confirmation exceeds the maximum password length' },
-  passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' },
-});
-
-function loaded() {
-  const { messages: localeData } = getLocale();
-
-  const locale = document.documentElement.lang;
-
-  const dateTimeFormat = new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-  });
-
-  const dateFormat = new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    timeFormat: false,
-  });
-
-  const timeFormat = new Intl.DateTimeFormat(locale, {
-    timeStyle: 'short',
-  });
-
-  const formatMessage = ({ id, defaultMessage }, values) => {
-    const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale);
-    return messageFormat.format(values);
-  };
-
-  document.querySelectorAll('.emojify').forEach((content) => {
-    content.innerHTML = emojify(content.innerHTML);
-  });
-
-  document.querySelectorAll('time.formatted').forEach((content) => {
-    const datetime = new Date(content.getAttribute('datetime'));
-    const formattedDate = dateTimeFormat.format(datetime);
-
-    content.title = formattedDate;
-    content.textContent = formattedDate;
-  });
-
-  const isToday = date => {
-    const today = new Date();
-
-    return date.getDate() === today.getDate() &&
-      date.getMonth() === today.getMonth() &&
-      date.getFullYear() === today.getFullYear();
-  };
-  const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale);
-
-  document.querySelectorAll('time.relative-formatted').forEach((content) => {
-    const datetime = new Date(content.getAttribute('datetime'));
-
-    let formattedContent;
-
-    if (isToday(datetime)) {
-      const formattedTime = timeFormat.format(datetime);
-
-      formattedContent = todayFormat.format({ time: formattedTime });
-    } else {
-      formattedContent = dateFormat.format(datetime);
-    }
-
-    content.title = formattedContent;
-    content.textContent = formattedContent;
-  });
-
-  document.querySelectorAll('time.time-ago').forEach((content) => {
-    const datetime = new Date(content.getAttribute('datetime'));
-    const now      = new Date();
-
-    const timeGiven = content.getAttribute('datetime').includes('T');
-    content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime);
-    content.textContent = timeAgoString({
-      formatMessage,
-      formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
-    }, datetime, now, now.getFullYear(), timeGiven);
-  });
-
-  const reactComponents = document.querySelectorAll('[data-component]');
-
-  if (reactComponents.length > 0) {
-    import(/* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container')
-      .then(({ default: MediaContainer }) => {
-        reactComponents.forEach((component) => {
-          Array.from(component.children).forEach((child) => {
-            component.removeChild(child);
-          });
-        });
-
-        const content = document.createElement('div');
-
-        const root = createRoot(content);
-        root.render(<MediaContainer locale={locale} components={reactComponents} />);
-        document.body.appendChild(content);
-      })
-      .catch(error => {
-        console.error(error);
-      });
-  }
-
-  Rails.delegate(document, '#user_account_attributes_username', 'input', throttle(({ target }) => {
-    if (target.value && target.value.length > 0) {
-      axios.get('/api/v1/accounts/lookup', { params: { acct: target.value } }).then(() => {
-        target.setCustomValidity(formatMessage(messages.usernameTaken));
-      }).catch(() => {
-        target.setCustomValidity('');
-      });
-    } else {
-      target.setCustomValidity('');
-    }
-  }, 500, { leading: false, trailing: true }));
-
-  Rails.delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
-    const password = document.getElementById('user_password');
-    const confirmation = document.getElementById('user_password_confirmation');
-    if (!confirmation) return;
-
-    if (confirmation.value && confirmation.value.length > password.maxLength) {
-      confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength));
-    } else if (password.value && password.value !== confirmation.value) {
-      confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch));
-    } else {
-      confirmation.setCustomValidity('');
-    }
-  });
-
-  Rails.delegate(document, '.status__content__spoiler-link', 'click', function() {
-    const statusEl = this.parentNode.parentNode;
-
-    if (statusEl.dataset.spoiler === 'expanded') {
-      statusEl.dataset.spoiler = 'folded';
-      this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format();
-    } else {
-      statusEl.dataset.spoiler = 'expanded';
-      this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format();
-    }
-
-    return false;
-  });
-
-  document.querySelectorAll('.status__content__spoiler-link').forEach((spoilerLink) => {
-    const statusEl = spoilerLink.parentNode.parentNode;
-    const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
-    spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
-  });
-}
-
-const toggleSidebar = () => {
-  const sidebar = document.querySelector('.sidebar ul');
-  const toggleButton = document.querySelector('.sidebar__toggle__icon');
-
-  if (sidebar.classList.contains('visible')) {
-    document.body.style.overflow = null;
-    toggleButton.setAttribute('aria-expanded', 'false');
-  } else {
-    document.body.style.overflow = 'hidden';
-    toggleButton.setAttribute('aria-expanded', 'true');
-  }
-
-  toggleButton.classList.toggle('active');
-  sidebar.classList.toggle('visible');
-};
-
-Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => {
-  toggleSidebar();
-});
-
-Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
-  if (e.key === ' ' || e.key === 'Enter') {
-    e.preventDefault();
-    toggleSidebar();
-  }
-});
-
-Rails.delegate(document, '.custom-emoji', 'mouseover', ({ target }) => target.src = target.getAttribute('data-original'));
-Rails.delegate(document, '.custom-emoji', 'mouseout', ({ target }) => target.src = target.getAttribute('data-static'));
-
-// Empty the honeypot fields in JS in case something like an extension
-// automatically filled them.
-Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
-  ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => {
-    const field = document.getElementById(id);
-    if (field) {
-      field.value = '';
-    }
-  });
-});
-
-function main() {
-  ready(loaded);
-}
-
-loadPolyfills()
-  .then(loadLocale)
-  .then(main)
-  .then(loadKeyboardExtensions)
-  .catch(error => {
-    console.error(error);
-  });
diff --git a/app/javascript/flavours/glitch/packs/public.tsx b/app/javascript/flavours/glitch/packs/public.tsx
new file mode 100644
index 00000000000000..1ecc3fa42f43df
--- /dev/null
+++ b/app/javascript/flavours/glitch/packs/public.tsx
@@ -0,0 +1,356 @@
+import { createRoot } from 'react-dom/client';
+
+import 'packs/public-path';
+
+import { IntlMessageFormat } from 'intl-messageformat';
+import type { MessageDescriptor, PrimitiveType } from 'react-intl';
+import { defineMessages } from 'react-intl';
+
+import Rails from '@rails/ujs';
+import axios from 'axios';
+import { throttle } from 'lodash';
+
+import { timeAgoString } from 'flavours/glitch/components/relative_timestamp';
+import emojify from 'flavours/glitch/features/emoji/emoji';
+import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
+import { loadLocale, getLocale } from 'flavours/glitch/locales';
+import { loadPolyfills } from 'flavours/glitch/polyfills';
+import ready from 'flavours/glitch/ready';
+
+import 'cocoon-js-vanilla';
+
+const messages = defineMessages({
+  usernameTaken: {
+    id: 'username.taken',
+    defaultMessage: 'That username is taken. Try another',
+  },
+  passwordExceedsLength: {
+    id: 'password_confirmation.exceeds_maxlength',
+    defaultMessage: 'Password confirmation exceeds the maximum password length',
+  },
+  passwordDoesNotMatch: {
+    id: 'password_confirmation.mismatching',
+    defaultMessage: 'Password confirmation does not match',
+  },
+});
+
+function loaded() {
+  const { messages: localeData } = getLocale();
+
+  const locale = document.documentElement.lang;
+
+  const dateTimeFormat = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+
+  const dateFormat = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+
+  const timeFormat = new Intl.DateTimeFormat(locale, {
+    timeStyle: 'short',
+  });
+
+  const formatMessage = (
+    { id, defaultMessage }: MessageDescriptor,
+    values?: Record<string, PrimitiveType>,
+  ) => {
+    let message: string | undefined = undefined;
+
+    if (id) message = localeData[id];
+
+    if (!message) message = defaultMessage as string;
+
+    const messageFormat = new IntlMessageFormat(message, locale);
+    return messageFormat.format(values) as string;
+  };
+
+  document.querySelectorAll('.emojify').forEach((content) => {
+    content.innerHTML = emojify(content.innerHTML);
+  });
+
+  document
+    .querySelectorAll<HTMLTimeElement>('time.formatted')
+    .forEach((content) => {
+      const datetime = new Date(content.dateTime);
+      const formattedDate = dateTimeFormat.format(datetime);
+
+      content.title = formattedDate;
+      content.textContent = formattedDate;
+    });
+
+  const isToday = (date: Date) => {
+    const today = new Date();
+
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  };
+  const todayFormat = new IntlMessageFormat(
+    localeData['relative_format.today'] || 'Today at {time}',
+    locale,
+  );
+
+  document
+    .querySelectorAll<HTMLTimeElement>('time.relative-formatted')
+    .forEach((content) => {
+      const datetime = new Date(content.dateTime);
+
+      let formattedContent: string;
+
+      if (isToday(datetime)) {
+        const formattedTime = timeFormat.format(datetime);
+
+        formattedContent = todayFormat.format({
+          time: formattedTime,
+        }) as string;
+      } else {
+        formattedContent = dateFormat.format(datetime);
+      }
+
+      content.title = formattedContent;
+      content.textContent = formattedContent;
+    });
+
+  document
+    .querySelectorAll<HTMLTimeElement>('time.time-ago')
+    .forEach((content) => {
+      const datetime = new Date(content.dateTime);
+      const now = new Date();
+
+      const timeGiven = content.dateTime.includes('T');
+      content.title = timeGiven
+        ? dateTimeFormat.format(datetime)
+        : dateFormat.format(datetime);
+      content.textContent = timeAgoString(
+        {
+          formatMessage,
+          formatDate: (date: Date, options) =>
+            new Intl.DateTimeFormat(locale, options).format(date),
+        },
+        datetime,
+        now.getTime(),
+        now.getFullYear(),
+        timeGiven,
+      );
+    });
+
+  const reactComponents = document.querySelectorAll('[data-component]');
+
+  if (reactComponents.length > 0) {
+    import(
+      /* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container'
+    )
+      .then(({ default: MediaContainer }) => {
+        reactComponents.forEach((component) => {
+          Array.from(component.children).forEach((child) => {
+            component.removeChild(child);
+          });
+        });
+
+        const content = document.createElement('div');
+
+        const root = createRoot(content);
+        root.render(
+          <MediaContainer locale={locale} components={reactComponents} />,
+        );
+        document.body.appendChild(content);
+
+        return true;
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  Rails.delegate(
+    document,
+    'input#user_account_attributes_username',
+    'input',
+    throttle(
+      ({ target }) => {
+        if (!(target instanceof HTMLInputElement)) return;
+
+        if (target.value && target.value.length > 0) {
+          axios
+            .get('/api/v1/accounts/lookup', { params: { acct: target.value } })
+            .then(() => {
+              target.setCustomValidity(formatMessage(messages.usernameTaken));
+              return true;
+            })
+            .catch(() => {
+              target.setCustomValidity('');
+            });
+        } else {
+          target.setCustomValidity('');
+        }
+      },
+      500,
+      { leading: false, trailing: true },
+    ),
+  );
+
+  Rails.delegate(
+    document,
+    '#user_password,#user_password_confirmation',
+    'input',
+    () => {
+      const password = document.querySelector<HTMLInputElement>(
+        'input#user_password',
+      );
+      const confirmation = document.querySelector<HTMLInputElement>(
+        'input#user_password_confirmation',
+      );
+      if (!confirmation || !password) return;
+
+      if (
+        confirmation.value &&
+        confirmation.value.length > password.maxLength
+      ) {
+        confirmation.setCustomValidity(
+          formatMessage(messages.passwordExceedsLength),
+        );
+      } else if (password.value && password.value !== confirmation.value) {
+        confirmation.setCustomValidity(
+          formatMessage(messages.passwordDoesNotMatch),
+        );
+      } else {
+        confirmation.setCustomValidity('');
+      }
+    },
+  );
+
+  Rails.delegate(
+    document,
+    'button.status__content__spoiler-link',
+    'click',
+    function () {
+      if (!(this instanceof HTMLButtonElement)) return;
+
+      const statusEl = this.parentNode?.parentNode;
+
+      if (
+        !(
+          statusEl instanceof HTMLDivElement &&
+          statusEl.classList.contains('.status__content')
+        )
+      )
+        return;
+
+      if (statusEl.dataset.spoiler === 'expanded') {
+        statusEl.dataset.spoiler = 'folded';
+        this.textContent = new IntlMessageFormat(
+          localeData['status.show_more'] || 'Show more',
+          locale,
+        ).format() as string;
+      } else {
+        statusEl.dataset.spoiler = 'expanded';
+        this.textContent = new IntlMessageFormat(
+          localeData['status.show_less'] || 'Show less',
+          locale,
+        ).format() as string;
+      }
+    },
+  );
+
+  document
+    .querySelectorAll<HTMLButtonElement>('button.status__content__spoiler-link')
+    .forEach((spoilerLink) => {
+      const statusEl = spoilerLink.parentNode?.parentNode;
+
+      if (
+        !(
+          statusEl instanceof HTMLDivElement &&
+          statusEl.classList.contains('.status__content')
+        )
+      )
+        return;
+
+      const message =
+        statusEl.dataset.spoiler === 'expanded'
+          ? localeData['status.show_less'] || 'Show less'
+          : localeData['status.show_more'] || 'Show more';
+      spoilerLink.textContent = new IntlMessageFormat(
+        message,
+        locale,
+      ).format() as string;
+    });
+}
+
+const toggleSidebar = () => {
+  const sidebar = document.querySelector<HTMLUListElement>('.sidebar ul');
+  const toggleButton = document.querySelector<HTMLAnchorElement>(
+    'a.sidebar__toggle__icon',
+  );
+
+  if (!sidebar || !toggleButton) return;
+
+  if (sidebar.classList.contains('visible')) {
+    document.body.style.overflow = '';
+    toggleButton.setAttribute('aria-expanded', 'false');
+  } else {
+    document.body.style.overflow = 'hidden';
+    toggleButton.setAttribute('aria-expanded', 'true');
+  }
+
+  toggleButton.classList.toggle('active');
+  sidebar.classList.toggle('visible');
+};
+
+Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => {
+  toggleSidebar();
+});
+
+Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', (e) => {
+  if (e.key === ' ' || e.key === 'Enter') {
+    e.preventDefault();
+    toggleSidebar();
+  }
+});
+
+Rails.delegate(document, 'img.custom-emoji', 'mouseover', ({ target }) => {
+  if (target instanceof HTMLImageElement && target.dataset.original)
+    target.src = target.dataset.original;
+});
+Rails.delegate(document, 'img.custom-emoji', 'mouseout', ({ target }) => {
+  if (target instanceof HTMLImageElement && target.dataset.static)
+    target.src = target.dataset.static;
+});
+
+// Empty the honeypot fields in JS in case something like an extension
+// automatically filled them.
+Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
+  [
+    'user_website',
+    'user_confirm_password',
+    'registration_user_website',
+    'registration_user_confirm_password',
+  ].forEach((id) => {
+    const field = document.querySelector<HTMLInputElement>(`input#${id}`);
+    if (field) {
+      field.value = '';
+    }
+  });
+});
+
+function main() {
+  ready(loaded).catch((error) => {
+    console.error(error);
+  });
+}
+
+loadPolyfills()
+  .then(loadLocale)
+  .then(main)
+  .then(loadKeyboardExtensions)
+  .catch((error) => {
+    console.error(error);
+  });
diff --git a/app/javascript/flavours/glitch/reducers/blocks.js b/app/javascript/flavours/glitch/reducers/blocks.js
deleted file mode 100644
index 1b65071634fb16..00000000000000
--- a/app/javascript/flavours/glitch/reducers/blocks.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Immutable from 'immutable';
-
-import {
-  BLOCKS_INIT_MODAL,
-} from '../actions/blocks';
-
-const initialState = Immutable.Map({
-  new: Immutable.Map({
-    account_id: null,
-  }),
-});
-
-export default function mutes(state = initialState, action) {
-  switch (action.type) {
-  case BLOCKS_INIT_MODAL:
-    return state.withMutations((state) => {
-      state.setIn(['new', 'account_id'], action.account.get('id'));
-    });
-  default:
-    return state;
-  }
-}
diff --git a/app/javascript/flavours/glitch/reducers/index.ts b/app/javascript/flavours/glitch/reducers/index.ts
index 1049a39900e992..c67349e51f8491 100644
--- a/app/javascript/flavours/glitch/reducers/index.ts
+++ b/app/javascript/flavours/glitch/reducers/index.ts
@@ -7,7 +7,6 @@ import { accountsReducer } from './accounts';
 import accounts_map from './accounts_map';
 import alerts from './alerts';
 import announcements from './announcements';
-import blocks from './blocks';
 import boosts from './boosts';
 import compose from './compose';
 import contexts from './contexts';
@@ -27,7 +26,6 @@ import markers from './markers';
 import media_attachments from './media_attachments';
 import meta from './meta';
 import { modalReducer } from './modal';
-import mutes from './mutes';
 import { notificationPolicyReducer } from './notification_policy';
 import { notificationRequestsReducer } from './notification_requests';
 import notifications from './notifications';
@@ -65,8 +63,6 @@ const reducers = {
   settings,
   local_settings,
   push_notifications,
-  mutes,
-  blocks,
   boosts,
   server,
   contexts,
diff --git a/app/javascript/flavours/glitch/reducers/mutes.js b/app/javascript/flavours/glitch/reducers/mutes.js
deleted file mode 100644
index a9eb61ff834cbc..00000000000000
--- a/app/javascript/flavours/glitch/reducers/mutes.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Immutable from 'immutable';
-
-import {
-  MUTES_INIT_MODAL,
-  MUTES_TOGGLE_HIDE_NOTIFICATIONS,
-  MUTES_CHANGE_DURATION,
-} from '../actions/mutes';
-
-const initialState = Immutable.Map({
-  new: Immutable.Map({
-    account: null,
-    notifications: true,
-    duration: 0,
-  }),
-});
-
-export default function mutes(state = initialState, action) {
-  switch (action.type) {
-  case MUTES_INIT_MODAL:
-    return state.withMutations((state) => {
-      state.setIn(['new', 'account'], action.account);
-      state.setIn(['new', 'notifications'], true);
-    });
-  case MUTES_TOGGLE_HIDE_NOTIFICATIONS:
-    return state.updateIn(['new', 'notifications'], (old) => !old);
-  case MUTES_CHANGE_DURATION:
-    return state.setIn(['new', 'duration'], Number(action.duration));
-  default:
-    return state;
-  }
-}
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 147a88cf144475..8c74f6d2d08ccd 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -106,17 +106,17 @@
   }
 
   &.button-secondary {
-    color: $ui-button-secondary-color;
+    color: $highlight-text-color;
     background: transparent;
     padding: 6px 17px;
-    border: 1px solid $ui-button-secondary-border-color;
+    border: 1px solid $highlight-text-color;
 
     &:active,
     &:focus,
     &:hover {
-      border-color: $ui-button-secondary-focus-background-color;
-      color: $ui-button-secondary-focus-color;
-      background-color: $ui-button-secondary-focus-background-color;
+      border-color: lighten($highlight-text-color, 4%);
+      color: lighten($highlight-text-color, 4%);
+      background-color: transparent;
       text-decoration: none;
     }
 
@@ -5978,6 +5978,10 @@ a.status-card {
   pointer-events: auto;
   user-select: text;
   display: flex;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    margin-top: auto;
+  }
 }
 
 .video-modal .video-player {
@@ -6309,6 +6313,154 @@ a.status-card {
   margin-inline-start: 10px;
 }
 
+.safety-action-modal {
+  width: 600px;
+  flex-direction: column;
+
+  &__top,
+  &__bottom {
+    display: flex;
+    gap: 8px;
+    padding: 24px;
+    flex-direction: column;
+    background: var(--modal-background-color);
+    backdrop-filter: var(--background-filter);
+    border: 1px solid var(--modal-border-color);
+  }
+
+  &__top {
+    border-radius: 16px 16px 0 0;
+    border-bottom: 0;
+    gap: 16px;
+  }
+
+  &__bottom {
+    border-radius: 0 0 16px 16px;
+    border-top: 0;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-radius: 0;
+      border-bottom: 0;
+      padding-bottom: 32px;
+    }
+  }
+
+  &__header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    font-size: 14px;
+    line-height: 20px;
+    color: $darker-text-color;
+
+    &__icon {
+      border-radius: 64px;
+      background: $ui-highlight-color;
+      color: $white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    h1 {
+      font-size: 22px;
+      line-height: 28px;
+      color: $primary-text-color;
+    }
+  }
+
+  &__bullet-points {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 16px;
+    line-height: 24px;
+
+    & > div {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+    }
+
+    &__icon {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &__field-group {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      font-size: 16px;
+      line-height: 24px;
+      height: 32px;
+      padding: 0 12px;
+    }
+  }
+
+  &__caveats {
+    font-size: 14px;
+    padding: 0 12px;
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
+  &__bottom {
+    padding-top: 0;
+
+    &__collapsible {
+      display: none;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &.active {
+      background: var(--modal-background-variant-color);
+      padding-top: 24px;
+
+      .safety-action-modal__bottom__collapsible {
+        display: flex;
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: flex-end;
+
+    .link-button {
+      padding: 10px 12px;
+      font-weight: 600;
+    }
+  }
+}
+
 .doodle-modal,
 .boost-modal,
 .confirmation-modal,
@@ -7694,7 +7846,8 @@ img.modal-warning {
   display: flex;
 }
 
-.radio-button {
+.radio-button,
+.check-box {
   font-size: 14px;
   position: relative;
   display: inline-flex;
@@ -7713,17 +7866,19 @@ img.modal-warning {
   }
 
   &__input {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     border: 2px solid $secondary-text-color;
     box-sizing: border-box;
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
     flex: 0 0 auto;
     border-radius: 50%;
 
     &.checked {
-      border-color: $secondary-text-color;
+      border-color: $ui-highlight-color;
 
       &::before {
         position: absolute;
@@ -7732,9 +7887,31 @@ img.modal-warning {
         content: '';
         display: block;
         border-radius: 50%;
-        width: 10px;
-        height: 10px;
-        background: $secondary-text-color;
+        width: 12px;
+        height: 12px;
+        background: $ui-highlight-color;
+      }
+    }
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.check-box {
+  &__input {
+    width: 18px;
+    height: 18px;
+    border-radius: 2px;
+
+    &.checked {
+      background: $ui-highlight-color;
+      color: $white;
+
+      &::before {
+        display: none;
       }
     }
   }
@@ -9220,22 +9397,36 @@ noscript {
   }
 }
 
+.safety-action-modal,
 .interaction-modal {
   max-width: 90vw;
   width: 600px;
-  background: var(--modal-background-color);
-  border: 1px solid var(--modal-border-color);
-  border-radius: 8px;
+}
+
+.interaction-modal {
   overflow: visible;
   position: relative;
   display: block;
-  padding: 40px;
+  border-radius: 16px;
+  background: var(--modal-background-color);
+  backdrop-filter: var(--background-filter);
+  border: 1px solid var(--modal-border-color);
+  padding: 24px;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-radius: 16px 16px 0 0;
+    border-bottom: 0;
+    padding-bottom: 32px;
+  }
 
   h3 {
     font-size: 22px;
     line-height: 33px;
     font-weight: 700;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
   }
 
   p {
@@ -9256,7 +9447,9 @@ noscript {
 
   &__icon {
     color: $highlight-text-color;
-    margin: 0 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__lead {
@@ -9289,6 +9482,7 @@ noscript {
         border: 0;
         padding: 15px - 4px 15px - 6px;
         flex: 1 1 auto;
+        min-width: 0;
 
         &::placeholder {
           color: lighten($darker-text-color, 4%);
diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index 70bd86d33cba81..54dc54ac0283ca 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@@ -46,10 +46,10 @@ $ui-button-focus-background-color: $blurple-600 !default;
 $ui-button-focus-outline-color: $blurple-400 !default;
 $ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
 
-$ui-button-secondary-color: $grey-100 !default;
-$ui-button-secondary-border-color: $grey-100 !default;
-$ui-button-secondary-focus-background-color: $grey-600 !default;
-$ui-button-secondary-focus-color: $white !default;
+$ui-button-secondary-color: $blurple-500 !default;
+$ui-button-secondary-border-color: $blurple-500 !default;
+$ui-button-secondary-focus-border-color: $blurple-300 !default;
+$ui-button-secondary-focus-color: $blurple-300 !default;
 
 $ui-button-tertiary-color: $blurple-300 !default;
 $ui-button-tertiary-border-color: $blurple-300 !default;
@@ -104,7 +104,8 @@ $dismiss-overlay-width: 4rem;
   --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
   --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
     0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
-  --modal-background-color: #{darken($ui-base-color, 4%)};
+  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
+  --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
   --modal-border-color: #{lighten($ui-base-color, 4%)};
   --background-border-color: #{lighten($ui-base-color, 4%)};
   --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
diff --git a/app/javascript/flavours/glitch/theme.yml b/app/javascript/flavours/glitch/theme.yml
index 33399c3746305a..1aa31df187bf55 100644
--- a/app/javascript/flavours/glitch/theme.yml
+++ b/app/javascript/flavours/glitch/theme.yml
@@ -2,12 +2,12 @@
 pack:
   admin:
     - packs/admin.tsx
-    - packs/public.jsx
-  auth: packs/public.jsx
+    - packs/public.tsx
+  auth: packs/public.tsx
   common:
     filename: packs/common.js
     stylesheet: true
-  embed: packs/public.jsx
+  embed: packs/public.tsx
   error: packs/error.js
   home:
     filename: packs/home.js
@@ -17,8 +17,8 @@ pack:
       - flavours/glitch/async/notifications
   mailer:
   modal:
-  public: packs/public.jsx
-  settings: packs/public.jsx
+  public: packs/public.tsx
+  settings: packs/public.tsx
   sign_up: packs/sign_up.js
   share: packs/share.jsx
 
diff --git a/app/javascript/flavours/vanilla/theme.yml b/app/javascript/flavours/vanilla/theme.yml
index ecfb00729b766b..7c7df295d3823b 100644
--- a/app/javascript/flavours/vanilla/theme.yml
+++ b/app/javascript/flavours/vanilla/theme.yml
@@ -2,12 +2,12 @@
 pack:
   admin:
     - admin.tsx
-    - public.jsx
-  auth: public.jsx
+    - public.tsx
+  auth: public.tsx
   common:
     filename: common.js
     stylesheet: true
-  embed: public.jsx
+  embed: public.tsx
   error: error.js
   home:
     filename: application.js
@@ -17,8 +17,8 @@ pack:
       - features/notifications
   mailer:
   modal:
-  public: public.jsx
-  settings: public.jsx
+  public: public.tsx
+  settings: public.tsx
   sign_up: sign_up.js
   share: share.jsx
 
diff --git a/app/javascript/mastodon/actions/blocks.js b/app/javascript/mastodon/actions/blocks.js
index e293657ad36ef9..54296d0905c9a9 100644
--- a/app/javascript/mastodon/actions/blocks.js
+++ b/app/javascript/mastodon/actions/blocks.js
@@ -12,8 +12,6 @@ export const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST';
 export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS';
 export const BLOCKS_EXPAND_FAIL    = 'BLOCKS_EXPAND_FAIL';
 
-export const BLOCKS_INIT_MODAL = 'BLOCKS_INIT_MODAL';
-
 export function fetchBlocks() {
   return (dispatch, getState) => {
     dispatch(fetchBlocksRequest());
@@ -90,11 +88,12 @@ export function expandBlocksFail(error) {
 
 export function initBlockModal(account) {
   return dispatch => {
-    dispatch({
-      type: BLOCKS_INIT_MODAL,
-      account,
-    });
-
-    dispatch(openModal({ modalType: 'BLOCK' }));
+    dispatch(openModal({
+      modalType: 'BLOCK',
+      modalProps: {
+        accountId: account.get('id'),
+        acct: account.get('acct'),
+      },
+    }));
   };
 }
diff --git a/app/javascript/mastodon/actions/domain_blocks.js b/app/javascript/mastodon/actions/domain_blocks.js
index 718002613f4053..55c0a6ce9d0ab7 100644
--- a/app/javascript/mastodon/actions/domain_blocks.js
+++ b/app/javascript/mastodon/actions/domain_blocks.js
@@ -1,6 +1,8 @@
 import api, { getLinks } from '../api';
 
 import { blockDomainSuccess, unblockDomainSuccess } from "./domain_blocks_typed";
+import { openModal } from './modal';
+
 
 export * from "./domain_blocks_typed";
 
@@ -150,3 +152,12 @@ export function expandDomainBlocksFail(error) {
     error,
   };
 }
+
+export const initDomainBlockModal = account => dispatch => dispatch(openModal({
+  modalType: 'DOMAIN_BLOCK',
+  modalProps: {
+    domain: account.get('acct').split('@')[1],
+    acct: account.get('acct'),
+    accountId: account.get('id'),
+  },
+}));
diff --git a/app/javascript/mastodon/actions/mutes.js b/app/javascript/mastodon/actions/mutes.js
index fb041078b84488..99c113f4147302 100644
--- a/app/javascript/mastodon/actions/mutes.js
+++ b/app/javascript/mastodon/actions/mutes.js
@@ -12,10 +12,6 @@ export const MUTES_EXPAND_REQUEST = 'MUTES_EXPAND_REQUEST';
 export const MUTES_EXPAND_SUCCESS = 'MUTES_EXPAND_SUCCESS';
 export const MUTES_EXPAND_FAIL    = 'MUTES_EXPAND_FAIL';
 
-export const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL';
-export const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS';
-export const MUTES_CHANGE_DURATION = 'MUTES_CHANGE_DURATION';
-
 export function fetchMutes() {
   return (dispatch, getState) => {
     dispatch(fetchMutesRequest());
@@ -92,26 +88,12 @@ export function expandMutesFail(error) {
 
 export function initMuteModal(account) {
   return dispatch => {
-    dispatch({
-      type: MUTES_INIT_MODAL,
-      account,
-    });
-
-    dispatch(openModal({ modalType: 'MUTE' }));
-  };
-}
-
-export function toggleHideNotifications() {
-  return dispatch => {
-    dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS });
-  };
-}
-
-export function changeMuteDuration(duration) {
-  return dispatch => {
-    dispatch({
-      type: MUTES_CHANGE_DURATION,
-      duration,
-    });
+    dispatch(openModal({
+      modalType: 'MUTE',
+      modalProps: {
+        accountId: account.get('id'),
+        acct: account.get('acct'),
+      },
+    }));
   };
 }
diff --git a/app/javascript/mastodon/components/check_box.tsx b/app/javascript/mastodon/components/check_box.tsx
new file mode 100644
index 00000000000000..7da8ef0ac5602d
--- /dev/null
+++ b/app/javascript/mastodon/components/check_box.tsx
@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+
+import DoneIcon from '@/material-icons/400-24px/done.svg?react';
+
+import { Icon } from './icon';
+
+interface Props {
+  value: string;
+  checked: boolean;
+  name: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: React.ReactNode;
+}
+
+export const CheckBox: React.FC<Props> = ({
+  name,
+  value,
+  checked,
+  onChange,
+  label,
+}) => {
+  return (
+    <label className='check-box'>
+      <input
+        name={name}
+        type='checkbox'
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+
+      <span className={classNames('check-box__input', { checked })}>
+        {checked && <Icon id='check' icon={DoneIcon} />}
+      </span>
+
+      <span>{label}</span>
+    </label>
+  );
+};
diff --git a/app/javascript/mastodon/components/relative_timestamp.tsx b/app/javascript/mastodon/components/relative_timestamp.tsx
index 12530c2b17bceb..b9e1e4f8fd1ff7 100644
--- a/app/javascript/mastodon/components/relative_timestamp.tsx
+++ b/app/javascript/mastodon/components/relative_timestamp.tsx
@@ -102,7 +102,7 @@ const getUnitDelay = (units: string) => {
 };
 
 export const timeAgoString = (
-  intl: IntlShape,
+  intl: Pick<IntlShape, 'formatDate' | 'formatMessage'>,
   date: Date,
   now: number,
   year: number,
diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx
index b111a653859358..3c6d26e34951ec 100644
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -209,7 +209,7 @@ class StatusActionBar extends ImmutablePureComponent {
     const { status, onBlockDomain } = this.props;
     const account = status.get('account');
 
-    onBlockDomain(account.get('acct').split('@')[1]);
+    onBlockDomain(account);
   };
 
   handleUnblockDomain = () => {
diff --git a/app/javascript/mastodon/containers/status_container.jsx b/app/javascript/mastodon/containers/status_container.jsx
index 7a7cd9880f0325..7bd91c8c9d7c06 100644
--- a/app/javascript/mastodon/containers/status_container.jsx
+++ b/app/javascript/mastodon/containers/status_container.jsx
@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
@@ -15,7 +15,7 @@ import {
   directCompose,
 } from '../actions/compose';
 import {
-  blockDomain,
+  initDomainBlockModal,
   unblockDomain,
 } from '../actions/domain_blocks';
 import {
@@ -253,15 +253,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     dispatch(toggleStatusCollapse(status.get('id'), isCollapsed));
   },
 
-  onBlockDomain (domain) {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
-        confirm: intl.formatMessage(messages.blockDomainConfirm),
-        onConfirm: () => dispatch(blockDomain(domain)),
-      },
-    }));
+  onBlockDomain (account) {
+    dispatch(initDomainBlockModal(account));
   },
 
   onUnblockDomain (domain) {
diff --git a/app/javascript/mastodon/features/account_timeline/components/header.jsx b/app/javascript/mastodon/features/account_timeline/components/header.jsx
index 7de8d3771b4683..a2463b87649b82 100644
--- a/app/javascript/mastodon/features/account_timeline/components/header.jsx
+++ b/app/javascript/mastodon/features/account_timeline/components/header.jsx
@@ -72,11 +72,7 @@ class Header extends ImmutablePureComponent {
   };
 
   handleBlockDomain = () => {
-    const domain = this.props.account.get('acct').split('@')[1];
-
-    if (!domain) return;
-
-    this.props.onBlockDomain(domain);
+    this.props.onBlockDomain(this.props.account);
   };
 
   handleUnblockDomain = () => {
diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx
index 84a303c37a2309..071dbdbfb72aa4 100644
--- a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx
+++ b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx
@@ -17,7 +17,7 @@ import {
   mentionCompose,
   directCompose,
 } from '../../../actions/compose';
-import { blockDomain, unblockDomain } from '../../../actions/domain_blocks';
+import { initDomainBlockModal, unblockDomain } from '../../../actions/domain_blocks';
 import { openModal } from '../../../actions/modal';
 import { initMuteModal } from '../../../actions/mutes';
 import { initReport } from '../../../actions/reports';
@@ -140,15 +140,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
-  onBlockDomain (domain) {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
-        confirm: intl.formatMessage(messages.blockDomainConfirm),
-        onConfirm: () => dispatch(blockDomain(domain)),
-      },
-    }));
+  onBlockDomain (account) {
+    dispatch(initDomainBlockModal(account));
   },
 
   onUnblockDomain (domain) {
diff --git a/app/javascript/mastodon/features/getting_started/index.jsx b/app/javascript/mastodon/features/getting_started/index.jsx
index d84c85806e8aed..a686a0a8497ab3 100644
--- a/app/javascript/mastodon/features/getting_started/index.jsx
+++ b/app/javascript/mastodon/features/getting_started/index.jsx
@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
 
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
+import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
@@ -19,7 +20,6 @@ import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
 import StarIcon from '@/material-icons/400-24px/star.svg?react';
-import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
@@ -112,7 +112,7 @@ class GettingStarted extends ImmutablePureComponent {
 
     if (showTrends) {
       navItems.push(
-        <ColumnLink key='explore' icon='explore' iconComponent={TagIcon} text={intl.formatMessage(messages.explore)} to='/explore' />,
+        <ColumnLink key='explore' icon='explore' iconComponent={ExploreIcon} text={intl.formatMessage(messages.explore)} to='/explore' />,
       );
     }
 
diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx
index c243a49129eb4e..a4951260abb4e2 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/status/components/action_bar.jsx
@@ -159,7 +159,7 @@ class ActionBar extends PureComponent {
     const { status, onBlockDomain } = this.props;
     const account = status.get('account');
 
-    onBlockDomain(account.get('acct').split('@')[1]);
+    onBlockDomain(account);
   };
 
   handleUnblockDomain = () => {
diff --git a/app/javascript/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx
index a3034bb5707180..44db9d9c3ffb03 100644
--- a/app/javascript/mastodon/features/status/index.jsx
+++ b/app/javascript/mastodon/features/status/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
@@ -34,7 +34,7 @@ import {
   directCompose,
 } from '../../actions/compose';
 import {
-  blockDomain,
+  initDomainBlockModal,
   unblockDomain,
 } from '../../actions/domain_blocks';
 import {
@@ -463,15 +463,8 @@ class Status extends ImmutablePureComponent {
     this.props.dispatch(unblockAccount(account.get('id')));
   };
 
-  handleBlockDomainClick = domain => {
-    this.props.dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
-        confirm: this.props.intl.formatMessage(messages.blockDomainConfirm),
-        onConfirm: () => this.props.dispatch(blockDomain(domain)),
-      },
-    }));
+  handleBlockDomainClick = account => {
+    this.props.dispatch(initDomainBlockModal(account));
   };
 
   handleUnblockDomainClick = domain => {
diff --git a/app/javascript/mastodon/features/ui/components/block_modal.jsx b/app/javascript/mastodon/features/ui/components/block_modal.jsx
index cfac692324aa23..fc9233a9cc6367 100644
--- a/app/javascript/mastodon/features/ui/components/block_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/block_modal.jsx
@@ -1,100 +1,116 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, FormattedMessage } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { blockAccount } from '../../../actions/accounts';
-import { closeModal } from '../../../actions/modal';
-import { initReport } from '../../../actions/reports';
-import { Button } from '../../../components/button';
-import { makeGetAccount } from '../../../selectors';
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = state => ({
-    account: getAccount(state, state.getIn(['blocks', 'new', 'account_id'])),
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onConfirm(account) {
-      dispatch(blockAccount(account.get('id')));
-    },
-
-    onBlockAndReport(account) {
-      dispatch(blockAccount(account.get('id')));
-      dispatch(initReport(account));
-    },
-
-    onClose() {
-      dispatch(closeModal({
-        modalType: undefined,
-        ignoreFocus: false,
-      }));
-    },
-  };
-};
+import { useCallback, useState } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { useDispatch } from 'react-redux';
+
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import BlockIcon from '@/material-icons/400-24px/block.svg?react';
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import { blockAccount } from 'mastodon/actions/accounts';
+import { closeModal } from 'mastodon/actions/modal';
+import { Button } from 'mastodon/components/button';
+import { Icon } from 'mastodon/components/icon';
+
+export const BlockModal = ({ accountId, acct }) => {
+  const dispatch = useDispatch();
+  const [expanded, setExpanded] = useState(false);
+
+  const domain = acct.split('@')[1];
+
+  const handleClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockAccount(accountId));
+  }, [dispatch, accountId]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+  }, [dispatch]);
+
+  const handleToggleLearnMore = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon icon={BlockIcon} />
+          </div>
+
+          <div>
+            <h1><FormattedMessage id='block_modal.title' defaultMessage='Block user?' /></h1>
+            <div>@{acct}</div>
+          </div>
+        </div>
 
-class BlockModal extends PureComponent {
-
-  static propTypes = {
-    account: PropTypes.object.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onBlockAndReport: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClose();
-    this.props.onConfirm(this.props.account);
-  };
-
-  handleSecondary = () => {
-    this.props.onClose();
-    this.props.onBlockAndReport(this.props.account);
-  };
-
-  handleCancel = () => {
-    this.props.onClose();
-  };
-
-  render () {
-    const { account } = this.props;
-
-    return (
-      <div className='modal-root__modal block-modal'>
-        <div className='block-modal__container'>
-          <p>
-            <FormattedMessage
-              id='confirmations.block.message'
-              defaultMessage='Are you sure you want to block {name}?'
-              values={{ name: <strong>@{account.get('acct')}</strong> }}
-            />
-          </p>
+        <div className='safety-action-modal__bullet-points'>
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_will_know' defaultMessage="They can see that they're blocked." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_cant_see_posts' defaultMessage="They can't see your posts and you won't see theirs." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
+            <div><FormattedMessage id='block_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mentions them." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_cant_mention' defaultMessage="They can't mention or follow you." /></div>
+          </div>
         </div>
+      </div>
 
-        <div className='block-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='block-modal__cancel-button'>
+      <div className={classNames('safety-action-modal__bottom', { active: expanded })}>
+        {domain && (
+          <div className='safety-action-modal__bottom__collapsible'>
+            <div className='safety-action-modal__caveats'>
+              <FormattedMessage
+                id='block_modal.remote_users_caveat'
+                defaultMessage='We will ask the server {domain} to respect your decision. However, compliance is not guaranteed since some servers may handle blocks differently. Public posts may still be visible to non-logged-in users.'
+                values={{ domain: <strong>{domain}</strong> }}
+              />
+            </div>
+          </div>
+        )}
+
+        <div className='safety-action-modal__actions'>
+          {domain && (
+            <button onClick={handleToggleLearnMore} className='link-button'>
+              {expanded ? <FormattedMessage id='block_modal.show_less' defaultMessage='Show less' /> : <FormattedMessage id='block_modal.show_more' defaultMessage='Show more' />}
+            </button>
+          )}
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          <Button onClick={this.handleSecondary} className='confirmation-modal__secondary-button'>
-            <FormattedMessage id='confirmations.block.block_and_report' defaultMessage='Block & Report' />
-          </Button>
-          <Button onClick={this.handleClick} autoFocus>
+          </button>
+
+          <Button onClick={handleClick}>
             <FormattedMessage id='confirmations.block.confirm' defaultMessage='Block' />
           </Button>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-}
+BlockModal.propTypes = {
+  accountId: PropTypes.string.isRequired,
+  acct: PropTypes.string.isRequired,
+};
 
-export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(BlockModal));
+export default BlockModal;
diff --git a/app/javascript/mastodon/features/ui/components/domain_block_modal.jsx b/app/javascript/mastodon/features/ui/components/domain_block_modal.jsx
new file mode 100644
index 00000000000000..e69db6348959a1
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/domain_block_modal.jsx
@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { useDispatch } from 'react-redux';
+
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import DomainDisabledIcon from '@/material-icons/400-24px/domain_disabled.svg?react';
+import HistoryIcon from '@/material-icons/400-24px/history.svg?react';
+import PersonRemoveIcon from '@/material-icons/400-24px/person_remove.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import { blockAccount } from 'mastodon/actions/accounts';
+import { blockDomain } from 'mastodon/actions/domain_blocks';
+import { closeModal } from 'mastodon/actions/modal';
+import { Button } from 'mastodon/components/button';
+import { Icon } from 'mastodon/components/icon';
+
+export const DomainBlockModal = ({ domain, accountId, acct }) => {
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockDomain(domain));
+  }, [dispatch, domain]);
+
+  const handleSecondaryClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockAccount(accountId));
+  }, [dispatch, accountId]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+  }, [dispatch]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon icon={DomainDisabledIcon} />
+          </div>
+
+          <div>
+            <h1><FormattedMessage id='domain_block_modal.title' defaultMessage='Block domain?' /></h1>
+            <div>{domain}</div>
+          </div>
+        </div>
+
+        <div className='safety-action-modal__bullet-points'>
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.they_wont_know' defaultMessage="They won't know they've been blocked." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.you_wont_see_posts' defaultMessage="You won't see posts or notifications from users on this server." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={PersonRemoveIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.you_will_lose_followers' defaultMessage='All your followers from this server will be removed.' /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.they_cant_follow' defaultMessage='Nobody from this server can follow you.' /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={HistoryIcon} /></div>
+            <div><FormattedMessage id='domain_block_modal.they_can_interact_with_old_posts' defaultMessage='People from this server can interact with your old posts.' /></div>
+          </div>
+        </div>
+      </div>
+
+      <div className='safety-action-modal__bottom'>
+        <div className='safety-action-modal__actions'>
+          <Button onClick={handleSecondaryClick} secondary>
+            <FormattedMessage id='domain_block_modal.block_account_instead' defaultMessage='Block @{name} instead' values={{ name: acct.split('@')[0] }} />
+          </Button>
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
+            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+          </button>
+
+          <Button onClick={handleClick}>
+            <FormattedMessage id='domain_block_modal.block' defaultMessage='Block server' />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+DomainBlockModal.propTypes = {
+  domain: PropTypes.string.isRequired,
+  accountId: PropTypes.string.isRequired,
+  acct: PropTypes.string.isRequired,
+};
+
+export default DomainBlockModal;
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.jsx b/app/javascript/mastodon/features/ui/components/modal_root.jsx
index 46f0dc706f48df..97d7706da44add 100644
--- a/app/javascript/mastodon/features/ui/components/modal_root.jsx
+++ b/app/javascript/mastodon/features/ui/components/modal_root.jsx
@@ -7,6 +7,7 @@ import Base from 'mastodon/components/modal_root';
 import {
   MuteModal,
   BlockModal,
+  DomainBlockModal,
   ReportModal,
   EmbedModal,
   ListEditor,
@@ -41,6 +42,7 @@ export const MODAL_COMPONENTS = {
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'MUTE': MuteModal,
   'BLOCK': BlockModal,
+  'DOMAIN_BLOCK': DomainBlockModal,
   'REPORT': ReportModal,
   'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
   'EMBED': EmbedModal,
diff --git a/app/javascript/mastodon/features/ui/components/mute_modal.jsx b/app/javascript/mastodon/features/ui/components/mute_modal.jsx
index fa81ea81a31d53..e9dc1a7c2ec38c 100644
--- a/app/javascript/mastodon/features/ui/components/mute_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/mute_modal.jsx
@@ -1,138 +1,154 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useCallback, useState } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { connect } from 'react-redux';
+import classNames from 'classnames';
 
-import Toggle from 'react-toggle';
+import { useDispatch } from 'react-redux';
 
-import { muteAccount } from '../../../actions/accounts';
-import { closeModal } from '../../../actions/modal';
-import { toggleHideNotifications, changeMuteDuration } from '../../../actions/mutes';
-import { Button } from '../../../components/button';
+
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
+import { muteAccount } from 'mastodon/actions/accounts';
+import { closeModal } from 'mastodon/actions/modal';
+import { Button } from 'mastodon/components/button';
+import { CheckBox } from 'mastodon/components/check_box';
+import { Icon } from 'mastodon/components/icon';
+import { RadioButton } from 'mastodon/components/radio_button';
 
 const messages = defineMessages({
   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}}' },
-  indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Indefinite' },
+  indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Until I unmute them' },
+  hideFromNotifications: { id: 'mute_modal.hide_from_notifications', defaultMessage: 'Hide from notifications' },
 });
 
-const mapStateToProps = state => {
-  return {
-    account: state.getIn(['mutes', 'new', 'account']),
-    notifications: state.getIn(['mutes', 'new', 'notifications']),
-    muteDuration: state.getIn(['mutes', 'new', 'duration']),
-  };
+const RadioButtonLabel = ({ name, value, currentValue, onChange, label }) => (
+  <RadioButton
+    name={name}
+    value={value}
+    checked={value === currentValue}
+    onChange={onChange}
+    label={label}
+  />
+);
+
+RadioButtonLabel.propTypes = {
+  name: PropTypes.string,
+  value: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  currentValue: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  label: PropTypes.node,
 };
 
-const mapDispatchToProps = dispatch => {
-  return {
-    onConfirm(account, notifications, muteDuration) {
-      dispatch(muteAccount(account.get('id'), notifications, muteDuration));
-    },
-
-    onClose() {
-      dispatch(closeModal({
-        modalType: undefined,
-        ignoreFocus: false,
-      }));
-    },
-
-    onToggleNotifications() {
-      dispatch(toggleHideNotifications());
-    },
-
-    onChangeMuteDuration(e) {
-      dispatch(changeMuteDuration(e.target.value));
-    },
-  };
-};
+export const MuteModal = ({ accountId, acct }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [notifications, setNotifications] = useState(true);
+  const [muteDuration, setMuteDuration] = useState('0');
+  const [expanded, setExpanded] = useState(false);
+
+  const handleClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(muteAccount(accountId, notifications, muteDuration));
+  }, [dispatch, accountId, notifications, muteDuration]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+  }, [dispatch]);
+
+  const handleToggleNotifications = useCallback(({ target }) => {
+    setNotifications(target.checked);
+  }, [setNotifications]);
+
+  const handleChangeMuteDuration = useCallback(({ target }) => {
+    setMuteDuration(target.value);
+  }, [setMuteDuration]);
+
+  const handleToggleSettings = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon icon={VolumeOffIcon} />
+          </div>
+
+          <div>
+            <h1><FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' /></h1>
+            <div>@{acct}</div>
+          </div>
+        </div>
 
-class MuteModal extends PureComponent {
-
-  static propTypes = {
-    account: PropTypes.object.isRequired,
-    notifications: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    onToggleNotifications: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    muteDuration: PropTypes.number.isRequired,
-    onChangeMuteDuration: PropTypes.func.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClose();
-    this.props.onConfirm(this.props.account, this.props.notifications, this.props.muteDuration);
-  };
-
-  handleCancel = () => {
-    this.props.onClose();
-  };
-
-  toggleNotifications = () => {
-    this.props.onToggleNotifications();
-  };
-
-  changeMuteDuration = (e) => {
-    this.props.onChangeMuteDuration(e);
-  };
-
-  render () {
-    const { account, notifications, muteDuration, intl } = this.props;
-
-    return (
-      <div className='modal-root__modal mute-modal'>
-        <div className='mute-modal__container'>
-          <p>
-            <FormattedMessage
-              id='confirmations.mute.message'
-              defaultMessage='Are you sure you want to mute {name}?'
-              values={{ name: <strong>@{account.get('acct')}</strong> }}
-            />
-          </p>
-          <p className='mute-modal__explanation'>
-            <FormattedMessage
-              id='confirmations.mute.explanation'
-              defaultMessage='This will hide posts from them and posts mentioning them, but it will still allow them to see your posts and follow you.'
-            />
-          </p>
-          <div className='setting-toggle'>
-            <Toggle id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} />
-            <label className='setting-toggle__label' htmlFor='mute-modal__hide-notifications-checkbox'>
-              <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
-            </label>
+        <div className='safety-action-modal__bullet-points'>
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
+            <div><FormattedMessage id='mute_modal.they_wont_know' defaultMessage="They won't know they've been muted." /></div>
           </div>
+
           <div>
-            <span><FormattedMessage id='mute_modal.duration' defaultMessage='Duration' />: </span>
-
-            <select value={muteDuration} onChange={this.changeMuteDuration}>
-              <option value={0}>{intl.formatMessage(messages.indefinite)}</option>
-              <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={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 className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
+            <div><FormattedMessage id='mute_modal.you_wont_see_posts' defaultMessage="They can still see your posts, but you won't see theirs." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
+            <div><FormattedMessage id='mute_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mention them." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
+            <div><FormattedMessage id='mute_modal.they_can_mention_and_follow' defaultMessage="They can mention and follow you, but you won't see them." /></div>
+          </div>
+        </div>
+      </div>
+
+      <div className={classNames('safety-action-modal__bottom', { active: expanded })}>
+        <div className='safety-action-modal__bottom__collapsible'>
+          <div className='safety-action-modal__field-group'>
+            <RadioButtonLabel name='duration' value='0' label={intl.formatMessage(messages.indefinite)} currentValue={muteDuration} onChange={handleChangeMuteDuration} />
+            <RadioButtonLabel name='duration' value='86400' label={intl.formatMessage(messages.hours, { number: 24 })} currentValue={muteDuration} onChange={handleChangeMuteDuration} />
+            <RadioButtonLabel name='duration' value='604800' label={intl.formatMessage(messages.days, { number: 7 })} currentValue={muteDuration} onChange={handleChangeMuteDuration} />
+            <RadioButtonLabel name='duration' value='x' label={intl.formatMessage(messages.days, { number: 30 })} currentValue={muteDuration} onChange={handleChangeMuteDuration} />
+          </div>
+
+          <div className='safety-action-modal__field-group'>
+            <CheckBox label={intl.formatMessage(messages.hideFromNotifications)} checked={notifications} onChange={handleToggleNotifications} />
           </div>
         </div>
 
-        <div className='mute-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
+        <div className='safety-action-modal__actions'>
+          <button onClick={handleToggleSettings} className='link-button'>
+            {expanded ? <FormattedMessage id='mute_modal.hide_options' defaultMessage='Hide options' /> : <FormattedMessage id='mute_modal.show_options' defaultMessage='Show options' />}
+          </button>
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          <Button onClick={this.handleClick} autoFocus>
+          </button>
+
+          <Button onClick={handleClick}>
             <FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />
           </Button>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-}
+MuteModal.propTypes = {
+  accountId: PropTypes.string.isRequired,
+  acct: PropTypes.string.isRequired,
+};
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(MuteModal));
+export default MuteModal;
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
index de9b6b40104308..e1f5bfdaf60f66 100644
--- a/app/javascript/mastodon/features/ui/util/async-components.js
+++ b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -118,6 +118,10 @@ export function BlockModal () {
   return import(/* webpackChunkName: "modals/block_modal" */'../components/block_modal');
 }
 
+export function DomainBlockModal () {
+  return import(/* webpackChunkName: "modals/domain_block_modal" */'../components/domain_block_modal');
+}
+
 export function ReportModal () {
   return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal');
 }
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index e05cf8c4c1e4c3..376dfb7e4b6b0f 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -89,6 +89,14 @@
   "announcement.announcement": "Announcement",
   "attachments_list.unprocessed": "(unprocessed)",
   "audio.hide": "Hide audio",
+  "block_modal.remote_users_caveat": "We will ask the server {domain} to respect your decision. However, compliance is not guaranteed since some servers may handle blocks differently. Public posts may still be visible to non-logged-in users.",
+  "block_modal.show_less": "Show less",
+  "block_modal.show_more": "Show more",
+  "block_modal.they_cant_mention": "They can't mention or follow you.",
+  "block_modal.they_cant_see_posts": "They can't see your posts and you won't see theirs.",
+  "block_modal.they_will_know": "They can see that they're blocked.",
+  "block_modal.title": "Block user?",
+  "block_modal.you_wont_see_mentions": "You won't see posts that mention them.",
   "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.",
@@ -160,9 +168,7 @@
   "compose_form.spoiler.unmarked": "Add content warning",
   "compose_form.spoiler_placeholder": "Content warning (optional)",
   "confirmation_modal.cancel": "Cancel",
-  "confirmations.block.block_and_report": "Block & Report",
   "confirmations.block.confirm": "Block",
-  "confirmations.block.message": "Are you sure you want to block {name}?",
   "confirmations.cancel_follow_request.confirm": "Withdraw request",
   "confirmations.cancel_follow_request.message": "Are you sure you want to withdraw your request to follow {name}?",
   "confirmations.delete.confirm": "Delete",
@@ -171,15 +177,13 @@
   "confirmations.delete_list.message": "Are you sure you want to permanently delete this list?",
   "confirmations.discard_edit_media.confirm": "Discard",
   "confirmations.discard_edit_media.message": "You have unsaved changes to the media description or preview, discard them anyway?",
-  "confirmations.domain_block.confirm": "Block entire domain",
+  "confirmations.domain_block.confirm": "Block server",
   "confirmations.domain_block.message": "Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.",
   "confirmations.edit.confirm": "Edit",
   "confirmations.edit.message": "Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?",
   "confirmations.logout.confirm": "Log out",
   "confirmations.logout.message": "Are you sure you want to log out?",
   "confirmations.mute.confirm": "Mute",
-  "confirmations.mute.explanation": "This will hide posts from them and posts mentioning them, but it will still allow them to see your posts and follow you.",
-  "confirmations.mute.message": "Are you sure you want to mute {name}?",
   "confirmations.redraft.confirm": "Delete & redraft",
   "confirmations.redraft.message": "Are you sure you want to delete this post and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.",
   "confirmations.reply.confirm": "Reply",
@@ -205,6 +209,14 @@
   "dismissable_banner.explore_statuses": "These are posts from across the social web that are gaining traction today. Newer posts with more boosts and favorites are ranked higher.",
   "dismissable_banner.explore_tags": "These are hashtags that are gaining traction on the social web today. Hashtags that are used by more different people are ranked higher.",
   "dismissable_banner.public_timeline": "These are the most recent public posts from people on the social web that people on {domain} follow.",
+  "domain_block_modal.block": "Block server",
+  "domain_block_modal.block_account_instead": "Block @{name} instead",
+  "domain_block_modal.they_can_interact_with_old_posts": "People from this server can interact with your old posts.",
+  "domain_block_modal.they_cant_follow": "Nobody from this server can follow you.",
+  "domain_block_modal.they_wont_know": "They won't know they've been blocked.",
+  "domain_block_modal.title": "Block domain?",
+  "domain_block_modal.you_will_lose_followers": "All your followers from this server will be removed.",
+  "domain_block_modal.you_wont_see_posts": "You won't see posts or notifications from users on this server.",
   "domain_pill.activitypub_lets_connect": "It lets you connect and interact with people not just on Mastodon, but across different social apps too.",
   "domain_pill.activitypub_like_language": "ActivityPub is like the language Mastodon speaks with other social networks.",
   "domain_pill.server": "Server",
@@ -415,9 +427,15 @@
   "loading_indicator.label": "Loading…",
   "media_gallery.toggle_visible": "{number, plural, one {Hide image} other {Hide images}}",
   "moved_to_account_banner.text": "Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.",
-  "mute_modal.duration": "Duration",
-  "mute_modal.hide_notifications": "Hide notifications from this user?",
-  "mute_modal.indefinite": "Indefinite",
+  "mute_modal.hide_from_notifications": "Hide from notifications",
+  "mute_modal.hide_options": "Hide options",
+  "mute_modal.indefinite": "Until I unmute them",
+  "mute_modal.show_options": "Show options",
+  "mute_modal.they_can_mention_and_follow": "They can mention and follow you, but you won't see them.",
+  "mute_modal.they_wont_know": "They won't know they've been muted.",
+  "mute_modal.title": "Mute user?",
+  "mute_modal.you_wont_see_mentions": "You won't see posts that mention them.",
+  "mute_modal.you_wont_see_posts": "They can still see your posts, but you won't see theirs.",
   "navigation_bar.about": "About",
   "navigation_bar.advanced_interface": "Open in advanced web interface",
   "navigation_bar.blocks": "Blocked users",
diff --git a/app/javascript/mastodon/reducers/blocks.js b/app/javascript/mastodon/reducers/blocks.js
deleted file mode 100644
index 1b65071634fb16..00000000000000
--- a/app/javascript/mastodon/reducers/blocks.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Immutable from 'immutable';
-
-import {
-  BLOCKS_INIT_MODAL,
-} from '../actions/blocks';
-
-const initialState = Immutable.Map({
-  new: Immutable.Map({
-    account_id: null,
-  }),
-});
-
-export default function mutes(state = initialState, action) {
-  switch (action.type) {
-  case BLOCKS_INIT_MODAL:
-    return state.withMutations((state) => {
-      state.setIn(['new', 'account_id'], action.account.get('id'));
-    });
-  default:
-    return state;
-  }
-}
diff --git a/app/javascript/mastodon/reducers/index.ts b/app/javascript/mastodon/reducers/index.ts
index 51a76d191e57d3..3d42cc83f82b80 100644
--- a/app/javascript/mastodon/reducers/index.ts
+++ b/app/javascript/mastodon/reducers/index.ts
@@ -7,7 +7,6 @@ import { accountsReducer } from './accounts';
 import accounts_map from './accounts_map';
 import alerts from './alerts';
 import announcements from './announcements';
-import blocks from './blocks';
 import boosts from './boosts';
 import compose from './compose';
 import contexts from './contexts';
@@ -26,7 +25,6 @@ import markers from './markers';
 import media_attachments from './media_attachments';
 import meta from './meta';
 import { modalReducer } from './modal';
-import mutes from './mutes';
 import { notificationPolicyReducer } from './notification_policy';
 import { notificationRequestsReducer } from './notification_requests';
 import notifications from './notifications';
@@ -62,8 +60,6 @@ const reducers = {
   relationships: relationshipsReducer,
   settings,
   push_notifications,
-  mutes,
-  blocks,
   boosts,
   server,
   contexts,
diff --git a/app/javascript/mastodon/reducers/mutes.js b/app/javascript/mastodon/reducers/mutes.js
deleted file mode 100644
index a9eb61ff834cbc..00000000000000
--- a/app/javascript/mastodon/reducers/mutes.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Immutable from 'immutable';
-
-import {
-  MUTES_INIT_MODAL,
-  MUTES_TOGGLE_HIDE_NOTIFICATIONS,
-  MUTES_CHANGE_DURATION,
-} from '../actions/mutes';
-
-const initialState = Immutable.Map({
-  new: Immutable.Map({
-    account: null,
-    notifications: true,
-    duration: 0,
-  }),
-});
-
-export default function mutes(state = initialState, action) {
-  switch (action.type) {
-  case MUTES_INIT_MODAL:
-    return state.withMutations((state) => {
-      state.setIn(['new', 'account'], action.account);
-      state.setIn(['new', 'notifications'], true);
-    });
-  case MUTES_TOGGLE_HIDE_NOTIFICATIONS:
-    return state.updateIn(['new', 'notifications'], (old) => !old);
-  case MUTES_CHANGE_DURATION:
-    return state.setIn(['new', 'duration'], Number(action.duration));
-  default:
-    return state;
-  }
-}
diff --git a/app/javascript/material-icons/400-24px/domain_disabled-fill.svg b/app/javascript/material-icons/400-24px/domain_disabled-fill.svg
new file mode 100644
index 00000000000000..2f16593d38e5fe
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/domain_disabled-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m880-194-80-80v-326H474l-74-74v-86h-86l-80-80h246v160h400v486ZM820-28l-94-92H80v-648l-52-52 56-56L876-84l-56 56ZM160-200h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 320h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 160h166l-80-80h-86v80Zm240-240h-80v-80h80v80Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/domain_disabled.svg b/app/javascript/material-icons/400-24px/domain_disabled.svg
new file mode 100644
index 00000000000000..2f16593d38e5fe
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/domain_disabled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m880-194-80-80v-326H474l-74-74v-86h-86l-80-80h246v160h400v486ZM820-28l-94-92H80v-648l-52-52 56-56L876-84l-56 56ZM160-200h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 320h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 160h166l-80-80h-86v80Zm240-240h-80v-80h80v80Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/history-fill.svg b/app/javascript/material-icons/400-24px/history-fill.svg
new file mode 100644
index 00000000000000..2d8124b474acac
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/history-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/history.svg b/app/javascript/material-icons/400-24px/history.svg
new file mode 100644
index 00000000000000..2d8124b474acac
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/history.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/person_remove-fill.svg b/app/javascript/material-icons/400-24px/person_remove-fill.svg
new file mode 100644
index 00000000000000..239c7a49dcb7c0
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/person_remove-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-520v-80h240v80H640Zm-280 40q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/person_remove.svg b/app/javascript/material-icons/400-24px/person_remove.svg
new file mode 100644
index 00000000000000..725da3649b62a3
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/person_remove.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-520v-80h240v80H640Zm-280 40q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/packs/public.jsx b/app/javascript/packs/public.jsx
deleted file mode 100644
index 661a41ee1d3753..00000000000000
--- a/app/javascript/packs/public.jsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import { createRoot }  from 'react-dom/client';
-
-import './public-path';
-
-import { IntlMessageFormat }  from 'intl-messageformat';
-import { defineMessages } from 'react-intl';
-
-import Rails from '@rails/ujs';
-import axios from 'axios';
-import { throttle } from 'lodash';
-
-import { start } from '../mastodon/common';
-import { timeAgoString }  from '../mastodon/components/relative_timestamp';
-import emojify  from '../mastodon/features/emoji/emoji';
-import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
-import { loadLocale, getLocale } from '../mastodon/locales';
-import { loadPolyfills } from '../mastodon/polyfills';
-import ready from '../mastodon/ready';
-
-import 'cocoon-js-vanilla';
-
-start();
-
-const messages = defineMessages({
-  usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' },
-  passwordExceedsLength: { id: 'password_confirmation.exceeds_maxlength', defaultMessage: 'Password confirmation exceeds the maximum password length' },
-  passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' },
-});
-
-function loaded() {
-  const { messages: localeData } = getLocale();
-
-  const locale = document.documentElement.lang;
-
-  const dateTimeFormat = new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-  });
-
-  const dateFormat = new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    timeFormat: false,
-  });
-
-  const timeFormat = new Intl.DateTimeFormat(locale, {
-    timeStyle: 'short',
-  });
-
-  const formatMessage = ({ id, defaultMessage }, values) => {
-    const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale);
-    return messageFormat.format(values);
-  };
-
-  document.querySelectorAll('.emojify').forEach((content) => {
-    content.innerHTML = emojify(content.innerHTML);
-  });
-
-  document.querySelectorAll('time.formatted').forEach((content) => {
-    const datetime = new Date(content.getAttribute('datetime'));
-    const formattedDate = dateTimeFormat.format(datetime);
-
-    content.title = formattedDate;
-    content.textContent = formattedDate;
-  });
-
-  const isToday = date => {
-    const today = new Date();
-
-    return date.getDate() === today.getDate() &&
-      date.getMonth() === today.getMonth() &&
-      date.getFullYear() === today.getFullYear();
-  };
-  const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale);
-
-  document.querySelectorAll('time.relative-formatted').forEach((content) => {
-    const datetime = new Date(content.getAttribute('datetime'));
-
-    let formattedContent;
-
-    if (isToday(datetime)) {
-      const formattedTime = timeFormat.format(datetime);
-
-      formattedContent = todayFormat.format({ time: formattedTime });
-    } else {
-      formattedContent = dateFormat.format(datetime);
-    }
-
-    content.title = formattedContent;
-    content.textContent = formattedContent;
-  });
-
-  document.querySelectorAll('time.time-ago').forEach((content) => {
-    const datetime = new Date(content.getAttribute('datetime'));
-    const now      = new Date();
-
-    const timeGiven = content.getAttribute('datetime').includes('T');
-    content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime);
-    content.textContent = timeAgoString({
-      formatMessage,
-      formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
-    }, datetime, now, now.getFullYear(), timeGiven);
-  });
-
-  const reactComponents = document.querySelectorAll('[data-component]');
-
-  if (reactComponents.length > 0) {
-    import(/* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container')
-      .then(({ default: MediaContainer }) => {
-        reactComponents.forEach((component) => {
-          Array.from(component.children).forEach((child) => {
-            component.removeChild(child);
-          });
-        });
-
-        const content = document.createElement('div');
-
-        const root = createRoot(content);
-        root.render(<MediaContainer locale={locale} components={reactComponents} />);
-        document.body.appendChild(content);
-      })
-      .catch(error => {
-        console.error(error);
-      });
-  }
-
-  Rails.delegate(document, '#user_account_attributes_username', 'input', throttle(({ target }) => {
-    if (target.value && target.value.length > 0) {
-      axios.get('/api/v1/accounts/lookup', { params: { acct: target.value } }).then(() => {
-        target.setCustomValidity(formatMessage(messages.usernameTaken));
-      }).catch(() => {
-        target.setCustomValidity('');
-      });
-    } else {
-      target.setCustomValidity('');
-    }
-  }, 500, { leading: false, trailing: true }));
-
-  Rails.delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
-    const password = document.getElementById('user_password');
-    const confirmation = document.getElementById('user_password_confirmation');
-    if (!confirmation) return;
-
-    if (confirmation.value && confirmation.value.length > password.maxLength) {
-      confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength));
-    } else if (password.value && password.value !== confirmation.value) {
-      confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch));
-    } else {
-      confirmation.setCustomValidity('');
-    }
-  });
-
-  Rails.delegate(document, '.status__content__spoiler-link', 'click', function() {
-    const statusEl = this.parentNode.parentNode;
-
-    if (statusEl.dataset.spoiler === 'expanded') {
-      statusEl.dataset.spoiler = 'folded';
-      this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format();
-    } else {
-      statusEl.dataset.spoiler = 'expanded';
-      this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format();
-    }
-
-    return false;
-  });
-
-  document.querySelectorAll('.status__content__spoiler-link').forEach((spoilerLink) => {
-    const statusEl = spoilerLink.parentNode.parentNode;
-    const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
-    spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
-  });
-}
-
-const toggleSidebar = () => {
-  const sidebar = document.querySelector('.sidebar ul');
-  const toggleButton = document.querySelector('.sidebar__toggle__icon');
-
-  if (sidebar.classList.contains('visible')) {
-    document.body.style.overflow = null;
-    toggleButton.setAttribute('aria-expanded', 'false');
-  } else {
-    document.body.style.overflow = 'hidden';
-    toggleButton.setAttribute('aria-expanded', 'true');
-  }
-
-  toggleButton.classList.toggle('active');
-  sidebar.classList.toggle('visible');
-};
-
-Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => {
-  toggleSidebar();
-});
-
-Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
-  if (e.key === ' ' || e.key === 'Enter') {
-    e.preventDefault();
-    toggleSidebar();
-  }
-});
-
-Rails.delegate(document, '.custom-emoji', 'mouseover', ({ target }) => target.src = target.getAttribute('data-original'));
-Rails.delegate(document, '.custom-emoji', 'mouseout', ({ target }) => target.src = target.getAttribute('data-static'));
-
-// Empty the honeypot fields in JS in case something like an extension
-// automatically filled them.
-Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
-  ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => {
-    const field = document.getElementById(id);
-    if (field) {
-      field.value = '';
-    }
-  });
-});
-
-function main() {
-  ready(loaded);
-}
-
-loadPolyfills()
-  .then(loadLocale)
-  .then(main)
-  .then(loadKeyboardExtensions)
-  .catch(error => {
-    console.error(error);
-  });
diff --git a/app/javascript/packs/public.tsx b/app/javascript/packs/public.tsx
new file mode 100644
index 00000000000000..17befbd2242fd2
--- /dev/null
+++ b/app/javascript/packs/public.tsx
@@ -0,0 +1,359 @@
+import { createRoot } from 'react-dom/client';
+
+import './public-path';
+
+import { IntlMessageFormat } from 'intl-messageformat';
+import type { MessageDescriptor, PrimitiveType } from 'react-intl';
+import { defineMessages } from 'react-intl';
+
+import Rails from '@rails/ujs';
+import axios from 'axios';
+import { throttle } from 'lodash';
+
+import { start } from '../mastodon/common';
+import { timeAgoString } from '../mastodon/components/relative_timestamp';
+import emojify from '../mastodon/features/emoji/emoji';
+import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
+import { loadLocale, getLocale } from '../mastodon/locales';
+import { loadPolyfills } from '../mastodon/polyfills';
+import ready from '../mastodon/ready';
+
+import 'cocoon-js-vanilla';
+
+start();
+
+const messages = defineMessages({
+  usernameTaken: {
+    id: 'username.taken',
+    defaultMessage: 'That username is taken. Try another',
+  },
+  passwordExceedsLength: {
+    id: 'password_confirmation.exceeds_maxlength',
+    defaultMessage: 'Password confirmation exceeds the maximum password length',
+  },
+  passwordDoesNotMatch: {
+    id: 'password_confirmation.mismatching',
+    defaultMessage: 'Password confirmation does not match',
+  },
+});
+
+function loaded() {
+  const { messages: localeData } = getLocale();
+
+  const locale = document.documentElement.lang;
+
+  const dateTimeFormat = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+
+  const dateFormat = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+
+  const timeFormat = new Intl.DateTimeFormat(locale, {
+    timeStyle: 'short',
+  });
+
+  const formatMessage = (
+    { id, defaultMessage }: MessageDescriptor,
+    values?: Record<string, PrimitiveType>,
+  ) => {
+    let message: string | undefined = undefined;
+
+    if (id) message = localeData[id];
+
+    if (!message) message = defaultMessage as string;
+
+    const messageFormat = new IntlMessageFormat(message, locale);
+    return messageFormat.format(values) as string;
+  };
+
+  document.querySelectorAll('.emojify').forEach((content) => {
+    content.innerHTML = emojify(content.innerHTML);
+  });
+
+  document
+    .querySelectorAll<HTMLTimeElement>('time.formatted')
+    .forEach((content) => {
+      const datetime = new Date(content.dateTime);
+      const formattedDate = dateTimeFormat.format(datetime);
+
+      content.title = formattedDate;
+      content.textContent = formattedDate;
+    });
+
+  const isToday = (date: Date) => {
+    const today = new Date();
+
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  };
+  const todayFormat = new IntlMessageFormat(
+    localeData['relative_format.today'] || 'Today at {time}',
+    locale,
+  );
+
+  document
+    .querySelectorAll<HTMLTimeElement>('time.relative-formatted')
+    .forEach((content) => {
+      const datetime = new Date(content.dateTime);
+
+      let formattedContent: string;
+
+      if (isToday(datetime)) {
+        const formattedTime = timeFormat.format(datetime);
+
+        formattedContent = todayFormat.format({
+          time: formattedTime,
+        }) as string;
+      } else {
+        formattedContent = dateFormat.format(datetime);
+      }
+
+      content.title = formattedContent;
+      content.textContent = formattedContent;
+    });
+
+  document
+    .querySelectorAll<HTMLTimeElement>('time.time-ago')
+    .forEach((content) => {
+      const datetime = new Date(content.dateTime);
+      const now = new Date();
+
+      const timeGiven = content.dateTime.includes('T');
+      content.title = timeGiven
+        ? dateTimeFormat.format(datetime)
+        : dateFormat.format(datetime);
+      content.textContent = timeAgoString(
+        {
+          formatMessage,
+          formatDate: (date: Date, options) =>
+            new Intl.DateTimeFormat(locale, options).format(date),
+        },
+        datetime,
+        now.getTime(),
+        now.getFullYear(),
+        timeGiven,
+      );
+    });
+
+  const reactComponents = document.querySelectorAll('[data-component]');
+
+  if (reactComponents.length > 0) {
+    import(
+      /* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container'
+    )
+      .then(({ default: MediaContainer }) => {
+        reactComponents.forEach((component) => {
+          Array.from(component.children).forEach((child) => {
+            component.removeChild(child);
+          });
+        });
+
+        const content = document.createElement('div');
+
+        const root = createRoot(content);
+        root.render(
+          <MediaContainer locale={locale} components={reactComponents} />,
+        );
+        document.body.appendChild(content);
+
+        return true;
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  Rails.delegate(
+    document,
+    'input#user_account_attributes_username',
+    'input',
+    throttle(
+      ({ target }) => {
+        if (!(target instanceof HTMLInputElement)) return;
+
+        if (target.value && target.value.length > 0) {
+          axios
+            .get('/api/v1/accounts/lookup', { params: { acct: target.value } })
+            .then(() => {
+              target.setCustomValidity(formatMessage(messages.usernameTaken));
+              return true;
+            })
+            .catch(() => {
+              target.setCustomValidity('');
+            });
+        } else {
+          target.setCustomValidity('');
+        }
+      },
+      500,
+      { leading: false, trailing: true },
+    ),
+  );
+
+  Rails.delegate(
+    document,
+    '#user_password,#user_password_confirmation',
+    'input',
+    () => {
+      const password = document.querySelector<HTMLInputElement>(
+        'input#user_password',
+      );
+      const confirmation = document.querySelector<HTMLInputElement>(
+        'input#user_password_confirmation',
+      );
+      if (!confirmation || !password) return;
+
+      if (
+        confirmation.value &&
+        confirmation.value.length > password.maxLength
+      ) {
+        confirmation.setCustomValidity(
+          formatMessage(messages.passwordExceedsLength),
+        );
+      } else if (password.value && password.value !== confirmation.value) {
+        confirmation.setCustomValidity(
+          formatMessage(messages.passwordDoesNotMatch),
+        );
+      } else {
+        confirmation.setCustomValidity('');
+      }
+    },
+  );
+
+  Rails.delegate(
+    document,
+    'button.status__content__spoiler-link',
+    'click',
+    function () {
+      if (!(this instanceof HTMLButtonElement)) return;
+
+      const statusEl = this.parentNode?.parentNode;
+
+      if (
+        !(
+          statusEl instanceof HTMLDivElement &&
+          statusEl.classList.contains('.status__content')
+        )
+      )
+        return;
+
+      if (statusEl.dataset.spoiler === 'expanded') {
+        statusEl.dataset.spoiler = 'folded';
+        this.textContent = new IntlMessageFormat(
+          localeData['status.show_more'] || 'Show more',
+          locale,
+        ).format() as string;
+      } else {
+        statusEl.dataset.spoiler = 'expanded';
+        this.textContent = new IntlMessageFormat(
+          localeData['status.show_less'] || 'Show less',
+          locale,
+        ).format() as string;
+      }
+    },
+  );
+
+  document
+    .querySelectorAll<HTMLButtonElement>('button.status__content__spoiler-link')
+    .forEach((spoilerLink) => {
+      const statusEl = spoilerLink.parentNode?.parentNode;
+
+      if (
+        !(
+          statusEl instanceof HTMLDivElement &&
+          statusEl.classList.contains('.status__content')
+        )
+      )
+        return;
+
+      const message =
+        statusEl.dataset.spoiler === 'expanded'
+          ? localeData['status.show_less'] || 'Show less'
+          : localeData['status.show_more'] || 'Show more';
+      spoilerLink.textContent = new IntlMessageFormat(
+        message,
+        locale,
+      ).format() as string;
+    });
+}
+
+const toggleSidebar = () => {
+  const sidebar = document.querySelector<HTMLUListElement>('.sidebar ul');
+  const toggleButton = document.querySelector<HTMLAnchorElement>(
+    'a.sidebar__toggle__icon',
+  );
+
+  if (!sidebar || !toggleButton) return;
+
+  if (sidebar.classList.contains('visible')) {
+    document.body.style.overflow = '';
+    toggleButton.setAttribute('aria-expanded', 'false');
+  } else {
+    document.body.style.overflow = 'hidden';
+    toggleButton.setAttribute('aria-expanded', 'true');
+  }
+
+  toggleButton.classList.toggle('active');
+  sidebar.classList.toggle('visible');
+};
+
+Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => {
+  toggleSidebar();
+});
+
+Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', (e) => {
+  if (e.key === ' ' || e.key === 'Enter') {
+    e.preventDefault();
+    toggleSidebar();
+  }
+});
+
+Rails.delegate(document, 'img.custom-emoji', 'mouseover', ({ target }) => {
+  if (target instanceof HTMLImageElement && target.dataset.original)
+    target.src = target.dataset.original;
+});
+Rails.delegate(document, 'img.custom-emoji', 'mouseout', ({ target }) => {
+  if (target instanceof HTMLImageElement && target.dataset.static)
+    target.src = target.dataset.static;
+});
+
+// Empty the honeypot fields in JS in case something like an extension
+// automatically filled them.
+Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
+  [
+    'user_website',
+    'user_confirm_password',
+    'registration_user_website',
+    'registration_user_confirm_password',
+  ].forEach((id) => {
+    const field = document.querySelector<HTMLInputElement>(`input#${id}`);
+    if (field) {
+      field.value = '';
+    }
+  });
+});
+
+function main() {
+  ready(loaded).catch((error) => {
+    console.error(error);
+  });
+}
+
+loadPolyfills()
+  .then(loadLocale)
+  .then(main)
+  .then(loadKeyboardExtensions)
+  .catch((error) => {
+    console.error(error);
+  });
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7af06e440bd46d..ca87cbdaac92dd 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -106,17 +106,17 @@
   }
 
   &.button-secondary {
-    color: $ui-button-secondary-color;
+    color: $highlight-text-color;
     background: transparent;
     padding: 6px 17px;
-    border: 1px solid $ui-button-secondary-border-color;
+    border: 1px solid $highlight-text-color;
 
     &:active,
     &:focus,
     &:hover {
-      border-color: $ui-button-secondary-focus-background-color;
-      color: $ui-button-secondary-focus-color;
-      background-color: $ui-button-secondary-focus-background-color;
+      border-color: lighten($highlight-text-color, 4%);
+      color: lighten($highlight-text-color, 4%);
+      background-color: transparent;
       text-decoration: none;
     }
 
@@ -5480,6 +5480,10 @@ a.status-card {
   pointer-events: auto;
   user-select: text;
   display: flex;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    margin-top: auto;
+  }
 }
 
 .video-modal .video-player {
@@ -5811,6 +5815,154 @@ a.status-card {
   margin-inline-start: 10px;
 }
 
+.safety-action-modal {
+  width: 600px;
+  flex-direction: column;
+
+  &__top,
+  &__bottom {
+    display: flex;
+    gap: 8px;
+    padding: 24px;
+    flex-direction: column;
+    background: var(--modal-background-color);
+    backdrop-filter: var(--background-filter);
+    border: 1px solid var(--modal-border-color);
+  }
+
+  &__top {
+    border-radius: 16px 16px 0 0;
+    border-bottom: 0;
+    gap: 16px;
+  }
+
+  &__bottom {
+    border-radius: 0 0 16px 16px;
+    border-top: 0;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-radius: 0;
+      border-bottom: 0;
+      padding-bottom: 32px;
+    }
+  }
+
+  &__header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    font-size: 14px;
+    line-height: 20px;
+    color: $darker-text-color;
+
+    &__icon {
+      border-radius: 64px;
+      background: $ui-highlight-color;
+      color: $white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    h1 {
+      font-size: 22px;
+      line-height: 28px;
+      color: $primary-text-color;
+    }
+  }
+
+  &__bullet-points {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 16px;
+    line-height: 24px;
+
+    & > div {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+    }
+
+    &__icon {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &__field-group {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      font-size: 16px;
+      line-height: 24px;
+      height: 32px;
+      padding: 0 12px;
+    }
+  }
+
+  &__caveats {
+    font-size: 14px;
+    padding: 0 12px;
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
+  &__bottom {
+    padding-top: 0;
+
+    &__collapsible {
+      display: none;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &.active {
+      background: var(--modal-background-variant-color);
+      padding-top: 24px;
+
+      .safety-action-modal__bottom__collapsible {
+        display: flex;
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: flex-end;
+
+    .link-button {
+      padding: 10px 12px;
+      font-weight: 600;
+    }
+  }
+}
+
 .boost-modal,
 .confirmation-modal,
 .report-modal,
@@ -7113,7 +7265,8 @@ a.status-card {
   display: flex;
 }
 
-.radio-button {
+.radio-button,
+.check-box {
   font-size: 14px;
   position: relative;
   display: inline-flex;
@@ -7132,17 +7285,19 @@ a.status-card {
   }
 
   &__input {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     border: 2px solid $secondary-text-color;
     box-sizing: border-box;
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
     flex: 0 0 auto;
     border-radius: 50%;
 
     &.checked {
-      border-color: $secondary-text-color;
+      border-color: $ui-highlight-color;
 
       &::before {
         position: absolute;
@@ -7151,9 +7306,31 @@ a.status-card {
         content: '';
         display: block;
         border-radius: 50%;
-        width: 10px;
-        height: 10px;
-        background: $secondary-text-color;
+        width: 12px;
+        height: 12px;
+        background: $ui-highlight-color;
+      }
+    }
+
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.check-box {
+  &__input {
+    width: 18px;
+    height: 18px;
+    border-radius: 2px;
+
+    &.checked {
+      background: $ui-highlight-color;
+      color: $white;
+
+      &::before {
+        display: none;
       }
     }
   }
@@ -8632,22 +8809,36 @@ noscript {
   }
 }
 
+.safety-action-modal,
 .interaction-modal {
   max-width: 90vw;
   width: 600px;
-  background: var(--modal-background-color);
-  border: 1px solid var(--modal-border-color);
-  border-radius: 8px;
+}
+
+.interaction-modal {
   overflow: visible;
   position: relative;
   display: block;
-  padding: 40px;
+  border-radius: 16px;
+  background: var(--modal-background-color);
+  backdrop-filter: var(--background-filter);
+  border: 1px solid var(--modal-border-color);
+  padding: 24px;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-radius: 16px 16px 0 0;
+    border-bottom: 0;
+    padding-bottom: 32px;
+  }
 
   h3 {
     font-size: 22px;
     line-height: 33px;
     font-weight: 700;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
   }
 
   p {
@@ -8668,7 +8859,9 @@ noscript {
 
   &__icon {
     color: $highlight-text-color;
-    margin: 0 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__lead {
@@ -8701,6 +8894,7 @@ noscript {
         border: 0;
         padding: 15px - 4px 15px - 6px;
         flex: 1 1 auto;
+        min-width: 0;
 
         &::placeholder {
           color: lighten($darker-text-color, 4%);
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 2b2a2957914f5c..58b9dd9b61b101 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -46,10 +46,10 @@ $ui-button-focus-background-color: $blurple-600 !default;
 $ui-button-focus-outline-color: $blurple-400 !default;
 $ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
 
-$ui-button-secondary-color: $grey-100 !default;
-$ui-button-secondary-border-color: $grey-100 !default;
-$ui-button-secondary-focus-background-color: $grey-600 !default;
-$ui-button-secondary-focus-color: $white !default;
+$ui-button-secondary-color: $blurple-500 !default;
+$ui-button-secondary-border-color: $blurple-500 !default;
+$ui-button-secondary-focus-border-color: $blurple-300 !default;
+$ui-button-secondary-focus-color: $blurple-300 !default;
 
 $ui-button-tertiary-color: $blurple-300 !default;
 $ui-button-tertiary-border-color: $blurple-300 !default;
@@ -98,7 +98,8 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
   --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
     0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
-  --modal-background-color: #{darken($ui-base-color, 4%)};
+  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
+  --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
   --modal-border-color: #{lighten($ui-base-color, 4%)};
   --background-border-color: #{lighten($ui-base-color, 4%)};
   --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
diff --git a/lib/mastodon/cli/search.rb b/lib/mastodon/cli/search.rb
index 5901c07776b337..3a73c9c04741e3 100644
--- a/lib/mastodon/cli/search.rb
+++ b/lib/mastodon/cli/search.rb
@@ -100,6 +100,14 @@ def deploy
       progress.finish
 
       say("Indexed #{added} records, de-indexed #{removed}", :green, true)
+    rescue Elasticsearch::Transport::Transport::ServerError => e
+      fail_with_message <<~ERROR
+        There was an issue connecting to the search server. Make sure the
+        server is configured and running correctly, and that the environment
+        variable settings match what the server is expecting.
+
+        #{e.message}
+      ERROR
     end
 
     private
diff --git a/spec/lib/mastodon/cli/search_spec.rb b/spec/lib/mastodon/cli/search_spec.rb
index 8cce2c6ee22a96..ed3789c3e7d282 100644
--- a/spec/lib/mastodon/cli/search_spec.rb
+++ b/spec/lib/mastodon/cli/search_spec.rb
@@ -33,6 +33,17 @@
       end
     end
 
+    context 'when server communication raises an error' do
+      let(:options) { { reset_chewy: true } }
+
+      before { allow(Chewy::Stash::Specification).to receive(:reset!).and_raise(Elasticsearch::Transport::Transport::Errors::InternalServerError) }
+
+      it 'Exits with error message' do
+        expect { subject }
+          .to raise_error(Thor::Error, /issue connecting to the search/)
+      end
+    end
+
     context 'without options' do
       before { stub_search_indexes }