diff --git a/app/assets/icons/COPYING.md b/app/assets/icons/COPYING.md
index 5e84c0b5c..1dcc928d9 100644
--- a/app/assets/icons/COPYING.md
+++ b/app/assets/icons/COPYING.md
@@ -1,6 +1,5 @@
 # Custom icons
 
-- fediverse.svg - Modified from Wikipedia, CC0  
 - verified.svg - Created by Alex Gleason. CC0
 
 Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg  
diff --git a/app/assets/icons/fediverse.svg b/app/assets/icons/fediverse.svg
deleted file mode 100644
index 4cd3cb938..000000000
--- a/app/assets/icons/fediverse.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792" fill="currentColor">
-    <path d="M 343.16176,591.34767 A 171.09965,171.09965 0 0 1 163.0094,752.88799 171.09965,171.09965 0 0 1 1.4690156,572.73567 171.09965,171.09965 0 0 1 181.62138,411.19523 171.09965,171.09965 0 0 1 343.16176,591.34767 Z M 482.96755,1485.6494 A 171.09965,171.09965 0 0 1 302.81519,1647.1895 171.09965,171.09965 0 0 1 141.2748,1467.0372 171.09965,171.09965 0 0 1 321.42717,1305.4967 171.09965,171.09965 0 0 1 482.96755,1485.6494 Z m 893.94285,143.4473 a 171.09965,171.09965 0 0 1 -180.1523,161.5405 171.09965,171.09965 0 0 1 -161.5404,-180.1524 171.09965,171.09965 0 0 1 180.1524,-161.5405 171.09965,171.09965 0 0 1 161.5403,180.1524 z M 1789.5918,823.45087 A 171.09965,171.09965 0 0 1 1609.4395,984.99118 171.09965,171.09965 0 0 1 1447.899,804.83886 171.09965,171.09965 0 0 1 1628.0513,643.29854 171.09965,171.09965 0 0 1 1789.5918,823.45087 Z M 1150.7,182.08661 A 171.09965,171.09965 0 0 1 970.54747,343.627 171.09965,171.09965 0 0 1 809.00715,163.47462 171.09965,171.09965 0 0 1 989.15948,1.9342312 171.09965,171.09965 0 0 1 1150.7,182.08661 Z m -792.52346,371.6819 a 188.20963,188.20963 0 0 1 2.07029,38.5086 188.20963,188.20963 0 0 1 -19.56107,73.71432 l 276.93395,44.47923 54.4306,-106.2947 z m 474.63645,76.2221 -54.43595,106.30538 654.33596,105.0888 a 188.20963,188.20963 0 0 1 -1.8996,-37.47876 188.20963,188.20963 0 0 1 20.0788,-74.64799 z M 1065.1875,340.27205 a 188.20963,188.20963 0 0 1 -95.56964,20.44149 188.20963,188.20963 0 0 1 -16.47175,-1.72883 l 43.21482,276.72059 117.91607,18.92069 z m -43.7109,456.30786 102.1755,654.25059 a 188.20963,188.20963 0 0 1 92.651,-18.9688 188.20963,188.20963 0 0 1 19.6891,2.1609 L 1139.398,815.49535 Z M 794.34712,203.1417 306.48853,450.37661 a 188.20963,188.20963 0 0 1 51.34118,101.31626 L 845.683,304.44741 A 188.20963,188.20963 0 0 1 794.34712,203.1417 Z m 352.24368,56.54894 a 188.20963,188.20963 0 0 1 -80.5121,80.13321 l 385.9286,387.41724 a 188.20963,188.20963 0 0 1 80.5069,-80.13321 z m 339.8804,688.09027 -249.2037,486.50849 a 188.20963,188.20963 0 0 1 101.0656,51.8588 L 1587.5315,999.64494 A 188.20963,188.20963 0 0 1 1486.4712,947.78091 Z M 498.08153,1448.6696 a 188.20963,188.20963 0 0 1 1.9689,37.9111 188.20963,188.20963 0 0 1 -19.85455,74.2528 l 539.90952,86.6376 a 188.20963,188.20963 0 0 1 -1.9742,-37.9162 188.20963,188.20963 0 0 1 19.8598,-74.2477 z M 256.10246,750.31321 a 188.20963,188.20963 0 0 1 -94.02233,19.65712 188.20963,188.20963 0 0 1 -18.16843,-1.89976 l 84.42322,540.00023 a 188.20963,188.20963 0 0 1 94.02233,-19.6571 188.20963,188.20963 0 0 1 18.15773,1.9001 z M 847.58784,306.427 562.15394,863.6618 646.42776,948.26106 948.64274,358.28043 A 188.20963,188.20963 0 0 1 847.58784,306.427 Z m -359.67106,702.1662 -144.57913,282.2484 a 188.20963,188.20963 0 0 1 101.04426,51.8481 l 127.80337,-249.5025 z m 945.31912,-164.10293 -250.1803,126.78949 18.446,117.99084 283.07,-143.4639 A 188.20963,188.20963 0 0 1 1433.2359,844.49027 Z M 1037.8202,1044.882 446.28679,1344.6691 a 188.20963,188.20963 0 0 1 51.34651,101.3273 l 558.6328,-283.1181 z M 339.05298,668.95274 a 188.20963,188.20963 0 0 1 -80.49604,80.12252 l 441.91192,443.63544 106.54017,-53.9931 z m 582.89469,585.14656 -106.54012,53.993 223.91735,224.7922 a 188.20963,188.20963 0 0 1 80.5121,-80.1332 z" fill-opacity=".996"/>
-</svg>
diff --git a/app/soapbox/components/__mocks__/react-inlinesvg.tsx b/app/soapbox/components/__mocks__/react-inlinesvg.tsx
index 367ec0e33..1d4fde154 100644
--- a/app/soapbox/components/__mocks__/react-inlinesvg.tsx
+++ b/app/soapbox/components/__mocks__/react-inlinesvg.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 interface IInlineSVG {
   loader?: JSX.Element,
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 006584e8d..70ab2cfc5 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
@@ -199,7 +199,7 @@ const Account = ({
                 title={account.acct}
                 onClick={(event: React.MouseEvent) => event.stopPropagation()}
               >
-                <div className='flex items-center space-x-1 flex-grow' style={style}>
+                <HStack space={1} alignItems='center' grow style={style}>
                   <Text
                     size='sm'
                     weight='semibold'
@@ -208,7 +208,7 @@ const Account = ({
                   />
 
                   {account.verified && <VerificationBadge />}
-                </div>
+                </HStack>
               </LinkEl>
             </ProfilePopper>
 
@@ -255,7 +255,7 @@ const Account = ({
                 <Text
                   size='sm'
                   dangerouslySetInnerHTML={{ __html: account.note_emojified }}
-                  className='mr-2'
+                  className='mr-2 rtl:ml-2 rtl:mr-0'
                 />
               )}
             </Stack>
diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx
index c38cc8c5b..24253d7df 100644
--- a/app/soapbox/components/copyable-input.tsx
+++ b/app/soapbox/components/copyable-input.tsx
@@ -28,7 +28,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
         ref={input}
         type='text'
         value={value}
-        className='rounded-r-none'
+        className='rounded-r-none rtl:rounded-l-none rtl:rounded-r-lg'
         outerClassName='flex-grow'
         onClick={selectInput}
         readOnly
@@ -36,7 +36,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
 
       <Button
         theme='primary'
-        className='mt-1 h-full rounded-l-none rounded-r-lg'
+        className='mt-1 h-full rounded-l-none rounded-r-lg rtl:rounded-l-lg rtl:rounded-r-none'
         onClick={selectInput}
       >
         <FormattedMessage id='input.copy' defaultMessage='Copy' />
diff --git a/app/soapbox/components/display-name.tsx b/app/soapbox/components/display-name.tsx
index 8fd2bfa53..12a28b382 100644
--- a/app/soapbox/components/display-name.tsx
+++ b/app/soapbox/components/display-name.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import { useSoapboxConfig } from 'soapbox/hooks';
@@ -7,16 +7,18 @@ import { getAcct } from '../utils/accounts';
 
 import Icon from './icon';
 import RelativeTimestamp from './relative-timestamp';
+import { HStack, Text } from './ui';
 import VerificationBadge from './verification-badge';
 
 import type { Account } from 'soapbox/types/entities';
 
 interface IDisplayName {
   account: Account
+  withSuffix?: boolean
   withDate?: boolean
 }
 
-const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = false }) => {
+const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = true, withDate = false }) => {
   const { displayFqn = false } = useSoapboxConfig();
   const { created_at: createdAt, verified } = account;
 
@@ -28,11 +30,17 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
   ) : null;
 
   const displayName = (
-    <span className='display-name__name'>
-      <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
+    <HStack space={1} alignItems='center' grow>
+      <Text
+        size='sm'
+        weight='semibold'
+        truncate
+        dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+      />
+
       {verified && <VerificationBadge />}
       {withDate && joinedAt}
-    </span>
+    </HStack>
   );
 
   const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);
@@ -42,7 +50,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
       <HoverRefWrapper accountId={account.get('id')} inline>
         {displayName}
       </HoverRefWrapper>
-      {suffix}
+      {withSuffix && suffix}
       {children}
     </span>
   );
diff --git a/app/soapbox/components/dropdown-menu.tsx b/app/soapbox/components/dropdown-menu.tsx
index 1e54bc4f6..202c43fa8 100644
--- a/app/soapbox/components/dropdown-menu.tsx
+++ b/app/soapbox/components/dropdown-menu.tsx
@@ -6,7 +6,7 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { IconButton, Counter } from 'soapbox/components/ui';
+import { Counter, IconButton } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import Motion from 'soapbox/features/ui/util/optional-motion';
 
@@ -196,7 +196,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           data-method={isLogout ? 'delete' : undefined}
           title={text}
         >
-          {icon && <SvgIcon src={icon} className='mr-3 h-5 w-5 flex-none' />}
+          {icon && <SvgIcon src={icon} className='mr-3 rtl:ml-3 rtl:mr-0 h-5 w-5 flex-none' />}
 
           <span className='truncate'>{text}</span>
 
@@ -264,6 +264,7 @@ export interface IDropdown extends RouteComponentProps {
   text?: string,
   onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
   children?: JSX.Element,
+  dropdownMenuStyle?: React.CSSProperties,
 }
 
 interface IDropdownState {
@@ -374,7 +375,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
   }
 
   render() {
-    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
+    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children, dropdownMenuStyle } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
@@ -408,7 +409,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
         )}
 
         <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
-          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
+          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} style={dropdownMenuStyle} />
         </Overlay>
       </>
     );
diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index 23a165fcb..cc528b194 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
 import { openModal } from 'soapbox/actions/modals';
-import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
+import { EmojiSelector } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 import { isUserTouching } from 'soapbox/is-mobile';
 import { getReactForStatus } from 'soapbox/utils/emoji-reacts';
diff --git a/app/soapbox/components/error-boundary.tsx b/app/soapbox/components/error-boundary.tsx
index 830f3e679..370472cb4 100644
--- a/app/soapbox/components/error-boundary.tsx
+++ b/app/soapbox/components/error-boundary.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import * as BuildConfig from 'soapbox/build-config';
-import { Text, Stack } from 'soapbox/components/ui';
+import { HStack, Text, Stack } from 'soapbox/components/ui';
 import { captureException } from 'soapbox/monitoring';
 import KVStore from 'soapbox/storage/kv-store';
 import sourceCode from 'soapbox/utils/code';
@@ -179,7 +179,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
         </main>
 
         <footer className='flex-shrink-0 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8'>
-          <nav className='flex justify-center space-x-4'>
+          <HStack justifyContent='center' space={4} element='nav'>
             {links.get('status') && (
               <>
                 <a href={links.get('status')} className='text-sm font-medium text-gray-700 dark:text-gray-600 hover:underline'>
@@ -205,7 +205,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
                 </a>
               </>
             )}
-          </nav>
+          </HStack>
         </footer>
       </div>
     );
diff --git a/app/soapbox/components/gdpr-banner.tsx b/app/soapbox/components/gdpr-banner.tsx
index 425376f95..94ea0cf59 100644
--- a/app/soapbox/components/gdpr-banner.tsx
+++ b/app/soapbox/components/gdpr-banner.tsx
@@ -31,7 +31,7 @@ const GdprBanner: React.FC = () => {
 
   return (
     <Banner theme='opaque' className={classNames('transition-transform', { 'translate-y-full': slideout })}>
-      <div className='flex flex-col space-y-4 lg:space-y-0 lg:space-x-4 lg:flex-row lg:items-center lg:justify-between'>
+      <div className='flex flex-col space-y-4 lg:space-y-0 lg:space-x-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between'>
         <Stack space={2}>
           <Text size='xl' weight='bold'>
             <FormattedMessage id='gdpr.title' defaultMessage='{siteTitle} uses cookies' values={{ siteTitle }} />
diff --git a/app/soapbox/components/helmet.tsx b/app/soapbox/components/helmet.tsx
index ba4a82fd3..d3a5bc021 100644
--- a/app/soapbox/components/helmet.tsx
+++ b/app/soapbox/components/helmet.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Helmet as ReactHelmet } from 'react-helmet';
 
 import { useAppSelector, useSettings } from 'soapbox/hooks';
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 18d9fd71f..510cbecb8 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -1,11 +1,11 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { SelectDropdown } from '../features/forms';
 
 import Icon from './icon';
-import { Select } from './ui';
+import { HStack, Select } from './ui';
 
 const List: React.FC = ({ children }) => (
   <div className='space-y-0.5'>{children}</div>
@@ -23,9 +23,15 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
   const id = uuidv4();
   const domId = `list-group-${id}`;
 
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onClick!();
+    }
+  };
+
   const Comp = onClick ? 'a' : 'div';
   const LabelComp = onClick || onSelect ? 'span' : 'label';
-  const linkProps = onClick || onSelect ? { onClick: onClick || onSelect } : {};
+  const linkProps = onClick || onSelect ? { onClick: onClick || onSelect, onKeyDown, tabIndex: 0, role: 'link' } : {};
 
   const renderChildren = React.useCallback(() => {
     return React.Children.map(children, (child) => {
@@ -52,7 +58,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
       })}
       {...linkProps}
     >
-      <div className='flex flex-col py-1.5 pr-4'>
+      <div className='flex flex-col py-1.5 pr-4 rtl:pl-4 rtl:pr-0'>
         <LabelComp className='text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
 
         {hint ? (
@@ -61,11 +67,11 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
       </div>
 
       {onClick ? (
-        <div className='flex flex-row items-center text-gray-700 dark:text-gray-600'>
+        <HStack space={1} alignItems='center' className='text-gray-700 dark:text-gray-600'>
           {children}
 
           <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1' />
-        </div>
+        </HStack>
       ) : null}
 
       {onSelect ? (
diff --git a/app/soapbox/components/markup.css b/app/soapbox/components/markup.css
index d89848f2c..c10d4084d 100644
--- a/app/soapbox/components/markup.css
+++ b/app/soapbox/components/markup.css
@@ -58,9 +58,14 @@
   @apply mb-0;
 }
 
-/* Markdown images */
-[data-markup] img:not(.emojione):not([width][height]) {
-  @apply w-full h-72 object-contain rounded-lg overflow-hidden my-4 block;
+/* Emojis */
+[data-markup] img.emojione {
+  @apply w-5 h-5;
+}
+
+/* Hide Markdown images (Pleroma) */
+[data-markup] img:not(.emojione) {
+  @apply hidden;
 }
 
 /* User setting to underline links */
@@ -68,7 +73,7 @@ body.underline-links [data-markup] a {
   @apply underline;
 }
 
-[data-markup] .big-emoji img.emojione {
+[data-markup].big-emoji img.emojione {
   @apply inline w-9 h-9 p-1;
 }
 
diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 42b961dc1..9244f05d5 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -160,16 +160,22 @@ const Item: React.FC<IItem> = ({
       </div>
     );
   } else if (attachment.type === 'image') {
-    const letterboxed = shouldLetterbox(attachment);
+    const letterboxed = total === 1 && shouldLetterbox(attachment);
 
     thumbnail = (
       <a
-        className={classNames('media-gallery__item-thumbnail', { letterboxed })}
+        className='media-gallery__item-thumbnail'
         href={attachment.url}
         onClick={handleClick}
         target='_blank'
       >
-        <StillImage src={attachment.url} alt={attachment.description} />
+        <StillImage
+          className='w-full h-full'
+          src={attachment.url}
+          alt={attachment.description}
+          letterboxed={letterboxed}
+          showExt
+        />
       </a>
     );
   } else if (attachment.type === 'gifv') {
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index 367c788e0..39d766f80 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -106,7 +106,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
       onMouseEnter={handleMouseEnter(dispatch)}
       onMouseLeave={handleMouseLeave(dispatch)}
     >
-      <Card variant='rounded' className='relative'>
+      <Card variant='rounded' className='relative isolate'>
         <CardBody>
           <Stack space={2}>
             <BundleContainer fetchComponent={UserPanel}>
@@ -136,7 +136,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
               </HStack>
             ) : null}
 
-            {account.source.get('note', '').length > 0 && (
+            {account.note.length > 0 && (
               <Text size='sm' dangerouslySetInnerHTML={accountBio} />
             )}
           </Stack>
diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index 0e0ae7f6f..21703caa0 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -38,6 +38,7 @@ const messages = defineMessages({
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
 });
 
 interface ISidebarLink {
@@ -82,7 +83,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
   const features = useFeatures();
   const getAccount = makeGetAccount();
-  const instance = useAppSelector((state) => state.instance);
   const me = useAppSelector((state) => state.me);
   const account = useAppSelector((state) => me ? getAccount(state, me) : null);
   const otherAccounts: ImmutableList<AccountEntity> = useAppSelector((state) => getOtherAccounts(state));
@@ -134,9 +134,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   if (!account) return null;
 
   return (
-    <div className={classNames('sidebar-menu__root', {
-      'sidebar-menu__root--visible': sidebarOpen,
-    })}
+    <div
+      className={classNames('sidebar-menu__root', {
+        'sidebar-menu__root--visible': sidebarOpen,
+      })}
+      aria-expanded={sidebarOpen}
     >
       <div
         className={classNames({
@@ -147,7 +149,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
         onClick={handleClose}
       >
         <IconButton
-          title='close'
+          title={intl.formatMessage(messages.close)}
           onClick={handleClose}
           src={require('@tabler/icons/x.svg')}
           ref={closeButtonRef}
@@ -220,15 +222,15 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/timeline/local'
-                    icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
-                    text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+                    icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')}
+                    text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                     onClick={onClose}
                   />
 
                   {features.federating && (
                     <SidebarLink
                       to='/timeline/fediverse'
-                      icon={require('assets/icons/fediverse.svg')}
+                      icon={require('@tabler/icons/topology-star-ring-3.svg')}
                       text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
                       onClick={onClose}
                     />
diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 9dbd84d67..c20635cd3 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -12,7 +12,7 @@ interface ISidebarNavigationLink {
   /** URL to an SVG icon. */
   icon: string,
   /** Link label. */
-  text: React.ReactElement,
+  text: React.ReactNode,
   /** Route to an internal page. */
   to?: string,
   /** Callback when the link is clicked. */
@@ -39,7 +39,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       ref={ref}
       onClick={handleClick}
       className={classNames({
-        'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rounded-full group text-gray-600 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900': true,
+        'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rtl:space-x-reverse rounded-full group text-gray-600 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900': true,
         'dark:text-gray-100 text-gray-900': isActive,
       })}
     >
diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index 94e921a9c..daf04d12f 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -17,9 +17,6 @@ const messages = defineMessages({
   bookmarks: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
-  dashboard: { id: 'tabs_bar.dashboard', defaultMessage: 'Dashboard' },
-  all: { id: 'tabs_bar.all', defaultMessage: 'All' },
-  fediverse: { id: 'tabs_bar.fediverse', defaultMessage: 'Fediverse' },
 });
 
 /** Desktop sidebar with links to different views in the app. */
@@ -72,35 +69,6 @@ const SidebarNavigation = () => {
           text: intl.formatMessage(messages.developers),
         });
       }
-
-      if (account.staff) {
-        menu.push({
-          to: '/soapbox/admin',
-          icon: require('@tabler/icons/dashboard.svg'),
-          text: intl.formatMessage(messages.dashboard),
-          count: dashboardCount,
-        });
-      }
-
-      if (features.publicTimeline) {
-        menu.push(null);
-      }
-    }
-
-    if (features.publicTimeline) {
-      menu.push({
-        to: '/timeline/local',
-        icon: features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg'),
-        text: features.federating ? instance.title : intl.formatMessage(messages.all),
-      });
-    }
-
-    if (features.publicTimeline && features.federating) {
-      menu.push({
-        to: '/timeline/fediverse',
-        icon: require('assets/icons/fediverse.svg'),
-        text: intl.formatMessage(messages.fediverse),
-      });
     }
 
     return menu;
@@ -172,6 +140,33 @@ const SidebarNavigation = () => {
               icon={require('@tabler/icons/settings.svg')}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
             />
+
+            {account.staff && (
+              <SidebarNavigationLink
+                to='/soapbox/admin'
+                icon={require('@tabler/icons/dashboard.svg')}
+                count={dashboardCount}
+                text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
+              />
+            )}
+          </>
+        )}
+
+        {features.publicTimeline && (
+          <>
+            <SidebarNavigationLink
+              to='/timeline/local'
+              icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')}
+              text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+            />
+
+            {features.federating && (
+              <SidebarNavigationLink
+                to='/timeline/fediverse'
+                icon={require('@tabler/icons/topology-star-ring-3.svg')}
+                text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+              />
+            )}
           </>
         )}
 
@@ -179,7 +174,6 @@ const SidebarNavigation = () => {
           <DropdownMenu items={menu}>
             <SidebarNavigationLink
               icon={require('@tabler/icons/dots-circle-horizontal.svg')}
-              count={dashboardCount}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
           </DropdownMenu>
diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 90552d0bd..7a3ef8e5d 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/app/soapbox/components/site-logo.tsx
@@ -14,7 +14,9 @@ interface ISiteLogo extends React.ComponentProps<'img'> {
 const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   const { logo, logoDarkMode } = useSoapboxConfig();
   const settings = useSettings();
-  const darkMode = useTheme() === 'dark';
+
+  let darkMode = useTheme() === 'dark';
+  if (theme === 'dark') darkMode = true;
 
   /** Soapbox logo. */
   const soapboxLogo = darkMode
diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 4cc7a574c..02678ed78 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -18,7 +18,7 @@ import StatusActionButton from 'soapbox/components/status-action-button';
 import { HStack } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { isLocal } from 'soapbox/utils/accounts';
+import { isLocal, isRemote } from 'soapbox/utils/accounts';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji-reacts';
 
 import type { Menu } from 'soapbox/components/dropdown-menu';
@@ -56,6 +56,7 @@ const messages = defineMessages({
   copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
   group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
   group_remove_post: { id: 'status.remove_post_from_group', defaultMessage: 'Remove post from group' },
+  external: { id: 'status.external', defaultMessage: 'View post on {domain}' },
   deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
   deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
   deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' },
@@ -150,6 +151,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     dispatch(toggleBookmark(status));
   };
 
+  const handleExternalClick = () => {
+    window.open(status.uri, '_blank');
+  };
+
   const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
     if (me) {
       const modalReblog = () => dispatch(toggleReblog(status));
@@ -294,6 +299,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     const mutingConversation = status.muted;
     const ownAccount = status.getIn(['account', 'id']) === me;
     const username = String(status.getIn(['account', 'username']));
+    const account = status.account as Account;
+    const domain = account.fqn.split('@')[1];
 
     const menu: Menu = [];
 
@@ -312,7 +319,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         icon: require('@tabler/icons/link.svg'),
       });
 
-      if (features.embeds && isLocal(status.account as Account)) {
+      if (features.embeds && isLocal(account)) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: handleEmbed,
@@ -333,6 +340,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       });
     }
 
+    if (features.federating && isRemote(account)) {
+      menu.push({
+        text: intl.formatMessage(messages.external, { domain }),
+        action: handleExternalClick,
+        icon: require('@tabler/icons/external-link.svg'),
+      });
+    }
+
     menu.push(null);
 
     if (ownAccount || withDismiss) {
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index 3dc625c4d..e6af91bc1 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -10,6 +10,7 @@ import { useAppDispatch, useSettings } from 'soapbox/hooks';
 import { addAutoPlay } from 'soapbox/utils/media';
 
 import type { List as ImmutableList } from 'immutable';
+import type VideoType from 'soapbox/features/video';
 import type { Status, Attachment } from 'soapbox/types/entities';
 
 interface IStatusMedia {
@@ -66,10 +67,6 @@ const StatusMedia: React.FC<IStatusMedia> = ({
     dispatch(openModal('MEDIA', { media, status, index }));
   };
 
-  const openVideo = (media: Attachment, time: number): void => {
-    dispatch(openModal('VIDEO', { media, time }));
-  };
-
   if (size > 0 && firstAttachment) {
     if (muted) {
       media = (
@@ -105,20 +102,17 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         );
       } else {
         media = (
-          <Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer} >
-            {(Component: any) => (
+          <Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer}>
+            {(Component: typeof VideoType) => (
               <Component
                 preview={video.preview_url}
                 blurhash={video.blurhash}
                 src={video.url}
                 alt={video.description}
-                aspectRatio={video.meta.getIn(['original', 'aspect'])}
+                aspectRatio={Number(video.meta.getIn(['original', 'aspect']))}
                 height={285}
-                inline
-                sensitive={status.sensitive}
-                onOpenVideo={openVideo}
                 visible={showMedia}
-                onToggleVisibility={onToggleVisibility}
+                inline
               />
             )}
           </Bundle>
diff --git a/app/soapbox/components/status-reply-mentions.tsx b/app/soapbox/components/status-reply-mentions.tsx
index 0964c84ae..8b1ce6dd6 100644
--- a/app/soapbox/components/status-reply-mentions.tsx
+++ b/app/soapbox/components/status-reply-mentions.tsx
@@ -66,7 +66,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
 
   if (to.size > 2) {
     accounts.push(
-      <span key='more' className='hover:underline cursor-pointer' role='presentation' onClick={handleOpenMentionsModal}>
+      <span key='more' className='hover:underline cursor-pointer' role='button' onClick={handleOpenMentionsModal} tabIndex={0}>
         <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />
       </span>,
     );
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 24e212ce5..1f4f1a261 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -12,10 +12,14 @@ interface IStillImage {
   src: string,
   /** Extra CSS styles on the outer <div> element. */
   style?: React.CSSProperties,
+  /** Whether to display the image contained vs filled in its container. */
+  letterboxed?: boolean,
+  /** Whether to show the file extension in the corner. */
+  showExt?: boolean,
 }
 
 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
-const StillImage: React.FC<IStillImage> = ({ alt, className, src, style }) => {
+const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false, showExt = false }) => {
   const settings = useSettings();
   const autoPlayGif = settings.get('autoPlayGif');
 
@@ -34,10 +38,56 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style }) => {
     }
   };
 
+  /** ClassNames shared between the `<img>` and `<canvas>` elements. */
+  const baseClassName = classNames('w-full h-full block', {
+    'object-contain': letterboxed,
+    'object-cover': !letterboxed,
+  });
+
   return (
-    <div data-testid='still-image-container' className={classNames(className, 'still-image', { 'still-image--play-on-hover': hoverToPlay })} style={style}>
-      <img src={src} alt={alt} ref={img} onLoad={handleImageLoad} />
-      {hoverToPlay && <canvas ref={canvas} />}
+    <div
+      data-testid='still-image-container'
+      className={classNames(className, 'relative group overflow-hidden isolate')}
+      style={style}
+    >
+      <img
+        src={src}
+        alt={alt}
+        ref={img}
+        onLoad={handleImageLoad}
+        className={classNames(baseClassName, {
+          'invisible group-hover:visible': hoverToPlay,
+        })}
+      />
+
+      {hoverToPlay && (
+        <canvas
+          ref={canvas}
+          className={classNames(baseClassName, {
+            'group-hover:invisible': hoverToPlay,
+          })}
+        />
+      )}
+
+      {(hoverToPlay && showExt) && (
+        <div className='group-hover:hidden absolute opacity-90 left-2 bottom-2 pointer-events-none'>
+          <ExtensionBadge ext='GIF' />
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface IExtensionBadge {
+  /** File extension. */
+  ext: string,
+}
+
+/** Badge displaying a file extension. */
+const ExtensionBadge: React.FC<IExtensionBadge> = ({ ext }) => {
+  return (
+    <div className='inline-flex items-center px-2 py-0.5 rounded text-sm font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100'>
+      {ext}
     </div>
   );
 };
diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index 07c778fd2..03a43722a 100644
--- a/app/soapbox/components/translate-button.tsx
+++ b/app/soapbox/components/translate-button.tsx
@@ -50,7 +50,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
   }
 
   return (
-    <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-left text-sm hover:underline' onClick={handleTranslate}>
+    <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-start text-sm hover:underline' onClick={handleTranslate}>
       <FormattedMessage id='status.translate' defaultMessage='Translate' />
     </button>
   );
diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx
index ec1980978..384fa354d 100644
--- a/app/soapbox/components/ui/avatar/avatar.tsx
+++ b/app/soapbox/components/ui/avatar/avatar.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 
 import StillImage from 'soapbox/components/still-image';
 
@@ -25,7 +25,7 @@ const Avatar = (props: IAvatar) => {
 
   return (
     <StillImage
-      className={classNames('rounded-full overflow-hidden', className)}
+      className={classNames('rounded-full', className)}
       style={style}
       src={src}
       alt='Avatar'
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index 97de8862b..4be97ee83 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import Icon from '../icon/icon';
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 59f6ee1bc..675a9d15b 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui';
+import { HStack, Text } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 
 const sizes = {
@@ -62,7 +62,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
@@ -70,11 +70,11 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
   };
 
   return (
-    <div className='mb-4 flex flex-row items-center'>
+    <HStack alignItems='center' space={2} className='mb-4'>
       {renderBackButton()}
 
       {children}
-    </div>
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 20810efbe..caaea79ee 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -47,8 +47,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
 
   return (
     <HStack
-      space={2}
-      className={classNames('bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max')}
+      className={classNames('gap-2 bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max max-w-[100vw] flex-wrap')}
     >
       {Array.from(emojis).map((emoji, i) => (
         <EmojiButton
diff --git a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
index 85126806f..c87ef9040 100644
--- a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
+++ b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
 import Emoji from '../emoji';
diff --git a/app/soapbox/components/ui/form-actions/form-actions.tsx b/app/soapbox/components/ui/form-actions/form-actions.tsx
index a09fb02dc..f1480e07c 100644
--- a/app/soapbox/components/ui/form-actions/form-actions.tsx
+++ b/app/soapbox/components/ui/form-actions/form-actions.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
+import HStack from '../hstack/hstack';
+
 /** Container element to house form actions. */
 const FormActions: React.FC = ({ children }) => (
-  <div className='flex justify-end space-x-2'>
+  <HStack space={2} justifyContent='end'>
     {children}
-  </div>
+  </HStack>
 );
 
 export default FormActions;
diff --git a/app/soapbox/components/ui/form/form.tsx b/app/soapbox/components/ui/form/form.tsx
index 59ca180b1..466825434 100644
--- a/app/soapbox/components/ui/form/form.tsx
+++ b/app/soapbox/components/ui/form/form.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 interface IForm {
   /** Form submission event handler. */
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index eee5b3706..d648c036e 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -22,8 +22,10 @@ const spaces = {
   1: 'space-x-1',
   1.5: 'space-x-1.5',
   2: 'space-x-2',
+  2.5: 'space-x-2.5',
   3: 'space-x-3',
   4: 'space-x-4',
+  5: 'space-x-5',
   6: 'space-x-6',
   8: 'space-x-8',
 };
@@ -59,7 +61,7 @@ const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
     <Elem
       {...filteredProps}
       ref={ref}
-      className={classNames('flex', {
+      className={classNames('flex rtl:space-x-reverse', {
         // @ts-ignore
         [alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
         // @ts-ignore
diff --git a/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx b/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
index c56a6d190..79cee2c65 100644
--- a/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
+++ b/app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
 import SvgIcon from '../svg-icon';
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 3b174e47a..f1ccbf1e3 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -43,6 +43,7 @@ export { default as RadioButton } from './radio-button/radio-button';
 export { default as Select } from './select/select';
 export { default as Spinner } from './spinner/spinner';
 export { default as Stack } from './stack/stack';
+export { default as Streamfield } from './streamfield/streamfield';
 export { default as Tabs } from './tabs/tabs';
 export { default as TagInput } from './tag-input/tag-input';
 export { default as Text } from './text/text';
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index ef5d6ebaf..34473fc2c 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -90,16 +90,15 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
               ['normal', 'search'].includes(theme),
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
             'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search',
-            'pr-7': isPassword || append,
+            'pr-7 rtl:pl-7 rtl:pr-3': isPassword || append,
             'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',
             'pl-16': typeof prepend !== 'undefined',
           }, className)}
         />
 
-        {/* eslint-disable-next-line no-nested-ternary */}
         {append ? (
-          <div className='absolute inset-y-0 right-0 flex items-center pr-3'>
+          <div className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto flex items-center pr-3'>
             {append}
           </div>
         ) : null}
@@ -112,7 +111,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 intl.formatMessage(messages.showPassword)
             }
           >
-            <div className='absolute inset-y-0 right-0 flex items-center'>
+            <div className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto flex items-center'>
               <button
                 type='button'
                 onClick={togglePassword}
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index b29cf7906..03dfd8243 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -1,10 +1,11 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Button from '../button/button';
 import { ButtonThemes } from '../button/useButtonStyles';
 import IconButton from '../icon-button/icon-button';
+import Stack from '../stack/stack';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -82,7 +83,7 @@ const Modal: React.FC<IModal> = ({
   }, [skipFocus, buttonRef]);
 
   return (
-    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-left align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
+    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-start align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           {title && (
@@ -127,7 +128,7 @@ const Modal: React.FC<IModal> = ({
             )}
           </div>
 
-          <div className='flex flex-row space-x-2'>
+          <Stack space={2}>
             {secondaryAction && (
               <Button
                 theme='secondary'
@@ -146,7 +147,7 @@ const Modal: React.FC<IModal> = ({
             >
               {confirmationText}
             </Button>
-          </div>
+          </Stack>
         </div>
       )}
     </div>
diff --git a/app/soapbox/components/ui/radio-button/radio-button.tsx b/app/soapbox/components/ui/radio-button/radio-button.tsx
index 322cbd7e7..96f2c2ec4 100644
--- a/app/soapbox/components/ui/radio-button/radio-button.tsx
+++ b/app/soapbox/components/ui/radio-button/radio-button.tsx
@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
+import HStack from '../hstack/hstack';
+
 interface IRadioButton {
   value: string
   checked?: boolean
@@ -16,7 +18,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
   const formFieldId: string = useMemo(() => `radio-${uuidv4()}`, []);
 
   return (
-    <div className='flex items-center'>
+    <HStack alignItems='center' space={3}>
       <input
         type='radio'
         name={name}
@@ -27,10 +29,10 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
         className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
       />
 
-      <label htmlFor={formFieldId} className='ml-3 block text-sm font-medium text-gray-700'>
+      <label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>
         {label}
       </label>
-    </div>
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index b8d05b79d..8c2369ce5 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
   children: Iterable<React.ReactNode>,
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 49316529a..283908579 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -6,7 +6,7 @@ import {
   useTabsContext,
 } from '@reach/tabs';
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Counter from '../counter/counter';
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index 7c2f94a4a..810325973 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import React, { useState } from 'react';
 
-interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly' | 'onKeyDown' | 'onPaste'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** Allows the textarea height to grow while typing */
diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index 3bced193f..16cc33234 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { Text, IconButton } from 'soapbox/components/ui';
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import Stack from 'soapbox/components/ui/stack/stack';
+import { HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
diff --git a/app/soapbox/components/verification-badge.tsx b/app/soapbox/components/verification-badge.tsx
index 766decb88..aea2f5f81 100644
--- a/app/soapbox/components/verification-badge.tsx
+++ b/app/soapbox/components/verification-badge.tsx
@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import Icon from 'soapbox/components/ui/icon/icon';
+import { Icon } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index c8302436b..8847f22e6 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -49,6 +49,8 @@ import ErrorBoundary from '../components/error-boundary';
 import UI from '../features/ui';
 import { store } from '../store';
 
+const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he'];
+
 // Configure global functions for developers
 createGlobals(store);
 
@@ -277,7 +279,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
     <>
       <Helmet>
         <html lang={locale} className={classNames('h-full', { dark: darkMode })} />
-        <body className={bodyClass} />
+        <body className={bodyClass} dir={RTL_LOCALES.includes(locale) ? 'rtl' : undefined} />
         {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
         {darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
         <meta name='theme-color' content={soapboxConfig.brandColor} />
diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx
index a2a171bfc..4242094b5 100644
--- a/app/soapbox/features/account-gallery/components/media-item.tsx
+++ b/app/soapbox/features/account-gallery/components/media-item.tsx
@@ -74,6 +74,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
         src={attachment.preview_url}
         alt={attachment.description}
         style={{ objectPosition: `${x}% ${y}%` }}
+        className='w-full h-full rounded-lg overflow-hidden'
       />
     );
   } else if (['gifv', 'video'].indexOf(attachment.type) !== -1) {
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 7c41896e7..fae9baf69 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -19,7 +19,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import Badge from 'soapbox/components/badge';
 import StillImage from 'soapbox/components/still-image';
-import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider, Avatar } from 'soapbox/components/ui';
+import { Avatar, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
 import ActionButton from 'soapbox/features/ui/components/action-button';
@@ -71,6 +71,7 @@ const messages = defineMessages({
   userEndorsed: { id: 'account.endorse.success', defaultMessage: 'You are now featuring @{acct} on your profile' },
   userUnendorsed: { id: 'account.unendorse.success', defaultMessage: 'You are no longer featuring @{acct}' },
   profileExternal: { id: 'account.profile_external', defaultMessage: 'View profile on {domain}' },
+  header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
 });
 
 interface IHeader {
@@ -108,13 +109,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         </div>
 
         <div className='px-4 sm:px-6'>
-          <div className='-mt-12 flex items-end space-x-5'>
+          <HStack alignItems='bottom' space={5} className='-mt-12'>
             <div className='flex relative'>
               <div
                 className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white dark:ring-gray-800'
               />
             </div>
-          </div>
+          </HStack>
         </div>
       </div>
     );
@@ -573,13 +574,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
       )}
 
       <div>
-        <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50'>
+        <div className='relative flex flex-col justify-center h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50 overflow-hidden isolate'>
           {account.header && (
             <a href={account.header} onClick={handleHeaderClick} target='_blank'>
               <StillImage
                 src={account.header}
-                alt='Profile Header'
-                className='absolute inset-0 object-cover md:rounded-t-xl'
+                alt={intl.formatMessage(messages.header)}
               />
             </a>
           )}
@@ -593,19 +593,19 @@ const Header: React.FC<IHeader> = ({ account }) => {
       </div>
 
       <div className='px-4 sm:px-6'>
-        <div className='-mt-12 flex items-end space-x-5'>
+        <HStack className='-mt-12' alignItems='bottom' space={5}>
           <div className='flex'>
             <a href={account.avatar} onClick={handleAvatarClick} target='_blank'>
               <Avatar
                 src={account.avatar}
                 size={96}
-                className='h-24 w-24 rounded-full ring-4 ring-white dark:ring-primary-900'
+                className='relative h-24 w-24 rounded-full ring-4 ring-white dark:ring-primary-900'
               />
             </a>
           </div>
 
           <div className='mt-6 flex justify-end w-full sm:pb-1'>
-            <div className='mt-10 flex flex-row space-y-0 space-x-2'>
+            <HStack space={2} className='mt-10'>
               <SubscriptionButton account={account} />
 
               {ownAccount && (
@@ -629,13 +629,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
                         return (
                           <Comp key={idx} {...itemProps} className='group'>
-                            <div className='flex items-center'>
+                            <HStack space={3} alignItems='center'>
                               {menuItem.icon && (
-                                <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
+                                <SvgIcon src={menuItem.icon} className='h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
                               )}
 
                               <div className='truncate'>{menuItem.text}</div>
-                            </div>
+                            </HStack>
                           </Comp>
                         );
                       }
@@ -648,9 +648,9 @@ const Header: React.FC<IHeader> = ({ account }) => {
               {renderMessageButton()}
 
               <ActionButton account={account} />
-            </div>
+            </HStack>
           </div>
-        </div>
+        </HStack>
       </div>
     </div>
   );
diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index 1112c788c..37b6ce92b 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -2,8 +2,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useState, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import { Avatar, Card, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui';
 import StatusCard from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
 import { AdKeys } from 'soapbox/queries/ads';
diff --git a/app/soapbox/features/aliases/components/account.tsx b/app/soapbox/features/aliases/components/account.tsx
index f76431ba8..1687b85e6 100644
--- a/app/soapbox/features/aliases/components/account.tsx
+++ b/app/soapbox/features/aliases/components/account.tsx
@@ -2,9 +2,9 @@ import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addToAliases } from 'soapbox/actions/aliases';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
+import AccountComponent from 'soapbox/components/account';
 import IconButton from 'soapbox/components/icon-button';
+import { HStack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 import { getFeatures } from 'soapbox/utils/features';
@@ -47,23 +47,17 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
 
   if (!added && accountId !== me) {
     button = (
-      <div className='account__relationship'>
-        <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
-      </div>
+      <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
     );
   }
 
   return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <div className='account__display-name'>
-          <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-          <DisplayName account={account} />
-        </div>
-
-        {button}
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountComponent account={account} withRelationship={false} />
       </div>
-    </div>
+      {button}
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index b84d90aa4..f64c4a332 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -53,7 +53,7 @@ const Search: React.FC = () => {
           placeholder={intl.formatMessage(messages.search)}
         />
 
-        <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
+        <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
           <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>
diff --git a/app/soapbox/features/auth-login/components/login-page.tsx b/app/soapbox/features/auth-login/components/login-page.tsx
index c137d0165..609af73a4 100644
--- a/app/soapbox/features/auth-login/components/login-page.tsx
+++ b/app/soapbox/features/auth-login/components/login-page.tsx
@@ -26,32 +26,35 @@ const LoginPage = () => {
   const [mfaToken, setMfaToken] = useState(token || '');
   const [shouldRedirect, setShouldRedirect] = useState(false);
 
-  const getFormData = (form: HTMLFormElement) => {
-    return Object.fromEntries(
+  const getFormData = (form: HTMLFormElement) =>
+    Object.fromEntries(
       Array.from(form).map((i: any) => [i.name, i.value]),
     );
-  };
 
   const handleSubmit: React.FormEventHandler = (event) => {
     const { username, password } = getFormData(event.target as HTMLFormElement);
-    dispatch(logIn(username, password)).then(({ access_token }) => {
-      return dispatch(verifyCredentials(access_token as string))
-        // Refetch the instance for authenticated fetch
-        .then(() => dispatch(fetchInstance() as any));
-    }).then((account: { id: string }) => {
-      dispatch(closeModal());
-      setShouldRedirect(true);
-      if (typeof me === 'string') {
-        dispatch(switchAccount(account.id));
-      }
-    }).catch((error: AxiosError) => {
-      const data: any = error.response?.data;
-      if (data?.error === 'mfa_required') {
-        setMfaAuthNeeded(true);
-        setMfaToken(data.mfa_token);
-      }
-      setIsLoading(false);
-    });
+    dispatch(logIn(username, password))
+      .then(({ access_token }) => dispatch(verifyCredentials(access_token as string)))
+      // Refetch the instance for authenticated fetch
+      .then(async (account) => {
+        await dispatch(fetchInstance());
+        return account;
+      })
+      .then((account: { id: string }) => {
+        dispatch(closeModal());
+        if (typeof me === 'string') {
+          dispatch(switchAccount(account.id));
+        } else {
+          setShouldRedirect(true);
+        }
+      }).catch((error: AxiosError) => {
+        const data: any = error.response?.data;
+        if (data?.error === 'mfa_required') {
+          setMfaAuthNeeded(true);
+          setMfaToken(data.mfa_token);
+        }
+        setIsLoading(false);
+      });
     setIsLoading(true);
     event.preventDefault();
   };
diff --git a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
index 2a55c5483..f0a4d1c31 100644
--- a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
+++ b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
@@ -11,6 +11,7 @@ const token = new URLSearchParams(window.location.search).get('reset_password_to
 
 const messages = defineMessages({
   resetPasswordFail: { id: 'reset_password.fail', defaultMessage: 'Expired token, please try again.' },
+  passwordPlaceholder: { id: 'reset_password.password.placeholder', defaultMessage: 'Placeholder' },
 });
 
 const Statuses = {
@@ -66,11 +67,11 @@ const PasswordResetConfirm = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Password' errors={renderErrors()}>
+          <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
             <Input
               type='password'
               name='password'
-              placeholder='Password'
+              placeholder={intl.formatMessage(messages.passwordPlaceholder)}
               onChange={onChange}
               required
             />
diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index 78a9cd11a..1267c8753 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -16,7 +16,7 @@ import {
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea';
 import Icon from 'soapbox/components/icon';
-import { Button, Stack } from 'soapbox/components/ui';
+import { Button, HStack, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is-mobile';
 
@@ -221,7 +221,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   }, [focusDate]);
 
   const renderButtons = useCallback(() => (
-    <div className='flex items-center space-x-2'>
+    <HStack alignItems='center' space={2}>
       {features.media && <UploadButtonContainer composeId={id} />}
       <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />
       {features.polls && <PollButton composeId={id} />}
@@ -229,7 +229,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       {features.scheduledStatuses && <ScheduleButton composeId={id} />}
       {features.spoilers && <SpoilerButton composeId={id} />}
       {features.richText && <MarkdownButton composeId={id} />}
-    </div>
+    </HStack>
   ), [features, id]);
 
   const condensed = shouldCondense && !composeFocused && isEmpty() && !isUploading;
@@ -335,16 +335,18 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       >
         {renderButtons()}
 
-        <div className='flex items-center space-x-4 ml-auto'>
+        <HStack space={4} alignItems='center' className='ml-auto rtl:ml-0 rtl:mr-auto'>
           {maxTootChars && (
-            <div className='flex items-center space-x-1'>
+            <HStack space={1} alignItems='center'>
               <TextCharacterCounter max={maxTootChars} text={text} />
               <VisualCharacterCounter max={maxTootChars} text={text} />
-            </div>
+            </HStack>
           )}
 
           <Button type='submit' theme='primary' text={publishText} disabled={disabledButton} />
-        </div>
+        </HStack>
+        {/* <HStack alignItems='center' space={4}>
+        </HStack> */}
       </div>
     </Stack>
   );
diff --git a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
index a7a4dff28..834b556f2 100644
--- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
@@ -4,7 +4,7 @@ import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { buildCustomEmojis } from '../../../emoji/emoji';
+import { buildCustomEmojis, categoriesFromEmojis } from '../../../emoji/emoji';
 
 import { EmojiPicker } from './emoji-picker-dropdown';
 import ModifierPicker from './modifier-picker';
@@ -14,19 +14,6 @@ import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-const categoriesSort = [
-  'recent',
-  'custom',
-  'people',
-  'nature',
-  'foods',
-  'activity',
-  'places',
-  'objects',
-  'symbols',
-  'flags',
-];
-
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
@@ -71,6 +58,20 @@ const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
 
   const [modifierOpen, setModifierOpen] = useState(false);
 
+  const categoriesSort = [
+    'recent',
+    'people',
+    'nature',
+    'foods',
+    'activity',
+    'places',
+    'objects',
+    'symbols',
+    'flags',
+  ];
+
+  categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(customEmojis) as Set<string>).sort());
+
   const handleDocumentClick = useCallback(e => {
     if (node.current && !node.current.contains(e.target)) {
       onClose();
diff --git a/app/soapbox/features/compose/components/polls/poll-form.tsx b/app/soapbox/features/compose/components/polls/poll-form.tsx
index f080ae1fa..77f47bdfc 100644
--- a/app/soapbox/features/compose/components/polls/poll-form.tsx
+++ b/app/soapbox/features/compose/components/polls/poll-form.tsx
@@ -169,7 +169,7 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
 
       <Divider />
 
-      <button type='button' onClick={handleToggleMultiple} className='text-left'>
+      <button type='button' onClick={handleToggleMultiple} className='text-start'>
         <HStack alignItems='center' justifyContent='between'>
           <Stack>
             <Text weight='medium'>
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index a5f310655..f4b8c1876 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -149,7 +149,7 @@ const Search = (props: ISearch) => {
         <div
           role='button'
           tabIndex={0}
-          className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
+          className='absolute inset-y-0 right-0 rtl:left-0 rtl:right-auto px-3 flex items-center cursor-pointer'
           onClick={handleClear}
         >
           <SvgIcon
diff --git a/app/soapbox/features/crypto-donate/components/crypto-address.tsx b/app/soapbox/features/crypto-donate/components/crypto-address.tsx
index cab59caa3..31add7672 100644
--- a/app/soapbox/features/crypto-donate/components/crypto-address.tsx
+++ b/app/soapbox/features/crypto-donate/components/crypto-address.tsx
@@ -33,7 +33,7 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
     <Stack>
       <HStack alignItems='center' className='mb-1'>
         <CryptoIcon
-          className='flex items-start justify-center w-6 mr-2.5'
+          className='flex items-start justify-center w-6 mr-2.5 rtl:ml-2.5 rtl:mr-0'
           ticker={ticker}
           title={title}
         />
@@ -41,12 +41,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
         <HStack alignItems='center' className='ml-auto'>
-          <a className='text-gray-500 ml-1' href='#' onClick={handleModalClick}>
+          <a className='text-gray-500 ml-1 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
             <Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
           </a>
 
           {explorerUrl && (
-            <a className='text-gray-500 ml-1' href={explorerUrl} target='_blank'>
+            <a className='text-gray-500 ml-1 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
               <Icon src={require('@tabler/icons/external-link.svg')} size={20} />
             </a>
           )}
diff --git a/app/soapbox/features/delete-account/index.tsx b/app/soapbox/features/delete-account/index.tsx
index 10b71bb67..9bafff592 100644
--- a/app/soapbox/features/delete-account/index.tsx
+++ b/app/soapbox/features/delete-account/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { deleteAccount } from 'soapbox/actions/security';
diff --git a/app/soapbox/features/developers/settings-store.tsx b/app/soapbox/features/developers/settings-store.tsx
index cfddc637e..521ed0dab 100644
--- a/app/soapbox/features/developers/settings-store.tsx
+++ b/app/soapbox/features/developers/settings-store.tsx
@@ -29,6 +29,7 @@ const isJSONValid = (text: any): boolean => {
 
 const messages = defineMessages({
   heading: { id: 'column.settings_store', defaultMessage: 'Settings store' },
+  advanced: { id: 'developers.settings_store.advanced', defaultMessage: 'Advanced settings' },
   hint: { id: 'developers.settings_store.hint', defaultMessage: 'It is possible to directly edit your user settings here. BE CAREFUL! Editing this section can break your account, and you will only be able to recover through the API.' },
 });
 
@@ -98,7 +99,7 @@ const SettingsStore: React.FC = () => {
       </Form>
 
       <CardHeader>
-        <CardTitle title='Advanced settings' />
+        <CardTitle title={intl.formatMessage(messages.advanced)} />
       </CardHeader>
 
       <List>
diff --git a/app/soapbox/features/direct-timeline/index.tsx b/app/soapbox/features/direct-timeline/index.tsx
index 885c617db..aef932516 100644
--- a/app/soapbox/features/direct-timeline/index.tsx
+++ b/app/soapbox/features/direct-timeline/index.tsx
@@ -5,14 +5,13 @@ import { directComposeById } from 'soapbox/actions/compose';
 import { connectDirectStream } from 'soapbox/actions/streaming';
 import { expandDirectTimeline } from 'soapbox/actions/timelines';
 import AccountSearch from 'soapbox/components/account-search';
-import ColumnHeader from 'soapbox/components/column-header';
 import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
 const messages = defineMessages({
-  title: { id: 'column.direct', defaultMessage: 'Direct messages' },
+  heading: { id: 'column.direct', defaultMessage: 'Direct messages' },
   searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
 });
 
@@ -20,8 +19,6 @@ const DirectTimeline = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const hasUnread = useAppSelector((state) => (state.timelines.get('direct')?.unread || 0) > 0);
-
   useEffect(() => {
     dispatch(expandDirectTimeline());
     const disconnect = dispatch(connectDirectStream());
@@ -40,13 +37,7 @@ const DirectTimeline = () => {
   };
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
-      <ColumnHeader
-        icon='envelope'
-        active={hasUnread}
-        title={intl.formatMessage(messages.title)}
-      />
-
+    <Column label={intl.formatMessage(messages.heading)}>
       <AccountSearch
         placeholder={intl.formatMessage(messages.searchPlaceholder)}
         onSelected={handleSuggestion}
@@ -57,7 +48,7 @@ const DirectTimeline = () => {
         timelineId='direct'
         onLoadMore={handleLoadMore}
         emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
-        divideType='space'
+        divideType='border'
       />
     </Column>
   );
diff --git a/app/soapbox/features/edit-email/index.tsx b/app/soapbox/features/edit-email/index.tsx
index 7c1d5bfd3..6d77fd68f 100644
--- a/app/soapbox/features/edit-email/index.tsx
+++ b/app/soapbox/features/edit-email/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeEmail } from 'soapbox/actions/security';
diff --git a/app/soapbox/features/edit-password/index.tsx b/app/soapbox/features/edit-password/index.tsx
index 0fd61d0c7..ecb2d6bb1 100644
--- a/app/soapbox/features/edit-password/index.tsx
+++ b/app/soapbox/features/edit-password/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changePassword } from 'soapbox/actions/security';
diff --git a/app/soapbox/features/edit-profile/components/profile-preview.tsx b/app/soapbox/features/edit-profile/components/profile-preview.tsx
index c85ff3d2f..c8df16dd1 100644
--- a/app/soapbox/features/edit-profile/components/profile-preview.tsx
+++ b/app/soapbox/features/edit-profile/components/profile-preview.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import StillImage from 'soapbox/components/still-image';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
@@ -17,25 +17,28 @@ const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
 
   return (
     <div className='bg-white dark:bg-gray-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
-      <div>
-        <div className='relative w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
-          <StillImage alt='' src={account.header} className='absolute inset-0 object-cover md:rounded-t-lg' />
-        </div>
+      <div className='relative overflow-hidden isolate w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
+        <StillImage src={account.header} />
       </div>
 
       <HStack space={3} alignItems='center' className='p-3'>
         <div className='relative'>
-          <div className='h-12 w-12 bg-gray-400 rounded-full'>
-            <StillImage alt='' className='h-12 w-12 rounded-full' src={account.avatar} />
-          </div>
+          <Avatar className='bg-gray-400' src={account.avatar} />
 
-          {account.verified && <div className='absolute -top-1.5 -right-1.5'><VerificationBadge /></div>}
+          {account.verified && (
+            <div className='absolute -top-1.5 -right-1.5'>
+              <VerificationBadge />
+            </div>
+          )}
         </div>
 
         <Stack className='truncate'>
-          <Text weight='medium' size='sm' truncate>
-            {account.display_name}
-          </Text>
+          <Text
+            weight='medium'
+            size='sm'
+            truncate
+            dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+          />
           <Text theme='muted' size='sm'>@{displayFqn ? account.fqn : account.acct}</Text>
         </Stack>
       </HStack>
diff --git a/app/soapbox/features/edit-profile/index.tsx b/app/soapbox/features/edit-profile/index.tsx
index 1967e9138..2f77e1142 100644
--- a/app/soapbox/features/edit-profile/index.tsx
+++ b/app/soapbox/features/edit-profile/index.tsx
@@ -15,16 +15,17 @@ import {
   FormGroup,
   HStack,
   Input,
+  Streamfield,
   Textarea,
   Toggle,
 } from 'soapbox/components/ui';
-import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize-image';
 
 import ProfilePreview from './components/profile-preview';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { Account } from 'soapbox/types/entities';
 
 /**
@@ -198,7 +199,10 @@ const EditProfile: React.FC = () => {
   const handleSubmit: React.FormEventHandler = (event) => {
     const promises = [];
 
-    promises.push(dispatch(patchMe(data, true)));
+    const params = { ...data };
+    if (params.fields_attributes?.length === 0) params.fields_attributes = [{ name: '', value: '' }];
+
+    promises.push(dispatch(patchMe(params, true)));
 
     if (features.muteStrangers) {
       promises.push(
diff --git a/app/soapbox/features/email-confirmation/index.tsx b/app/soapbox/features/email-confirmation/index.tsx
index 0c4939eed..45d18444e 100644
--- a/app/soapbox/features/email-confirmation/index.tsx
+++ b/app/soapbox/features/email-confirmation/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/app/soapbox/features/emoji/__tests__/emoji.test.ts b/app/soapbox/features/emoji/__tests__/emoji.test.ts
index 83b6ef14d..df6798ef7 100644
--- a/app/soapbox/features/emoji/__tests__/emoji.test.ts
+++ b/app/soapbox/features/emoji/__tests__/emoji.test.ts
@@ -88,5 +88,10 @@ describe('emoji', () => {
       expect(emojify('💂‍♀️💂‍♂️'))
         .toEqual('<img draggable="false" class="emojione" alt="💂\u200D♀️" title=":female-guard:" src="/packs/emoji/1f482-200d-2640-fe0f.svg"><img draggable="false" class="emojione" alt="💂\u200D♂️" title=":male-guard:" src="/packs/emoji/1f482-200d-2642-fe0f.svg">');
     });
+
+    it('keeps ordering as expected (issue fixed by PR 20677)', () => {
+      expect(emojify('<p>💕 <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>'))
+        .toEqual('<p><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/packs/emoji/1f495.svg"> <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>');
+    });
   });
 });
diff --git a/app/soapbox/features/emoji/emoji.js b/app/soapbox/features/emoji/emoji.js
index 9eadddbc6..e9b4caa35 100644
--- a/app/soapbox/features/emoji/emoji.js
+++ b/app/soapbox/features/emoji/emoji.js
@@ -6,8 +6,6 @@ import unicodeMapping from './emoji-unicode-mapping-light';
 
 const trie = new Trie(Object.keys(unicodeMapping));
 
-const domParser = new DOMParser();
-
 const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
   let str = node.textContent;
 
@@ -26,7 +24,7 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
       }
     }
 
-    let rend, replacement = '';
+    let rend, replacement = null;
     if (i === str.length) {
       break;
     } else if (str[i] === ':') {
@@ -39,7 +37,14 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
         // if you want additional emoji handler, add statements below which set replacement and return true.
         if (shortname in customEmojis) {
           const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
-          replacement = `<img draggable="false" class="emojione custom-emoji" alt="${shortname}" title="${shortname}" src="${filename}" data-original="${customEmojis[shortname].url}" data-static="${customEmojis[shortname].static_url}" />`;
+          replacement = document.createElement('img');
+          replacement.setAttribute('draggable', false);
+          replacement.setAttribute('class', 'emojione custom-emoji');
+          replacement.setAttribute('alt', shortname);
+          replacement.setAttribute('title', shortname);
+          replacement.setAttribute('src', filename);
+          replacement.setAttribute('data-original', customEmojis[shortname].url);
+          replacement.setAttribute('data-static', customEmojis[shortname].static_url);
           return true;
         }
         return false;
@@ -47,8 +52,12 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
     } else { // matched to unicode emoji
       const { filename, shortCode } = unicodeMapping[match];
       const title = shortCode ? `:${shortCode}:` : '';
-      const src = joinPublicPath(`packs/emoji/${filename}.svg`);
-      replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${src}" />`;
+      replacement = document.createElement('img');
+      replacement.setAttribute('draggable', false);
+      replacement.setAttribute('class', 'emojione');
+      replacement.setAttribute('alt', match);
+      replacement.setAttribute('title', title);
+      replacement.setAttribute('src', joinPublicPath(`packs/emoji/${filename}.svg`));
       rend = i + match.length;
       // If the matched character was followed by VS15 (for selecting text presentation), skip it.
       if (str.codePointAt(rend) === 65038) {
@@ -58,7 +67,7 @@ const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
 
     fragment.append(document.createTextNode(str.slice(0, i)));
     if (replacement) {
-      fragment.append(domParser.parseFromString(replacement, 'text/html').documentElement.getElementsByTagName('img')[0]);
+      fragment.append(replacement);
     }
     node.textContent = str.slice(0, i);
     str = str.slice(rend);
diff --git a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
index ac86039fd..a912f3f4d 100644
--- a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
-import { Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import type { Map as ImmutableMap } from 'immutable';
@@ -16,6 +16,23 @@ const hasRestrictions = (remoteInstance: ImmutableMap<string, any>): boolean =>
     .reduce((acc: boolean, value: boolean) => acc || value, false);
 };
 
+interface IRestriction {
+  icon: string,
+  children: React.ReactNode,
+}
+
+const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
+  return (
+    <HStack space={3}>
+      <Icon className='flex-none w-5 h-5' src={icon} />
+
+      <Text theme='muted'>
+        {children}
+      </Text>
+    </HStack>
+  );
+};
+
 interface IInstanceRestrictions {
   remoteInstance: ImmutableMap<string, any>,
 }
@@ -40,57 +57,52 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (followers_only) {
       items.push((
-        <Text key='followers_only' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/lock.svg')} />
+        <Restriction key='followersOnly' icon={require('@tabler/icons/lock.svg')}>
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
           />
-        </Text>
+        </Restriction>
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/lock-open.svg')} />
+        <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/lock-open.svg')}>
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
     if (fullMediaRemoval) {
       items.push((
-        <Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/photo-off.svg')} />
+        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
           />
-        </Text>
+        </Restriction>
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/photo-off.svg')} />
+        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/eye-off.svg')} />
+        <Restriction key='mediaNsfw' icon={require('@tabler/icons/eye-off.svg')}>
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
           />
-        </Text>
+        </Restriction>
       ));
     }
 
@@ -105,46 +117,45 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (remoteInstance.getIn(['federation', 'reject']) === true) {
       return (
-        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/x.svg')} />
+        <Restriction icon={require('@tabler/icons/shield-x.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
             values={{ host, siteTitle }}
           />
-        </Text>
+        </Restriction>
       );
     } else if (hasRestrictions(remoteInstance)) {
-      return [
-        (
-          <Text theme='muted'>
+      return (
+        <>
+          <Restriction icon={require('@tabler/icons/shield-lock.svg')}>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
               values={{ host, siteTitle }}
             />
-          </Text>
-        ),
-        renderRestrictions(),
-      ];
+          </Restriction>
+
+          {renderRestrictions()}
+        </>
+      );
     } else {
       return (
-        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon src={require('@tabler/icons/check.svg')} />
+        <Restriction icon={require('@tabler/icons/shield-check.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
             values={{ host, siteTitle }}
           />
-        </Text>
+        </Restriction>
       );
     }
   };
 
   return (
-    <div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
+    <Stack space={3}>
       {renderContent()}
-    </div>
+    </Stack>
   );
 };
 
diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index 61f7a09af..dc2b334c1 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -35,7 +35,7 @@ const SuggestionItem = ({ accountId }: { accountId: string }) => {
             <HStack alignItems='center' justifyContent='center' space={1}>
               <Text
                 weight='semibold'
-                dangerouslySetInnerHTML={{ __html: account.display_name }}
+                dangerouslySetInnerHTML={{ __html: account.display_name_html }}
                 truncate
                 align='center'
                 size='sm'
@@ -78,7 +78,7 @@ const FeedSuggestions = () => {
       </HStack>
 
       <CardBody>
-        <HStack alignItems='center' className='overflow-x-auto lg:overflow-x-hidden space-x-4 md:space-x-0'>
+        <HStack space={4} alignItems='center' className='overflow-x-auto lg:overflow-x-hidden md:space-x-0'>
           {suggestedProfiles.slice(0, 4).map((suggestedProfile) => (
             <SuggestionItem key={suggestedProfile.account} accountId={suggestedProfile.account} />
           ))}
diff --git a/app/soapbox/features/landing-page/__tests__/landing-page.test.tsx b/app/soapbox/features/landing-page/__tests__/landing-page.test.tsx
index a52dbd975..6e96672ba 100644
--- a/app/soapbox/features/landing-page/__tests__/landing-page.test.tsx
+++ b/app/soapbox/features/landing-page/__tests__/landing-page.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import LandingPage from '..';
 import { rememberInstance } from '../../../actions/instance';
diff --git a/app/soapbox/features/landing-page/index.tsx b/app/soapbox/features/landing-page/index.tsx
index 08b9c2242..b508ff2d9 100644
--- a/app/soapbox/features/landing-page/index.tsx
+++ b/app/soapbox/features/landing-page/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { prepareRequest } from 'soapbox/actions/consumer-auth';
@@ -106,7 +106,7 @@ const LandingPage = () => {
     <main className='mt-16 sm:mt-24' data-testid='homepage'>
       <div className='mx-auto max-w-7xl'>
         <div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
-          <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex'>
+          <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-start lg:flex'>
             <div className='w-full'>
               <Stack space={3}>
                 <h1 className='text-5xl font-extrabold text-transparent text-ellipsis overflow-hidden bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
diff --git a/app/soapbox/features/list-adder/components/account.tsx b/app/soapbox/features/list-adder/components/account.tsx
deleted file mode 100644
index e35a0ce96..000000000
--- a/app/soapbox/features/list-adder/components/account.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useCallback } from 'react';
-
-import DisplayName from 'soapbox/components/display-name';
-import { Avatar } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
-
-interface IAccount {
-  accountId: string,
-}
-
-const Account: React.FC<IAccount> = ({ accountId }) => {
-  const getAccount = useCallback(makeGetAccount(), []);
-
-  const account = useAppSelector((state) => getAccount(state, accountId));
-
-  if (!account) return null;
-
-  return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <div className='account__display-name'>
-          <div className='account__avatar-wrapper'><Avatar src={account.avatar} size={36} /></div>
-          <DisplayName account={account} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Account;
diff --git a/app/soapbox/features/list-adder/index.tsx b/app/soapbox/features/list-adder/index.tsx
index 1e9d7c745..f47e338d7 100644
--- a/app/soapbox/features/list-adder/index.tsx
+++ b/app/soapbox/features/list-adder/index.tsx
@@ -4,11 +4,11 @@ import { createSelector } from 'reselect';
 
 import { setupListAdder, resetListAdder } from 'soapbox/actions/lists';
 import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 import NewListForm from '../lists/components/new-list-form';
 
-import Account from './components/account';
 import List from './components/list';
 
 import type { List as ImmutableList } from 'immutable';
@@ -58,7 +58,7 @@ const ListAdder: React.FC<IListAdder> = ({ accountId, onClose }) => {
       title={<FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />}
       onClose={onClickClose}
     >
-      <Account accountId={accountId} />
+      <AccountContainer id={accountId} withRelationship={false} />
 
       <br />
 
diff --git a/app/soapbox/features/list-editor/components/account.tsx b/app/soapbox/features/list-editor/components/account.tsx
index b6c04a9e6..5023a5b8b 100644
--- a/app/soapbox/features/list-editor/components/account.tsx
+++ b/app/soapbox/features/list-editor/components/account.tsx
@@ -1,12 +1,11 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists';
-import DisplayName from 'soapbox/components/display-name';
 import IconButton from 'soapbox/components/icon-button';
-import { Avatar } from 'soapbox/components/ui';
+import { HStack } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account-container';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
@@ -20,37 +19,27 @@ interface IAccount {
 const Account: React.FC<IAccount> = ({ accountId }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const getAccount = useCallback(makeGetAccount(), []);
 
-  const account = useAppSelector((state) => getAccount(state, accountId));
   const isAdded = useAppSelector((state) => state.listEditor.accounts.items.includes(accountId));
 
   const onRemove = () => dispatch(removeFromListEditor(accountId));
   const onAdd = () => dispatch(addToListEditor(accountId));
 
-  if (!account) return null;
-
   let button;
 
   if (isAdded) {
-    button = <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@tabler/icons/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <div className='account__display-name'>
-          <div className='account__avatar-wrapper'><Avatar src={account.avatar} size={36} /></div>
-          <DisplayName account={account} />
-        </div>
-
-        <div className='account__relationship'>
-          {button}
-        </div>
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountContainer id={accountId} withRelationship={false} />
       </div>
-    </div>
+      {button}
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/features/notifications/components/__tests__/notification.test.tsx b/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
index b9c5df641..e75562485 100644
--- a/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
+++ b/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { updateNotifications } from 'soapbox/actions/notifications';
 import { render, screen, rootState, createTestStore } from 'soapbox/jest/test-helpers';
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index ae3c3c74c..f89204885 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 import ReactSwipeableViews from 'react-swipeable-views';
 
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 753ef4d7f..f5f9f7274 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -1,6 +1,6 @@
 import classNames from 'clsx';
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -11,6 +11,10 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
+});
+
 /** Default avatar filenames from various backends */
 const DEFAULT_AVATARS = [
   '/avatars/original/missing.png', // Mastodon
@@ -64,7 +68,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           dispatch(snackbar.error((error.response.data as any).error.replace('Validation failed: ', '')));
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
     }).catch(console.error);
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index 31c7bc6c9..38ec425ad 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -9,7 +9,13 @@ import { useOwnAccount } from 'soapbox/hooks';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  bioPlaceholder: { id: 'onboarding.bio.placeholder', defaultMessage: 'Tell the world a little about yourself…' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
+});
+
 const BioStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   const account = useOwnAccount();
@@ -32,7 +38,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           setErrors([(error.response.data as any).error.replace('Validation failed: ', '')]);
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
   };
@@ -56,13 +62,13 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
           <Stack space={5}>
             <div className='sm:pt-10 sm:w-2/3 mx-auto'>
               <FormGroup
-                hintText='Max 500 characters'
-                labelText='Bio'
+                hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
+                labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
                 errors={errors}
               >
                 <Textarea
                   onChange={(event) => setValue(event.target.value)}
-                  placeholder='Tell the world a little about yourself…'
+                  placeholder={intl.formatMessage(messages.bioPlaceholder)}
                   value={value}
                   maxLength={500}
                 />
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index b6637589c..a1059cb91 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index 520fbc1b9..e1a9c5f30 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -1,6 +1,6 @@
 import classNames from 'clsx';
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -12,6 +12,11 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
+});
+
 /** Default header filenames from various backends */
 const DEFAULT_HEADERS = [
   '/headers/original/missing.png', // Mastodon
@@ -24,6 +29,7 @@ const isDefaultHeader = (url: string) => {
 };
 
 const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const account = useOwnAccount();
 
@@ -65,7 +71,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           dispatch(snackbar.error((error.response.data as any).error.replace('Validation failed: ', '')));
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
     }).catch(console.error);
@@ -90,7 +96,6 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
           <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
             <Stack space={10}>
               <div className='border border-solid border-gray-200 dark:border-gray-800 rounded-lg'>
-                {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
                 <div
                   role='button'
                   className='relative h-24 bg-gray-200 dark:bg-gray-800 rounded-t-md flex items-center justify-center'
@@ -98,7 +103,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   {selectedFile || account?.header && (
                     <StillImage
                       src={selectedFile || account.header}
-                      alt='Profile Header'
+                      alt={intl.formatMessage(messages.header)}
                       className='absolute inset-0 object-cover rounded-t-md'
                     />
                   )}
@@ -138,7 +143,11 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
               <Stack justifyContent='center' space={2}>
                 <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? 'Saving…' : 'Next'}
+                  {isSubmitting ? (
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+                  ) : (
+                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+                  )}
                 </Button>
 
                 {isDisabled && (
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index 00f38916e..5d2e101b2 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -9,7 +9,13 @@ import { useOwnAccount } from 'soapbox/hooks';
 
 import type { AxiosError } from 'axios';
 
+const messages = defineMessages({
+  usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
+  error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
+});
+
 const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   const account = useOwnAccount();
@@ -43,7 +49,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
         if (error.response?.status === 422) {
           setErrors([(error.response.data as any).error.replace('Validation failed: ', '')]);
         } else {
-          dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
+          dispatch(snackbar.error(messages.error));
         }
       });
   };
@@ -68,12 +74,12 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
             <Stack space={5}>
               <FormGroup
                 hintText={hintText}
-                labelText='Display name'
+                labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
                 errors={errors}
               >
                 <Input
                   onChange={(event) => setValue(event.target.value)}
-                  placeholder='Eg. John Smith'
+                  placeholder={intl.formatMessage(messages.usernamePlaceholder)}
                   type='text'
                   value={value}
                   maxLength={30}
@@ -88,7 +94,11 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
                   disabled={isDisabled || isSubmitting}
                   onClick={handleSubmit}
                 >
-                  {isSubmitting ? 'Saving…' : 'Next'}
+                  {isSubmitting ? (
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+                  ) : (
+                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+                  )}
                 </Button>
 
                 <Button block theme='tertiary' type='button' onClick={onNext}>
diff --git a/app/soapbox/features/onboarding/steps/fediverse-step.tsx b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
index 6dbb26620..4d83c5b98 100644
--- a/app/soapbox/features/onboarding/steps/fediverse-step.tsx
+++ b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Account from 'soapbox/components/account';
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index e01206251..d91366899 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
diff --git a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
index d84fe1a4e..7d9fa62f0 100644
--- a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { Stack } from 'soapbox/components/ui';
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-card.tsx b/app/soapbox/features/placeholder/components/placeholder-card.tsx
index f587589d6..f0ef9bc72 100644
--- a/app/soapbox/features/placeholder/components/placeholder-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-card.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
index 7dfedfc7d..c367af132 100644
--- a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
@@ -5,17 +5,18 @@ import { randomIntFromInterval, generateText } from '../utils';
 interface IPlaceholderDisplayName {
   maxLength: number,
   minLength: number,
+  withSuffix?: boolean,
 }
 
 /** Fake display name to show when data is loading. */
-const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength }) => {
+const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength, withSuffix = true }) => {
   const length = randomIntFromInterval(maxLength, minLength);
   const acctLength = randomIntFromInterval(maxLength, minLength);
 
   return (
     <div className='flex flex-col text-primary-50 dark:text-primary-800'>
       <p>{generateText(length)}</p>
-      <p>{generateText(acctLength)}</p>
+      {withSuffix && <p>{generateText(acctLength)}</p>}
     </div>
   );
 };
diff --git a/app/soapbox/features/placeholder/components/placeholder-notification.tsx b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
index 1a035066d..fbeec6a42 100644
--- a/app/soapbox/features/placeholder/components/placeholder-notification.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
@@ -1,4 +1,6 @@
-import * as React from 'react';
+import React from 'react';
+
+import { HStack } from 'soapbox/components/ui';
 
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
@@ -13,7 +15,7 @@ const PlaceholderNotification = () => (
       </div>
 
       <div>
-        <div className='flex space-x-3 items-center'>
+        <HStack space={3} alignItems='center'>
           <div className='flex-shrink-0'>
             <PlaceholderAvatar size={48} />
           </div>
@@ -21,7 +23,7 @@ const PlaceholderNotification = () => (
           <div className='min-w-0 flex-1'>
             <PlaceholderDisplayName minLength={3} maxLength={25} />
           </div>
-        </div>
+        </HStack>
       </div>
 
       <div className='mt-4'>
diff --git a/app/soapbox/features/placeholder/components/placeholder-status.tsx b/app/soapbox/features/placeholder/components/placeholder-status.tsx
index b015c9df9..51cb4a5ce 100644
--- a/app/soapbox/features/placeholder/components/placeholder-status.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-status.tsx
@@ -1,5 +1,7 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
+
+import { HStack } from 'soapbox/components/ui';
 
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
@@ -19,7 +21,7 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) =>
   >
     <div className='w-full animate-pulse overflow-hidden'>
       <div>
-        <div className='flex space-x-3 items-center'>
+        <HStack space={3} alignItems='center'>
           <div className='flex-shrink-0'>
             <PlaceholderAvatar size={42} />
           </div>
@@ -27,7 +29,7 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) =>
           <div className='min-w-0 flex-1'>
             <PlaceholderDisplayName minLength={3} maxLength={25} />
           </div>
-        </div>
+        </HStack>
       </div>
 
       <div className='mt-4 status__content-wrapper'>
diff --git a/app/soapbox/features/public-layout/components/header.tsx b/app/soapbox/features/public-layout/components/header.tsx
index 641b8a6ac..ea276797e 100644
--- a/app/soapbox/features/public-layout/components/header.tsx
+++ b/app/soapbox/features/public-layout/components/header.tsx
@@ -15,6 +15,7 @@ import Sonar from './sonar';
 import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
+  menu: { id: 'header.menu.title', defaultMessage: 'Open menu' },
   home: { id: 'header.home.label', defaultMessage: 'Home' },
   login: { id: 'header.login.label', defaultMessage: 'Log in' },
   register: { id: 'header.register.label', defaultMessage: 'Register' },
@@ -50,14 +51,12 @@ const Header = () => {
     setLoading(true);
 
     dispatch(logIn(username, password) as any)
-      .then(({ access_token }: { access_token: string }) => {
-        return (
-          dispatch(verifyCredentials(access_token) as any)
-            // Refetch the instance for authenticated fetch
-            .then(() => dispatch(fetchInstance()))
-            .then(() => setShouldRedirect(true))
-        );
-      })
+      .then(({ access_token }: { access_token: string }) => (
+        dispatch(verifyCredentials(access_token) as any)
+        // Refetch the instance for authenticated fetch
+          .then(() => dispatch(fetchInstance()))
+          .then(() => setShouldRedirect(true))
+      ))
       .catch((error: AxiosError) => {
         setLoading(false);
 
@@ -81,7 +80,7 @@ const Header = () => {
             </div>
 
             <IconButton
-              title='Open Menu'
+              title={intl.formatMessage(messages.menu)}
               src={require('@tabler/icons/menu-2.svg')}
               onClick={open}
               className='md:hidden mr-4 bg-transparent text-gray-700 dark:text-gray-600 hover:text-gray-600'
@@ -94,7 +93,7 @@ const Header = () => {
 
           </div>
 
-          <div className='ml-10 flex space-x-6 items-center relative z-10'>
+          <HStack space={6} alignItems='center' className='ml-10 relative z-10'>
             <HStack alignItems='center'>
               <HStack space={6} alignItems='center' className='hidden md:flex md:mr-6'>
                 {links.get('help') && (
@@ -124,7 +123,7 @@ const Header = () => {
               </HStack>
             </HStack>
 
-            <Form className='hidden xl:flex space-x-2 items-center' onSubmit={handleSubmit}>
+            <Form className='hidden xl:flex space-x-2 rtl:space-x-reverse items-center' onSubmit={handleSubmit}>
               <Input
                 required
                 value={username}
@@ -167,7 +166,7 @@ const Header = () => {
                 {intl.formatMessage(messages.login)}
               </Button>
             </Form>
-          </div>
+          </HStack>
         </div>
       </nav>
     </header>
diff --git a/app/soapbox/features/remote-timeline/index.tsx b/app/soapbox/features/remote-timeline/index.tsx
index 7ab185be9..a6963df48 100644
--- a/app/soapbox/features/remote-timeline/index.tsx
+++ b/app/soapbox/features/remote-timeline/index.tsx
@@ -5,8 +5,8 @@ import { useHistory } from 'react-router-dom';
 import { connectRemoteStream } from 'soapbox/actions/streaming';
 import { expandRemoteTimeline } from 'soapbox/actions/timelines';
 import IconButton from 'soapbox/components/icon-button';
-import { HStack, Text } from 'soapbox/components/ui';
-import Column from 'soapbox/features/ui/components/column';
+import SubNavigation from 'soapbox/components/sub-navigation';
+import { Column, HStack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
@@ -14,7 +14,7 @@ import Timeline from '../ui/components/timeline';
 import PinnedHostsPicker from './components/pinned-hosts-picker';
 
 const messages = defineMessages({
-  title: { id: 'column.remote', defaultMessage: 'Federated timeline' },
+  heading: { id: 'column.remote', defaultMessage: 'Federated timeline' },
 });
 
 interface IRemoteTimeline {
@@ -65,18 +65,26 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}>
-      {instance && <PinnedHostsPicker host={instance} />}
-      {!pinned && <HStack className='mb-4 px-2' space={2}>
-        <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
-        <Text>
-          <FormattedMessage
-            id='remote_timeline.filter_message'
-            defaultMessage='You are viewing the timeline of {instance}.'
-            values={{ instance }}
-          />
-        </Text>
-      </HStack>}
+    <Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
+      <div className='px-4 pt-4 sm:p-0'>
+        <SubNavigation message={instance} />
+
+        {instance && <PinnedHostsPicker host={instance} />}
+
+        {!pinned && (
+          <HStack className='mb-4 px-2' space={2}>
+            <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
+            <Text>
+              <FormattedMessage
+                id='remote_timeline.filter_message'
+                defaultMessage='You are viewing the timeline of {instance}.'
+                values={{ instance }}
+              />
+            </Text>
+          </HStack>
+        )}
+      </div>
+
       <Timeline
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
diff --git a/app/soapbox/features/reply-mentions/account.tsx b/app/soapbox/features/reply-mentions/account.tsx
index 53dc4e02c..5facac7a8 100644
--- a/app/soapbox/features/reply-mentions/account.tsx
+++ b/app/soapbox/features/reply-mentions/account.tsx
@@ -3,9 +3,9 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
 import { addToMentions, removeFromMentions } from 'soapbox/actions/compose';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
+import AccountComponent from 'soapbox/components/account';
 import IconButton from 'soapbox/components/icon-button';
+import { HStack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useCompose } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
@@ -44,24 +44,18 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@tabler/icons/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@tabler/icons/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <div className='account__display-name'>
-          <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-          <DisplayName account={account} />
-        </div>
-
-        <div className='account__relationship'>
-          {!author && button}
-        </div>
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountComponent account={account} withRelationship={false} />
       </div>
-    </div>
+      {!author && button}
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/features/settings/index.tsx b/app/soapbox/features/settings/index.tsx
index aab37ed9d..708b65e88 100644
--- a/app/soapbox/features/settings/index.tsx
+++ b/app/soapbox/features/settings/index.tsx
@@ -88,9 +88,11 @@ const Settings = () => {
                     <ListItem label={intl.formatMessage(messages.changeEmail)} onClick={navigateToChangeEmail} />
                     <ListItem label={intl.formatMessage(messages.changePassword)} onClick={navigateToChangePassword} />
                     <ListItem label={intl.formatMessage(messages.configureMfa)} onClick={navigateToMfa}>
-                      {isMfaEnabled ?
-                        intl.formatMessage(messages.mfaEnabled) :
-                        intl.formatMessage(messages.mfaDisabled)}
+                      <span>
+                        {isMfaEnabled ?
+                          intl.formatMessage(messages.mfaEnabled) :
+                          intl.formatMessage(messages.mfaDisabled)}
+                      </span>
                     </ListItem>
                   </>
                 )}
@@ -130,14 +132,15 @@ const Settings = () => {
 
             <CardBody>
               <List>
-                {features.security && (
-                  <ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
-                )}
                 {features.federating && (features.accountMoving ? (
                   <ListItem label={intl.formatMessage(messages.accountMigration)} onClick={navigateToMoveAccount} />
                 ) : features.accountAliases && (
                   <ListItem label={intl.formatMessage(messages.accountAliases)} onClick={navigateToAliases} />
                 ))}
+
+                {features.security && (
+                  <ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
+                )}
               </List>
             </CardBody>
           </>
diff --git a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
index 75ffec27c..5e0a6de2c 100644
--- a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { CryptoAddress } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
index bf2451240..19b6af9f7 100644
--- a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { FooterItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
index 616fddb82..b894b5984 100644
--- a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
-import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 
 import IconPicker from './icon-picker';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import type { PromoPanelItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx
index 72cd1de7d..298788cdf 100644
--- a/app/soapbox/features/soapbox-config/index.tsx
+++ b/app/soapbox/features/soapbox-config/index.tsx
@@ -8,19 +8,19 @@ import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
 import {
   Accordion,
+  Button,
   Column,
   CardHeader,
   CardTitle,
+  FileInput,
   Form,
   FormActions,
   FormGroup,
   Input,
-  FileInput,
+  Streamfield,
   Textarea,
-  Button,
   Toggle,
 } from 'soapbox/components/ui';
-import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
@@ -202,7 +202,7 @@ const SoapboxConfig: React.FC = () => {
           >
             <FileInput
               onChange={handleFileChange(['logo'])}
-              accept='image/svg,image/png'
+              accept='image/svg+xml,image/png'
             />
           </FormGroup>
 
diff --git a/app/soapbox/features/ui/components/modals/actions-modal.tsx b/app/soapbox/features/ui/components/modals/actions-modal.tsx
index 7648069fa..ab2ca6402 100644
--- a/app/soapbox/features/ui/components/modals/actions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx
@@ -5,7 +5,7 @@ import { spring } from 'react-motion';
 
 import Icon from 'soapbox/components/icon';
 import StatusContent from 'soapbox/components/status-content';
-import { Stack } from 'soapbox/components/ui';
+import { HStack, Stack } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 
 import Motion from '../../util/optional-motion';
@@ -29,23 +29,24 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
     const { icon = null, text, meta = null, active = false, href = '#', isLogout, destructive } = action;
 
     const Comp = href === '#' ? 'button' : 'a';
-    const compProps = href === '#' ? { onClick: onClick } : { href: href };
+    const compProps = href === '#' ? { onClick: onClick } : { href: href, rel: 'noopener' };
 
     return (
       <li key={`${text}-${i}`}>
-        <Comp
+        <HStack
           {...compProps}
-          rel='noopener'
+          space={2.5}
           data-index={i}
           className={classNames('w-full', { active, destructive })}
           data-method={isLogout ? 'delete' : null}
+          element={Comp}
         >
           {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
           <div>
             <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
             <div>{meta}</div>
           </div>
-        </Comp>
+        </HStack>
       </li>
     );
   };
diff --git a/app/soapbox/features/ui/components/modals/boost-modal.tsx b/app/soapbox/features/ui/components/modals/boost-modal.tsx
index 3a09be5c3..22fe18e8a 100644
--- a/app/soapbox/features/ui/components/modals/boost-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/boost-modal.tsx
@@ -30,7 +30,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
 
   return (
     <Modal
-      title='Repost?'
+      title={<FormattedMessage id='boost_modal.title' defaultMessage='Repost?' />}
       confirmationAction={handleReblog}
       confirmationText={intl.formatMessage(buttonText)}
     >
diff --git a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
index 9dbde1f79..2d3e15872 100644
--- a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
@@ -1,17 +1,15 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Toggle from 'react-toggle';
 
 import { updateMrf } from 'soapbox/actions/mrf';
 import snackbar from 'soapbox/actions/snackbar';
-import { HStack, Modal, Stack, Text } from 'soapbox/components/ui';
-import { SimpleForm } from 'soapbox/features/forms';
+import List, { ListItem } from 'soapbox/components/list';
+import { Modal } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
 
-const getRemoteInstance = makeGetRemoteInstance();
-
 const messages = defineMessages({
   mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
   forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' },
@@ -31,6 +29,7 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const getRemoteInstance = useCallback(makeGetRemoteInstance(), []);
   const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
 
   const [data, setData] = useState(ImmutableMap<string, any>());
@@ -82,74 +81,56 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
       confirmationAction={handleSubmit}
       confirmationText={intl.formatMessage(messages.save)}
     >
-      <SimpleForm onSubmit={handleSubmit}>
-        <Stack space={2}>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={reject}
-              onChange={handleDataChange('reject')}
-              icons={false}
-              id='reject'
-            />
+      <List>
+        <ListItem label={<FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />}>
+          <Toggle
+            checked={reject}
+            onChange={handleDataChange('reject')}
+            icons={false}
+            id='reject'
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='reject'>
-              <FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={fullMediaRemoval}
-              onChange={handleMediaRemoval}
-              icons={false}
-              id='media_removal'
-              disabled={reject}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />}>
+          <Toggle
+            checked={fullMediaRemoval}
+            onChange={handleMediaRemoval}
+            icons={false}
+            id='media_removal'
+            disabled={reject}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='media_removal'>
-              <FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={media_nsfw}
-              onChange={handleDataChange('media_nsfw')}
-              icons={false}
-              id='media_nsfw'
-              disabled={reject || media_removal}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />}>
+          <Toggle
+            checked={media_nsfw}
+            onChange={handleDataChange('media_nsfw')}
+            icons={false}
+            id='media_nsfw'
+            disabled={reject || media_removal}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='media_nsfw'>
-              <FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={followers_only}
-              onChange={handleDataChange('followers_only')}
-              icons={false}
-              id='followers_only'
-              disabled={reject}
-            />
+        <ListItem label={<FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />}>
+          <Toggle
+            checked={followers_only}
+            onChange={handleDataChange('followers_only')}
+            icons={false}
+            id='followers_only'
+            disabled={reject}
+          />
+        </ListItem>
 
-            <Text theme='muted' tag='label' size='sm' htmlFor='followers_only'>
-              <FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />
-            </Text>
-          </HStack>
-          <HStack space={2} alignItems='center'>
-            <Toggle
-              checked={federated_timeline_removal}
-              onChange={handleDataChange('federated_timeline_removal')}
-              icons={false}
-              id='federated_timeline_removal'
-              disabled={reject || followers_only}
-            />
-
-            <Text theme='muted' tag='label' size='sm' htmlFor='federated_timeline_removal'>
-              <FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />
-            </Text>
-          </HStack>
-        </Stack>
-      </SimpleForm>
+        <ListItem label={<FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />}>
+          <Toggle
+            checked={federated_timeline_removal}
+            onChange={handleDataChange('federated_timeline_removal')}
+            icons={false}
+            id='federated_timeline_removal'
+            disabled={reject || followers_only}
+          />
+        </ListItem>
+      </List>
     </Modal>
   );
 };
diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index 6ed8ef435..bfd4ed29a 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -83,7 +83,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, []);
+  }, [index]);
 
   const getIndex = () => {
     return index !== null ? index : props.index;
@@ -197,7 +197,6 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           width={width}
           height={height}
           startTime={time}
-          onCloseVideo={onClose}
           detailed
           link={link}
           alt={attachment.description}
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index aa9c4a1bd..871ade6c4 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -108,7 +108,7 @@ const ReasonStep = (_props: IReasonStep) => {
                     data-testid={`rule-${rule.id}`}
                     onClick={() => dispatch(changeReportRule(rule.id))}
                     className={classNames({
-                      'relative border border-solid border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-primary-800/30 text-left w-full p-4 flex justify-between items-center cursor-pointer': true,
+                      'relative border border-solid border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-primary-800/30 text-start w-full p-4 flex justify-between items-center cursor-pointer': true,
                       'rounded-tl-lg rounded-tr-lg': idx === 0,
                       'rounded-bl-lg rounded-br-lg': idx === rules.length - 1,
                       'bg-gray-200 hover:bg-gray-200 dark:bg-primary-800/50': isSelected,
diff --git a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
index 6441e8763..ee45e4947 100644
--- a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
@@ -150,7 +150,7 @@ const VerifySmsModal: React.FC<IVerifySmsModal> = ({ onClose }) => {
         );
       case Statuses.READY:
         return (
-          <FormGroup labelText='Phone Number'>
+          <FormGroup labelText={<FormattedMessage id='sms_verification.phone.label' defaultMessage='Phone number' />}>
             <PhoneInput
               value={phone}
               onChange={onChange}
diff --git a/app/soapbox/features/ui/components/modals/video-modal.tsx b/app/soapbox/features/ui/components/modals/video-modal.tsx
index 58ddea245..f323a397e 100644
--- a/app/soapbox/features/ui/components/modals/video-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/video-modal.tsx
@@ -37,7 +37,6 @@ const VideoModal: React.FC<IVideoModal> = ({ status, account, media, time, onClo
         blurhash={media.blurhash}
         src={media.url}
         startTime={time}
-        onCloseVideo={onClose}
         link={link}
         detailed
         alt={media.description}
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 1df4df05a..2fd186830 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -8,7 +8,7 @@ import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
 import { openSidebar } from 'soapbox/actions/sidebar';
 import SiteLogo from 'soapbox/components/site-logo';
-import { Avatar, Button, Form, IconButton, Input, Tooltip } from 'soapbox/components/ui';
+import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
 import { useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 
@@ -78,9 +78,10 @@ const Navbar = () => {
             </div>
           )}
 
-          <div
-            className={classNames({
-              'flex-1 flex items-center lg:items-stretch space-x-4': true,
+          <HStack
+            space={4}
+            alignItems='center'
+            className={classNames('flex-1 enter lg:items-stretch', {
               'justify-center lg:justify-start': account,
               'justify-start': !account,
             })}
@@ -97,9 +98,9 @@ const Navbar = () => {
                 </div>
               </div>
             )}
-          </div>
+          </HStack>
 
-          <div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'>
+          <HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
             {account ? (
               <div className='hidden relative lg:flex items-center'>
                 <ProfileDropdown account={account}>
@@ -108,7 +109,7 @@ const Navbar = () => {
               </div>
             ) : (
               <>
-                <Form className='hidden lg:flex space-x-2 items-center' onSubmit={handleSubmit}>
+                <Form className='hidden lg:flex space-x-2 rtl:space-x-reverse items-center' onSubmit={handleSubmit}>
                   <Input
                     required
                     value={username}
@@ -159,7 +160,7 @@ const Navbar = () => {
                 </div>
               </>
             )}
-          </div>
+          </HStack>
         </div>
       </div>
     </nav>
diff --git a/app/soapbox/features/ui/components/profile-field.tsx b/app/soapbox/features/ui/components/profile-field.tsx
new file mode 100644
index 000000000..2593c5201
--- /dev/null
+++ b/app/soapbox/features/ui/components/profile-field.tsx
@@ -0,0 +1,73 @@
+import classNames from 'clsx';
+import React from 'react';
+import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
+
+import Markup from 'soapbox/components/markup';
+import { HStack, Icon } from 'soapbox/components/ui';
+import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
+import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
+
+import type { Field } from 'soapbox/types/entities';
+
+const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1];
+const isTicker = (value: string): boolean => Boolean(getTicker(value));
+
+const messages = defineMessages({
+  linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
+});
+
+const dateFormatOptions: FormatDateOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour12: true,
+  hour: 'numeric',
+  minute: '2-digit',
+};
+
+interface IProfileField {
+  field: Field,
+}
+
+/** Renders a single profile field. */
+const ProfileField: React.FC<IProfileField> = ({ field }) => {
+  const intl = useIntl();
+
+  if (isTicker(field.name)) {
+    return (
+      <BundleContainer fetchComponent={CryptoAddress}>
+        {Component => (
+          <Component
+            ticker={getTicker(field.name).toLowerCase()}
+            address={field.value_plain}
+          />
+        )}
+      </BundleContainer>
+    );
+  }
+
+  return (
+    <dl>
+      <dt title={field.name}>
+        <Markup weight='bold' tag='span' dangerouslySetInnerHTML={{ __html: field.name_emojified }} />
+      </dt>
+
+      <dd
+        className={classNames({ 'text-success-500': field.verified_at })}
+        title={field.value_plain}
+      >
+        <HStack space={2} alignItems='center'>
+          {field.verified_at && (
+            <span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
+              <Icon src={require('@tabler/icons/check.svg')} />
+            </span>
+          )}
+
+          <Markup className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
+        </HStack>
+      </dd>
+    </dl>
+  );
+};
+
+export default ProfileField;
diff --git a/app/soapbox/features/ui/components/profile-fields-panel.tsx b/app/soapbox/features/ui/components/profile-fields-panel.tsx
index 1ee911e34..1babfb63f 100644
--- a/app/soapbox/features/ui/components/profile-fields-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-fields-panel.tsx
@@ -1,77 +1,11 @@
-import classNames from 'clsx';
 import React from 'react';
-import { defineMessages, useIntl, FormattedMessage, FormatDateOptions } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
-import Markup from 'soapbox/components/markup';
-import { Widget, Stack, HStack, Icon } from 'soapbox/components/ui';
-import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
-import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
+import { Widget, Stack } from 'soapbox/components/ui';
 
-import type { Account, Field } from 'soapbox/types/entities';
+import ProfileField from './profile-field';
 
-const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1];
-const isTicker = (value: string): boolean => Boolean(getTicker(value));
-
-const messages = defineMessages({
-  linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
-  account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
-  deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
-  bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
-});
-
-const dateFormatOptions: FormatDateOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-  hour12: true,
-  hour: 'numeric',
-  minute: '2-digit',
-};
-
-interface IProfileField {
-  field: Field,
-}
-
-/** Renders a single profile field. */
-const ProfileField: React.FC<IProfileField> = ({ field }) => {
-  const intl = useIntl();
-
-  if (isTicker(field.name)) {
-    return (
-      <BundleContainer fetchComponent={CryptoAddress}>
-        {Component => (
-          <Component
-            ticker={getTicker(field.name).toLowerCase()}
-            address={field.value_plain}
-          />
-        )}
-      </BundleContainer>
-    );
-  }
-
-  return (
-    <dl>
-      <dt title={field.name}>
-        <Markup weight='bold' tag='span' dangerouslySetInnerHTML={{ __html: field.name_emojified }} />
-      </dt>
-
-      <dd
-        className={classNames({ 'text-success-500': field.verified_at })}
-        title={field.value_plain}
-      >
-        <HStack space={2} alignItems='center'>
-          {field.verified_at && (
-            <span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
-              <Icon src={require('@tabler/icons/check.svg')} />
-            </span>
-          )}
-
-          <Markup className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
-        </HStack>
-      </dd>
-    </dl>
-  );
-};
+import type { Account } from 'soapbox/types/entities';
 
 interface IProfileFieldsPanel {
   account: Account,
diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx
index 89239bd61..a765b38f2 100644
--- a/app/soapbox/features/ui/components/profile-info-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-info-panel.tsx
@@ -13,6 +13,7 @@ import { badgeToTag, getBadges as getAccountBadges } from 'soapbox/utils/badges'
 import { capitalize } from 'soapbox/utils/strings';
 
 import ProfileFamiliarFollowers from './profile-familiar-followers';
+import ProfileField from './profile-field';
 import ProfileStats from './profile-stats';
 
 import type { Account } from 'soapbox/types/entities';
@@ -231,6 +232,14 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
         <ProfileFamiliarFollowers account={account} />
       </Stack>
+
+      {account.fields.size > 0 && (
+        <Stack space={2} className='mt-4 xl:hidden'>
+          {account.fields.map((field, i) => (
+            <ProfileField field={field} key={i} />
+          ))}
+        </Stack>
+      )}
     </div>
   );
 };
diff --git a/app/soapbox/features/ui/components/promo-panel.tsx b/app/soapbox/features/ui/components/promo-panel.tsx
index 6766a6ad4..9add33b27 100644
--- a/app/soapbox/features/ui/components/promo-panel.tsx
+++ b/app/soapbox/features/ui/components/promo-panel.tsx
@@ -20,7 +20,7 @@ const PromoPanel: React.FC = () => {
         {promoItems.map((item, i) => (
           <Text key={i}>
             <a className='flex items-center' href={item.url} target='_blank'>
-              <Icon id={item.icon} className='flex-none text-lg mr-2' fixedWidth />
+              <Icon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
               {item.textLocales.get(locale) || item.text}
             </a>
           </Text>
diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index e285788e0..8ce8199e7 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -1,9 +1,7 @@
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'soapbox/components/ui';
-
-import Select from '../../../components/ui/select/select';
+import { Icon, Select } from 'soapbox/components/ui';
 
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
diff --git a/app/soapbox/features/ui/components/trends-panel.tsx b/app/soapbox/features/ui/components/trends-panel.tsx
index 75ef4f151..e7f11683a 100644
--- a/app/soapbox/features/ui/components/trends-panel.tsx
+++ b/app/soapbox/features/ui/components/trends-panel.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/app/soapbox/features/ui/components/upload-area.tsx b/app/soapbox/features/ui/components/upload-area.tsx
index 5cc0c9e64..6d6fb395b 100644
--- a/app/soapbox/features/ui/components/upload-area.tsx
+++ b/app/soapbox/features/ui/components/upload-area.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import * as React from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
diff --git a/app/soapbox/features/ui/components/user-panel.tsx b/app/soapbox/features/ui/components/user-panel.tsx
index 8f0fbf517..918d94efd 100644
--- a/app/soapbox/features/ui/components/user-panel.tsx
+++ b/app/soapbox/features/ui/components/user-panel.tsx
@@ -36,13 +36,9 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
     <div className='relative'>
       <Stack space={2}>
         <Stack>
-          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative'>
+          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative overflow-hidden'>
             {header && (
-              <StillImage
-                src={account.get('header')}
-                className='absolute inset-0 object-cover'
-                alt=''
-              />
+              <StillImage src={account.header} />
             )}
           </div>
 
diff --git a/app/soapbox/features/ui/components/who-to-follow-panel.tsx b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
index f479acead..dd2fc91fa 100644
--- a/app/soapbox/features/ui/components/who-to-follow-panel.tsx
+++ b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/app/soapbox/features/verification/email-passthru.tsx b/app/soapbox/features/verification/email-passthru.tsx
index e51f3220f..bfdc017de 100644
--- a/app/soapbox/features/verification/email-passthru.tsx
+++ b/app/soapbox/features/verification/email-passthru.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory, useParams } from 'react-router-dom';
 
diff --git a/app/soapbox/features/verification/index.tsx b/app/soapbox/features/verification/index.tsx
index 4470bd4c2..88c9dc435 100644
--- a/app/soapbox/features/verification/index.tsx
+++ b/app/soapbox/features/verification/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index e4bf2c1e2..6539ca8c8 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
@@ -16,22 +16,12 @@ import PasswordIndicator from './components/password-indicator';
 import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
-  success: {
-    id: 'registrations.success',
-    defaultMessage: 'Welcome to {siteTitle}!',
-  },
-  usernameHint: {
-    id: 'registrations.username.hint',
-    defaultMessage: 'May only contain A-Z, 0-9, and underscores',
-  },
-  usernameTaken: {
-    id: 'registrations.unprocessable_entity',
-    defaultMessage: 'This username has already been taken.',
-  },
-  error: {
-    id: 'registrations.error',
-    defaultMessage: 'Failed to register your account.',
-  },
+  success: { id: 'registrations.success', defaultMessage: 'Welcome to {siteTitle}!' },
+  usernameLabel: { id: 'registrations.username.label', defaultMessage: 'Your username' },
+  usernameHint: { id: 'registrations.username.hint', defaultMessage: 'May only contain A-Z, 0-9, and underscores' },
+  usernameTaken: { id: 'registrations.unprocessable_entity', defaultMessage: 'This username has already been taken.' },
+  passwordLabel: { id: 'registrations.password.label', defaultMessage: 'Password' },
+  error: { id: 'registrations.error', defaultMessage: 'Failed to register your account.' },
 });
 
 const initialState = {
@@ -108,7 +98,7 @@ const Registration = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto space-y-4'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Your username' hintText={intl.formatMessage(messages.usernameHint)}>
+          <FormGroup labelText={intl.formatMessage(messages.usernameLabel)} hintText={intl.formatMessage(messages.usernameHint)}>
             <Input
               name='username'
               type='text'
@@ -120,7 +110,7 @@ const Registration = () => {
             />
           </FormGroup>
 
-          <FormGroup labelText='Password'>
+          <FormGroup labelText={intl.formatMessage(messages.passwordLabel)}>
             <Input
               name='password'
               type='password'
@@ -140,7 +130,7 @@ const Registration = () => {
               type='submit'
               disabled={isLoading || !hasValidPassword}
             >
-              Register
+              <FormattedMessage id='header.register.label' defaultMessage='Register' />
             </Button>
 
             {(links.get('termsOfService') && links.get('privacyPolicy')) ? (
diff --git a/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx b/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
index 9e05686b7..fc9131b97 100644
--- a/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
+++ b/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx
@@ -23,7 +23,7 @@ describe('<EmailVerification />', () => {
     it('successfully submits', async() => {
       render(<EmailVerification />);
 
-      await userEvent.type(screen.getByLabelText('Email Address'), 'foo@bar.com{enter}');
+      await userEvent.type(screen.getByLabelText('E-mail address'), 'foo@bar.com{enter}');
 
       await waitFor(() => {
         fireEvent.submit(
@@ -50,7 +50,7 @@ describe('<EmailVerification />', () => {
     it('renders errors', async() => {
       render(<EmailVerification />);
 
-      await userEvent.type(screen.getByLabelText('Email Address'), 'foo@bar.com{enter}');
+      await userEvent.type(screen.getByLabelText('E-mail address'), 'foo@bar.com{enter}');
 
       await waitFor(() => {
         fireEvent.submit(
diff --git a/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx b/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
index 26add4f4f..6cdba4104 100644
--- a/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
+++ b/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx
@@ -26,7 +26,7 @@ describe('<SmsVerification />', () => {
 
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {
@@ -53,7 +53,7 @@ describe('<SmsVerification />', () => {
 
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {
@@ -87,7 +87,7 @@ describe('<SmsVerification />', () => {
     it('renders errors', async() => {
       render(<SmsVerification />);
 
-      await userEvent.type(screen.getByLabelText('Phone Number'), '+1 (555) 555-5555');
+      await userEvent.type(screen.getByLabelText('Phone number'), '+1 (555) 555-5555');
       await waitFor(() => {
         fireEvent.submit(
           screen.getByRole('button', { name: 'Next' }), {
diff --git a/app/soapbox/features/verification/steps/age-verification.tsx b/app/soapbox/features/verification/steps/age-verification.tsx
index 84283f4b4..bb35ffe40 100644
--- a/app/soapbox/features/verification/steps/age-verification.tsx
+++ b/app/soapbox/features/verification/steps/age-verification.tsx
@@ -61,13 +61,21 @@ const AgeVerification = () => {
           <Datepicker onChange={onChange} />
 
           <Text theme='muted' size='sm'>
-            {siteTitle} requires users to be at least {ageMinimum} years old to
-            access its platform. Anyone under the age of {ageMinimum} years old
-            cannot access this platform.
+            <FormattedMessage
+              id='age_verification.body'
+              defaultMessage='{siteTitle} requires users to be at least {ageMinimum} years old to access its platform. Anyone under the age of {ageMinimum} years old cannot access this platform.'
+              values={{
+                siteTitle,
+                ageMinimum,
+              }}
+            />
+
           </Text>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index 98c11b829..a83483616 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -13,6 +13,7 @@ const messages = defineMessages({
   verificationFail: { id: 'email_verification.fail', defaultMessage: 'Failed to request email verification.' },
   verificationFailTakenAlert: { id: 'email_verifilcation.exists', defaultMessage: 'This email has already been taken.' },
   verificationFailTaken: { id: 'email_verification.taken', defaultMessage: 'is taken' },
+  emailLabel: { id: 'email_verification.email.label', defaultMessage: 'E-mail address' },
 });
 
 const Statuses = {
@@ -122,7 +123,7 @@ const EmailVerification = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Email Address' errors={errors}>
+          <FormGroup labelText={intl.formatMessage(messages.emailLabel)} errors={errors}>
             <Input
               type='email'
               value={email}
@@ -134,7 +135,9 @@ const EmailVerification = () => {
           </FormGroup>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/steps/sms-verification.tsx b/app/soapbox/features/verification/steps/sms-verification.tsx
index 7337c706d..efe0a5ffc 100644
--- a/app/soapbox/features/verification/steps/sms-verification.tsx
+++ b/app/soapbox/features/verification/steps/sms-verification.tsx
@@ -13,6 +13,7 @@ const messages = defineMessages({
   verificationSuccess: { id: 'sms_verification.success', defaultMessage: 'A verification code has been sent to your phone number.' },
   verificationFail: { id: 'sms_verification.fail', defaultMessage: 'Failed to send SMS message to your phone number.' },
   verificationExpired: { id: 'sms_verification.expired', defaultMessage: 'Your SMS token has expired.' },
+  phoneLabel: { id: 'sms_verification.phone.label', defaultMessage: 'Phone number' },
 });
 
 const Statuses = {
@@ -98,7 +99,7 @@ const SmsVerification = () => {
 
         <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto space-y-4'>
           <Text theme='muted' size='sm' align='center'>
-            We sent you a 6-digit code via SMS. Enter it below.
+            <FormattedMessage id='sms_verification.sent.body' defaultMessage='We sent you a 6-digit code via SMS. Enter it below.' />
           </Text>
 
           <OtpInput
@@ -120,7 +121,7 @@ const SmsVerification = () => {
               onClick={resendVerificationCode}
               disabled={requestedAnother}
             >
-              Resend verification code?
+              <FormattedMessage id='sms_verification.sent.actions.resend' defaultMessage='Resend verification code?' />
             </Button>
           </div>
         </div>
@@ -138,7 +139,7 @@ const SmsVerification = () => {
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
-          <FormGroup labelText='Phone Number'>
+          <FormGroup labelText={intl.formatMessage(messages.phoneLabel)}>
             <PhoneInput
               value={phone}
               onChange={onChange}
@@ -147,7 +148,9 @@ const SmsVerification = () => {
           </FormGroup>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>Next</Button>
+            <Button block theme='primary' type='submit' disabled={isLoading || !isValid}>
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            </Button>
           </div>
         </Form>
       </div>
diff --git a/app/soapbox/features/verification/waitlist-page.tsx b/app/soapbox/features/verification/waitlist-page.tsx
index 71677d3d3..ebfe6a00d 100644
--- a/app/soapbox/features/verification/waitlist-page.tsx
+++ b/app/soapbox/features/verification/waitlist-page.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -40,9 +41,9 @@ const WaitlistPage = (/* { account } */) => {
               <SiteLogo alt='Logo' className='h-7' />
             </Link>
 
-            <div className='absolute inset-y-0 right-0 flex items-center pr-2 space-x-3'>
+            <div className='absolute inset-y-0 right-0 flex items-center pr-2'>
               <Button onClick={onClickLogOut} theme='primary' to='/logout'>
-                Sign out
+                <FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' />
               </Button>
             </div>
           </div>
@@ -55,13 +56,17 @@ const WaitlistPage = (/* { account } */) => {
 
               <Stack space={2}>
                 <Text size='lg' theme='muted' align='center' weight='medium'>
-                  Welcome back to {title}! You were previously placed on our
-                  waitlist. Please verify your phone number to receive
-                  immediate access to your account!
+                  <FormattedMessage
+                    id='waitlist.body'
+                    defaultMessage='Welcome back to {title}! You were previously placed on our waitlist. Please verify your phone number to receive immediate access to your account!'
+                    values={{ title }}
+                  />
                 </Text>
 
                 <div className='text-center'>
-                  <Button onClick={openVerifySmsModal} theme='primary'>Verify phone number</Button>
+                  <Button onClick={openVerifySmsModal} theme='primary'>
+                    <FormattedMessage id='waitlist.actions.verify_number' defaultMessage='Verify phone number' />
+                  </Button>
                 </div>
               </Stack>
             </Stack>
diff --git a/app/soapbox/features/video/index.tsx b/app/soapbox/features/video/index.tsx
index f418714bd..71aaae65d 100644
--- a/app/soapbox/features/video/index.tsx
+++ b/app/soapbox/features/video/index.tsx
@@ -2,17 +2,14 @@ import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
-import { useSettings } from 'soapbox/hooks';
 import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media-aspect-ratio';
 
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 
-import type { Attachment } from 'soapbox/types/entities';
-
 const DEFAULT_HEIGHT = 300;
 
 type Position = { x: number, y: number };
@@ -107,15 +104,11 @@ interface IVideo {
   alt?: string,
   width?: number,
   height?: number,
-  sensitive?: boolean,
   startTime?: number,
-  onOpenVideo?: (attachment: Attachment, time: number) => void,
-  onCloseVideo?: () => void,
   detailed?: boolean,
   inline?: boolean,
   cacheWidth?: (width: number) => void,
   visible?: boolean,
-  onToggleVisibility?: () => void,
   blurhash?: string,
   link?: React.ReactNode,
   aspectRatio?: number,
@@ -125,23 +118,18 @@ interface IVideo {
 const Video: React.FC<IVideo> = ({
   width,
   visible = false,
-  sensitive = false,
   detailed = false,
   cacheWidth,
-  onToggleVisibility,
   startTime,
   src,
   height,
   alt,
-  onCloseVideo,
   inline,
   aspectRatio = 16 / 9,
   link,
   blurhash,
 }) => {
   const intl = useIntl();
-  const settings = useSettings();
-  const displayMedia = settings.get('displayMedia') as string | undefined;
 
   const player = useRef<HTMLDivElement>(null);
   const video = useRef<HTMLVideoElement>(null);
@@ -157,7 +145,6 @@ const Video: React.FC<IVideo> = ({
   const [fullscreen, setFullscreen] = useState(false);
   const [hovered, setHovered] = useState(false);
   const [muted, setMuted] = useState(false);
-  const [revealed, setRevealed] = useState<boolean>(visible !== undefined ? visible : (displayMedia !== 'hide_all' && !sensitive || displayMedia === 'show_all'));
   const [buffer, setBuffer] = useState(0);
 
   const setDimensions = () => {
@@ -342,7 +329,6 @@ const Video: React.FC<IVideo> = ({
 
     // If we are in fullscreen mode, we don't want any hotkeys
     // interacting with the UI that's not visible
-
     if (fullscreen) {
       e.preventDefault();
       e.stopPropagation();
@@ -411,16 +397,6 @@ const Video: React.FC<IVideo> = ({
     }
   };
 
-  const toggleReveal: React.MouseEventHandler = (e) => {
-    e.stopPropagation();
-
-    if (onToggleVisibility) {
-      onToggleVisibility();
-    } else {
-      setRevealed(!revealed);
-    }
-  };
-
   const handleLoadedData = () => {
     if (video.current && startTime) {
       video.current.currentTime = startTime;
@@ -459,14 +435,6 @@ const Video: React.FC<IVideo> = ({
     playerStyle.height = height || DEFAULT_HEIGHT;
   }
 
-  let warning;
-
-  if (sensitive) {
-    warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
-  } else {
-    warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
-  }
-
   useEffect(() => {
     document.addEventListener('fullscreenchange', handleFullscreenChange, true);
     document.addEventListener('webkitfullscreenchange', handleFullscreenChange, true);
@@ -488,21 +456,15 @@ const Video: React.FC<IVideo> = ({
   }, []);
 
   useEffect(() => {
-    if (visible) {
-      setRevealed(true);
-    }
-  }, [visible]);
-
-  useEffect(() => {
-    if (!revealed) {
+    if (!visible) {
       video.current?.pause();
     }
-  }, [revealed]);
+  }, [visible]);
 
   return (
     <div
       role='menuitem'
-      className={classNames('video-player', { 'video-player--inactive': !revealed, detailed, 'video-player--inline': inline && !fullscreen, fullscreen })}
+      className={classNames('video-player', { detailed, 'video-player--inline': inline && !fullscreen, fullscreen })}
       style={playerStyle}
       ref={player}
       onMouseEnter={handleMouseEnter}
@@ -511,40 +473,29 @@ const Video: React.FC<IVideo> = ({
       onKeyDown={handleKeyDown}
       tabIndex={0}
     >
-      <Blurhash
-        hash={blurhash}
-        className={classNames('media-gallery__preview', {
-          'media-gallery__preview--hidden': revealed,
-        })}
-      />
-
-      {revealed && (
-        <video
-          ref={video}
-          src={src}
-          loop
-          role='button'
-          tabIndex={0}
-          aria-label={alt}
-          title={alt}
-          width={width}
-          height={height || DEFAULT_HEIGHT}
-          onClick={togglePlay}
-          onKeyDown={handleVideoKeyDown}
-          onPlay={handlePlay}
-          onPause={handlePause}
-          onTimeUpdate={handleTimeUpdate}
-          onLoadedData={handleLoadedData}
-          onProgress={handleProgress}
-          onVolumeChange={handleVolumeChange}
-        />
+      {!fullscreen && (
+        <Blurhash hash={blurhash} className='media-gallery__preview' />
       )}
 
-      <div className={classNames('spoiler-button', { 'spoiler-button--hidden': !sensitive || revealed })}>
-        <button type='button' className='spoiler-button__overlay' onClick={toggleReveal}>
-          <span className='spoiler-button__overlay__label'>{warning}</span>
-        </button>
-      </div>
+      <video
+        ref={video}
+        src={src}
+        loop
+        role='button'
+        tabIndex={0}
+        aria-label={alt}
+        title={alt}
+        width={width}
+        height={height || DEFAULT_HEIGHT}
+        onClick={togglePlay}
+        onKeyDown={handleVideoKeyDown}
+        onPlay={handlePlay}
+        onPause={handlePause}
+        onTimeUpdate={handleTimeUpdate}
+        onLoadedData={handleLoadedData}
+        onProgress={handleProgress}
+        onVolumeChange={handleVolumeChange}
+      />
 
       <div className={classNames('video-player__controls', { active: paused || hovered })}>
         <div className='video-player__seek' onMouseDown={handleMouseDown} ref={seek}>
@@ -605,18 +556,6 @@ const Video: React.FC<IVideo> = ({
           </div>
 
           <div className='video-player__buttons right'>
-            {(sensitive && !onCloseVideo) && (
-              <button
-                type='button'
-                title={intl.formatMessage(messages.hide)}
-                aria-label={intl.formatMessage(messages.hide)}
-                className='player-button'
-                onClick={toggleReveal}
-              >
-                <Icon src={require('@tabler/icons/eye-off.svg')} />
-              </button>
-            )}
-
             <button
               type='button'
               title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
diff --git a/app/soapbox/hooks/useOnScreen.ts b/app/soapbox/hooks/useOnScreen.ts
index 7cfd4f284..883fde698 100644
--- a/app/soapbox/hooks/useOnScreen.ts
+++ b/app/soapbox/hooks/useOnScreen.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) =>  {
   const [isIntersecting, setIntersecting] = React.useState(false);
diff --git a/app/soapbox/locales/de.json b/app/soapbox/locales/de.json
index 04ac3e04c..37d6eb99e 100644
--- a/app/soapbox/locales/de.json
+++ b/app/soapbox/locales/de.json
@@ -5,7 +5,7 @@
   "account.add_or_remove_from_list": "Hinzufügen oder Entfernen von Listen",
   "account.badges.bot": "Bot",
   "account.birthday": "Geburtsdatum {date}",
-  "account.birthday_today": "Birthday is today!",
+  "account.birthday_today": "Hat heute Geburtstag!",
   "account.block": "@{name} blockieren",
   "account.block_domain": "Alles von {domain} verstecken",
   "account.blocked": "Blockiert",
@@ -104,14 +104,14 @@
   "admin.users.actions.promote_to_admin_message": "@{acct} ist nun Adminstrator.",
   "admin.users.actions.promote_to_moderator": "@{name} zum Moderator ernennen",
   "admin.users.actions.promote_to_moderator_message": "@{acct} ist nun Moderator",
-  "admin.users.actions.remove_donor": "Remove @{name} as a donor",
-  "admin.users.actions.set_donor": "Set @{name} as a donor",
+  "admin.users.actions.remove_donor": "@{name} aus der Liste der Unterstützer:innen entfernen",
+  "admin.users.actions.set_donor": "@{name} als Unterstützer:in festlegen",
   "admin.users.actions.suggest_user": "@{name} vorschlagen",
   "admin.users.actions.unsuggest_user": "Vorschlag von @{name} zurücknehmen",
   "admin.users.actions.unverify_user": "Verifizierung von @{name} aufheben",
   "admin.users.actions.verify_user": "Verifizierung von @{name} bestätigen",
-  "admin.users.remove_donor_message": "@{acct} was removed as a donor",
-  "admin.users.set_donor_message": "@{acct} was set as a donor",
+  "admin.users.remove_donor_message": "@{acct} wurde als Unterstützer:in entfernt",
+  "admin.users.set_donor_message": "@{acct} wurde als Unterstützer:in festgelegt",
   "admin.users.user_deactivated_message": "@{acct} wurde deaktiviert",
   "admin.users.user_deleted_message": "@{acct} wurde gelöscht",
   "admin.users.user_suggested_message": "@{acct} vorgeschlagen",
@@ -121,10 +121,10 @@
   "admin_nav.awaiting_approval": "Wartet auf Bestätigung",
   "admin_nav.dashboard": "Steuerung",
   "admin_nav.reports": "Beschwerden",
-  "alert.unexpected.body": "We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out).",
+  "alert.unexpected.body": "Verzeihe die Unannnehmlichkeiten. Wende dich an den Support, wenn das Problem über längere Zeit besteht. Möglicherweise hilft es, {clearCookies}. Hierdurch wirst du abgemeldet.",
   "alert.unexpected.browser": "Browser",
   "alert.unexpected.clear_cookies": "Cookies und Browserdaten löschen",
-  "alert.unexpected.links.help": "Help Center",
+  "alert.unexpected.links.help": "Hilfe",
   "alert.unexpected.links.status": "Status",
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Ein unerwarteter Fehler ist aufgetreten.",
@@ -155,7 +155,7 @@
   "backups.empty_message.action": "Backup jetzt erstellen?",
   "backups.pending": "Anstehende Backups",
   "beta.also_available": "Available in:",
-  "birthday_panel.title": "Birthdays",
+  "birthday_panel.title": "Geburtstage",
   "boost_modal.combo": "Drücke {combo}, um dieses Fenster zu überspringen",
   "bundle_column_error.body": "Beim Laden ist ein Fehler aufgetreten.",
   "bundle_column_error.retry": "Erneut versuchen",
@@ -216,17 +216,17 @@
   "column.filters.drop_hint": "Gefilterte Beiträge bleiben dauerhaft unsichtbar, auch wenn der Filter später entfernt wird.",
   "column.filters.expires": "Gültig bis",
   "column.filters.expires_hint": "Ablaufdaten werden zurzeit nicht unterstüzt.",
-  "column.filters.home_timeline": "Home timeline",
+  "column.filters.home_timeline": "Persönliche Timeline",
   "column.filters.keyword": "Stichwort oder Wortfolge",
   "column.filters.notifications": "Benachrichtgungen",
   "column.filters.public_timeline": "Öffentliche Zeitleiste",
   "column.filters.subheading_add_new": "Filter hinzufügen",
   "column.filters.subheading_filters": "Bestehnde Filter",
   "column.filters.whole_word_header": "Ganzes Wort",
-  "column.filters.whole_word_hint": "When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word",
-  "column.follow_requests": "Folgeanfragen",
-  "column.followers": "Followers",
-  "column.following": "Following",
+  "column.filters.whole_word_hint": "Wenn das Schlüsselwort oder die Phrase ausschließlich alphanumerisch ist, wird der Filter ausschließlich auf das gesamte Wort angewandt.",
+  "column.follow_requests": "Follower-Anfragen",
+  "column.followers": "Follower",
+  "column.following": "Gefolgte",
   "column.groups": "Gruppen",
   "column.home": "Startseite",
   "column.import_data": "Daten importieren",
@@ -246,7 +246,7 @@
   "column.public": "Föderierte Zeitleiste",
   "column.reactions": "Reaktionen",
   "column.reblogs": "Geteilte Beiträge",
-  "column.remote": "Federated timeline",
+  "column.remote": "Föderierte Timeline",
   "column.scheduled_statuses": "Vorbereitete Beiträge",
   "column.search": "Suche",
   "column.security": "Sicherheitseinstellungen",
@@ -288,7 +288,7 @@
   "compose_form.spoiler.marked": "Text ist hinter einer Warnung versteckt",
   "compose_form.spoiler.unmarked": "Text ist nicht versteckt",
   "compose_form.spoiler_placeholder": "Inhaltswarnung",
-  "confirmation_modal.cancel": "Abbrechen",
+  "confirmation_modal.cancel": "Bearbeiten",
   "confirmations.admin.deactivate_user.confirm": "@{name} deaktivieren",
   "confirmations.admin.deactivate_user.heading": "Deactivate @{acct}",
   "confirmations.admin.deactivate_user.message": "Hiermit wird das Konto von @{acct} deaktiviert. Diese Entscheidung kann später zurückgenommen werden.",
@@ -303,23 +303,23 @@
   "confirmations.admin.mark_status_not_sensitive.heading": "Mark post not sensitive.",
   "confirmations.admin.mark_status_not_sensitive.message": "Hiermit wird der Beitrag von @{acct} als nicht heikel markiert.",
   "confirmations.admin.mark_status_sensitive.confirm": "Beitrag als heikel markieren",
-  "confirmations.admin.mark_status_sensitive.heading": "Mark post sensitive",
+  "confirmations.admin.mark_status_sensitive.heading": "Beitrag als heikel festlegen",
   "confirmations.admin.mark_status_sensitive.message": "Hiermit wird der Beitrag von @{acct} als heikel markiert.",
   "confirmations.admin.reject_user.confirm": "@{name} ablehnen",
   "confirmations.admin.reject_user.heading": "@{acct} ablehnen",
   "confirmations.admin.reject_user.message": "Hiermit wird der Aufnahmeantrag von @{acct} abgelehnt. Diese Entscheidung kann nicht rückgängig gemacht werden.",
   "confirmations.block.block_and_report": "Blockieren und melden",
   "confirmations.block.confirm": "Blockieren",
-  "confirmations.block.heading": "Block @{name}",
+  "confirmations.block.heading": "Blockiere @{name}",
   "confirmations.block.message": "Bist du dir sicher, dass du {name} blockieren möchtest?",
-  "confirmations.delete.confirm": "Löschen",
+  "confirmations.delete.confirm": "Entwurf löschen",
   "confirmations.delete.heading": "Beitrag löschen",
   "confirmations.delete.message": "Bist du dir sicher, dass du diesen Beitrag löschen möchtest?",
   "confirmations.delete_list.confirm": "Löschen",
   "confirmations.delete_list.heading": "Liste löschen",
   "confirmations.delete_list.message": "Bist du dir sicher, dass du diese Liste permanent löschen möchtest?",
   "confirmations.domain_block.confirm": "Die ganze Domain verbergen",
-  "confirmations.domain_block.heading": "Block {domain}",
+  "confirmations.domain_block.heading": "Blockiere {domain}",
   "confirmations.domain_block.message": "Bist du dir wirklich sicher, dass du die ganze Domain {domain} blockieren willst? In den meisten Fällen reichen ein paar gezielte Blockierungen oder Stummschaltungen aus. Du wirst den Inhalt von dieser Domain dann nicht mehr in irgendwelchen öffentlichen Timelines oder den Benachrichtigungen finden. Von dieser Domain kann dir auch niemand mehr folgen.",
   "confirmations.mute.confirm": "Stummschalten",
   "confirmations.mute.heading": "@{name} stummschalten",
@@ -333,7 +333,7 @@
   "confirmations.register.needs_confirmation.header": "Bestätigung erforderlich",
   "confirmations.reply.confirm": "Antworten",
   "confirmations.reply.message": "Wenn du jetzt antwortest, wird die gesamte Nachricht verworfen, die du gerade schreibst. Möchtest du wirklich fortfahren?",
-  "confirmations.scheduled_status_delete.confirm": "Abbrechen",
+  "confirmations.scheduled_status_delete.confirm": "Bearbeiten",
   "confirmations.scheduled_status_delete.heading": "Vorbereiteten Beitrag verwerfen",
   "confirmations.scheduled_status_delete.message": "Den vorbereiteten Beitrag wirklich verwerfen?",
   "confirmations.unfollow.confirm": "Entfolgen",
@@ -345,13 +345,13 @@
   "crypto_donate_panel.heading": "Kryptowährungen spenden",
   "crypto_donate_panel.intro.message": "{siteTitle} akzeptiert Kryptowährungen, um dieses Angebot zu finanzieren. Danke für deine Unterstützung!",
   "datepicker.hint": "Beitrag veröffentlichen am…",
-  "datepicker.next_month": "Next month",
-  "datepicker.next_year": "Next year",
-  "datepicker.previous_month": "Previous month",
-  "datepicker.previous_year": "Previous year",
-  "developers.challenge.answer_label": "Answer",
-  "developers.challenge.answer_placeholder": "Your answer",
-  "developers.challenge.fail": "Wrong answer",
+  "datepicker.next_month": "Nächster Monat",
+  "datepicker.next_year": "Nächstes Jahr",
+  "datepicker.previous_month": "Vorheriger Monat",
+  "datepicker.previous_year": "Vorheriges Jahr",
+  "developers.challenge.answer_label": "Antworten",
+  "developers.challenge.answer_placeholder": "Deine Antwort",
+  "developers.challenge.fail": "Falsche Antwort",
   "developers.challenge.message": "What is the result of calling {function}?",
   "developers.challenge.submit": "Become a developer",
   "developers.challenge.success": "You are now a developer",
@@ -359,14 +359,14 @@
   "developers.navigation.app_create_label": "App erstellen",
   "developers.navigation.intentional_error_label": "Trigger an error",
   "developers.navigation.leave_developers_label": "Leave developers",
-  "developers.navigation.network_error_label": "Network error",
+  "developers.navigation.network_error_label": "Netzwerkfehler",
   "developers.navigation.settings_store_label": "Settings store",
   "developers.navigation.test_timeline_label": "Test timeline",
   "developers.settings_store.hint": "Hier können die Benutzereinstellungen direkt bearbeitet werden. VORSICHT! Die Bearbeitung dieses Abschnitts kann das Konto zerstören - eine Wiederherstellung ist ausschließlich per API möglich",
   "direct.search_placeholder": "Nachricht senden an…",
-  "directory.federated": "From known fediverse",
+  "directory.federated": "Aus dem Fediverse",
   "directory.local": "Ausschließlich von {domain}",
-  "directory.new_arrivals": "New arrivals",
+  "directory.new_arrivals": "Neuankömmlinge",
   "directory.recently_active": "Zuletzt aktiv",
   "edit_federation.followers_only": "Beitrag nur für Follower anzeigen",
   "edit_federation.force_nsfw": "Markierung aller Anhänge als heikel erzwingen",
@@ -498,8 +498,8 @@
   "filters.filters_list_phrase_label": "Stichwort oder Wortfolge:",
   "filters.filters_list_whole-word": "Whole word",
   "filters.removed": "Filter gelöscht.",
-  "follow_recommendation.subhead": "Let's get started!",
-  "follow_recommendations.done": "Done",
+  "follow_recommendation.subhead": "Lass uns anfangen!",
+  "follow_recommendations.done": "Fertig",
   "follow_recommendations.heading": "Folge Nutzern, deren Beiträge du sehen möchtest. Hier sind einige Vorschläge:",
   "follow_recommendations.lead": "Posts von Usern, denen du folgst, werden in deinem Home-Feed in chronologischer Reihenfolge angezeigt. Los geht's - du kannst anderen später jederzeit wieder entfolgen.",
   "follow_request.authorize": "Bestätigen",
@@ -580,8 +580,8 @@
   "introduction.interactions.reply.headline": "Antworten",
   "introduction.interactions.reply.text": "You can reply to other people's and your own posts, which will chain them together in a conversation.",
   "introduction.welcome.action": "Let's go!",
-  "introduction.welcome.headline": "First steps",
-  "introduction.welcome.text": "Welcome to the fediverse! In a few moments, you'll be able to broadcast messages and talk to your friends across a wide variety of servers. But this server, {domain}, is special—it hosts your profile, so remember its name.",
+  "introduction.welcome.headline": "Erste Schritte",
+  "introduction.welcome.text": "Willkommen im Fediverse! Gleich kannst du Nachrichten in die Welt verschicken oder mit deinen Freunden teilen. Wichtig: Dein Konto existiert ausschließlich auf der Instanz  {domain}. Notiere dir daher neben deinem Nutzernamen (Handle) auch den Namen deiner Instanz.",
   "keyboard_shortcuts.back": "zurück navigieren",
   "keyboard_shortcuts.blocked": "Liste blockierter Profile öffnen",
   "keyboard_shortcuts.boost": "teilen",
@@ -611,7 +611,7 @@
   "keyboard_shortcuts.unfocus": "Textfeld/die Suche nicht mehr fokussieren",
   "keyboard_shortcuts.up": "sich in der Liste hinauf bewegen",
   "landing_page_modal.download": "Download",
-  "landing_page_modal.helpCenter": "Help Center",
+  "landing_page_modal.helpCenter": "Hilfe",
   "lightbox.close": "Schließen",
   "lightbox.next": "Weiter",
   "lightbox.previous": "Zurück",
@@ -620,7 +620,7 @@
   "list_adder.header_title": "Nutzer hinzufügen oder entfernen",
   "lists.account.add": "Zur Liste hinzufügen",
   "lists.account.remove": "Von der Liste entfernen",
-  "lists.delete": "Delete list",
+  "lists.delete": "Liste löschen",
   "lists.edit": "Liste bearbeiten",
   "lists.edit.submit": "Titel ändern",
   "lists.new.create": "Liste hinzufügen",
@@ -630,16 +630,16 @@
   "lists.search": "Suche nach Leuten, denen du folgst",
   "lists.subheading": "Deine Listen",
   "loading_indicator.label": "Wird geladen …",
-  "login.fields.instance_label": "Instance",
-  "login.fields.instance_placeholder": "example.com",
-  "login.fields.otp_code_hint": "Enter the two-factor code generated by your phone app or use one of your recovery codes",
+  "login.fields.instance_label": "Instanz für den Login eingeben",
+  "login.fields.instance_placeholder": "instanz.de",
+  "login.fields.otp_code_hint": "Gib den Zwei-Faktoren-Code aus deiner App oder deinen Wiederherstellungsschlüssel ein",
   "login.fields.otp_code_label": "Zwei-Faktoren-Code:",
   "login.fields.password_placeholder": "Passwort",
   "login.fields.username_label": "E-Mail oder Nutzername",
   "login.log_in": "Anmelden",
   "login.otp_log_in": "OTP Login",
   "login.reset_password_hint": "Probleme beim Anmelden?",
-  "login.sign_in": "Sign in",
+  "login.sign_in": "Anmelden",
   "media_gallery.toggle_visible": "Sichtbarkeit umschalten",
   "media_panel.empty_message": "Keine Medien gefunden.",
   "media_panel.title": "Media",
@@ -664,19 +664,19 @@
   "migration.hint.link": "Neues Alias erstellen",
   "migration.move_account.fail": "Account-Übertragung fehlgeschlagen.",
   "migration.move_account.success": "Account-Übertragung fehlgeschlagen.",
-  "migration.submit": "Move followers",
+  "migration.submit": "Follower übertragen",
   "missing_description_modal.cancel": "Abbrechen",
   "missing_description_modal.continue": "Senden",
   "missing_description_modal.description": "Dennoch fortfahren?",
   "missing_description_modal.text": "Du hast nicht für alle Anhänge Beschreibungen angegeben. Dennoch fortfahren?",
   "missing_indicator.label": "Nicht gefunden",
   "missing_indicator.sublabel": "Der Eintrag konnte nicht gefunden werden",
-  "mobile.also_available": "Available in:",
+  "mobile.also_available": "Verfügbar auf:",
   "morefollows.followers_label": "…and {count} more {count, plural, one {follower} other {followers}} on remote sites.",
   "morefollows.following_label": "…and {count} more {count, plural, one {follow} other {follows}} on remote sites.",
   "mute_modal.hide_notifications": "Benachrichtigungen von diesem Account verbergen?",
   "navigation.chats": "Chats",
-  "navigation.compose": "Compose",
+  "navigation.compose": "Verfassen",
   "navigation.dashboard": "Steuerung",
   "navigation.developers": "Entwickler",
   "navigation.direct_messages": "Nachrichten",
@@ -684,7 +684,7 @@
   "navigation.invites": "Einladungen",
   "navigation.notifications": "Benachrichtigungen",
   "navigation.search": "Suche",
-  "navigation_bar.account_migration": "Move account",
+  "navigation_bar.account_migration": "Account umziehen",
   "navigation_bar.blocks": "Blockierte Profile",
   "navigation_bar.compose": "Neuen Beitrag verfassen",
   "navigation_bar.compose_direct": "Direktnachrichten",
@@ -702,7 +702,7 @@
   "navigation_bar.preferences": "Einstellungen",
   "navigation_bar.profile_directory": "Profilverzeichnis",
   "navigation_bar.security": "Sicherheit",
-  "navigation_bar.soapbox_config": "Soapbox Konfiguration",
+  "navigation_bar.soapbox_config": "Soapbox-Konfiguration",
   "notification.birthday": "{name} hat Geburtstag!",
   "notification.birthday.more": "{count} more {count, plural, one {friend} other {friends}}",
   "notification.birthday_plural": "{name} and {more} have birthday today",
@@ -730,7 +730,7 @@
   "notifications.column_settings.follow": "Neue Follower:",
   "notifications.column_settings.follow_request": "Neue Follower-Anfragen:",
   "notifications.column_settings.mention": "Erwähnungen:",
-  "notifications.column_settings.move": "Moves:",
+  "notifications.column_settings.move": "Umzüge:",
   "notifications.column_settings.poll": "Ergebnisse von Umfragen:",
   "notifications.column_settings.push": "Push-Benachrichtigungen",
   "notifications.column_settings.reblog": "Geteilte Beiträge:",
@@ -752,26 +752,26 @@
   "notifications.queue_label": "{count, plural, one {Eine neue Benachrichtigung} other {# neue Benachrichtigungen}}. Hier klicken, um sie anzuzeigen.",
   "onboarding.avatar.subtitle": "Just have fun with it.",
   "onboarding.avatar.title": "Profilbild auswählen",
-  "onboarding.display_name.subtitle": "You can always edit this later.",
-  "onboarding.display_name.title": "Choose a display name",
-  "onboarding.done": "Done",
-  "onboarding.finished.message": "We are very excited to welcome you to our community! Tap the button below to get started.",
+  "onboarding.display_name.subtitle": "Du kannst diesen Eintrag später jederzeit bearbeiten.",
+  "onboarding.display_name.title": "Wähle deinen angezeigten Namen",
+  "onboarding.done": "Fertig",
+  "onboarding.finished.message": "Schön, dich bei uns begrüßen zu dürfen! Wenn du jetzt bestätigst, kann unserer Reise beginnen.",
   "onboarding.finished.title": "Onboarding complete",
-  "onboarding.header.subtitle": "This will be shown at the top of your profile.",
-  "onboarding.header.title": "Pick a cover image",
-  "onboarding.next": "Next",
-  "onboarding.note.subtitle": "You can always edit this later.",
-  "onboarding.note.title": "Write a short bio",
-  "onboarding.saving": "Saving…",
-  "onboarding.skip": "Skip for now",
-  "onboarding.suggestions.subtitle": "Here are a few of the most popular accounts you might like.",
-  "onboarding.suggestions.title": "Suggested accounts",
-  "onboarding.view_feed": "View Feed",
-  "password_reset.confirmation": "Check your email for confirmation.",
+  "onboarding.header.subtitle": "Dies wird in deinen Profilinfos deiner persönlichen Seite zu sehen sein.",
+  "onboarding.header.title": "Wähle ein Cover für dein Profil",
+  "onboarding.next": "Weiter",
+  "onboarding.note.subtitle": "Du kannst diesen Eintrag später jederzeit ändern.",
+  "onboarding.note.title": "Stell dich deinen Followern kurz vor",
+  "onboarding.saving": "Speichern…",
+  "onboarding.skip": "Überspringen",
+  "onboarding.suggestions.subtitle": "Hier sind ein paar bekannte Gesichter, die dir vielleicht den Einstieg erleichtern.",
+  "onboarding.suggestions.title": "Vorgeschlagene User",
+  "onboarding.view_feed": "Timeline anzeigen",
+  "password_reset.confirmation": "Überprüfe jetzt deine E-Mails.",
   "password_reset.fields.username_placeholder": "Email oder Nutzername",
   "password_reset.reset": "Passwort zurücksetzen",
-  "patron.donate": "Donate",
-  "patron.title": "Funding Goal",
+  "patron.donate": "Spenden",
+  "patron.title": "Spendenziel",
   "pinned_accounts.title": "{name}’s choices",
   "pinned_statuses.none": "Keine angehefteten Beiträge.",
   "poll.closed": "Geschlossen",
@@ -782,10 +782,10 @@
   "poll.votes": "{votes, plural, one {# vote} other {# votes}}",
   "poll_button.add_poll": "Eine Umfrage erstellen",
   "poll_button.remove_poll": "Umfrage entfernen",
-  "pre_header.close": "Close",
+  "pre_header.close": "Schließen",
   "preferences.fields.auto_play_gif_label": "Animierte GIFs automatisch abspielen",
-  "preferences.fields.autoload_more_label": "Automatically load more items when scrolled to the bottom of the page",
-  "preferences.fields.autoload_timelines_label": "Automatically load new posts when scrolled to the top of the page",
+  "preferences.fields.autoload_more_label": "Weitere Posts automatisch laden, wenn das Ende der Timeline erreicht wurde",
+  "preferences.fields.autoload_timelines_label": "Neue Posts automatisch laden, wenn das obere Ende der Timeline erreicht wurde",
   "preferences.fields.boost_modal_label": "Bestätigungsdialog öffnen, bevor ein Beitrag geboostet wird",
   "preferences.fields.delete_modal_label": "Bestätigungsdialog öffnen, bevor ein Beitrag gelöscht wird",
   "preferences.fields.display_media.default": "Als verstörend gekennzeichnete Medien grundsätzlich anzeigen",
@@ -793,8 +793,8 @@
   "preferences.fields.display_media.show_all": "Medien grundsätzlich anzeigen",
   "preferences.fields.expand_spoilers_label": "Als verstörend gekennzeichnete Posts grundsätzlich ausklappen",
   "preferences.fields.language_label": "Sprache",
-  "preferences.fields.media_display_label": "Media display",
-  "preferences.hints.feed": "In your home feed",
+  "preferences.fields.media_display_label": "Bilder & Videos",
+  "preferences.hints.feed": "Auf deiner persönlichen Timeline",
   "privacy.change": "Sichtbarkeit des Beitrags anpassen",
   "privacy.direct.long": "Wird nur an erwähnte Profile gesendet",
   "privacy.direct.short": "Direktnachricht",
@@ -806,7 +806,7 @@
   "privacy.unlisted.short": "Nicht gelistet",
   "profile_dropdown.add_account": "Bestehendes Konto hinzufügen",
   "profile_dropdown.logout": "Aus @{acct} abmelden",
-  "profile_fields_panel.title": "Profile fields",
+  "profile_fields_panel.title": "Profilfelder",
   "public.column_settings.title": "Einstellungen der globalen Timeline",
   "reactions.all": "Alle",
   "regeneration_indicator.label": "Laden…",
@@ -835,30 +835,30 @@
   "relative_time.just_now": "jetzt",
   "relative_time.minutes": "{number}m",
   "relative_time.seconds": "{number}s",
-  "remote_instance.edit_federation": "Edit federation",
-  "remote_instance.federation_panel.heading": "Federation Restrictions",
+  "remote_instance.edit_federation": "Föderation bearbeiten",
+  "remote_instance.federation_panel.heading": "Föderationsbeschränkungen",
   "remote_instance.federation_panel.no_restrictions_message": "{siteTitle} has placed no restrictions on {host}.",
   "remote_instance.federation_panel.restricted_message": "{siteTitle} blocks all activities from {host}.",
   "remote_instance.federation_panel.some_restrictions_message": "{siteTitle} has placed some restrictions on {host}.",
-  "remote_instance.pin_host": "Pin {host}",
-  "remote_instance.unpin_host": "Unpin {host}",
+  "remote_instance.pin_host": "{host} anhenften",
+  "remote_instance.unpin_host": "{host} abheften",
   "remote_interaction.account_placeholder": "Enter your username@domain you want to act from",
-  "remote_interaction.divider": "or",
-  "remote_interaction.favourite": "Proceed to like",
-  "remote_interaction.favourite_title": "Like a post remotely",
+  "remote_interaction.divider": "oder",
+  "remote_interaction.favourite": "Like bestätigen",
+  "remote_interaction.favourite_title": "Beitrag vom Remotekonto liken",
   "remote_interaction.follow": "Fortsetzen, um zu folgen",
-  "remote_interaction.follow_title": "Follow {user} remotely",
-  "remote_interaction.poll_vote": "Proceed to vote",
-  "remote_interaction.poll_vote_title": "Vote in a poll remotely",
+  "remote_interaction.follow_title": "User {user} per Remote folgen",
+  "remote_interaction.poll_vote": "Bestätige deine Wahl",
+  "remote_interaction.poll_vote_title": "Stimme per Remotekonto ab",
   "remote_interaction.reblog": "Boost bestätigen",
   "remote_interaction.reblog_title": "Reblog a post remotely",
   "remote_interaction.reply": "Antwort bestätigen",
   "remote_interaction.reply_title": "Reply to a post remotely",
   "remote_interaction.user_not_found_error": "Konto nicht gefunden",
-  "remote_timeline.filter_message": "You are viewing the timeline of {instance}.",
-  "reply_indicator.cancel": "Abbrechen",
-  "reply_mentions.account.add": "Add to mentions",
-  "reply_mentions.account.remove": "Remove from mentions",
+  "remote_timeline.filter_message": "Du betrachtest die Timeline der Instanz {instance}.",
+  "reply_indicator.cancel": "Bearbeiten",
+  "reply_mentions.account.add": "Erwähnen",
+  "reply_mentions.account.remove": "Aus Erwähnungen entfernen",
   "reply_mentions.more": "{count, plural, one {einen weiteren Nutzer} other {# weitere Nutzer}}",
   "reply_mentions.reply": "<hover>Antwort an</hover> {accounts}",
   "reply_mentions.reply_empty": "Antwort auf einen Beitrag",
@@ -870,13 +870,13 @@
   "report.placeholder": "Zusätzliche Kommentare",
   "report.submit": "Absenden",
   "report.target": "{target} melden",
-  "reset_password.header": "Set New Password",
-  "schedule.post_time": "Post Date/Time",
-  "schedule.remove": "Remove schedule",
+  "reset_password.header": "Neues Passwort festlegen",
+  "schedule.post_time": "Datum/Uhrzeit zum Absenden",
+  "schedule.remove": "Ohne Verzögerung absenden",
   "schedule_button.add_schedule": "Für späteres Absenden planen",
   "schedule_button.remove_schedule": "Sofort posten",
-  "scheduled_status.cancel": "Cancel",
-  "search.action": "Search for “{query}”",
+  "scheduled_status.cancel": "Abbrechen",
+  "search.action": "Suche nach “{query}”",
   "search.placeholder": "Suche",
   "search_results.accounts": "Personen",
   "search_results.hashtags": "Hashtags",
@@ -898,10 +898,10 @@
   "security.headers.update_email": "Email ändern",
   "security.headers.update_password": "Passwort ändern",
   "security.mfa": "Zwei-Faktoren-Authentifizierung einstellen",
-  "security.mfa_enabled": "You have multi-factor authentication set up with OTP.",
+  "security.mfa_enabled": "Du hast die Zwei-Faktoren-Authentifizierung per OTP aktiviert.",
   "security.mfa_header": "Authentifizierungsmethoden",
   "security.mfa_setup_hint": "OTP-Zwei-Faktoren-Authentifizierung konfigurieren",
-  "security.qr.fail": "Failed to fetch setup key",
+  "security.qr.fail": "Schlüssel konnte nicht abgerufen werden",
   "security.submit": "Änderungen speichern",
   "security.submit.delete": "Konto löschen",
   "security.text.delete": "Gib dein Passwort ein, um dein Konto zu löschen. Diese Löschung ist dauerhaft und kann nicht rückgängig gemacht werden. Dein Konto wird von diesem Server aus gelöscht und eine Löschungsanfrage wird an andere Server gesendet. Es ist nicht garantiert, dass alle Instanzen dein Konto löschen..",
@@ -914,7 +914,7 @@
   "settings.change_password": "Passwort ändern",
   "settings.configure_mfa": "MFA konfigurieren",
   "settings.delete_account": "Konto löschen",
-  "settings.edit_profile": "Edit Profile",
+  "settings.edit_profile": "Profil bearbeiten",
   "settings.preferences": "Einstellungen",
   "settings.profile": "Profil",
   "settings.save.success": "Einstellungen wurden gespeichert!",
@@ -924,15 +924,15 @@
   "signup_panel.title": "Neu auf {site_title}?",
   "snackbar.view": "Anzeigen",
   "soapbox_config.authenticated_profile_hint": "Nur angemeldete Nutzer können Antworten und Medien auf Nutzerprofilen sehen.",
-  "soapbox_config.authenticated_profile_label": "Profiles require authentication",
-  "soapbox_config.copyright_footer.meta_fields.label_placeholder": "Copyright footer",
+  "soapbox_config.authenticated_profile_label": "Profil erfordert Authentifizierung",
+  "soapbox_config.copyright_footer.meta_fields.label_placeholder": "Copyright Fußnote",
   "soapbox_config.crypto_address.meta_fields.address_placeholder": "Address",
-  "soapbox_config.crypto_address.meta_fields.note_placeholder": "Note (optional)",
+  "soapbox_config.crypto_address.meta_fields.note_placeholder": "Notiz (optional)",
   "soapbox_config.crypto_address.meta_fields.ticker_placeholder": "Ticker",
   "soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder": "Number of items to display in the crypto homepage widget",
   "soapbox_config.custom_css.meta_fields.url_placeholder": "URL",
-  "soapbox_config.display_fqn_label": "Display domain (eg @user@domain) for local accounts.",
-  "soapbox_config.fields.accent_color_label": "Accent color",
+  "soapbox_config.display_fqn_label": "Zeige Instanz (z. B. @user@instanz) für User auf der lokalen Instanz an.",
+  "soapbox_config.fields.accent_color_label": "Akzentfarbe",
   "soapbox_config.fields.brand_color_label": "Brand color",
   "soapbox_config.fields.crypto_address.add": "Cryptocoin-Adresse hinzufügen",
   "soapbox_config.fields.crypto_addresses_label": "Cryptocoin-Adresse",
@@ -946,7 +946,7 @@
   "soapbox_config.hints.crypto_addresses": "Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.",
   "soapbox_config.hints.home_footer_fields": "You can have custom defined links displayed on the footer of your static pages",
   "soapbox_config.hints.logo": "SVG. Maximal 2 MB. Die Darstellung erfolgt mit 50px Höhe, das Seitenverhältnis wird beibehalten",
-  "soapbox_config.hints.promo_panel_fields": "You can have custom defined links displayed on the right panel of the timelines page.",
+  "soapbox_config.hints.promo_panel_fields": "Du kannst persönliche Links angeben, welche im Panel rechts auf der Timeline angezeigt werden.",
   "soapbox_config.hints.promo_panel_icons": "{ link }",
   "soapbox_config.hints.promo_panel_icons.link": "Soapbox Icon-Liste",
   "soapbox_config.home_footer.meta_fields.label_placeholder": "Label",
@@ -959,9 +959,9 @@
   "soapbox_config.save": "Speichern",
   "soapbox_config.saved": "Soapbox-Konfiruation gespeichert!",
   "soapbox_config.single_user_mode_hint": "Startseite leitet zum Nutzerprofil weiter.",
-  "soapbox_config.single_user_mode_label": "Single user mode",
+  "soapbox_config.single_user_mode_label": "Einzelnutzer-Modus",
   "soapbox_config.single_user_mode_profile_hint": "@handle",
-  "soapbox_config.single_user_mode_profile_label": "Main user handle",
+  "soapbox_config.single_user_mode_profile_label": "Primäres Profil",
   "soapbox_config.verified_can_edit_name_label": "Verifizierten Nutzern die Änderung des Anzeigenamens gestatten.",
   "status.actions.more": "Weitere Einstellungen",
   "status.admin_account": "Öffne Moderationsoberfläche für @{name}",
@@ -1024,19 +1024,19 @@
   "statuses.quote_tombstone": "Der Beitrag kann nicht angezeigt werden.",
   "statuses.tombstone": "Beitrag oder Beiträge können nicht angezeigt werden.",
   "suggestions.dismiss": "Empfehlung ausblenden",
-  "tabs_bar.all": "All",
+  "tabs_bar.all": "Alle",
   "tabs_bar.chats": "Chats",
   "tabs_bar.dashboard": "Steuerung",
   "tabs_bar.fediverse": "Fediverse",
   "tabs_bar.home": "Start",
-  "tabs_bar.more": "More",
+  "tabs_bar.more": "Mehr",
   "tabs_bar.notifications": "Benachrichtigungen",
   "tabs_bar.post": "Neuer Beitrag",
-  "tabs_bar.profile": "Profile",
+  "tabs_bar.profile": "Profil",
   "tabs_bar.search": "Suche",
-  "tabs_bar.settings": "Settings",
-  "tabs_bar.theme_toggle_dark": "Switch to dark theme",
-  "tabs_bar.theme_toggle_light": "Switch to light theme",
+  "tabs_bar.settings": "Einstellungen",
+  "tabs_bar.theme_toggle_dark": "Zum dunklen Modus wechseln",
+  "tabs_bar.theme_toggle_light": "Zum hellen Modus wechseln",
   "time_remaining.days": "{number, plural, one {# Tag} other {# Tage}} verbleibend",
   "time_remaining.hours": "{number, plural, one {# Stunde} other {# Stunden}} verbleibend",
   "time_remaining.minutes": "{number, plural, one {# Minute} other {# Minuten}} verbleibend",
@@ -1049,10 +1049,10 @@
   "unauthorized_modal.title": "Sign up for {site_title}",
   "upload_area.title": "Zum Hochladen hereinziehen",
   "upload_button.label": "Mediendatei hinzufügen (JPEG, PNG, GIF, WebM, MP4, MOV)",
-  "upload_error.image_size_limit": "Image exceeds the current file size limit ({limit})",
+  "upload_error.image_size_limit": "Bild überschreitet das Limit von ({limit})",
   "upload_error.limit": "Dateiupload-Limit erreicht.",
   "upload_error.poll": "Dateiuploads sind in Kombination mit Umfragen nicht erlaubt.",
-  "upload_error.video_size_limit": "Video exceeds the current file size limit ({limit})",
+  "upload_error.video_size_limit": "Video überschreitet das Limit von ({limit})",
   "upload_form.description": "Für Menschen mit Sehbehinderung beschreiben",
   "upload_form.preview": "Vorschau",
   "upload_form.undo": "Löschen",
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 813d5fbe4..9bb823b7a 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -434,7 +434,7 @@
   "emoji_button.objects": "Objects",
   "emoji_button.people": "People",
   "emoji_button.recent": "Frequently used",
-  "emoji_button.search": "Search...",
+  "emoji_button.search": "Search…",
   "emoji_button.search_results": "Search results",
   "emoji_button.symbols": "Symbols",
   "emoji_button.travel": "Travel & Places",
@@ -1073,7 +1073,7 @@
   "upload_form.description": "Describe for the visually impaired",
   "upload_form.preview": "Preview",
   "upload_form.undo": "Delete",
-  "upload_progress.label": "Uploading...",
+  "upload_progress.label": "Uploading…",
   "video.close": "Close video",
   "video.download": "Download file",
   "video.exit_fullscreen": "Exit full screen",
diff --git a/app/soapbox/pages/home-page.tsx b/app/soapbox/pages/home-page.tsx
index d3908fd1e..1982d4605 100644
--- a/app/soapbox/pages/home-page.tsx
+++ b/app/soapbox/pages/home-page.tsx
@@ -17,7 +17,7 @@ import {
 import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
 import Avatar from '../components/avatar';
-import { Card, CardBody, Layout } from '../components/ui';
+import { Card, CardBody, HStack, Layout } from '../components/ui';
 import ComposeForm from '../features/compose/components/compose-form';
 import BundleContainer from '../features/ui/containers/bundle-container';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
@@ -42,7 +42,7 @@ const HomePage: React.FC = ({ children }) => {
         {me && (
           <Card variant='rounded' ref={composeBlock}>
             <CardBody>
-              <div className='flex items-start space-x-4'>
+              <HStack alignItems='start' space={4}>
                 <Link to={`/@${acct}`}>
                   <Avatar account={account} size={46} />
                 </Link>
@@ -53,7 +53,7 @@ const HomePage: React.FC = ({ children }) => {
                   autoFocus={false}
                   clickableAreaRef={composeBlock}
                 />
-              </div>
+              </HStack>
             </CardBody>
           </Card>
         )}
diff --git a/app/soapbox/reducers/compose.ts b/app/soapbox/reducers/compose.ts
index 8e7fe6b0e..c4d60dc1d 100644
--- a/app/soapbox/reducers/compose.ts
+++ b/app/soapbox/reducers/compose.ts
@@ -319,10 +319,11 @@ export default function compose(state = initialState, action: AnyAction) {
       }));
     case COMPOSE_QUOTE:
       return updateCompose(state, 'compose-modal', compose => compose.withMutations(map => {
+        const author = action.status.getIn(['account', 'acct']);
         const defaultCompose = state.get('default')!;
 
         map.set('quote', action.status.get('id'));
-        map.set('to', ImmutableOrderedSet());
+        map.set('to', ImmutableOrderedSet([author]));
         map.set('text', '');
         map.set('privacy', privacyPreference(action.status.visibility, defaultCompose.privacy));
         map.set('focusDate', new Date());
diff --git a/app/soapbox/reducers/statuses.ts b/app/soapbox/reducers/statuses.ts
index 2c19b2511..513a34b94 100644
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@@ -1,5 +1,5 @@
 import escapeTextContentForBrowser from 'escape-html';
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
 import emojify from 'soapbox/features/emoji/emoji';
 import { normalizeStatus } from 'soapbox/normalizers';
@@ -195,6 +195,24 @@ const simulateFavourite = (
   return state.set(statusId, updatedStatus);
 };
 
+interface Translation {
+  content: string,
+  detected_source_language: string,
+  provider: string,
+}
+
+/** Import translation from translation service into the store. */
+const importTranslation = (state: State, statusId: string, translation: Translation) => {
+  const map = ImmutableMap(translation);
+  const result = map.set('content', stripCompatibilityFeatures(map.get('content', '')));
+  return state.setIn([statusId, 'translation'], result);
+};
+
+/** Delete translation from the store. */
+const deleteTranslation = (state: State, statusId: string) => {
+  return state.deleteIn([statusId, 'translation']);
+};
+
 const initialState: State = ImmutableMap();
 
 export default function statuses(state = initialState, action: AnyAction): State {
@@ -258,9 +276,9 @@ export default function statuses(state = initialState, action: AnyAction): State
     case STATUS_DELETE_FAIL:
       return incrementReplyCount(state, action.params);
     case STATUS_TRANSLATE_SUCCESS:
-      return state.setIn([action.id, 'translation'], fromJS(action.translation));
+      return importTranslation(state, action.id, action.translation);
     case STATUS_TRANSLATE_UNDO:
-      return state.deleteIn([action.id, 'translation']);
+      return deleteTranslation(state, action.id);
     case TIMELINE_DELETE:
       return deleteStatus(state, action.id, action.references);
     default:
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 686e8d01d..5161a955c 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -49,7 +49,8 @@ export const TRUTHSOCIAL = 'TruthSocial';
  * Rebased, the recommended backend for Soapbox.
  * @see {@link https://gitlab.com/soapbox-pub/rebased}
  */
-export const SOAPBOX = 'soapbox';
+// NOTE: Rebased is named 'soapbox' for legacy reasons.
+export const REBASED = 'soapbox';
 
 /**
  * glitch-soc, fork of Mastodon with a number of experimental features.
@@ -105,7 +106,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see PATCH /api/v1/accounts/update_credentials
      */
     accountLocation: any([
-      v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+      v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
       v.software === TRUTHSOCIAL,
     ]),
 
@@ -179,7 +180,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see POST /api/v1/accounts
      * @see PATCH /api/v1/accounts/update_credentials
      */
-    birthdays: v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+    birthdays: v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
 
     /** Whether people who blocked you are visible through the API. */
     blockersVisible: features.includes('blockers_visible'),
@@ -409,7 +410,7 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     mastodonAdmin: any([
       v.software === MASTODON && gte(v.compatVersion, '2.9.1'),
-      v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+      v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
     ]),
 
     /**
@@ -533,7 +534,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see POST /api/v1/statuses
      */
     quotePosts: any([
-      v.software === PLEROMA && [SOAPBOX, AKKOMA].includes(v.build!) && gte(v.version, '2.4.50'),
+      v.software === PLEROMA && [REBASED, AKKOMA].includes(v.build!) && gte(v.version, '2.4.50'),
       instance.feature_quote === true,
     ]),
 
@@ -549,7 +550,7 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     removeFromFollowers: any([
       v.software === MASTODON && gte(v.compatVersion, '3.5.0'),
-      v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+      v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
     ]),
 
     /**
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index e4a0833c7..86fd7cb71 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -72,27 +72,6 @@ a .account__avatar {
     bottom: 0;
     right: 0;
     z-index: 1;
-
-    &.still-image {
-      position: absolute;
-    }
-  }
-}
-
-.account__relationship {
-  height: auto;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  button {
-    margin-left: 5px;
-  }
-
-  .svg-icon {
-    width: 20px;
-    height: 20px;
   }
 }
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index f644c79a0..2582b0b63 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -44,8 +44,6 @@
 @import 'components/columns';
 @import 'components/search';
 @import 'components/react-toggle';
-@import 'components/still-image';
-@import 'components/spoiler-button';
 @import 'components/video-player';
 @import 'components/audio-player';
 @import 'components/profile-hover-card';
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 34e12b6f4..c5d5cb302 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -63,7 +63,7 @@
   }
 
   &__content {
-    @apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-gray-800;
+    @apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-gray-900;
 
     > div {
       @apply max-h-full;
@@ -87,7 +87,7 @@
   }
 
   .audio-toggle .react-toggle-track {
-    @apply h-4 w-8 bg-accent-500;
+    @apply h-4 w-8 bg-accent-500 dark:bg-accent-500;
   }
 
   .audio-toggle .react-toggle-track-check {
@@ -107,6 +107,10 @@
   .fa {
     font-size: 14px;
   }
+
+  .chat-message--me .chat-message__bubble {
+    @apply dark:bg-primary-900;
+  }
 }
 
 .chat-messages {
@@ -141,7 +145,7 @@
   }
 
   &--me .chat-message__bubble {
-    @apply bg-primary-200 dark:bg-primary-900;
+    @apply bg-primary-200 dark:bg-primary-800;
     margin-left: auto;
   }
 
@@ -155,15 +159,16 @@
     right: -8px;
     height: 20px;
     padding: 1px;
-    background: var(--background-color);
-    border-radius: 999px;
     opacity: 0;
     pointer-events: none;
     transition: 0.2s;
 
-    .svg-icon {
-      height: 20px;
-      width: 20px;
+    button {
+      @apply p-1 bg-gray-100 dark:bg-gray-800;
+
+      svg {
+        @apply h-4 w-4;
+      }
     }
   }
 }
@@ -236,29 +241,17 @@
     position: relative;
 
     textarea {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      box-sizing: border-box;
-      padding: 6px;
-      padding-right: 25px;
-      background: var(--background-color);
-      border: 0;
-      border-radius: 6px;
-      color: var(--primary-text-color);
-      font-size: 15px;
-      overflow: hidden;
+      @apply pr-6;
     }
   }
 
   &__send {
     .icon-button,
     button {
-      @apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 text-black dark:text-white;
+      @apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 bg-transparent text-black dark:text-white;
       top: 50%;
       transform: translateY(-50%);
 
-      .svg-icon,
       svg {
         @apply w-[18px] h-[18px];
       }
@@ -299,28 +292,6 @@
   }
 }
 
-.chat {
-  &__attachment-icon {
-    float: right;
-  }
-
-  &__last-message {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-height: 19px;
-
-    a {
-      color: var(--highlight-text-color);
-    }
-
-    &.attachment {
-      font-style: italic;
-    }
-  }
-}
-
 .chat-message__media {
   height: 120px;
 }
@@ -329,10 +300,6 @@
   height: 100% !important;
   margin: 4px 0 8px;
 
-  .spoiler-button {
-    display: none;
-  }
-
   .media-gallery__item:not(.media-gallery__item--image) {
     max-width: 100%;
     width: 120px !important;
@@ -342,11 +309,6 @@
   &__preview {
     background-color: transparent;
   }
-
-  &__item-thumbnail img,
-  &__item-thumbnail .still-image img {
-    object-fit: contain;
-  }
 }
 
 .chat-messages__divider {
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index a9e32d19e..a31b25cf2 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -392,17 +392,14 @@
 }
 
 .column__switch .audio-toggle {
-  position: absolute;
-  z-index: 4;
-  top: 12px;
-  right: 14px;
+  @apply absolute top-3 right-[14px] rtl:left-[14px] rtl:right-auto z-10;
 
   .react-toggle-track-check {
-    left: 6px;
+    @apply left-1.5;
   }
 
   .react-toggle-track-x {
-    right: 8px;
+    @apply right-2;
   }
 }
 
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index d2297db4e..0c7f73659 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -59,7 +59,7 @@
         }
 
         .icon-button {
-          @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 flex items-center;
+          @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
         }
       }
 
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 257ad8af6..e91dfb6f8 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -39,7 +39,7 @@
   // }
 
   &__connector {
-    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden;
+    @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1];
 
     &--bottom {
       @apply block;
@@ -48,17 +48,3 @@
     }
   }
 }
-
-.thread {
-  .ptr,
-  .ptr__children {
-    background: var(--foreground-color) !important;
-    border-radius: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-
-    @media screen and (max-width: 580px) {
-      border-radius: 0;
-    }
-  }
-}
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 664600893..0c71a43dd 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -57,33 +57,8 @@
   line-height: 0;
   position: relative;
   z-index: 1;
-
-  &,
-  .still-image {
-    height: 100%;
-    width: 100%;
-
-    img {
-      @apply object-cover rounded-lg;
-    }
-  }
-
-  .still-image--play-on-hover::before {
-    content: 'GIF';
-    position: absolute;
-    color: var(--primary-text-color);
-    background: var(--foreground-color);
-    bottom: 6px;
-    left: 6px;
-    padding: 2px 6px;
-    border-radius: 2px;
-    font-size: 11px;
-    font-weight: 600;
-    pointer-events: none;
-    opacity: 0.9;
-    transition: opacity 0.1s ease;
-    line-height: 18px;
-  }
+  height: 100%;
+  width: 100%;
 
   video {
     width: 100%;
@@ -92,17 +67,6 @@
   }
 }
 
-.status__wrapper {
-  .media-gallery__item-thumbnail.letterboxed {
-    &,
-    .still-image {
-      img {
-        object-fit: contain;
-      }
-    }
-  }
-}
-
 .media-gallery__preview {
   @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
   width: 100%;
@@ -113,23 +77,6 @@
   left: 0;
   z-index: 0;
 
-  .still-image--play-on-hover::before {
-    content: 'GIF';
-    position: absolute;
-    color: var(--primary-text-color);
-    background: var(--foreground-color);
-    bottom: 6px;
-    left: 6px;
-    padding: 2px 6px;
-    border-radius: 2px;
-    font-size: 11px;
-    font-weight: 600;
-    pointer-events: none;
-    opacity: 0.9;
-    transition: opacity 0.1s ease;
-    line-height: 18px;
-  }
-
   &--hidden {
     display: none;
   }
@@ -194,10 +141,6 @@ $media-compact-size: 50px;
   height: $media-compact-size !important;
   background: transparent;
 
-  .spoiler-button {
-    display: none;
-  }
-
   .media-gallery__item {
     width: $media-compact-size !important;
     height: $media-compact-size !important;
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 7c27ad35c..a26668bb3 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -294,7 +294,7 @@
         }
 
         .svg-icon:first-child {
-          @apply min-w-[1.25rem] w-5 h-5 mr-2.5;
+          @apply min-w-[1.25rem] w-5 h-5;
 
           svg {
             stroke-width: 1.5;
diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss
index 726e52731..1f5cb0fc5 100644
--- a/app/styles/components/react-toggle.scss
+++ b/app/styles/components/react-toggle.scss
@@ -8,6 +8,10 @@
   user-select: none;
   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
   -webkit-tap-highlight-color: transparent;
+
+  &:focus-within .react-toggle-track {
+    @apply ring-2 ring-offset-2 ring-primary-500;
+  }
 }
 
 .react-toggle-screenreader-only {
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index e8a33a44e..e2f9be247 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -13,12 +13,12 @@
   }
 
   .svg-icon {
+    @apply right-4 rtl:left-4 rtl:right-auto;
     @include font-size(16);
     cursor: default;
     display: inline-block;
     position: absolute;
     top: 50%;
-    right: 16px;
     transform: translateY(-50%);
     z-index: 2;
     width: 18px;
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index 9d3625863..f3fd86032 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -1,5 +1,5 @@
 .sidebar-menu {
-  @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 z-1000;
+  @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 rtl:translate-x-80 z-1000;
 
   @media (max-width: 400px) {
     width: 90vw;
diff --git a/app/styles/components/snackbar.scss b/app/styles/components/snackbar.scss
index 28e79d672..c2adaf0a5 100644
--- a/app/styles/components/snackbar.scss
+++ b/app/styles/components/snackbar.scss
@@ -16,7 +16,7 @@
   @apply text-success-500;
 
   &::before {
-    @apply ml-4;
+    @apply ml-4 rtl:ml-0 rtl:mr-4;
     content: '\f058';
   }
 }
@@ -25,13 +25,13 @@
   @apply text-danger-500 ml-4;
 
   &::before {
-    @apply ml-4;
+    @apply ml-4 rtl:ml-0 rtl:mr-4;
     content: '\f057';
   }
 }
 
 .notification-bar-info {
-  @apply text-primary-500 ml-4;
+  @apply text-primary-500 ml-4 rtl:ml-0 rtl:mr-4;
 
   &::before {
     @apply ml-4;
@@ -40,7 +40,7 @@
 }
 
 .notification-bar-wrapper {
-  @apply p-4 flex items-center justify-between w-full space-x-2;
+  @apply p-4 flex items-center justify-between w-full space-x-2 rtl:space-x-reverse;
 }
 
 .notification-bar-title {
diff --git a/app/styles/components/spoiler-button.scss b/app/styles/components/spoiler-button.scss
deleted file mode 100644
index 35498bef9..000000000
--- a/app/styles/components/spoiler-button.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.spoiler-button {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 40;
-
-  &--hidden {
-    display: none;
-  }
-
-  .svg-icon {
-    width: 20px;
-    height: 20px;
-  }
-
-  &__overlay {
-    display: block;
-    background: transparent;
-    width: 100%;
-    height: 100%;
-    border: 0;
-
-    &__label {
-      display: inline-block;
-      background: var(--accent-color--faint);
-      border-radius: 8px;
-      padding: 8px 12px;
-      color: var(--primary-text-color);
-      font-weight: 500;
-      font-size: 14px;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      .spoiler-button__overlay__label {
-        background: var(--accent-color--med);
-      }
-    }
-  }
-}
diff --git a/app/styles/components/still-image.scss b/app/styles/components/still-image.scss
deleted file mode 100644
index 0b86d6ada..000000000
--- a/app/styles/components/still-image.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.still-image {
-  position: relative;
-  overflow: hidden;
-
-  img,
-  canvas {
-    width: 100%;
-    height: 100%;
-    display: block;
-    object-fit: cover;
-    font-family: inherit;
-  }
-
-  &--play-on-hover {
-    img {
-      position: absolute;
-      visibility: hidden;
-    }
-
-    &:hover img {
-      visibility: visible;
-    }
-
-    &:hover canvas {
-      visibility: hidden;
-    }
-  }
-}
diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index 1a81d167e..47bda32ed 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -32,6 +32,7 @@
   video {
     display: block;
     z-index: 1;
+    position: relative;
   }
 
   &.fullscreen {
@@ -51,7 +52,6 @@
   &--inline {
     video {
       object-fit: contain;
-      position: relative;
       max-height: 100%;
     }
   }
@@ -73,52 +73,6 @@
     }
   }
 
-  &--inactive {
-    min-height: 300px;
-
-    video,
-    .video-player__controls {
-      visibility: hidden;
-    }
-  }
-
-  &__spoiler {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 4;
-    border: 0;
-    background: var(--background-color);
-    color: var(--primary-text-color--faint);
-    transition: none;
-    pointer-events: none;
-
-    &.active {
-      display: block;
-      pointer-events: auto;
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: var(--primary-text-color);
-      }
-    }
-
-    &__title {
-      display: block;
-      font-size: 14px;
-    }
-
-    &__subtitle {
-      display: block;
-      font-size: 11px;
-      font-weight: 500;
-    }
-  }
-
   &__buttons-bar {
     display: flex;
     justify-content: space-between;
diff --git a/app/styles/emoji-picker.scss b/app/styles/emoji-picker.scss
index 90830d576..7408e85ab 100644
--- a/app/styles/emoji-picker.scss
+++ b/app/styles/emoji-picker.scss
@@ -9,7 +9,7 @@
 }
 
 .emoji-mart .emoji-mart-emoji {
-  @apply p-1.5;
+  @apply p-1.5 align-middle;
 }
 
 .emoji-mart-bar {
diff --git a/package.json b/package.json
index 873eefb82..1284969a9 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@sentry/browser": "^7.11.1",
     "@sentry/react": "^7.11.1",
     "@sentry/tracing": "^7.11.1",
-    "@tabler/icons": "^1.111.0",
+    "@tabler/icons": "^1.113.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
diff --git a/yarn.lock b/yarn.lock
index ea5b85429..fe283b59c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2272,10 +2272,10 @@
     remark "^13.0.0"
     unist-util-find-all-after "^3.0.2"
 
-"@tabler/icons@^1.111.0":
-  version "1.111.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.111.0.tgz#0538fdd8b5de7072ae60fc5d2f13a9a636d2d0e3"
-  integrity sha512-TZWYiMT5ccqfHxRE0Qtgvl+sGsMbNkrv7cJMt/tm8TN9l/CDXx/o7d8uAwUN+3PAlSFfF5e/rD1bi1WJs2xNIA==
+"@tabler/icons@^1.113.0":
+  version "1.113.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.113.0.tgz#aeee5f38284d9996abec1bda46c237ef53cde8d4"
+  integrity sha512-DjxsvR/0HFHD/utQlM+q3wpl1W2n+jgEZkyfkCkc295rCoAfeXHIBfz/9ROrSHkr205Kq/M8KpQR0Nd4kjwODQ==
 
 "@tailwindcss/forms@^0.5.3":
   version "0.5.3"