diff --git a/app/assets/icons/COPYING.md b/app/assets/icons/COPYING.md
index 5e84c0b5cc..1dcc928d92 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 4cd3cb9380..0000000000
--- 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 367ec0e333..1d4fde154e 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 006584e8d1..70ab2cfc55 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 c38cc8c5b3..24253d7df3 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 8fd2bfa539..12a28b3828 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 1e54bc4f64..202c43fa8f 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 23a165fcbc..cc528b1940 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 830f3e679e..370472cb45 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 425376f955..94ea0cf593 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 ba4a82fd32..d3a5bc021e 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 18d9fd71ff..510cbecb85 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 d89848f2cb..c10d4084da 100644
Binary files a/app/soapbox/components/markup.css and b/app/soapbox/components/markup.css differ
diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 42b961dc1c..9244f05d52 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 367c788e02..39d766f801 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 0e0ae7f6fd..21703caa04 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 9dbd84d678..c20635cd3c 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 94e921a9c1..daf04d12f8 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 90552d0bdc..7a3ef8e5dd 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 4cc7a574ca..02678ed788 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 3dc625c4d7..e6af91bc11 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 0964c84ae1..8b1ce6dd67 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 24e212ce55..1f4f1a2611 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 07c778fd22..03a43722ae 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 ec19809787..384fa354df 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 97de8862b8..4be97ee83d 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 59f6ee1bc5..675a9d15b5 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 20810efbe4..caaea79ee6 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 85126806f9..c87ef9040d 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 a09fb02dcf..f1480e07c6 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 59ca180b1f..466825434c 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 eee5b37062..d648c036e4 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 c56a6d190b..79cee2c657 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 3b174e47aa..f1ccbf1e3d 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 ef5d6ebafc..34473fc2ce 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 b29cf79060..03dfd82434 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 322cbd7e75..96f2c2ec44 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 b8d05b79da..8c2369ce56 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 49316529af..2839085799 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 7c2f94a4ab..8103259738 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 3bced193fa..16cc33234f 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 766decb883..aea2f5f810 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 c8302436b5..8847f22e64 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 a2a171bfcc..4242094b55 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 7c41896e71..fae9baf698 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 1112c788ce..37b6ce92b1 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 f76431ba8c..1687b85e6d 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 b84d90aa47..f64c4a3323 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 c137d0165d..609af73a46 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 2a55c54836..f0a4d1c318 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 78a9cd11ac..1267c87539 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 a7a4dff28a..834b556f25 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 f080ae1fa7..77f47bdfce 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 a5f310655b..f4b8c1876e 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 cab59caa37..31add76723 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 10b71bb67c..9bafff5928 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 cfddc637e6..521ed0dabd 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 885c617db3..aef932516d 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 7c1d5bfd35..6d77fd68f8 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 0fd61d0c7d..ecb2d6bb1e 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 c85ff3d2fe..c8df16dd1a 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 1967e9138a..2f77e11421 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 0c4939eede..45d18444e2 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 83b6ef14d5..df6798ef76 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 9eadddbc62..e9b4caa358 100644
Binary files a/app/soapbox/features/emoji/emoji.js and b/app/soapbox/features/emoji/emoji.js differ
diff --git a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
index ac86039fda..a912f3f4db 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 61f7a09afa..dc2b334c18 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 a52dbd9750..6e96672ba2 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 08b9c2242b..b508ff2d97 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 e35a0ce968..0000000000
--- 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 1e9d7c7454..f47e338d76 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 b6c04a9e6d..5023a5b8bb 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 b9c5df6414..e755624856 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 ae3c3c74c4..f892048852 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 753ef4d7f5..f5f9f7274f 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 31c7bc6c95..38ec425ad2 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 b6637589c9..a1059cb91f 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 520fbc1b9c..e1a9c5f304 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 00f38916e5..5d2e101b29 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 6dbb26620e..4d83c5b98f 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 e012062512..d913668997 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 d84fe1a4ec..7d9fa62f0f 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 f587589d6d..f0ef9bc728 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 7dfedfc7d6..c367af1321 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 1a035066dd..fbeec6a423 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 b015c9df90..51cb4a5cea 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 641b8a6ac3..ea276797e3 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 7ab185be94..a6963df48e 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 53dc4e02ca..5facac7a86 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 aab37ed9dc..708b65e884 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 75ffec27ca..5e0a6de2cf 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 bf24512403..19b6af9f70 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 616fddb827..b894b59846 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 72cd1de7d8..298788cdfa 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 7648069faf..ab2ca6402c 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 3a09be5c32..22fe18e8ab 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 9dbde1f796..2d3e15872a 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 6ed8ef4356..bfd4ed29af 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 aa9c4a1bdd..871ade6c47 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 6441e87631..ee45e49476 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 58ddea245d..f323a397ed 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 1df4df05ab..2fd1868300 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 0000000000..2593c52010
--- /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 1ee911e34a..1babfb63f9 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 89239bd618..a765b38f22 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 6766a6ad43..9add33b272 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 e285788e03..8ce8199e76 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 75ef4f1514..e7f11683a0 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 5cc0c9e647..6d6fb395bf 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 8f0fbf5171..918d94efdb 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 f479aceadb..dd2fc91fa5 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 e51f3220f5..bfdc017de5 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 4470bd4c27..88c9dc435b 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 e4bf2c1e29..6539ca8c88 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 9e05686b7d..fc9131b97f 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 26add4f4f2..6cdba4104e 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 84283f4b48..bb35ffe400 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 98c11b8290..a834836160 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 7337c706d8..efe0a5ffc4 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 71677d3d3e..ebfe6a00d1 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 f418714bd6..71aaae65da 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 7cfd4f2848..883fde698d 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 04ac3e04c0..37d6eb99e3 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 813d5fbe41..9bb823b7a1 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 d3908fd1e5..1982d46051 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 8e7fe6b0e5..c4d60dc1d4 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 2c19b2511b..513a34b940 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 686e8d01dd..5161a955c1 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 e4a0833c7d..86fd7cb719 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 f644c79a09..2582b0b63b 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 34e12b6f42..c5d5cb302c 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 a9e32d19e5..a31b25cf26 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 d2297db4e4..0c7f73659e 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 257ad8af61..e91dfb6f80 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 664600893c..0c71a43ddc 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 7c27ad35c4..a26668bb33 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 726e527312..1f5cb0fc56 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 e8a33a44ef..e2f9be2479 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 9d36258630..f3fd860329 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 28e79d6725..c2adaf0a58 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 35498bef9e..0000000000
--- 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 0b86d6adae..0000000000
--- 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 1a81d167ed..47bda32ed0 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 90830d576b..7408e85abf 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 873eefb828..1284969a9b 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 ea5b85429c..fe283b59c2 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"