diff --git a/app/soapbox/actions/admin.ts b/app/soapbox/actions/admin.ts
index 660b52dce..02af5e87a 100644
--- a/app/soapbox/actions/admin.ts
+++ b/app/soapbox/actions/admin.ts
@@ -1,5 +1,6 @@
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer';
+import { filterBadges, getTagDiff } from 'soapbox/utils/badges';
 import { getFeatures } from 'soapbox/utils/features';
 
 import api, { getLinks } from '../api';
@@ -403,6 +404,12 @@ const tagUsers = (accountIds: string[], tags: string[]) =>
 const untagUsers = (accountIds: string[], tags: string[]) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const nicknames = nicknamesFromIds(getState, accountIds);
+
+    // Legacy: allow removing legacy 'donor' tags.
+    if (tags.includes('badge:donor')) {
+      tags = [...tags, 'donor'];
+    }
+
     dispatch({ type: ADMIN_USERS_UNTAG_REQUEST, accountIds, tags });
     return api(getState)
       .delete('/api/v1/pleroma/admin/users/tag', { data: { nicknames, tags } })
@@ -413,6 +420,24 @@ const untagUsers = (accountIds: string[], tags: string[]) =>
       });
   };
 
+/** Synchronizes user tags to the backend. */
+const setTags = (accountId: string, oldTags: string[], newTags: string[]) =>
+  async(dispatch: AppDispatch) => {
+    const diff = getTagDiff(oldTags, newTags);
+
+    await dispatch(tagUsers([accountId], diff.added));
+    await dispatch(untagUsers([accountId], diff.removed));
+  };
+
+/** Synchronizes badges to the backend. */
+const setBadges = (accountId: string, oldTags: string[], newTags: string[]) =>
+  (dispatch: AppDispatch) => {
+    const oldBadges = filterBadges(oldTags);
+    const newBadges = filterBadges(newTags);
+
+    return dispatch(setTags(accountId, oldBadges, newBadges));
+  };
+
 const verifyUser = (accountId: string) =>
   (dispatch: AppDispatch) =>
     dispatch(tagUsers([accountId], ['verified']));
@@ -421,14 +446,6 @@ const unverifyUser = (accountId: string) =>
   (dispatch: AppDispatch) =>
     dispatch(untagUsers([accountId], ['verified']));
 
-const setDonor = (accountId: string) =>
-  (dispatch: AppDispatch) =>
-    dispatch(tagUsers([accountId], ['donor']));
-
-const removeDonor = (accountId: string) =>
-  (dispatch: AppDispatch) =>
-    dispatch(untagUsers([accountId], ['donor']));
-
 const addPermission = (accountIds: string[], permissionGroup: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const nicknames = nicknamesFromIds(getState, accountIds);
@@ -476,6 +493,18 @@ const demoteToUser = (accountId: string) =>
       dispatch(removePermission([accountId], 'moderator')),
     ]);
 
+const setRole = (accountId: string, role: 'user' | 'moderator' | 'admin') =>
+  (dispatch: AppDispatch) => {
+    switch (role) {
+      case 'user':
+        return dispatch(demoteToUser(accountId));
+      case 'moderator':
+        return dispatch(promoteToModerator(accountId));
+      case 'admin':
+        return dispatch(promoteToAdmin(accountId));
+    }
+  };
+
 const suggestUsers = (accountIds: string[]) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const nicknames = nicknamesFromIds(getState, accountIds);
@@ -567,15 +596,16 @@ export {
   fetchModerationLog,
   tagUsers,
   untagUsers,
+  setTags,
+  setBadges,
   verifyUser,
   unverifyUser,
-  setDonor,
-  removeDonor,
   addPermission,
   removePermission,
   promoteToAdmin,
   promoteToModerator,
   demoteToUser,
+  setRole,
   suggestUsers,
   unsuggestUsers,
 };
diff --git a/app/soapbox/actions/search.ts b/app/soapbox/actions/search.ts
index e8718d479..a2f165ac0 100644
--- a/app/soapbox/actions/search.ts
+++ b/app/soapbox/actions/search.ts
@@ -8,9 +8,10 @@ import type { SearchFilter } from 'soapbox/reducers/search';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity } from 'soapbox/types/entities';
 
-const SEARCH_CHANGE = 'SEARCH_CHANGE';
-const SEARCH_CLEAR  = 'SEARCH_CLEAR';
-const SEARCH_SHOW   = 'SEARCH_SHOW';
+const SEARCH_CHANGE        = 'SEARCH_CHANGE';
+const SEARCH_CLEAR         = 'SEARCH_CLEAR';
+const SEARCH_SHOW          = 'SEARCH_SHOW';
+const SEARCH_RESULTS_CLEAR = 'SEARCH_RESULTS_CLEAR';
 
 const SEARCH_FETCH_REQUEST = 'SEARCH_FETCH_REQUEST';
 const SEARCH_FETCH_SUCCESS = 'SEARCH_FETCH_SUCCESS';
@@ -28,7 +29,11 @@ const changeSearch = (value: string) =>
   (dispatch: AppDispatch) => {
     // If backspaced all the way, clear the search
     if (value.length === 0) {
-      return dispatch(clearSearch());
+      dispatch(clearSearchResults());
+      return dispatch({
+        type: SEARCH_CHANGE,
+        value,
+      });
     } else {
       return dispatch({
         type: SEARCH_CHANGE,
@@ -41,6 +46,10 @@ const clearSearch = () => ({
   type: SEARCH_CLEAR,
 });
 
+const clearSearchResults = () => ({
+  type: SEARCH_RESULTS_CLEAR,
+});
+
 const submitSearch = (filter?: SearchFilter) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const value = getState().search.value;
@@ -167,6 +176,7 @@ export {
   SEARCH_CHANGE,
   SEARCH_CLEAR,
   SEARCH_SHOW,
+  SEARCH_RESULTS_CLEAR,
   SEARCH_FETCH_REQUEST,
   SEARCH_FETCH_SUCCESS,
   SEARCH_FETCH_FAIL,
@@ -177,6 +187,7 @@ export {
   SEARCH_ACCOUNT_SET,
   changeSearch,
   clearSearch,
+  clearSearchResults,
   submitSearch,
   fetchSearchRequest,
   fetchSearchSuccess,
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 13646bcdb..01b792bd0 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -3,24 +3,27 @@ import React from 'react';
 
 interface IBadge {
   title: React.ReactNode,
-  slug: 'patron' | 'donor' | 'admin' | 'moderator' | 'bot' | 'opaque',
+  slug: string,
 }
-
 /** Badge to display on a user's profile. */
-const Badge: React.FC<IBadge> = ({ title, slug }) => (
-  <span
-    data-testid='badge'
-    className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
-      'bg-fuchsia-700 text-white': slug === 'patron',
-      'bg-yellow-500 text-white': slug === 'donor',
-      'bg-black text-white': slug === 'admin',
-      'bg-cyan-600 text-white': slug === 'moderator',
-      'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': slug === 'bot',
-      'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
-    })}
-  >
-    {title}
-  </span>
-);
+const Badge: React.FC<IBadge> = ({ title, slug }) => {
+  const fallback = !['patron', 'admin', 'moderator', 'opaque', 'badge:donor'].includes(slug);
+
+  return (
+    <span
+      data-testid='badge'
+      className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
+        'bg-fuchsia-700 text-white': slug === 'patron',
+        'bg-emerald-800 text-white': slug === 'badge:donor',
+        'bg-black text-white': slug === 'admin',
+        'bg-cyan-600 text-white': slug === 'moderator',
+        'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': fallback,
+        'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
+      })}
+    >
+      {title}
+    </span>
+  );
+};
 
 export default Badge;
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index ae29a5cbd..b16a36784 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -34,7 +34,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
           id: domId,
           className: classNames({
             'w-auto': isSelect,
-          }),
+          }, child.props.className),
         });
       }
 
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index c96839c77..3775a107c 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -37,10 +37,6 @@ const getBadges = (account: Account): JSX.Element[] => {
     badges.push(<Badge key='patron' slug='patron' title='Patron' />);
   }
 
-  if (account.donor) {
-    badges.push(<Badge key='donor' slug='donor' title='Donor' />);
-  }
-
   return badges;
 };
 
diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx
index d5bfd6025..cdb74e580 100644
--- a/app/soapbox/components/scrollable_list.tsx
+++ b/app/soapbox/components/scrollable_list.tsx
@@ -6,7 +6,7 @@ import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLo
 import { useSettings } from 'soapbox/hooks';
 
 import LoadMore from './load_more';
-import { Card, Spinner, Text } from './ui';
+import { Card, Spinner } from './ui';
 
 /** Custom Viruoso component context. */
 type Context = {
@@ -162,7 +162,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
           {isLoading ? (
             <Spinner />
           ) : (
-            <Text>{emptyMessage}</Text>
+            emptyMessage
           )}
         </Card>
       </div>
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx
index 4f349fd1c..817e1f0d2 100644
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@@ -37,6 +37,7 @@ const messages = defineMessages({
   invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' },
   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' },
 });
 
 interface ISidebarLink {
@@ -87,6 +88,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const otherAccounts: ImmutableList<AccountEntity> = useAppSelector((state) => getOtherAccounts(state));
   const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen);
   const settings = useAppSelector((state) => getSettings(state));
+  const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
 
   const closeButtonRef = React.useRef(null);
 
@@ -177,6 +179,15 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   onClick={onClose}
                 />
 
+                {(account.locked || followRequestsCount > 0) && (
+                  <SidebarLink
+                    to='/follow_requests'
+                    icon={require('@tabler/icons/user-plus.svg')}
+                    text={intl.formatMessage(messages.followRequests)}
+                    onClick={onClose}
+                  />
+                )}
+
                 {features.bookmarks && (
                   <SidebarLink
                     to='/bookmarks'
diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 5bce513a5..2dbe0b181 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -10,7 +10,7 @@ import { launchChat } from 'soapbox/actions/chats';
 import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose';
 import { toggleBookmark, toggleFavourite, togglePin, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
-import { deactivateUserModal, deleteStatusModal, deleteUserModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
+import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
 import { initMuteModal } from 'soapbox/actions/mutes';
 import { initReport } from 'soapbox/actions/reports';
 import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses';
@@ -51,7 +51,7 @@ const messages = defineMessages({
   pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
   unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
   embed: { id: 'status.embed', defaultMessage: 'Embed' },
-  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
+  adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
   admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
   copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
   group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
@@ -321,14 +321,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     }
   };
 
-  const handleDeactivateUser: React.EventHandler<React.MouseEvent> = (e) => {
+  const onModerate: React.MouseEventHandler = (e) => {
     e.stopPropagation();
-    dispatch(deactivateUserModal(intl, status.getIn(['account', 'id']) as string));
-  };
-
-  const handleDeleteUser: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-    dispatch(deleteUserModal(intl, status.getIn(['account', 'id']) as string));
+    const account = status.account as Account;
+    dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
   };
 
   const handleDeleteStatus: React.EventHandler<React.MouseEvent> = (e) => {
@@ -474,13 +470,13 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     if (isStaff) {
       menu.push(null);
 
+      menu.push({
+        text: intl.formatMessage(messages.adminAccount, { name: username }),
+        action: onModerate,
+        icon: require('@tabler/icons/gavel.svg'),
+      });
+
       if (isAdmin) {
-        menu.push({
-          text: intl.formatMessage(messages.admin_account, { name: username }),
-          href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
-          icon: require('@tabler/icons/gavel.svg'),
-          action: (event) => event.stopPropagation(),
-        });
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.id}/`,
@@ -496,17 +492,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       });
 
       if (!ownAccount) {
-        menu.push({
-          text: intl.formatMessage(messages.deactivateUser, { name: username }),
-          action: handleDeactivateUser,
-          icon: require('@tabler/icons/user-off.svg'),
-        });
-        menu.push({
-          text: intl.formatMessage(messages.deleteUser, { name: username }),
-          action: handleDeleteUser,
-          icon: require('@tabler/icons/user-minus.svg'),
-          destructive: true,
-        });
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx
index 295538da2..3bee7a03a 100644
--- a/app/soapbox/components/status_list.tsx
+++ b/app/soapbox/components/status_list.tsx
@@ -1,7 +1,9 @@
 import classNames from 'clsx';
+import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { v4 as uuidv4 } from 'uuid';
 
 import LoadGap from 'soapbox/components/load_gap';
 import ScrollableList from 'soapbox/components/scrollable_list';
@@ -9,6 +11,7 @@ import StatusContainer from 'soapbox/containers/status_container';
 import Ad from 'soapbox/features/ads/components/ad';
 import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
+import { ALGORITHMS } from 'soapbox/features/timeline-insertion';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
 import { useSoapboxConfig } from 'soapbox/hooks';
 import useAds from 'soapbox/queries/ads';
@@ -60,8 +63,12 @@ const StatusList: React.FC<IStatusList> = ({
 }) => {
   const { data: ads } = useAds();
   const soapboxConfig = useSoapboxConfig();
-  const adsInterval = Number(soapboxConfig.extensions.getIn(['ads', 'interval'], 40)) || 0;
+
+  const adsAlgorithm = String(soapboxConfig.extensions.getIn(['ads', 'algorithm', 0]));
+  const adsOpts = (soapboxConfig.extensions.getIn(['ads', 'algorithm', 1], ImmutableMap()) as ImmutableMap<string, any>).toJS();
+
   const node = useRef<VirtuosoHandle>(null);
+  const seed = useRef<string>(uuidv4());
 
   const getFeaturedStatusCount = () => {
     return featuredStatusIds?.size || 0;
@@ -132,9 +139,10 @@ const StatusList: React.FC<IStatusList> = ({
     );
   };
 
-  const renderAd = (ad: AdEntity) => {
+  const renderAd = (ad: AdEntity, index: number) => {
     return (
       <Ad
+        key={`ad-${index}`}
         card={ad.card}
         impression={ad.impression}
         expires={ad.expires}
@@ -175,9 +183,13 @@ const StatusList: React.FC<IStatusList> = ({
   const renderStatuses = (): React.ReactNode[] => {
     if (isLoading || statusIds.size > 0) {
       return statusIds.toList().reduce((acc, statusId, index) => {
-        const adIndex = ads ? Math.floor((index + 1) / adsInterval) % ads.length : 0;
-        const ad = ads ? ads[adIndex] : undefined;
-        const showAd = (index + 1) % adsInterval === 0;
+        if (showAds && ads) {
+          const ad = ALGORITHMS[adsAlgorithm]?.(ads, index, { ...adsOpts, seed: seed.current });
+
+          if (ad) {
+            acc.push(renderAd(ad, index));
+          }
+        }
 
         if (statusId === null) {
           acc.push(renderLoadGap(index));
@@ -189,10 +201,6 @@ const StatusList: React.FC<IStatusList> = ({
           acc.push(renderStatus(statusId));
         }
 
-        if (showAds && ad && showAd) {
-          acc.push(renderAd(ad));
-        }
-
         return acc;
       }, [] as React.ReactNode[]);
     } else {
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 286a7751f..ecec3de1f 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -25,7 +25,7 @@ const useButtonStyles = ({
     tertiary:
       'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
     accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
-    danger: 'border-transparent bg-danger-600 text-gray-100 hover:bg-danger-500 dark:hover:bg-danger-700 focus:bg-danger-600 dark:focus:bg-danger-600',
+    danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:bg-danger-800 dark:focus:bg-danger-600',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
     outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
   };
diff --git a/app/soapbox/components/ui/divider/divider.tsx b/app/soapbox/components/ui/divider/divider.tsx
index 033f139ae..343a1b948 100644
--- a/app/soapbox/components/ui/divider/divider.tsx
+++ b/app/soapbox/components/ui/divider/divider.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 
+import Text from '../text/text';
+
+import type { Sizes as TextSizes } from '../text/text';
+
 interface IDivider {
   text?: string
+  textSize?: TextSizes
 }
 
 /** Divider */
-const Divider = ({ text }: IDivider) => (
+const Divider = ({ text, textSize = 'md' }: IDivider) => (
   <div className='relative' data-testid='divider'>
     <div className='absolute inset-0 flex items-center' aria-hidden='true'>
       <div className='w-full border-t-2 border-gray-100 dark:border-gray-800 border-solid' />
@@ -13,7 +18,9 @@ const Divider = ({ text }: IDivider) => (
 
     {text && (
       <div className='relative flex justify-center'>
-        <span className='px-2 bg-white text-gray-400' data-testid='divider-text'>{text}</span>
+        <span className='px-2 bg-white dark:bg-gray-900 text-gray-400' data-testid='divider-text'>
+          <Text size={textSize} tag='span' theme='inherit'>{text}</Text>
+        </span>
       </div>
     )}
   </div>
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 5eff0a78f..fd9cb055e 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -34,6 +34,7 @@ export { default as Select } from './select/select';
 export { default as Spinner } from './spinner/spinner';
 export { default as Stack } from './stack/stack';
 export { default as Tabs } from './tabs/tabs';
+export { default as TagInput } from './tag-input/tag-input';
 export { default as Text } from './text/text';
 export { default as Textarea } from './textarea/textarea';
 export { default as Toggle } from './toggle/toggle';
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 5ca748ebc..c77ae8169 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -20,7 +20,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   className?: string,
   /** Extra class names for the outer <div> element. */
   outerClassName?: string,
-  /** URL to the svg icon. Cannot be used with addon. */
+  /** URL to the svg icon. Cannot be used with prepend. */
   icon?: string,
   /** Internal input name. */
   name?: string,
@@ -30,12 +30,14 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   value?: string | number,
   /** Change event handler for the input. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
-  /** HTML input type. */
-  type?: 'text' | 'number' | 'email' | 'tel' | 'password',
   /** Whether to display the input in red. */
   hasError?: boolean,
   /** An element to display as prefix to input. Cannot be used with icon. */
-  addon?: React.ReactElement,
+  prepend?: React.ReactElement,
+  /** An element to display as suffix to input. Cannot be used with password type. */
+  append?: React.ReactElement,
+  /** Adds specific styling to denote a searchabe input. */
+  isSearch?: boolean,
 }
 
 /** Form input element. */
@@ -43,7 +45,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
 
-    const { type = 'text', icon, className, outerClassName, hasError, addon, ...filteredProps } = props;
+    const { type = 'text', icon, className, outerClassName, hasError, append, prepend, isSearch, ...filteredProps } = props;
 
     const [revealed, setRevealed] = React.useState(false);
 
@@ -54,16 +56,23 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
     }, []);
 
     return (
-      <div className={classNames('mt-1 relative rounded-md shadow-sm', outerClassName)}>
+      <div
+        className={
+          classNames('mt-1 relative shadow-sm', outerClassName, {
+            'rounded-md': !isSearch,
+            'rounded-full': isSearch,
+          })
+        }
+      >
         {icon ? (
           <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
             <Icon src={icon} className='h-4 w-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
           </div>
         ) : null}
 
-        {addon ? (
+        {prepend ? (
           <div className='absolute inset-y-0 left-0 flex items-center'>
-            {addon}
+            {prepend}
           </div>
         ) : null}
 
@@ -72,15 +81,24 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           type={revealed ? 'text' : type}
           ref={ref}
           className={classNames({
-            'bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 rounded-md focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+            'text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
               true,
-            'pr-7': isPassword,
+            'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': !isSearch,
+            'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': isSearch,
+            'pr-7': isPassword || append,
             'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',
-            'pl-16': typeof addon !== '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'>
+            {append}
+          </div>
+        ) : null}
+
         {isPassword ? (
           <Tooltip
             text={
diff --git a/app/soapbox/components/ui/phone-input/phone-input.tsx b/app/soapbox/components/ui/phone-input/phone-input.tsx
index 81d2723c4..7de0437ce 100644
--- a/app/soapbox/components/ui/phone-input/phone-input.tsx
+++ b/app/soapbox/components/ui/phone-input/phone-input.tsx
@@ -67,7 +67,7 @@ const PhoneInput: React.FC<IPhoneInput> = (props) => {
     <Input
       onChange={handleChange}
       value={nationalNumber}
-      addon={
+      prepend={
         <CountryCodeDropdown
           countryCode={countryCode}
           onChange={setCountryCode}
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 640022462..cc6bfab0d 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -39,12 +39,13 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /** Vertical stack of child elements. */
-const Stack: React.FC<IStack> = (props) => {
+const Stack: React.FC<IStack> = React.forwardRef((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
   const { space, alignItems, justifyContent, className, grow, ...filteredProps } = props;
 
   return (
     <div
       {...filteredProps}
+      ref={ref}
       className={classNames('flex flex-col items', {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
@@ -56,6 +57,6 @@ const Stack: React.FC<IStack> = (props) => {
       }, className)}
     />
   );
-};
+});
 
 export default Stack;
diff --git a/app/soapbox/components/ui/tag-input/tag-input.tsx b/app/soapbox/components/ui/tag-input/tag-input.tsx
new file mode 100644
index 000000000..e4f8548ab
--- /dev/null
+++ b/app/soapbox/components/ui/tag-input/tag-input.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+
+import HStack from '../hstack/hstack';
+
+import Tag from './tag';
+
+interface ITagInput {
+  tags: string[],
+  onChange: (tags: string[]) => void,
+  placeholder?: string,
+}
+
+/** Manage a list of tags. */
+// https://blog.logrocket.com/building-a-tag-input-field-component-for-react/
+const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
+  const [input, setInput] = useState('');
+
+  const handleTagDelete = (tag: string) => {
+    onChange(tags.filter(item => item !== tag));
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler = (e) => {
+    const { key } = e;
+    const trimmedInput = input.trim();
+
+    if (key === 'Tab') {
+      e.preventDefault();
+    }
+
+    if ([',', 'Tab', 'Enter'].includes(key) && trimmedInput.length && !tags.includes(trimmedInput)) {
+      e.preventDefault();
+      onChange([...tags, trimmedInput]);
+      setInput('');
+    }
+
+    if (key === 'Backspace' && !input.length && tags.length) {
+      e.preventDefault();
+      const tagsCopy = [...tags];
+      tagsCopy.pop();
+
+      onChange(tagsCopy);
+    }
+  };
+
+  return (
+    <div className='mt-1 relative shadow-sm flex-grow'>
+      <HStack
+        className='p-2 pb-0 text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800'
+        space={2}
+        wrap
+      >
+        {tags.map((tag, i) => (
+          <div className='mb-2'>
+            <Tag tag={tag} onDelete={handleTagDelete} />
+          </div>
+        ))}
+
+        <input
+          className='p-1 mb-2 w-32 h-8 flex-grow bg-transparent outline-none'
+          value={input}
+          placeholder={placeholder}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </HStack>
+    </div>
+  );
+};
+
+export default TagInput;
\ No newline at end of file
diff --git a/app/soapbox/components/ui/tag-input/tag.tsx b/app/soapbox/components/ui/tag-input/tag.tsx
new file mode 100644
index 000000000..d47b1d73b
--- /dev/null
+++ b/app/soapbox/components/ui/tag-input/tag.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import IconButton from '../icon-button/icon-button';
+import Text from '../text/text';
+
+interface ITag {
+  /** Name of the tag. */
+  tag: string,
+  /** Callback when the X icon is pressed. */
+  onDelete: (tag: string) => void,
+}
+
+/** A single editable Tag (used by TagInput). */
+const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
+  return (
+    <div className='inline-flex p-1 rounded bg-primary-500 items-center whitespace-nowrap'>
+      <Text theme='white'>{tag}</Text>
+
+      <IconButton
+        iconClassName='w-4 h-4'
+        src={require('@tabler/icons/x.svg')}
+        onClick={() => onDelete(tag)}
+        transparent
+      />
+    </div>
+  );
+};
+
+export default Tag;
\ No newline at end of file
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index d25554972..2e0736809 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 type Themes = 'default' | 'danger' | 'primary' | 'muted' | 'subtle' | 'success' | 'inherit' | 'white'
 type Weights = 'normal' | 'medium' | 'semibold' | 'bold'
-type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 type Alignments = 'left' | 'center' | 'right'
 type TrackingSizes = 'normal' | 'wide'
 type TransformProperties = 'uppercase' | 'normal'
diff --git a/app/soapbox/containers/status_container.tsx b/app/soapbox/containers/status_container.tsx
index 3f7c1a34f..89c387ffd 100644
--- a/app/soapbox/containers/status_container.tsx
+++ b/app/soapbox/containers/status_container.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import Status, { IStatus } from 'soapbox/components/status';
 import { useAppSelector } from 'soapbox/hooks';
@@ -16,14 +16,14 @@ interface IStatusContainer extends Omit<IStatus, 'status'> {
   updateScrollBottom?: any,
 }
 
-const getStatus = makeGetStatus();
-
 /**
  * Legacy Status wrapper accepting a status ID instead of the full entity.
  * @deprecated Use the Status component directly.
  */
 const StatusContainer: React.FC<IStatusContainer> = (props) => {
   const { id, ...rest } = props;
+
+  const getStatus = useCallback(makeGetStatus(), []);
   const status = useAppSelector(state => getStatus(state, { id }));
 
   if (status) {
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 3f4d239bf..925a63b16 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -6,12 +6,10 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import { blockAccount, followAccount, pinAccount, removeFromFollowers, unblockAccount, unmuteAccount, unpinAccount } from 'soapbox/actions/accounts';
-import { verifyUser, unverifyUser, setDonor, removeDonor, promoteToAdmin, promoteToModerator, demoteToUser, suggestUsers, unsuggestUsers } from 'soapbox/actions/admin';
 import { launchChat } from 'soapbox/actions/chats';
 import { mentionCompose, directCompose } from 'soapbox/actions/compose';
 import { blockDomain, unblockDomain } from 'soapbox/actions/domain_blocks';
 import { openModal } from 'soapbox/actions/modals';
-import { deactivateUserModal } from 'soapbox/actions/moderation';
 import { initMuteModal } from 'soapbox/actions/mutes';
 import { initReport } from 'soapbox/actions/reports';
 import { setSearchAccount } from 'soapbox/actions/search';
@@ -26,10 +24,7 @@ import ActionButton from 'soapbox/features/ui/components/action-button';
 import SubscriptionButton from 'soapbox/features/ui/components/subscription-button';
 import { useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks';
 import { Account } from 'soapbox/types/entities';
-import {
-  isLocal,
-  isRemote,
-} from 'soapbox/utils/accounts';
+import { isRemote } from 'soapbox/utils/accounts';
 
 import type { Menu as MenuType } from 'soapbox/components/dropdown_menu';
 
@@ -59,39 +54,17 @@ const messages = defineMessages({
   endorse: { id: 'account.endorse', defaultMessage: 'Feature on profile' },
   unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
   removeFromFollowers: { id: 'account.remove_from_followers', defaultMessage: 'Remove this follower' },
-  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
+  adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
   add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
-  deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
-  deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
-  verifyUser: { id: 'admin.users.actions.verify_user', defaultMessage: 'Verify @{name}' },
-  unverifyUser: { id: 'admin.users.actions.unverify_user', defaultMessage: 'Unverify @{name}' },
-  setDonor: { id: 'admin.users.actions.set_donor', defaultMessage: 'Set @{name} as a donor' },
-  removeDonor: { id: 'admin.users.actions.remove_donor', defaultMessage: 'Remove @{name} as a donor' },
-  promoteToAdmin: { id: 'admin.users.actions.promote_to_admin', defaultMessage: 'Promote @{name} to an admin' },
-  promoteToModerator: { id: 'admin.users.actions.promote_to_moderator', defaultMessage: 'Promote @{name} to a moderator' },
-  demoteToModerator: { id: 'admin.users.actions.demote_to_moderator', defaultMessage: 'Demote @{name} to a moderator' },
-  demoteToUser: { id: 'admin.users.actions.demote_to_user', defaultMessage: 'Demote @{name} to a regular user' },
-  suggestUser: { id: 'admin.users.actions.suggest_user', defaultMessage: 'Suggest @{name}' },
-  unsuggestUser: { id: 'admin.users.actions.unsuggest_user', defaultMessage: 'Unsuggest @{name}' },
   search: { id: 'account.search', defaultMessage: 'Search from @{name}' },
+  searchSelf: { id: 'account.search_self', defaultMessage: 'Search your posts' },
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
   blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
   blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
-  userVerified: { id: 'admin.users.user_verified_message', defaultMessage: '@{acct} was verified' },
-  userUnverified: { id: 'admin.users.user_unverified_message', defaultMessage: '@{acct} was unverified' },
-  setDonorSuccess: { id: 'admin.users.set_donor_message', defaultMessage: '@{acct} was set as a donor' },
-  removeDonorSuccess: { id: 'admin.users.remove_donor_message', defaultMessage: '@{acct} was removed as a donor' },
-  promotedToAdmin: { id: 'admin.users.actions.promote_to_admin_message', defaultMessage: '@{acct} was promoted to an admin' },
-  promotedToModerator: { id: 'admin.users.actions.promote_to_moderator_message', defaultMessage: '@{acct} was promoted to a moderator' },
-  demotedToModerator: { id: 'admin.users.actions.demote_to_moderator_message', defaultMessage: '@{acct} was demoted to a moderator' },
-  demotedToUser: { id: 'admin.users.actions.demote_to_user_message', defaultMessage: '@{acct} was demoted to a regular user' },
-  userSuggested: { id: 'admin.users.user_suggested_message', defaultMessage: '@{acct} was suggested' },
-  userUnsuggested: { id: 'admin.users.user_unsuggested_message', defaultMessage: '@{acct} was unsuggested' },
   removeFromFollowersConfirm: { id: 'confirmations.remove_from_followers.confirm', defaultMessage: 'Remove' },
   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}' },
-
 });
 
 interface IHeader {
@@ -209,81 +182,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
     dispatch(launchChat(account.id, history));
   };
 
-  const onDeactivateUser = () => {
-    dispatch(deactivateUserModal(intl, account.id));
-  };
-
-  const onVerifyUser = () => {
-    const message = intl.formatMessage(messages.userVerified, { acct: account.acct });
-
-    dispatch(verifyUser(account.id))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
-  };
-
-  const onUnverifyUser = () => {
-    const message = intl.formatMessage(messages.userUnverified, { acct: account.acct });
-
-    dispatch(unverifyUser(account.id))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
-  };
-
-  const onSetDonor = () => {
-    const message = intl.formatMessage(messages.setDonorSuccess, { acct: account.acct });
-
-    dispatch(setDonor(account.id))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
-  };
-
-  const onRemoveDonor = () => {
-    const message = intl.formatMessage(messages.removeDonorSuccess, { acct: account.acct });
-
-    dispatch(removeDonor(account.id))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
-  };
-
-  const onPromoteToAdmin = () => {
-    const message = intl.formatMessage(messages.promotedToAdmin, { acct: account.acct });
-
-    dispatch(promoteToAdmin(account.id))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
-  };
-
-  const onPromoteToModerator = () => {
-    const messageType = account.admin ? messages.demotedToModerator : messages.promotedToModerator;
-    const message = intl.formatMessage(messageType, { acct: account.acct });
-
-    dispatch(promoteToModerator(account.id))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
-  };
-
-  const onDemoteToUser = () => {
-    const message = intl.formatMessage(messages.demotedToUser, { acct: account.acct });
-
-    dispatch(demoteToUser(account.id))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
-  };
-
-  const onSuggestUser = () => {
-    const message = intl.formatMessage(messages.userSuggested, { acct: account.acct });
-
-    dispatch(suggestUsers([account.id]))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
-  };
-
-  const onUnsuggestUser = () => {
-    const message = intl.formatMessage(messages.userUnsuggested, { acct: account.acct });
-
-    dispatch(unsuggestUsers([account.id]))
-      .then(() => dispatch(snackbar.success(message)))
-      .catch(() => {});
+  const onModerate = () => {
+    dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
   };
 
   const onRemoveFromFollowers = () => {
@@ -378,6 +278,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         to: '/settings',
         icon: require('@tabler/icons/settings.svg'),
       });
+      if (features.searchFromAccount) {
+        menu.push({
+          text: intl.formatMessage(messages.searchSelf, { name: account.username }),
+          action: onSearch,
+          icon: require('@tabler/icons/search.svg'),
+        });
+      }
       menu.push(null);
       menu.push({
         text: intl.formatMessage(messages.mutes),
@@ -524,107 +431,11 @@ const Header: React.FC<IHeader> = ({ account }) => {
     if (ownAccount?.staff) {
       menu.push(null);
 
-      if (ownAccount?.admin) {
-        menu.push({
-          text: intl.formatMessage(messages.admin_account, { name: account.username }),
-          to: `/pleroma/admin/#/users/${account.id}/`,
-          newTab: true,
-          icon: require('@tabler/icons/gavel.svg'),
-        });
-      }
-
-      if (account.id !== ownAccount?.id && isLocal(account) && ownAccount.admin) {
-        if (account.admin) {
-          menu.push({
-            text: intl.formatMessage(messages.demoteToModerator, { name: account.username }),
-            action: onPromoteToModerator,
-            icon: require('@tabler/icons/arrow-up-circle.svg'),
-          });
-          menu.push({
-            text: intl.formatMessage(messages.demoteToUser, { name: account.username }),
-            action: onDemoteToUser,
-            icon: require('@tabler/icons/arrow-down-circle.svg'),
-          });
-        } else if (account.moderator) {
-          menu.push({
-            text: intl.formatMessage(messages.promoteToAdmin, { name: account.username }),
-            action: onPromoteToAdmin,
-            icon: require('@tabler/icons/arrow-up-circle.svg'),
-          });
-          menu.push({
-            text: intl.formatMessage(messages.demoteToUser, { name: account.username }),
-            action: onDemoteToUser,
-            icon: require('@tabler/icons/arrow-down-circle.svg'),
-          });
-        } else {
-          menu.push({
-            text: intl.formatMessage(messages.promoteToAdmin, { name: account.username }),
-            action: onPromoteToAdmin,
-            icon: require('@tabler/icons/arrow-up-circle.svg'),
-          });
-          menu.push({
-            text: intl.formatMessage(messages.promoteToModerator, { name: account.username }),
-            action: onPromoteToModerator,
-            icon: require('@tabler/icons/arrow-up-circle.svg'),
-          });
-        }
-      }
-
-      if (account.verified) {
-        menu.push({
-          text: intl.formatMessage(messages.unverifyUser, { name: account.username }),
-          action: onUnverifyUser,
-          icon: require('@tabler/icons/check.svg'),
-        });
-      } else {
-        menu.push({
-          text: intl.formatMessage(messages.verifyUser, { name: account.username }),
-          action: onVerifyUser,
-          icon: require('@tabler/icons/check.svg'),
-        });
-      }
-
-      if (account.donor) {
-        menu.push({
-          text: intl.formatMessage(messages.removeDonor, { name: account.username }),
-          action: onRemoveDonor,
-          icon: require('@tabler/icons/coin.svg'),
-        });
-      } else {
-        menu.push({
-          text: intl.formatMessage(messages.setDonor, { name: account.username }),
-          action: onSetDonor,
-          icon: require('@tabler/icons/coin.svg'),
-        });
-      }
-
-      if (features.suggestionsV2 && ownAccount.admin) {
-        if (account.getIn(['pleroma', 'is_suggested'])) {
-          menu.push({
-            text: intl.formatMessage(messages.unsuggestUser, { name: account.username }),
-            action: onUnsuggestUser,
-            icon: require('@tabler/icons/user-x.svg'),
-          });
-        } else {
-          menu.push({
-            text: intl.formatMessage(messages.suggestUser, { name: account.username }),
-            action: onSuggestUser,
-            icon: require('@tabler/icons/user-check.svg'),
-          });
-        }
-      }
-
-      if (account.id !== ownAccount?.id) {
-        menu.push({
-          text: intl.formatMessage(messages.deactivateUser, { name: account.username }),
-          action: onDeactivateUser,
-          icon: require('@tabler/icons/user-off.svg'),
-        });
-        menu.push({
-          text: intl.formatMessage(messages.deleteUser, { name: account.username }),
-          icon: require('@tabler/icons/user-minus.svg'),
-        });
-      }
+      menu.push({
+        text: intl.formatMessage(messages.adminAccount, { name: account.username }),
+        action: onModerate,
+        icon: require('@tabler/icons/gavel.svg'),
+      });
     }
 
     return menu;
diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index fb1c5bf5d..75c3ecb1d 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
 
@@ -10,7 +10,8 @@ import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import { Button, HStack } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import Accordion from 'soapbox/features/ui/components/accordion';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { makeGetReport } from 'soapbox/selectors';
 
 import ReportStatus from './report_status';
 
@@ -24,15 +25,21 @@ const messages = defineMessages({
 });
 
 interface IReport {
-  report: AdminReport;
+  id: string;
 }
 
-const Report: React.FC<IReport> = ({ report }) => {
+const Report: React.FC<IReport> = ({ id }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const getReport = useCallback(makeGetReport(), []);
+
+  const report = useAppSelector((state) => getReport(state, id) as AdminReport | undefined);
+
   const [accordionExpanded, setAccordionExpanded] = useState(false);
 
+  if (!report) return null;
+
   const account = report.account as Account;
   const targetAccount = report.target_account as Account;
 
diff --git a/app/soapbox/features/admin/components/unapproved_account.tsx b/app/soapbox/features/admin/components/unapproved_account.tsx
index b5a08c956..a01421643 100644
--- a/app/soapbox/features/admin/components/unapproved_account.tsx
+++ b/app/soapbox/features/admin/components/unapproved_account.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { approveUsers } from 'soapbox/actions/admin';
@@ -13,8 +13,6 @@ const messages = defineMessages({
   rejected: { id: 'admin.awaiting_approval.rejected_message', defaultMessage: '{acct} was rejected.' },
 });
 
-const getAccount = makeGetAccount();
-
 interface IUnapprovedAccount {
   accountId: string,
 }
@@ -23,6 +21,7 @@ interface IUnapprovedAccount {
 const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const getAccount = useCallback(makeGetAccount(), []);
 
   const account = useAppSelector(state => getAccount(state, accountId));
   const adminAccount = useAppSelector(state => state.admin.users.get(accountId));
diff --git a/app/soapbox/features/admin/tabs/reports.tsx b/app/soapbox/features/admin/tabs/reports.tsx
index 8a2eca8c7..5c2854cc4 100644
--- a/app/soapbox/features/admin/tabs/reports.tsx
+++ b/app/soapbox/features/admin/tabs/reports.tsx
@@ -4,7 +4,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import { fetchReports } from 'soapbox/actions/admin';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetReport } from 'soapbox/selectors';
 
 import Report from '../components/report';
 
@@ -14,18 +13,13 @@ const messages = defineMessages({
   emptyMessage: { id: 'admin.reports.empty_message', defaultMessage: 'There are no open reports. If a user gets reported, they will show up here.' },
 });
 
-const getReport = makeGetReport();
-
 const Reports: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
   const [isLoading, setLoading] = useState(true);
 
-  const reports = useAppSelector(state => {
-    const ids = state.admin.openReports;
-    return ids.toList().map(id => getReport(state, id));
-  });
+  const reports = useAppSelector(state => state.admin.openReports.toList());
 
   useEffect(() => {
     dispatch(fetchReports())
@@ -42,7 +36,7 @@ const Reports: React.FC = () => {
       scrollKey='admin-reports'
       emptyMessage={intl.formatMessage(messages.emptyMessage)}
     >
-      {reports.map(report => report && <Report report={report} key={report?.id} />)}
+      {reports.map(report => report && <Report id={report} key={report} />)}
     </ScrollableList>
   );
 };
diff --git a/app/soapbox/features/aliases/components/account.tsx b/app/soapbox/features/aliases/components/account.tsx
index 3d24c0543..be9178b8d 100644
--- a/app/soapbox/features/aliases/components/account.tsx
+++ b/app/soapbox/features/aliases/components/account.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addToAliases } from 'soapbox/actions/aliases';
@@ -15,8 +15,6 @@ const messages = defineMessages({
   add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
 });
 
-const getAccount = makeGetAccount();
-
 interface IAccount {
   accountId: string,
   aliases: ImmutableList<string>
@@ -25,6 +23,8 @@ interface IAccount {
 const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  
+  const getAccount = useCallback(makeGetAccount(), []);
 
   const account = useAppSelector((state) => getAccount(state, accountId));
   const added = useAppSelector((state) => {
diff --git a/app/soapbox/features/birthdays/account.tsx b/app/soapbox/features/birthdays/account.tsx
index 738ad5ec9..745ca5268 100644
--- a/app/soapbox/features/birthdays/account.tsx
+++ b/app/soapbox/features/birthdays/account.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Avatar from 'soapbox/components/avatar';
@@ -12,14 +12,14 @@ const messages = defineMessages({
   birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
 });
 
-const getAccount = makeGetAccount();
-
 interface IAccount {
   accountId: string,
 }
 
 const Account: React.FC<IAccount> = ({ accountId }) => {
   const intl = useIntl();
+  const getAccount = useCallback(makeGetAccount(), []);
+
   const account = useAppSelector((state) => getAccount(state, accountId));
 
   // useEffect(() => {
@@ -30,7 +30,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
 
   if (!account) return null;
 
-  const birthday = account.get('birthday');
+  const birthday = account.birthday;
   if (!birthday) return null;
 
   const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'short', year: 'numeric' });
@@ -38,7 +38,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   return (
     <div className='account'>
       <div className='account__wrapper'>
-        <Permalink className='account__display-name' title={account.get('acct')} href={`/@${account.get('acct')}`} to={`/@${account.get('acct')}`}>
+        <Permalink className='account__display-name' title={account.acct} href={`/@${account.acct}`} to={`/@${account.acct}`}>
           <div className='account__display-name'>
             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
             <DisplayName account={account} />
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index 13d2b7fee..2083ce19d 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Avatar from 'soapbox/components/avatar';
@@ -11,14 +11,13 @@ import { makeGetChat } from 'soapbox/selectors';
 
 import type { Account as AccountEntity, Chat as ChatEntity } from 'soapbox/types/entities';
 
-const getChat = makeGetChat();
-
 interface IChat {
   chatId: string,
   onClick: (chat: any) => void,
 }
 
 const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
+  const getChat = useCallback(makeGetChat(), []);
   const chat = useAppSelector((state) => {
     const chat = state.chats.items.get(chatId);
     return chat ? getChat(state, (chat as any).toJS()) : undefined;
diff --git a/app/soapbox/features/compose/components/autosuggest_account.tsx b/app/soapbox/features/compose/components/autosuggest_account.tsx
index 6b65f8341..511d65fe6 100644
--- a/app/soapbox/features/compose/components/autosuggest_account.tsx
+++ b/app/soapbox/features/compose/components/autosuggest_account.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import Account from 'soapbox/components/account';
 import { useAppSelector } from 'soapbox/hooks';
@@ -9,7 +9,7 @@ interface IAutosuggestAccount {
 }
 
 const AutosuggestAccount: React.FC<IAutosuggestAccount> = ({ id }) => {
-  const getAccount = makeGetAccount();
+  const getAccount = useCallback(makeGetAccount(), []);
   const account = useAppSelector((state) => getAccount(state, id));
 
   if (!account) return null;
diff --git a/app/soapbox/features/compose/components/reply_mentions.tsx b/app/soapbox/features/compose/components/reply_mentions.tsx
index 8a7be612f..c66370859 100644
--- a/app/soapbox/features/compose/components/reply_mentions.tsx
+++ b/app/soapbox/features/compose/components/reply_mentions.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
@@ -12,8 +12,10 @@ import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 const ReplyMentions: React.FC = () => {
   const dispatch = useDispatch();
+  const getStatus = useCallback(makeGetStatus(), []);
+
   const instance = useAppSelector((state) => state.instance);
-  const status = useAppSelector<StatusEntity | null>(state => makeGetStatus()(state, { id: state.compose.in_reply_to! }));
+  const status = useAppSelector<StatusEntity | null>(state => getStatus(state, { id: state.compose.in_reply_to! }));
 
   const to = useAppSelector((state) => state.compose.to);
   const account = useAppSelector((state) => state.accounts.get(state.me));
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 9c1aab765..9402b8785 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -9,6 +9,7 @@ import { useHistory } from 'react-router-dom';
 import {
   changeSearch,
   clearSearch,
+  clearSearchResults,
   setSearchAccount,
   showSearch,
   submitSearch,
@@ -72,7 +73,7 @@ const Search = (props: ISearch) => {
     event.preventDefault();
 
     if (value.length > 0 || submitted) {
-      dispatch(clearSearch());
+      dispatch(clearSearchResults());
     }
   };
 
@@ -115,27 +116,34 @@ const Search = (props: ISearch) => {
   ];
 
   const hasValue = value.length > 0 || submitted;
-  const Component = autosuggest ? AutosuggestAccountInput : 'input';
+  const componentProps: any = {
+    className: 'block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm',
+    type: 'text',
+    id: 'search',
+    placeholder: intl.formatMessage(messages.placeholder),
+    value,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    autoFocus: autoFocus,
+  };
+
+  if (autosuggest) {
+    componentProps.onSelected = handleSelected;
+    componentProps.menu = makeMenu();
+    componentProps.autoSelect = false;
+  }
 
   return (
     <div className='w-full'>
       <label htmlFor='search' className='sr-only'>{intl.formatMessage(messages.placeholder)}</label>
 
       <div className='relative'>
-        <Component
-          className='block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm'
-          type='text'
-          id='search'
-          placeholder={intl.formatMessage(messages.placeholder)}
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onSelected={handleSelected}
-          autoFocus={autoFocus}
-          autoSelect={false}
-          menu={makeMenu()}
-        />
+        {autosuggest ? (
+          <AutosuggestAccountInput {...componentProps} />
+        ) : (
+          <input {...componentProps} />
+        )}
 
         <div
           role='button'
diff --git a/app/soapbox/features/compose/components/search_results.tsx b/app/soapbox/features/compose/components/search_results.tsx
index b1cb833ba..8f8fa5938 100644
--- a/app/soapbox/features/compose/components/search_results.tsx
+++ b/app/soapbox/features/compose/components/search_results.tsx
@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { clearSearch, expandSearch, setFilter } from 'soapbox/actions/search';
+import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search';
 import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
 import Hashtag from 'soapbox/components/hashtag';
 import IconButton from 'soapbox/components/icon_button';
@@ -43,7 +43,7 @@ const SearchResults = () => {
 
   const handleLoadMore = () => dispatch(expandSearch(selectedFilter));
 
-  const handleClearSearch = () => dispatch(clearSearch());
+  const handleUnsetAccount = () => dispatch(setSearchAccount(null));
 
   const selectFilter = (newActiveFilter: SearchFilter) => dispatch(setFilter(newActiveFilter));
 
@@ -196,7 +196,7 @@ const SearchResults = () => {
     <>
       {filterByAccount ? (
         <HStack className='mb-4 pb-4 px-2 border-solid border-b border-gray-200 dark:border-gray-800' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleClearSearch} />
+          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleUnsetAccount} />
           <Text>
             <FormattedMessage
               id='search_results.filter_message'
diff --git a/app/soapbox/features/compose/containers/quoted_status_container.tsx b/app/soapbox/features/compose/containers/quoted_status_container.tsx
index 1c34f6825..10290786f 100644
--- a/app/soapbox/features/compose/containers/quoted_status_container.tsx
+++ b/app/soapbox/features/compose/containers/quoted_status_container.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { cancelQuoteCompose } from 'soapbox/actions/compose';
 import QuotedStatus from 'soapbox/components/quoted-status';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
-const getStatus = makeGetStatus();
-
 /** QuotedStatus shown in post composer. */
 const QuotedStatusContainer: React.FC = () => {
   const dispatch = useAppDispatch();
+  const getStatus = useCallback(makeGetStatus(), []);
+  
   const status = useAppSelector(state => getStatus(state, { id: state.compose.quote! }));
 
   const onCancel = () => {
diff --git a/app/soapbox/features/embedded-status/index.tsx b/app/soapbox/features/embedded-status/index.tsx
index 8187084e0..931b3fb66 100644
--- a/app/soapbox/features/embedded-status/index.tsx
+++ b/app/soapbox/features/embedded-status/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { fetchStatus } from 'soapbox/actions/statuses';
@@ -16,12 +16,12 @@ interface IEmbeddedStatus {
   },
 }
 
-const getStatus = makeGetStatus();
-
 /** Status to be presented in an iframe for embeds on external websites. */
 const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
   const dispatch = useAppDispatch();
   const history = useHistory();
+  const getStatus = useCallback(makeGetStatus(), []);
+
   const status = useAppSelector(state => getStatus(state, { id: params.statusId }));
 
   const [loading, setLoading] = useState(true);
diff --git a/app/soapbox/features/favourited_statuses/index.js b/app/soapbox/features/favourited_statuses/index.js
deleted file mode 100644
index b4ffb6a8a..000000000
--- a/app/soapbox/features/favourited_statuses/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import debounce from 'lodash/debounce';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts';
-import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from 'soapbox/actions/favourites';
-import MissingIndicator from 'soapbox/components/missing_indicator';
-import StatusList from 'soapbox/components/status_list';
-import { Spinner } from 'soapbox/components/ui';
-import { findAccountByUsername } from 'soapbox/selectors';
-import { getFeatures } from 'soapbox/utils/features';
-
-import Column from '../ui/components/column';
-
-const messages = defineMessages({
-  heading: { id: 'column.favourited_statuses', defaultMessage: 'Liked posts' },
-});
-
-const mapStateToProps = (state, { params }) => {
-  const username = params.username || '';
-  const me = state.get('me');
-  const meUsername = state.getIn(['accounts', me, 'username'], '');
-
-  const isMyAccount = (username.toLowerCase() === meUsername.toLowerCase());
-
-  const features = getFeatures(state.get('instance'));
-
-  if (isMyAccount) {
-    return {
-      isMyAccount,
-      statusIds: state.status_lists.get('favourites').items,
-      isLoading: state.status_lists.get('favourites').isLoading,
-      hasMore: !!state.status_lists.get('favourites').next,
-    };
-  }
-
-  const accountFetchError = ((state.getIn(['accounts', -1, 'username']) || '').toLowerCase() === username.toLowerCase());
-
-  let accountId = -1;
-  if (accountFetchError) {
-    accountId = null;
-  } else {
-    const account = findAccountByUsername(state, username);
-    accountId = account ? account.getIn(['id'], null) : -1;
-  }
-
-  const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false);
-  const unavailable = (me === accountId) ? false : (isBlocked && !features.blockersVisible);
-
-  return {
-    isMyAccount,
-    accountId,
-    unavailable,
-    username,
-    isAccount: !!state.getIn(['accounts', accountId]),
-    statusIds: state.status_lists.get(`favourites:${accountId}`)?.items || [],
-    isLoading: state.status_lists.get(`favourites:${accountId}`)?.isLoading,
-    hasMore: !!state.status_lists.get(`favourites:${accountId}`)?.next,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Favourites extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    statusIds: ImmutablePropTypes.orderedSet.isRequired,
-    intl: PropTypes.object.isRequired,
-    hasMore: PropTypes.bool,
-    isLoading: PropTypes.bool,
-    isMyAccount: PropTypes.bool.isRequired,
-  };
-
-  componentDidMount() {
-    const { accountId, isMyAccount, username } = this.props;
-
-    if (isMyAccount)
-      this.props.dispatch(fetchFavouritedStatuses());
-    else {
-      if (accountId && accountId !== -1) {
-        this.props.dispatch(fetchAccount(accountId));
-        this.props.dispatch(fetchAccountFavouritedStatuses(accountId));
-      } else {
-        this.props.dispatch(fetchAccountByUsername(username));
-      }
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { accountId, isMyAccount } = this.props;
-
-    if (!isMyAccount && accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) {
-      this.props.dispatch(fetchAccount(accountId));
-      this.props.dispatch(fetchAccountFavouritedStatuses(accountId));
-    }
-  }
-
-  handleLoadMore = debounce(() => {
-    const { accountId, isMyAccount } = this.props;
-
-    if (isMyAccount) {
-      this.props.dispatch(expandFavouritedStatuses());
-    } else {
-      this.props.dispatch(expandAccountFavouritedStatuses(accountId));
-    }
-  }, 300, { leading: true })
-
-  render() {
-    const { intl, statusIds, isLoading, hasMore, isMyAccount, isAccount, accountId, unavailable } = this.props;
-
-    if (!isMyAccount && !isAccount && accountId !== -1) {
-      return (
-        <MissingIndicator />
-      );
-    }
-
-    if (accountId === -1) {
-      return (
-        <Column>
-          <Spinner />
-        </Column>
-      );
-    }
-
-    if (unavailable) {
-      return (
-        <Column>
-          <div className='empty-column-indicator'>
-            <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
-          </div>
-        </Column>
-      );
-    }
-
-    const emptyMessage = isMyAccount
-      ? <FormattedMessage id='empty_column.favourited_statuses' defaultMessage="You don't have any liked posts yet. When you like one, it will show up here." />
-      : <FormattedMessage id='empty_column.account_favourited_statuses' defaultMessage="This user doesn't have any liked posts yet." />;
-
-    return (
-      <Column label={intl.formatMessage(messages.heading)} withHeader={false} transparent>
-        <StatusList
-          statusIds={statusIds}
-          scrollKey='favourited_statuses'
-          hasMore={hasMore}
-          isLoading={typeof isLoading === 'boolean' ? isLoading : true}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={emptyMessage}
-        />
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/favourited_statuses/index.tsx b/app/soapbox/features/favourited_statuses/index.tsx
new file mode 100644
index 000000000..1a8ba3bfa
--- /dev/null
+++ b/app/soapbox/features/favourited_statuses/index.tsx
@@ -0,0 +1,108 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts';
+import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from 'soapbox/actions/favourites';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import StatusList from 'soapbox/components/status_list';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { findAccountByUsername } from 'soapbox/selectors';
+
+import Column from '../ui/components/column';
+
+const messages = defineMessages({
+  heading: { id: 'column.favourited_statuses', defaultMessage: 'Liked posts' },
+});
+
+interface IFavourites {
+  params?: {
+    username?: string,
+  }
+}
+
+/** Timeline displaying a user's favourited statuses. */
+const Favourites: React.FC<IFavourites> = (props) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+  const ownAccount = useOwnAccount();
+
+  const username = props.params?.username || '';
+  const account = useAppSelector(state => findAccountByUsername(state, username));
+  const isOwnAccount = username.toLowerCase() === ownAccount?.username?.toLowerCase();
+
+  const timelineKey = isOwnAccount ? 'favourites' : `favourites:${account?.id}`;
+  const statusIds = useAppSelector(state => state.status_lists.get(timelineKey)?.items || ImmutableOrderedSet<string>());
+  const isLoading = useAppSelector(state => state.status_lists.get(timelineKey)?.isLoading === true);
+  const hasMore = useAppSelector(state => !!state.status_lists.get(timelineKey)?.next);
+
+  const isUnavailable = useAppSelector(state => {
+    const blockedBy = state.relationships.getIn([account?.id, 'blocked_by']) === true;
+    return isOwnAccount ? false : (blockedBy && !features.blockersVisible);
+  });
+
+  const handleLoadMore = useCallback(debounce(() => {
+    if (isOwnAccount) {
+      dispatch(expandFavouritedStatuses());
+    } else if (account) {
+      dispatch(expandAccountFavouritedStatuses(account.id));
+    }
+  }, 300, { leading: true }), [account?.id]);
+
+  useEffect(() => {
+    if (isOwnAccount)
+      dispatch(fetchFavouritedStatuses());
+    else {
+      if (account) {
+        dispatch(fetchAccount(account.id));
+        dispatch(fetchAccountFavouritedStatuses(account.id));
+      } else {
+        dispatch(fetchAccountByUsername(username));
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (account && !isOwnAccount) {
+      dispatch(fetchAccount(account.id));
+      dispatch(fetchAccountFavouritedStatuses(account.id));
+    }
+  }, [account?.id]);
+
+  if (isUnavailable) {
+    return (
+      <Column>
+        <div className='empty-column-indicator'>
+          <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
+        </div>
+      </Column>
+    );
+  }
+
+  if (!account) {
+    return (
+      <MissingIndicator />
+    );
+  }
+
+  const emptyMessage = isOwnAccount
+    ? <FormattedMessage id='empty_column.favourited_statuses' defaultMessage="You don't have any liked posts yet. When you like one, it will show up here." />
+    : <FormattedMessage id='empty_column.account_favourited_statuses' defaultMessage="This user doesn't have any liked posts yet." />;
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)} withHeader={false} transparent>
+      <StatusList
+        statusIds={statusIds}
+        scrollKey='favourited_statuses'
+        hasMore={hasMore}
+        isLoading={isLoading}
+        onLoadMore={handleLoadMore}
+        emptyMessage={emptyMessage}
+      />
+    </Column>
+  );
+};
+
+export default Favourites;
\ No newline at end of file
diff --git a/app/soapbox/features/follow_requests/components/account_authorize.tsx b/app/soapbox/features/follow_requests/components/account_authorize.tsx
index 6573bbd55..b820938d6 100644
--- a/app/soapbox/features/follow_requests/components/account_authorize.tsx
+++ b/app/soapbox/features/follow_requests/components/account_authorize.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
@@ -16,8 +16,6 @@ const messages = defineMessages({
   reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
 });
 
-const getAccount = makeGetAccount();
-
 interface IAccountAuthorize {
   id: string,
 }
@@ -25,6 +23,8 @@ interface IAccountAuthorize {
 const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
+  
+  const getAccount = useCallback(makeGetAccount(), []);
 
   const account = useAppSelector((state) => getAccount(state, id));
 
diff --git a/app/soapbox/features/followers/index.js b/app/soapbox/features/followers/index.js
deleted file mode 100644
index a25fb0d7d..000000000
--- a/app/soapbox/features/followers/index.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import debounce from 'lodash/debounce';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import {
-  fetchAccount,
-  fetchFollowers,
-  expandFollowers,
-  fetchAccountByUsername,
-} from 'soapbox/actions/accounts';
-import MissingIndicator from 'soapbox/components/missing_indicator';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import { Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-import { findAccountByUsername } from 'soapbox/selectors';
-import { getFollowDifference } from 'soapbox/utils/accounts';
-import { getFeatures } from 'soapbox/utils/features';
-
-import Column from '../ui/components/column';
-
-const messages = defineMessages({
-  heading: { id: 'column.followers', defaultMessage: 'Followers' },
-});
-
-const mapStateToProps = (state, { params, withReplies = false }) => {
-  const username = params.username || '';
-  const me = state.get('me');
-  const accountFetchError = ((state.getIn(['accounts', -1, 'username']) || '').toLowerCase() === username.toLowerCase());
-  const features = getFeatures(state.get('instance'));
-
-  let accountId = -1;
-  if (accountFetchError) {
-    accountId = null;
-  } else {
-    const account = findAccountByUsername(state, username);
-    accountId = account ? account.getIn(['id'], null) : -1;
-  }
-
-  const diffCount = getFollowDifference(state, accountId, 'followers');
-  const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false);
-  const unavailable = (me === accountId) ? false : (isBlocked && !features.blockersVisible);
-
-  return {
-    accountId,
-    unavailable,
-    isAccount: !!state.getIn(['accounts', accountId]),
-    accountIds: state.user_lists.followers.get(accountId)?.items,
-    hasMore: !!state.user_lists.followers.get(accountId)?.next,
-    diffCount,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Followers extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet,
-    hasMore: PropTypes.bool,
-    diffCount: PropTypes.number,
-    isAccount: PropTypes.bool,
-    unavailable: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { params: { username }, accountId } = this.props;
-
-    if (accountId && accountId !== -1) {
-      this.props.dispatch(fetchAccount(accountId));
-      this.props.dispatch(fetchFollowers(accountId));
-    } else {
-      this.props.dispatch(fetchAccountByUsername(username));
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { accountId, dispatch } = this.props;
-    if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) {
-      dispatch(fetchAccount(accountId));
-      dispatch(fetchFollowers(accountId));
-    }
-  }
-
-  handleLoadMore = debounce(() => {
-    if (this.props.accountId && this.props.accountId !== -1) {
-      this.props.dispatch(expandFollowers(this.props.accountId));
-    }
-  }, 300, { leading: true });
-
-  render() {
-    const { intl, accountIds, hasMore, diffCount, isAccount, accountId, unavailable } = this.props;
-
-    if (!isAccount && accountId !== -1) {
-      return (
-        <MissingIndicator />
-      );
-    }
-
-    if (accountId === -1 || (!accountIds)) {
-      return (
-        <Spinner />
-      );
-    }
-
-    if (unavailable) {
-      return (
-        <div className='empty-column-indicator'>
-          <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
-        </div>
-      );
-    }
-
-    return (
-      <Column label={intl.formatMessage(messages.heading)} transparent>
-        <ScrollableList
-          scrollKey='followers'
-          hasMore={hasMore}
-          diffCount={diffCount}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='account.followers.empty' defaultMessage='No one follows this user yet.' />}
-          itemClassName='pb-4'
-        >
-          {accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
-          )}
-        </ScrollableList>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/followers/index.tsx b/app/soapbox/features/followers/index.tsx
new file mode 100644
index 000000000..8625f2142
--- /dev/null
+++ b/app/soapbox/features/followers/index.tsx
@@ -0,0 +1,115 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import {
+  fetchAccount,
+  fetchFollowers,
+  expandFollowers,
+  fetchAccountByUsername,
+} from 'soapbox/actions/accounts';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { findAccountByUsername } from 'soapbox/selectors';
+
+import Column from '../ui/components/column';
+
+const messages = defineMessages({
+  heading: { id: 'column.followers', defaultMessage: 'Followers' },
+});
+
+interface IFollowers {
+  params?: {
+    username?: string,
+  }
+}
+
+/** Displays a list of accounts who follow the given account. */
+const Followers: React.FC<IFollowers> = (props) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+  const ownAccount = useOwnAccount();
+
+  const [loading, setLoading] = useState(true);
+
+  const username = props.params?.username || '';
+  const account = useAppSelector(state => findAccountByUsername(state, username));
+  const isOwnAccount = username.toLowerCase() === ownAccount?.username?.toLowerCase();
+
+  const accountIds = useAppSelector(state => state.user_lists.followers.get(account!?.id)?.items || ImmutableOrderedSet<string>());
+  const hasMore = useAppSelector(state => !!state.user_lists.followers.get(account!?.id)?.next);
+
+  const isUnavailable = useAppSelector(state => {
+    const blockedBy = state.relationships.getIn([account?.id, 'blocked_by']) === true;
+    return isOwnAccount ? false : (blockedBy && !features.blockersVisible);
+  });
+
+  const handleLoadMore = useCallback(debounce(() => {
+    if (account) {
+      dispatch(expandFollowers(account.id));
+    }
+  }, 300, { leading: true }), [account?.id]);
+
+  useEffect(() => {
+    let promises = [];
+
+    if (account) {
+      promises = [
+        dispatch(fetchAccount(account.id)),
+        dispatch(fetchFollowers(account.id)),
+      ];
+    } else {
+      promises = [
+        dispatch(fetchAccountByUsername(username)),
+      ];
+    }
+
+    Promise.all(promises)
+      .then(() => setLoading(false))
+      .catch(() => setLoading(false));
+
+  }, [account?.id, username]);
+
+  if (loading && accountIds.isEmpty()) {
+    return (
+      <Spinner />
+    );
+  }
+
+  if (!account) {
+    return (
+      <MissingIndicator />
+    );
+  }
+
+  if (isUnavailable) {
+    return (
+      <div className='empty-column-indicator'>
+        <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
+      </div>
+    );
+  }
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)} transparent>
+      <ScrollableList
+        scrollKey='followers'
+        hasMore={hasMore}
+        onLoadMore={handleLoadMore}
+        emptyMessage={<FormattedMessage id='account.followers.empty' defaultMessage='No one follows this user yet.' />}
+        itemClassName='pb-4'
+      >
+        {accountIds.map(id =>
+          <AccountContainer key={id} id={id} />,
+        )}
+      </ScrollableList>
+    </Column>
+  );
+};
+
+export default Followers;
\ No newline at end of file
diff --git a/app/soapbox/features/following/index.js b/app/soapbox/features/following/index.js
deleted file mode 100644
index 682a26411..000000000
--- a/app/soapbox/features/following/index.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import debounce from 'lodash/debounce';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import {
-  fetchAccount,
-  fetchFollowing,
-  expandFollowing,
-  fetchAccountByUsername,
-} from 'soapbox/actions/accounts';
-import MissingIndicator from 'soapbox/components/missing_indicator';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import { Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-import { findAccountByUsername } from 'soapbox/selectors';
-import { getFollowDifference } from 'soapbox/utils/accounts';
-import { getFeatures } from 'soapbox/utils/features';
-
-import Column from '../ui/components/column';
-
-const messages = defineMessages({
-  heading: { id: 'column.following', defaultMessage: 'Following' },
-});
-
-const mapStateToProps = (state, { params, withReplies = false }) => {
-  const username = params.username || '';
-  const me = state.get('me');
-  const accountFetchError = ((state.getIn(['accounts', -1, 'username']) || '').toLowerCase() === username.toLowerCase());
-  const features = getFeatures(state.get('instance'));
-
-  let accountId = -1;
-  if (accountFetchError) {
-    accountId = null;
-  } else {
-    const account = findAccountByUsername(state, username);
-    accountId = account ? account.getIn(['id'], null) : -1;
-  }
-
-  const diffCount = getFollowDifference(state, accountId, 'following');
-  const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false);
-  const unavailable = (me === accountId) ? false : (isBlocked && !features.blockersVisible);
-
-  return {
-    accountId,
-    unavailable,
-    isAccount: !!state.getIn(['accounts', accountId]),
-    accountIds: state.user_lists.following.get(accountId)?.items,
-    hasMore: !!state.user_lists.following.get(accountId)?.next,
-    diffCount,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Following extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet,
-    hasMore: PropTypes.bool,
-    isAccount: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    diffCount: PropTypes.number,
-  };
-
-  componentDidMount() {
-    const { params: { username }, accountId } = this.props;
-
-    if (accountId && accountId !== -1) {
-      this.props.dispatch(fetchAccount(accountId));
-      this.props.dispatch(fetchFollowing(accountId));
-    } else {
-      this.props.dispatch(fetchAccountByUsername(username));
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { accountId, dispatch } = this.props;
-    if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) {
-      dispatch(fetchAccount(accountId));
-      dispatch(fetchFollowing(accountId));
-    }
-  }
-
-  handleLoadMore = debounce(() => {
-    if (this.props.accountId && this.props.accountId !== -1) {
-      this.props.dispatch(expandFollowing(this.props.accountId));
-    }
-  }, 300, { leading: true });
-
-  render() {
-    const { intl, accountIds, hasMore, isAccount, diffCount, accountId, unavailable } = this.props;
-
-    if (!isAccount && accountId !== -1) {
-      return (
-        <MissingIndicator />
-      );
-    }
-
-    if (accountId === -1 || (!accountIds)) {
-      return (
-        <Spinner />
-      );
-    }
-
-    if (unavailable) {
-      return (
-        <div className='empty-column-indicator'>
-          <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
-        </div>
-      );
-    }
-
-    return (
-      <Column label={intl.formatMessage(messages.heading)} transparent>
-        <ScrollableList
-          scrollKey='following'
-          hasMore={hasMore}
-          diffCount={diffCount}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='account.follows.empty' defaultMessage="This user doesn't follow anyone yet." />}
-          itemClassName='pb-4'
-        >
-          {accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
-          )}
-        </ScrollableList>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/following/index.tsx b/app/soapbox/features/following/index.tsx
new file mode 100644
index 000000000..cd0a10351
--- /dev/null
+++ b/app/soapbox/features/following/index.tsx
@@ -0,0 +1,115 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import {
+  fetchAccount,
+  fetchFollowing,
+  expandFollowing,
+  fetchAccountByUsername,
+} from 'soapbox/actions/accounts';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { findAccountByUsername } from 'soapbox/selectors';
+
+import Column from '../ui/components/column';
+
+const messages = defineMessages({
+  heading: { id: 'column.following', defaultMessage: 'Following' },
+});
+
+interface IFollowing {
+  params?: {
+    username?: string,
+  }
+}
+
+/** Displays a list of accounts the given user is following. */
+const Following: React.FC<IFollowing> = (props) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+  const ownAccount = useOwnAccount();
+
+  const [loading, setLoading] = useState(true);
+
+  const username = props.params?.username || '';
+  const account = useAppSelector(state => findAccountByUsername(state, username));
+  const isOwnAccount = username.toLowerCase() === ownAccount?.username?.toLowerCase();
+
+  const accountIds = useAppSelector(state => state.user_lists.following.get(account!?.id)?.items || ImmutableOrderedSet<string>());
+  const hasMore = useAppSelector(state => !!state.user_lists.following.get(account!?.id)?.next);
+
+  const isUnavailable = useAppSelector(state => {
+    const blockedBy = state.relationships.getIn([account?.id, 'blocked_by']) === true;
+    return isOwnAccount ? false : (blockedBy && !features.blockersVisible);
+  });
+
+  const handleLoadMore = useCallback(debounce(() => {
+    if (account) {
+      dispatch(expandFollowing(account.id));
+    }
+  }, 300, { leading: true }), [account?.id]);
+
+  useEffect(() => {
+    let promises = [];
+
+    if (account) {
+      promises = [
+        dispatch(fetchAccount(account.id)),
+        dispatch(fetchFollowing(account.id)),
+      ];
+    } else {
+      promises = [
+        dispatch(fetchAccountByUsername(username)),
+      ];
+    }
+
+    Promise.all(promises)
+      .then(() => setLoading(false))
+      .catch(() => setLoading(false));
+
+  }, [account?.id, username]);
+
+  if (loading && accountIds.isEmpty()) {
+    return (
+      <Spinner />
+    );
+  }
+
+  if (!account) {
+    return (
+      <MissingIndicator />
+    );
+  }
+
+  if (isUnavailable) {
+    return (
+      <div className='empty-column-indicator'>
+        <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
+      </div>
+    );
+  }
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)} transparent>
+      <ScrollableList
+        scrollKey='following'
+        hasMore={hasMore}
+        onLoadMore={handleLoadMore}
+        emptyMessage={<FormattedMessage id='account.follows.empty' defaultMessage="This user doesn't follow anyone yet." />}
+        itemClassName='pb-4'
+      >
+        {accountIds.map(id =>
+          <AccountContainer key={id} id={id} />,
+        )}
+      </ScrollableList>
+    </Column>
+  );
+};
+
+export default Following;
\ No newline at end of file
diff --git a/app/soapbox/features/groups/create/index.js b/app/soapbox/features/groups/create/index.js
deleted file mode 100644
index d7189baa4..000000000
--- a/app/soapbox/features/groups/create/index.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import classNames from 'clsx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-
-import { changeValue, submit, reset } from '../../../actions/group_editor';
-
-const messages = defineMessages({
-  title: { id: 'groups.form.title', defaultMessage: 'Enter a new group title' },
-  description: { id: 'groups.form.description', defaultMessage: 'Enter the group description' },
-  coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload a banner image' },
-  coverImageChange: { id: 'groups.form.coverImageChange', defaultMessage: 'Banner image selected' },
-  create: { id: 'groups.form.create', defaultMessage: 'Create group' },
-});
-
-const mapStateToProps = state => ({
-  title: state.getIn(['group_editor', 'title']),
-  description: state.getIn(['group_editor', 'description']),
-  coverImage: state.getIn(['group_editor', 'coverImage']),
-  disabled: state.getIn(['group_editor', 'isSubmitting']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onTitleChange: value => dispatch(changeValue('title', value)),
-  onDescriptionChange: value => dispatch(changeValue('description', value)),
-  onCoverImageChange: value => dispatch(changeValue('coverImage', value)),
-  onSubmit: routerHistory => dispatch(submit(routerHistory)),
-  reset: () => dispatch(reset()),
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-@withRouter
-class Create extends React.PureComponent {
-
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    coverImage: PropTypes.object,
-    disabled: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    onTitleChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    reset: PropTypes.func.isRequired,
-    onDescriptionChange: PropTypes.func.isRequired,
-    onCoverImageChange: PropTypes.func.isRequired,
-    history: PropTypes.object,
-  };
-
-  constructor(props) {
-    super(props);
-    props.reset();
-  }
-
-  handleTitleChange = e => {
-    this.props.onTitleChange(e.target.value);
-  }
-
-  handleDescriptionChange = e => {
-    this.props.onDescriptionChange(e.target.value);
-  }
-
-  handleCoverImageChange = e => {
-    this.props.onCoverImageChange(e.target.files[0]);
-  }
-
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.onSubmit(this.props.history);
-  }
-
-  render() {
-    const { title, description, coverImage, disabled, intl } = this.props;
-
-    return (
-      <form className='group-form' method='post' onSubmit={this.handleSubmit}>
-        <div>
-          <input
-            className='standard'
-            type='text'
-            value={title}
-            disabled={disabled}
-            onChange={this.handleTitleChange}
-            placeholder={intl.formatMessage(messages.title)}
-          />
-        </div>
-        <div>
-          <textarea
-            className='standard'
-            type='text'
-            value={description}
-            disabled={disabled}
-            onChange={this.handleDescriptionChange}
-            placeholder={intl.formatMessage(messages.description)}
-          />
-        </div>
-        <div>
-          <label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
-            {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
-          </label>
-          <input
-            type='file'
-            className='group-form__file'
-            id='group_cover_image'
-            disabled={disabled}
-            onChange={this.handleCoverImageChange}
-          />
-          <button className='standard-small'>{intl.formatMessage(messages.create)}</button>
-        </div>
-      </form>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/groups/edit/index.js b/app/soapbox/features/groups/edit/index.js
deleted file mode 100644
index 2e040aa0e..000000000
--- a/app/soapbox/features/groups/edit/index.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import classNames from 'clsx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-
-import MissingIndicator from 'soapbox/components/missing_indicator';
-import { Column, Spinner } from 'soapbox/components/ui';
-
-import { changeValue, submit, setUp } from '../../../actions/group_editor';
-
-const messages = defineMessages({
-  title: { id: 'groups.form.title', defaultMessage: 'Title' },
-  description: { id: 'groups.form.description', defaultMessage: 'Description' },
-  coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload new banner image (optional)' },
-  coverImageChange: { id: 'groups.form.coverImageChange', defaultMessage: 'Banner image selected' },
-  update: { id: 'groups.form.update', defaultMessage: 'Update group' },
-});
-
-const mapStateToProps = (state, props) => ({
-  group: state.getIn(['groups', props.params.id]),
-  title: state.getIn(['group_editor', 'title']),
-  description: state.getIn(['group_editor', 'description']),
-  coverImage: state.getIn(['group_editor', 'coverImage']),
-  disabled: state.getIn(['group_editor', 'isSubmitting']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onTitleChange: value => dispatch(changeValue('title', value)),
-  onDescriptionChange: value => dispatch(changeValue('description', value)),
-  onCoverImageChange: value => dispatch(changeValue('coverImage', value)),
-  onSubmit: routerHistory => dispatch(submit(routerHistory)),
-  setUp: group => dispatch(setUp(group)),
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-@withRouter
-class Edit extends React.PureComponent {
-
-  static propTypes = {
-    group: ImmutablePropTypes.map,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    coverImage: PropTypes.object,
-    disabled: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    onTitleChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onDescriptionChange: PropTypes.func.isRequired,
-    onCoverImageChange: PropTypes.func.isRequired,
-    setUp: PropTypes.func.isRequired,
-    history: PropTypes.object,
-  };
-
-  constructor(props) {
-    super(props);
-    if (props.group) props.setUp(props.group);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!prevProps.group && this.props.group) {
-      this.props.setUp(this.props.group);
-    }
-  }
-
-  handleTitleChange = e => {
-    this.props.onTitleChange(e.target.value);
-  }
-
-  handleDescriptionChange = e => {
-    this.props.onDescriptionChange(e.target.value);
-  }
-
-  handleCoverImageChange = e => {
-    this.props.onCoverImageChange(e.target.files[0]);
-  }
-
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.onSubmit(this.props.history);
-  }
-
-  handleClick = () => {
-    this.props.onSubmit(this.props.history);
-  }
-
-  render() {
-    const { group, title, description, coverImage, disabled, intl } = this.props;
-
-    if (typeof group === 'undefined') {
-      return (
-        <Column>
-          <Spinner />
-        </Column>
-      );
-    } else if (group === false) {
-      return (
-        <MissingIndicator />
-      );
-    }
-
-    return (
-      <form className='group-form' method='post' onSubmit={this.handleSubmit}>
-        <div>
-          <input
-            className='standard'
-            type='text'
-            value={title}
-            disabled={disabled}
-            onChange={this.handleTitleChange}
-            placeholder={intl.formatMessage(messages.title)}
-          />
-        </div>
-
-        <div>
-          <textarea
-            className='standard'
-            type='text'
-            value={description}
-            disabled={disabled}
-            onChange={this.handleDescriptionChange}
-            placeholder={intl.formatMessage(messages.description)}
-          />
-        </div>
-
-        <div>
-          <label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
-            {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
-          </label>
-
-          <input
-            type='file'
-            className='group-form__file'
-            id='group_cover_image'
-            disabled={disabled}
-            onChange={this.handleCoverImageChange}
-          />
-
-          <button>{intl.formatMessage(messages.update)}</button>
-        </div>
-      </form>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/groups/index/card.js b/app/soapbox/features/groups/index/card.js
deleted file mode 100644
index 0632a053e..000000000
--- a/app/soapbox/features/groups/index/card.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import { shortNumberFormat } from '../../../utils/numbers';
-
-const messages = defineMessages({
-  members: { id: 'groups.card.members', defaultMessage: 'Members' },
-  view: { id: 'groups.card.view', defaultMessage: 'View' },
-  join: { id: 'groups.card.join', defaultMessage: 'Join' },
-  role_member: { id: 'groups.card.roles.member', defaultMessage: 'You\'re a member' },
-  role_admin: { id: 'groups.card.roles.admin', defaultMessage: 'You\'re an admin' },
-});
-
-const mapStateToProps = (state, { id }) => ({
-  group: state.getIn(['groups', id]),
-  relationships: state.getIn(['group_relationships', id]),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class GroupCard extends ImmutablePureComponent {
-
-    static propTypes = {
-      group: ImmutablePropTypes.map,
-      relationships: ImmutablePropTypes.map,
-    }
-
-    getRole() {
-      const { intl, relationships } = this.props;
-
-      if (relationships.get('admin')) return intl.formatMessage(messages.role_admin);
-      if (relationships.get('member')) return intl.formatMessage(messages.role_member);
-      return null;
-    }
-
-    render() {
-      const { intl, group } = this.props;
-      const coverImageUrl = group.get('cover_image_url');
-      const role = this.getRole();
-
-      return (
-        <Link to={`/groups/${group.get('id')}`} className='group-card'>
-          <div className='group-card__header'>{coverImageUrl && <img alt='' src={coverImageUrl} />}</div>
-          <div className='group-card__content'>
-            <div className='group-card__title'>{group.get('title')}</div>
-            <div className='group-card__meta'><strong>{shortNumberFormat(group.get('member_count'))}</strong> {intl.formatMessage(messages.members)}{role && <span> · {role}</span>}</div>
-            <div className='group-card__description'>{group.get('description')}</div>
-          </div>
-        </Link>
-      );
-    }
-
-}
diff --git a/app/soapbox/features/groups/index/index.js b/app/soapbox/features/groups/index/index.js
deleted file mode 100644
index d661cf341..000000000
--- a/app/soapbox/features/groups/index/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import classNames from 'clsx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import { fetchGroups } from '../../../actions/groups';
-import GroupCreate from '../create';
-
-import GroupCard from './card';
-
-const messages = defineMessages({
-  heading: { id: 'column.groups', defaultMessage: 'Groups' },
-  create: { id: 'groups.create', defaultMessage: 'Create group' },
-  tab_featured: { id: 'groups.tab_featured', defaultMessage: 'Featured' },
-  tab_member: { id: 'groups.tab_member', defaultMessage: 'Member' },
-  tab_admin: { id: 'groups.tab_admin', defaultMessage: 'Manage' },
-});
-
-const mapStateToProps = (state, { activeTab }) => ({
-  groupIds: state.getIn(['group_lists', activeTab]),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Groups extends ImmutablePureComponent {
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    activeTab: PropTypes.string.isRequired,
-    showCreateForm: PropTypes.bool,
-    dispatch: PropTypes.func.isRequired,
-    groups: ImmutablePropTypes.map,
-    groupIds: ImmutablePropTypes.list,
-    intl: PropTypes.object.isRequired,
-  };
-
-  componentDidMount() {
-    this.props.dispatch(fetchGroups(this.props.activeTab));
-  }
-
-  componentDidUpdate(oldProps) {
-    if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
-      this.props.dispatch(fetchGroups(this.props.activeTab));
-    }
-  }
-
-  renderHeader() {
-    const { intl, activeTab } = this.props;
-
-    return (
-      <div className='group-column-header'>
-        <div className='group-column-header__cta'><Link to='/groups/create' className='button standard-small'>{intl.formatMessage(messages.create)}</Link></div>
-        <div className='group-column-header__title'>{intl.formatMessage(messages.heading)}</div>
-
-        <div className='column-header__wrapper'>
-          <h1 className='column-header'>
-            <Link to='/groups' className={classNames('btn grouped', { 'active': 'featured' === activeTab })}>
-              {intl.formatMessage(messages.tab_featured)}
-            </Link>
-
-            <Link to='/groups/browse/member' className={classNames('btn grouped', { 'active': 'member' === activeTab })}>
-              {intl.formatMessage(messages.tab_member)}
-            </Link>
-
-            <Link to='/groups/browse/admin' className={classNames('btn grouped', { 'active': 'admin' === activeTab })}>
-              {intl.formatMessage(messages.tab_admin)}
-            </Link>
-          </h1>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    const { groupIds, showCreateForm } = this.props;
-
-    return (
-      <div>
-        {!showCreateForm && this.renderHeader()}
-        {showCreateForm && <GroupCreate /> }
-
-        <div className='group-card-list'>
-          {groupIds.map(id => <GroupCard key={id} id={id} />)}
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/groups/members/index.js b/app/soapbox/features/groups/members/index.js
deleted file mode 100644
index 1e9e39a4d..000000000
--- a/app/soapbox/features/groups/members/index.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import debounce from 'lodash/debounce';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { Spinner } from 'soapbox/components/ui';
-
-import {
-  fetchMembers,
-  expandMembers,
-} from '../../../actions/groups';
-import ScrollableList from '../../../components/scrollable_list';
-import AccountContainer from '../../../containers/account_container';
-import Column from '../../ui/components/column';
-
-const mapStateToProps = (state, { params: { id } }) => ({
-  group: state.getIn(['groups', id]),
-  accountIds: state.user_lists.groups.get(id)?.items,
-  hasMore: !!state.user_lists.groups.get(id)?.next,
-});
-
-export default @connect(mapStateToProps)
-class GroupMembers extends ImmutablePureComponent {
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet,
-    hasMore: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { params: { id } } = this.props;
-
-    this.props.dispatch(fetchMembers(id));
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.params.id !== prevProps.params.id) {
-      this.props.dispatch(fetchMembers(this.props.params.id));
-    }
-  }
-
-  handleLoadMore = debounce(() => {
-    this.props.dispatch(expandMembers(this.props.params.id));
-  }, 300, { leading: true });
-
-  render() {
-    const { accountIds, hasMore, group } = this.props;
-
-    if (!group || !accountIds) {
-      return (
-        <Column>
-          <Spinner />
-        </Column>
-      );
-    }
-
-    return (
-      <Column>
-        <ScrollableList
-          scrollKey='members'
-          hasMore={hasMore}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='group.members.empty' defaultMessage='This group does not has any members.' />}
-        >
-          {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
-        </ScrollableList>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/groups/removed_accounts/index.js b/app/soapbox/features/groups/removed_accounts/index.js
deleted file mode 100644
index 10aa20333..000000000
--- a/app/soapbox/features/groups/removed_accounts/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import debounce from 'lodash/debounce';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { Spinner } from 'soapbox/components/ui';
-
-import {
-  fetchRemovedAccounts,
-  expandRemovedAccounts,
-  removeRemovedAccount,
-} from '../../../actions/groups';
-import ScrollableList from '../../../components/scrollable_list';
-import AccountContainer from '../../../containers/account_container';
-import Column from '../../ui/components/column';
-
-const messages = defineMessages({
-  remove: { id: 'groups.removed_accounts', defaultMessage: 'Allow joining' },
-});
-
-const mapStateToProps = (state, { params: { id } }) => ({
-  group: state.getIn(['groups', id]),
-  accountIds: state.user_lists.groups_removed_accounts.get(id)?.items,
-  hasMore: !!state.user_lists.groups_removed_accounts.get(id)?.next,
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class GroupRemovedAccounts extends ImmutablePureComponent {
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet,
-    hasMore: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { params: { id } } = this.props;
-
-    this.props.dispatch(fetchRemovedAccounts(id));
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.params.id !== prevProps.params.id) {
-      this.props.dispatch(fetchRemovedAccounts(this.props.params.id));
-    }
-  }
-
-  handleLoadMore = debounce(() => {
-    this.props.dispatch(expandRemovedAccounts(this.props.params.id));
-  }, 300, { leading: true });
-
-  handleOnActionClick = (group, id) => {
-    return () => {
-      this.props.dispatch(removeRemovedAccount(group.get('id'), id));
-    };
-  }
-
-  render() {
-    const { accountIds, hasMore, group, intl } = this.props;
-
-    if (!group || !accountIds) {
-      return (
-        <Column>
-          <Spinner />
-        </Column>
-      );
-    }
-
-    return (
-      <Column>
-        <ScrollableList
-          scrollKey='removed_accounts'
-          hasMore={hasMore}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='group.removed_accounts.empty' defaultMessage='This group does not has any removed accounts.' />}
-        >
-          {accountIds.map(id => (<AccountContainer
-            key={id}
-            id={id}
-            actionIcon={require('@tabler/icons/x.svg')}
-            onActionClick={this.handleOnActionClick(group, id)}
-            actionTitle={intl.formatMessage(messages.remove)}
-          />))}
-        </ScrollableList>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/groups/sidebar_panel/index.js b/app/soapbox/features/groups/sidebar_panel/index.js
deleted file mode 100644
index 088fbee73..000000000
--- a/app/soapbox/features/groups/sidebar_panel/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import Icon from 'soapbox/components/icon';
-
-import Item from './item';
-
-const messages = defineMessages({
-  title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups You\'re In' },
-  show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
-});
-
-const mapStateToProps = (state, { id }) => ({
-  groupIds: state.getIn(['group_lists', 'member']),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class GroupSidebarPanel extends ImmutablePureComponent {
-
-    static propTypes = {
-      groupIds: ImmutablePropTypes.list,
-    }
-
-    render() {
-      const { intl, groupIds } = this.props;
-      const count = groupIds.count();
-
-      // Only when there are groups to show
-      if (count === 0) return null;
-
-      return (
-        <div className='wtf-panel group-sidebar-panel'>
-          <div className='wtf-panel-header'>
-            <Icon id='users' className='wtf-panel-header__icon' />
-            <span className='wtf-panel-header__label'>{intl.formatMessage(messages.title)}</span>
-          </div>
-
-          <div className='wtf-panel__content'>
-            <div className='group-sidebar-panel__items'>
-              {groupIds.slice(0, 10).map(groupId => <Item key={groupId} id={groupId} />)}
-              {count > 10 && <Link className='group-sidebar-panel__items__show-all' to='/groups/browse/member'>{intl.formatMessage(messages.show_all)}</Link>}
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-}
diff --git a/app/soapbox/features/groups/sidebar_panel/item.js b/app/soapbox/features/groups/sidebar_panel/item.js
deleted file mode 100644
index 40ed8d421..000000000
--- a/app/soapbox/features/groups/sidebar_panel/item.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import { shortNumberFormat } from '../../../utils/numbers';
-
-const messages = defineMessages({
-  new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new posts' },
-  no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
-});
-
-const mapStateToProps = (state, { id }) => ({
-  group: state.getIn(['groups', id]),
-  relationships: state.getIn(['group_relationships', id]),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Item extends ImmutablePureComponent {
-
-    static propTypes = {
-      group: ImmutablePropTypes.map,
-      relationships: ImmutablePropTypes.map,
-    }
-
-    render() {
-      const { intl, group, relationships } = this.props;
-
-      // Wait for relationships
-      if (!relationships) return null;
-
-      const unreadCount = relationships.get('unread_count');
-
-      return (
-        <Link to={`/groups/${group.get('id')}`} className='group-sidebar-panel__item'>
-          <div className='group-sidebar-panel__item__title'>{group.get('title')}</div>
-          <div className='group-sidebar-panel__item__meta'>
-            {unreadCount > 0 && <span className='group-sidebar-panel__item__meta__unread'>{shortNumberFormat(unreadCount)} {intl.formatMessage(messages.new_statuses)}</span>}
-            {unreadCount === 0 && <span>{intl.formatMessage(messages.no_recent_activity)}</span>}
-          </div>
-        </Link>
-      );
-    }
-
-}
diff --git a/app/soapbox/features/groups/timeline/components/header.js b/app/soapbox/features/groups/timeline/components/header.js
deleted file mode 100644
index c08210afd..000000000
--- a/app/soapbox/features/groups/timeline/components/header.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
-
-import { Button } from 'soapbox/components/ui';
-
-import DropdownMenuContainer from '../../../../containers/dropdown_menu_container';
-
-const messages = defineMessages({
-  join: { id: 'groups.join', defaultMessage: 'Join group' },
-  leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
-  removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
-  edit: { id: 'groups.edit', defaultMessage: 'Edit' },
-});
-
-export default @injectIntl
-class Header extends ImmutablePureComponent {
-
-  static propTypes = {
-    group: ImmutablePropTypes.map,
-    relationships: ImmutablePropTypes.map,
-    toggleMembership: PropTypes.func.isRequired,
-  };
-
-  toggle = () => {
-    const { group, relationships, toggleMembership } = this.props;
-    toggleMembership(group, relationships);
-  }
-
-  getActionButton() {
-    const { group, relationships, intl } = this.props;
-
-    if (!relationships) {
-      return '';
-    } else if (!relationships.get('member')) {
-      return <Button className='logo-button' text={intl.formatMessage(messages.join)} onClick={this.toggle} />;
-    } else if (relationships.get('member')) {
-      return <Button className='logo-button' text={intl.formatMessage(messages.leave, { name: group.get('title') })} onClick={this.toggle} />;
-    }
-
-    return '';
-  }
-
-  getAdminMenu() {
-    const { group, intl } = this.props;
-
-    const menu = [
-      {
-        text: intl.formatMessage(messages.edit),
-        to: `/groups/${group.get('id')}/edit`,
-        icon: require('@tabler/icons/edit.svg'),
-      },
-      {
-        text: intl.formatMessage(messages.removed_accounts),
-        to: `/groups/${group.get('id')}/removed_accounts`,
-        icon: require('@tabler/icons/trash.svg'),
-        destructive: true,
-      },
-    ];
-
-    return <DropdownMenuContainer items={menu} src={require('@tabler/icons/dots-vertical.svg')} direction='right' />;
-  }
-
-  render() {
-    const { group, relationships } = this.props;
-
-    if (!group || !relationships) {
-      return null;
-    }
-
-    return (
-      <div className='group__header-container'>
-        <div className='group__header'>
-          <div className='group__cover'>
-            <img src={group.get('cover_image_url')} alt='' className='parallax' />
-          </div>
-
-          <div className='group__tabs'>
-            <NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}`}>Posts</NavLink>
-            <NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}/members`}>Members</NavLink>
-            {this.getActionButton()}
-            {relationships.get('admin') && this.getAdminMenu()}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/groups/timeline/components/panel.js b/app/soapbox/features/groups/timeline/components/panel.js
deleted file mode 100644
index 9009bf33e..000000000
--- a/app/soapbox/features/groups/timeline/components/panel.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, defineMessages } from 'react-intl';
-
-import Icon from 'soapbox/components/icon';
-
-const messages = defineMessages({
-  group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
-  group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' },
-});
-
-export default @injectIntl
-class GroupPanel extends ImmutablePureComponent {
-
-    static propTypes = {
-      group: ImmutablePropTypes.map,
-      relationships: ImmutablePropTypes.map,
-    }
-
-    render() {
-      const { group, relationships, intl } = this.props;
-
-      return (
-        <div className='group__panel'>
-          <h1 className='group__panel__title'>
-            {group.get('title')}
-            {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
-          </h1>
-
-          {relationships.get('admin') && <span className='group__panel__label'>{intl.formatMessage(messages.group_admin)}</span>}
-
-          <div className='group__panel__description'>{group.get('description')}</div>
-        </div>
-      );
-    }
-
-}
diff --git a/app/soapbox/features/groups/timeline/containers/header_container.js b/app/soapbox/features/groups/timeline/containers/header_container.js
deleted file mode 100644
index bce37c3a9..000000000
--- a/app/soapbox/features/groups/timeline/containers/header_container.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { connect } from 'react-redux';
-
-import { joinGroup, leaveGroup } from '../../../../actions/groups';
-import Header from '../components/header';
-
-const mapStateToProps = (state, { groupId }) => ({
-  group: state.getIn(['groups', groupId]),
-  relationships: state.getIn(['group_relationships', groupId]),
-});
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  toggleMembership(group, relationships) {
-    if (relationships.get('member')) {
-      dispatch(leaveGroup(group.get('id')));
-    } else {
-      dispatch(joinGroup(group.get('id')));
-    }
-  },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/app/soapbox/features/groups/timeline/index.js b/app/soapbox/features/groups/timeline/index.js
deleted file mode 100644
index fc8972c4a..000000000
--- a/app/soapbox/features/groups/timeline/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import { Column, Spinner } from 'soapbox/components/ui';
-
-import ComposeFormContainer from '../../../../soapbox/features/compose/containers/compose_form_container';
-import { connectGroupStream } from '../../../actions/streaming';
-import { expandGroupTimeline } from '../../../actions/timelines';
-import Avatar from '../../../components/avatar';
-import MissingIndicator from '../../../components/missing_indicator';
-import Timeline from '../../ui/components/timeline';
-
-const mapStateToProps = (state, props) => {
-  const me = state.get('me');
-  return {
-    account: state.getIn(['accounts', me]),
-    group: state.getIn(['groups', props.params.id]),
-    relationships: state.getIn(['group_relationships', props.params.id]),
-    hasUnread: state.getIn(['timelines', `group:${props.params.id}`, 'unread']) > 0,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class GroupTimeline extends React.PureComponent {
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    columnId: PropTypes.string,
-    hasUnread: PropTypes.bool,
-    group: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
-    relationships: ImmutablePropTypes.map,
-    account: ImmutablePropTypes.record,
-    intl: PropTypes.object.isRequired,
-  };
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    const { id } = this.props.params;
-
-    dispatch(expandGroupTimeline(id));
-
-    this.disconnect = dispatch(connectGroupStream(id));
-  }
-
-  componentWillUnmount() {
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
-
-  handleLoadMore = maxId => {
-    const { id } = this.props.params;
-    this.props.dispatch(expandGroupTimeline(id, { maxId }));
-  }
-
-  render() {
-    const { columnId, group, relationships, account } = this.props;
-    const { id } = this.props.params;
-
-    if (typeof group === 'undefined' || !relationships) {
-      return (
-        <Column>
-          <Spinner />
-        </Column>
-      );
-    } else if (group === false) {
-      return (
-        <MissingIndicator />
-      );
-    }
-
-    const acct = account ? account.get('acct') : '';
-
-    return (
-      <div>
-        {relationships.get('member') && (
-          <div className='timeline-compose-block'>
-            <Link className='timeline-compose-block__avatar' to={`/@${acct}`}>
-              <Avatar account={account} size={46} />
-            </Link>
-            <ComposeFormContainer group={group} shouldCondense autoFocus={false} />
-          </div>
-        )}
-
-        <div className='group__feed'>
-          <Timeline
-            alwaysPrepend
-            scrollKey={`group_timeline-${columnId}`}
-            timelineId={`group:${id}`}
-            onLoadMore={this.handleLoadMore}
-            group={group}
-            withGroupAdmin={relationships && relationships.get('admin')}
-            emptyMessage={<FormattedMessage id='empty_column.group' defaultMessage='There is nothing in this group yet. When members of this group make new posts, they will appear here.' />}
-          />
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/introduction/index.js b/app/soapbox/features/introduction/index.js
deleted file mode 100644
index a35ba341a..000000000
--- a/app/soapbox/features/introduction/index.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import classNames from 'clsx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import ReactSwipeableViews from 'react-swipeable-views';
-
-import { closeOnboarding } from '../../actions/onboarding';
-
-const FrameWelcome = ({ domain, onNext }) => (
-  <div className='introduction__frame'>
-    <div className='introduction__text introduction__text--centered'>
-      <h3><FormattedMessage id='introduction.welcome.headline' defaultMessage='First steps' /></h3>
-      <p><FormattedMessage id='introduction.welcome.text' defaultMessage="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." values={{ domain: <code>{domain}</code> }} /></p>
-    </div>
-
-    <div className='introduction__action'>
-      <button className='button' onClick={onNext}><FormattedMessage id='introduction.welcome.action' defaultMessage="Let's go!" /></button>
-    </div>
-  </div>
-);
-
-FrameWelcome.propTypes = {
-  domain: PropTypes.string.isRequired,
-  onNext: PropTypes.func.isRequired,
-};
-
-const FrameFederation = ({ onNext }) => (
-  <div className='introduction__frame'>
-    <div className='introduction__text introduction__text--columnized'>
-      <div>
-        <h3><FormattedMessage id='introduction.federation.home.headline' defaultMessage='Home' /></h3>
-        <p><FormattedMessage id='introduction.federation.home.text' defaultMessage='Posts from people you follow will appear in your home feed. You can follow anyone on any server!' /></p>
-      </div>
-    </div>
-
-    <div className='introduction__action'>
-      <button className='button' onClick={onNext}><FormattedMessage id='introduction.federation.action' defaultMessage='Next' /></button>
-    </div>
-  </div>
-);
-
-FrameFederation.propTypes = {
-  onNext: PropTypes.func.isRequired,
-};
-
-const FrameInteractions = ({ onNext }) => (
-  <div className='introduction__frame'>
-    <div className='introduction__text introduction__text--columnized'>
-      <div>
-        <h3><FormattedMessage id='introduction.interactions.reply.headline' defaultMessage='Reply' /></h3>
-        <p><FormattedMessage id='introduction.interactions.reply.text' defaultMessage="You can reply to other people's and your own posts, which will chain them together in a conversation." /></p>
-      </div>
-
-      <div>
-        <h3><FormattedMessage id='introduction.interactions.reblog.headline' defaultMessage='Repost' /></h3>
-        <p><FormattedMessage id='introduction.interactions.reblog.text' defaultMessage="You can share other people's posts with your followers by reposting them." /></p>
-      </div>
-
-      <div>
-        <h3><FormattedMessage id='introduction.interactions.favourite.headline' defaultMessage='Favorite' /></h3>
-        <p><FormattedMessage id='introduction.interactions.favourite.text' defaultMessage='You can save a post for later, and let the author know that you liked it, by favoriting it.' /></p>
-      </div>
-    </div>
-
-    <div className='introduction__action'>
-      <button className='button' onClick={onNext}><FormattedMessage id='introduction.interactions.action' defaultMessage='Finish tutorial!' /></button>
-    </div>
-  </div>
-);
-
-FrameInteractions.propTypes = {
-  onNext: PropTypes.func.isRequired,
-};
-
-export default @connect(state => ({ domain: state.getIn(['meta', 'domain']) }))
-class Introduction extends React.PureComponent {
-
-  static propTypes = {
-    domain: PropTypes.string.isRequired,
-    dispatch: PropTypes.func.isRequired,
-  };
-
-  state = {
-    currentIndex: 0,
-  };
-
-  constructor(props) {
-    super(props);
-    this.pages = [
-      <FrameWelcome domain={props.domain} onNext={this.handleNext} />,
-      <FrameFederation onNext={this.handleNext} />,
-      <FrameInteractions onNext={this.handleFinish} />,
-    ];
-  }
-
-  componentDidMount() {
-    window.addEventListener('keyup', this.handleKeyUp);
-  }
-
-  componentWillUnmount() {
-    window.addEventListener('keyup', this.handleKeyUp);
-  }
-
-  handleDot = (e) => {
-    const i = Number(e.currentTarget.getAttribute('data-index'));
-    e.preventDefault();
-    this.setState({ currentIndex: i });
-  }
-
-  handlePrev = () => {
-    this.setState(({ currentIndex }) => ({
-      currentIndex: Math.max(0, currentIndex - 1),
-    }));
-  }
-
-  handleNext = () => {
-    const { pages } = this;
-
-    this.setState(({ currentIndex }) => ({
-      currentIndex: Math.min(currentIndex + 1, pages.length - 1),
-    }));
-  }
-
-  handleSwipe = (index) => {
-    this.setState({ currentIndex: index });
-  }
-
-  handleFinish = () => {
-    this.props.dispatch(closeOnboarding());
-  }
-
-  handleKeyUp = ({ key }) => {
-    switch (key) {
-      case 'ArrowLeft':
-        this.handlePrev();
-        break;
-      case 'ArrowRight':
-        this.handleNext();
-        break;
-    }
-  }
-
-  render() {
-    const { currentIndex } = this.state;
-    const { pages } = this;
-
-    return (
-      <div className='introduction'>
-        <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='introduction__pager'>
-          {pages.map((page, i) => (
-            <div key={i} className={classNames('introduction__frame-wrapper', { 'active': i === currentIndex })}>{page}</div>
-          ))}
-        </ReactSwipeableViews>
-
-        <div className='introduction__dots'>
-          {pages.map((_, i) => (
-            <div
-              key={`dot-${i}`}
-              role='button'
-              tabIndex='0'
-              data-index={i}
-              onClick={this.handleDot}
-              className={classNames('introduction__dot', { active: i === currentIndex })}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index 1e3b01f80..76e77bcfa 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/app/soapbox/features/landing_page/index.tsx
@@ -113,7 +113,10 @@ const LandingPage = () => {
                 </h1>
 
                 <Text size='lg'>
-                  {instance.description}
+                  <span
+                    className='instance-description'
+                    dangerouslySetInnerHTML={{ __html: instance.short_description || instance.description }}
+                  />
                 </Text>
               </Stack>
             </div>
diff --git a/app/soapbox/features/list_adder/components/account.tsx b/app/soapbox/features/list_adder/components/account.tsx
index 304b32207..e35a0ce96 100644
--- a/app/soapbox/features/list_adder/components/account.tsx
+++ b/app/soapbox/features/list_adder/components/account.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
+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';
 
-const getAccount = makeGetAccount();
-
 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;
diff --git a/app/soapbox/features/list_editor/components/account.tsx b/app/soapbox/features/list_editor/components/account.tsx
index 79916ead2..ef1b2e246 100644
--- a/app/soapbox/features/list_editor/components/account.tsx
+++ b/app/soapbox/features/list_editor/components/account.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists';
@@ -13,8 +13,6 @@ const messages = defineMessages({
   add: { id: 'lists.account.add', defaultMessage: 'Add to list' },
 });
 
-const getAccount = makeGetAccount();
-
 interface IAccount {
   accountId: string,
 }
@@ -22,6 +20,7 @@ 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));
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index b7e528ef5..e1fa87c5a 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -20,8 +20,6 @@ import { NotificationType, validType } from 'soapbox/utils/notification';
 import type { ScrollPosition } from 'soapbox/components/status';
 import type { Account, Status as StatusEntity, Notification as NotificationEntity } from 'soapbox/types/entities';
 
-const getNotification = makeGetNotification();
-
 const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: Date) => {
   const output = [message];
 
@@ -153,6 +151,8 @@ const Notification: React.FC<INotificaton> = (props) => {
 
   const dispatch = useAppDispatch();
 
+  const getNotification = useCallback(makeGetNotification(), []);
+
   const notification = useAppSelector((state) => getNotification(state, props.notification));
 
   const history = useHistory();
diff --git a/app/soapbox/features/reply_mentions/account.tsx b/app/soapbox/features/reply_mentions/account.tsx
index 5ede1d013..b4ad74bcc 100644
--- a/app/soapbox/features/reply_mentions/account.tsx
+++ b/app/soapbox/features/reply_mentions/account.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
@@ -14,8 +14,6 @@ const messages = defineMessages({
   add: { id: 'reply_mentions.account.add', defaultMessage: 'Add to mentions' },
 });
 
-const getAccount = makeGetAccount();
-
 interface IAccount {
   accountId: string,
   author: boolean,
@@ -24,6 +22,7 @@ interface IAccount {
 const Account: React.FC<IAccount> = ({ accountId, author }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const getAccount = useCallback(makeGetAccount(), []);
 
   const account = useAppSelector((state) => getAccount(state, accountId));
   const added = useAppSelector((state) => !!account && state.compose.to?.includes(account.acct));
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 24ad615a3..fd339cf5c 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -155,7 +155,7 @@ const SoapboxConfig: React.FC = () => {
 
   const addStreamItem = (path: ConfigPath, template: Template) => {
     return () => {
-      const items = data.getIn(path);
+      const items = data.getIn(path) || ImmutableList();
       setConfig(path, items.push(template));
     };
   };
diff --git a/app/soapbox/features/status/containers/quoted_status_container.tsx b/app/soapbox/features/status/containers/quoted_status_container.tsx
index f64ad2255..a870aa2c8 100644
--- a/app/soapbox/features/status/containers/quoted_status_container.tsx
+++ b/app/soapbox/features/status/containers/quoted_status_container.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import QuotedStatus from 'soapbox/components/quoted-status';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
-const getStatus = makeGetStatus();
-
 interface IQuotedStatusContainer {
   /** Status ID to the quoted status. */
   statusId: string,
 }
 
 const QuotedStatusContainer: React.FC<IQuotedStatusContainer> = ({ statusId }) => {
+  const getStatus = useCallback(makeGetStatus(), []);
+
   const status = useAppSelector(state => getStatus(state, { id: statusId }));
 
   if (!status) {
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index a283f5379..9cce5859a 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -68,8 +68,6 @@ const messages = defineMessages({
   blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
 });
 
-const getStatus = makeGetStatus();
-
 const getAncestorsIds = createSelector([
   (_: RootState, statusId: string | undefined) => statusId,
   (state: RootState) => state.contexts.inReplyTos,
@@ -131,6 +129,7 @@ const Thread: React.FC<IThread> = (props) => {
   const dispatch = useAppDispatch();
 
   const settings = useSettings();
+  const getStatus = useCallback(makeGetStatus(), []);
 
   const me = useAppSelector(state => state.me);
   const status = useAppSelector(state => getStatus(state, { id: props.params.statusId }));
diff --git a/app/soapbox/features/timeline-insertion/__tests__/abovefold.test.ts b/app/soapbox/features/timeline-insertion/__tests__/abovefold.test.ts
new file mode 100644
index 000000000..81de8c1a4
--- /dev/null
+++ b/app/soapbox/features/timeline-insertion/__tests__/abovefold.test.ts
@@ -0,0 +1,18 @@
+import { abovefoldAlgorithm } from '../abovefold';
+
+const DATA = Object.freeze(['a', 'b', 'c', 'd']);
+
+test('abovefoldAlgorithm', () => {
+  const result = Array(50).fill('').map((_, i) => {
+    return abovefoldAlgorithm(DATA, i, { seed: '!', range: [2, 6], pageSize: 20 });
+  });
+
+  // console.log(result);
+  expect(result[0]).toBe(undefined);
+  expect(result[4]).toBe('a');
+  expect(result[5]).toBe(undefined);
+  expect(result[24]).toBe('b');
+  expect(result[30]).toBe(undefined);
+  expect(result[42]).toBe('c');
+  expect(result[43]).toBe(undefined);
+});
\ No newline at end of file
diff --git a/app/soapbox/features/timeline-insertion/__tests__/linear.test.ts b/app/soapbox/features/timeline-insertion/__tests__/linear.test.ts
new file mode 100644
index 000000000..09d484f12
--- /dev/null
+++ b/app/soapbox/features/timeline-insertion/__tests__/linear.test.ts
@@ -0,0 +1,19 @@
+import { linearAlgorithm } from '../linear';
+
+const DATA = Object.freeze(['a', 'b', 'c', 'd']);
+
+test('linearAlgorithm', () => {
+  const result = Array(50).fill('').map((_, i) => {
+    return linearAlgorithm(DATA, i, { interval: 5 });
+  });
+
+  // console.log(result);
+  expect(result[0]).toBe(undefined);
+  expect(result[4]).toBe('a');
+  expect(result[8]).toBe(undefined);
+  expect(result[9]).toBe('b');
+  expect(result[10]).toBe(undefined);
+  expect(result[14]).toBe('c');
+  expect(result[15]).toBe(undefined);
+  expect(result[19]).toBe('d');
+});
\ No newline at end of file
diff --git a/app/soapbox/features/timeline-insertion/abovefold.ts b/app/soapbox/features/timeline-insertion/abovefold.ts
new file mode 100644
index 000000000..9ca2f5e28
--- /dev/null
+++ b/app/soapbox/features/timeline-insertion/abovefold.ts
@@ -0,0 +1,52 @@
+import seedrandom from 'seedrandom';
+
+import type { PickAlgorithm } from './types';
+
+type Opts = {
+  /** Randomization seed. */
+  seed: string,
+  /**
+   * Start/end index of the slot by which one item will be randomly picked per page.
+   *
+   * Eg. `[2, 6]` will cause one item to be picked among the third through seventh indexes.
+   *
+   * `end` must be larger than `start`.
+   */
+  range: [start: number, end: number],
+  /** Number of items in the page. */
+  pageSize: number,
+};
+
+/**
+ * Algorithm to display items per-page.
+ * One item is randomly inserted into each page within the index range.
+ */
+const abovefoldAlgorithm: PickAlgorithm = (items, iteration, rawOpts) => {
+  const opts = normalizeOpts(rawOpts);
+  /** Current page of the index. */
+  const page = Math.floor(iteration / opts.pageSize);
+  /** Current index within the page. */
+  const pageIndex = (iteration % opts.pageSize);
+  /** RNG for the page. */
+  const rng = seedrandom(`${opts.seed}-page-${page}`);
+  /** Index to insert the item. */
+  const insertIndex = Math.floor(rng() * (opts.range[1] - opts.range[0])) + opts.range[0];
+
+  if (pageIndex === insertIndex) {
+    return items[page % items.length];
+  }
+};
+
+const normalizeOpts = (opts: unknown): Opts => {
+  const { seed, range, pageSize } = (opts && typeof opts === 'object' ? opts : {}) as Record<any, unknown>;
+
+  return {
+    seed: typeof seed === 'string' ? seed : '',
+    range: Array.isArray(range) ? [Number(range[0]), Number(range[1])] : [2, 6],
+    pageSize: typeof pageSize === 'number' ? pageSize : 20,
+  };
+};
+
+export {
+  abovefoldAlgorithm,
+};
\ No newline at end of file
diff --git a/app/soapbox/features/timeline-insertion/index.ts b/app/soapbox/features/timeline-insertion/index.ts
new file mode 100644
index 000000000..f4e00ed29
--- /dev/null
+++ b/app/soapbox/features/timeline-insertion/index.ts
@@ -0,0 +1,11 @@
+import { abovefoldAlgorithm } from './abovefold';
+import { linearAlgorithm } from './linear';
+
+import type { PickAlgorithm } from './types';
+
+const ALGORITHMS: Record<any, PickAlgorithm | undefined> = {
+  'linear': linearAlgorithm,
+  'abovefold': abovefoldAlgorithm,
+};
+
+export { ALGORITHMS };
\ No newline at end of file
diff --git a/app/soapbox/features/timeline-insertion/linear.ts b/app/soapbox/features/timeline-insertion/linear.ts
new file mode 100644
index 000000000..a542e1fce
--- /dev/null
+++ b/app/soapbox/features/timeline-insertion/linear.ts
@@ -0,0 +1,28 @@
+import type { PickAlgorithm } from './types';
+
+type Opts = {
+  /** Number of iterations until the next item is picked. */
+  interval: number,
+};
+
+/** Picks the next item every iteration. */
+const linearAlgorithm: PickAlgorithm = (items, iteration, rawOpts) => {
+  const opts = normalizeOpts(rawOpts);
+  const itemIndex = items ? Math.floor(iteration / opts.interval) % items.length : 0;
+  const item = items ? items[itemIndex] : undefined;
+  const showItem = (iteration + 1) % opts.interval === 0;
+
+  return showItem ? item : undefined;
+};
+
+const normalizeOpts = (opts: unknown): Opts => {
+  const { interval } = (opts && typeof opts === 'object' ? opts : {}) as Record<any, unknown>;
+
+  return {
+    interval: typeof interval === 'number' ? interval : 20,
+  };
+};
+
+export {
+  linearAlgorithm,
+};
\ No newline at end of file
diff --git a/app/soapbox/features/timeline-insertion/types.ts b/app/soapbox/features/timeline-insertion/types.ts
new file mode 100644
index 000000000..b874754d0
--- /dev/null
+++ b/app/soapbox/features/timeline-insertion/types.ts
@@ -0,0 +1,15 @@
+/**
+ * Returns an item to insert at the index, or `undefined` if an item shouldn't be inserted.
+ */
+type PickAlgorithm = <D = any>(
+  /** Elligible candidates to pick. */
+  items: readonly D[],
+  /** Current iteration by which an item may be chosen. */
+  iteration: number,
+  /** Implementation-specific opts. */
+  opts: Record<string, unknown>
+) => D | undefined;
+
+export {
+  PickAlgorithm,
+};
\ No newline at end of file
diff --git a/app/soapbox/features/ui/components/mentions_modal.tsx b/app/soapbox/features/ui/components/mentions_modal.tsx
index 445858843..0cd104cfb 100644
--- a/app/soapbox/features/ui/components/mentions_modal.tsx
+++ b/app/soapbox/features/ui/components/mentions_modal.tsx
@@ -1,5 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchStatusWithContext } from 'soapbox/actions/statuses';
@@ -9,8 +9,6 @@ import AccountContainer from 'soapbox/containers/account_container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
-const getStatus = makeGetStatus();
-
 interface IMentionsModal {
   onClose: (type: string) => void,
   statusId: string,
@@ -18,6 +16,7 @@ interface IMentionsModal {
 
 const MentionsModal: React.FC<IMentionsModal> = ({ onClose, statusId }) => {
   const dispatch = useAppDispatch();
+  const getStatus = useCallback(makeGetStatus(), []);
 
   const status = useAppSelector((state) => getStatus(state, { id: statusId }));
   const accountIds = status ? ImmutableOrderedSet(status.mentions.map(m => m.get('id'))) : null;
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index 0f7b8c025..ab29e93ec 100644
--- a/app/soapbox/features/ui/components/modal_root.js
+++ b/app/soapbox/features/ui/components/modal_root.js
@@ -34,6 +34,7 @@ import {
   FamiliarFollowersModal,
   CreateEventModal,
   JoinEventModal,
+  AccountModerationModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import BundleContainer from '../containers/bundle_container';
@@ -73,6 +74,7 @@ const MODAL_COMPONENTS = {
   'FAMILIAR_FOLLOWERS': FamiliarFollowersModal,
   'CREATE_EVENT': CreateEventModal,
   'JOIN_EVENT': JoinEventModal,
+  'ACCOUNT_MODERATION': AccountModerationModal,
 };
 
 export default class ModalRoot extends React.PureComponent {
diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
new file mode 100644
index 000000000..8f91e1d3c
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -0,0 +1,190 @@
+import React, { ChangeEventHandler, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import {
+  verifyUser,
+  unverifyUser,
+  suggestUsers,
+  unsuggestUsers,
+  setBadges as saveBadges,
+} from 'soapbox/actions/admin';
+import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
+import snackbar from 'soapbox/actions/snackbar';
+import Account from 'soapbox/components/account';
+import List, { ListItem } from 'soapbox/components/list';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import { Button, Text, HStack, Modal, Stack, Toggle } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+import { isLocal } from 'soapbox/utils/accounts';
+import { getBadges } from 'soapbox/utils/badges';
+
+import BadgeInput from './badge-input';
+import StaffRolePicker from './staff-role-picker';
+
+const getAccount = makeGetAccount();
+
+const messages = defineMessages({
+  userVerified: { id: 'admin.users.user_verified_message', defaultMessage: '@{acct} was verified' },
+  userUnverified: { id: 'admin.users.user_unverified_message', defaultMessage: '@{acct} was unverified' },
+  setDonorSuccess: { id: 'admin.users.set_donor_message', defaultMessage: '@{acct} was set as a donor' },
+  removeDonorSuccess: { id: 'admin.users.remove_donor_message', defaultMessage: '@{acct} was removed as a donor' },
+  userSuggested: { id: 'admin.users.user_suggested_message', defaultMessage: '@{acct} was suggested' },
+  userUnsuggested: { id: 'admin.users.user_unsuggested_message', defaultMessage: '@{acct} was unsuggested' },
+  badgesSaved: { id: 'admin.users.badges_saved_message', defaultMessage: 'Custom badges updated.' },
+});
+
+interface IAccountModerationModal {
+  /** Action to close the modal. */
+  onClose: (type: string) => void,
+  /** ID of the account to moderate. */
+  accountId: string,
+}
+
+/** Moderator actions against accounts. */
+const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, accountId }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const ownAccount = useOwnAccount();
+  const features = useFeatures();
+  const account = useAppSelector(state => getAccount(state, accountId));
+
+  const accountBadges = account ? getBadges(account) : [];
+  const [badges, setBadges] = useState<string[]>(accountBadges);
+
+  const handleClose = () => onClose('ACCOUNT_MODERATION');
+
+  if (!account || !ownAccount) {
+    return (
+      <Modal onClose={handleClose}>
+        <MissingIndicator />
+      </Modal>
+    );
+  }
+
+  const handleAdminFE = () => {
+    window.open(`/pleroma/admin/#/users/${account.id}/`, '_blank');
+  };
+
+  const handleVerifiedChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    const { checked } = e.target;
+
+    const message = checked ? messages.userVerified : messages.userUnverified;
+    const action = checked ? verifyUser : unverifyUser;
+
+    dispatch(action(account.id))
+      .then(() => dispatch(snackbar.success(intl.formatMessage(message, { acct: account.acct }))))
+      .catch(() => {});
+  };
+
+  const handleSuggestedChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    const { checked } = e.target;
+
+    const message = checked ? messages.userSuggested : messages.userUnsuggested;
+    const action = checked ? suggestUsers : unsuggestUsers;
+
+    dispatch(action([account.id]))
+      .then(() => dispatch(snackbar.success(intl.formatMessage(message, { acct: account.acct }))))
+      .catch(() => {});
+  };
+
+  const handleDeactivate = () => {
+    dispatch(deactivateUserModal(intl, account.id));
+  };
+
+  const handleDelete = () => {
+    dispatch(deleteUserModal(intl, account.id));
+  };
+
+  const handleSaveBadges = () => {
+    dispatch(saveBadges(account.id, accountBadges, badges))
+      .then(() => dispatch(snackbar.success(intl.formatMessage(messages.badgesSaved))))
+      .catch(() => {});
+  };
+
+  return (
+    <Modal
+      title={<FormattedMessage id='account_moderation_modal.title' defaultMessage='Moderate @{acct}' values={{ acct: account.acct }} />}
+      onClose={handleClose}
+    >
+      <Stack space={4}>
+        <div className='p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800'>
+          <Account
+            account={account}
+            showProfileHoverCard={false}
+            withLinkToProfile={false}
+            hideActions
+          />
+        </div>
+
+        <List>
+          {(ownAccount.admin && isLocal(account)) && (
+            <ListItem label={<FormattedMessage id='account_moderation_modal.fields.account_role' defaultMessage='Staff level' />}>
+              <div className='w-auto'>
+                <StaffRolePicker account={account} />
+              </div>
+            </ListItem>
+          )}
+
+          <ListItem label={<FormattedMessage id='account_moderation_modal.fields.verified' defaultMessage='Verified account' />}>
+            <Toggle
+              checked={account.verified}
+              onChange={handleVerifiedChange}
+            />
+          </ListItem>
+
+          {features.suggestionsV2 && (
+            <ListItem label={<FormattedMessage id='account_moderation_modal.fields.suggested' defaultMessage='Suggested in people to follow' />}>
+              <Toggle
+                checked={account.getIn(['pleroma', 'is_suggested']) === true}
+                onChange={handleSuggestedChange}
+              />
+            </ListItem>
+          )}
+
+          <ListItem label={<FormattedMessage id='account_moderation_modal.fields.badges' defaultMessage='Custom badges' />}>
+            <div className='flex-grow'>
+              <HStack className='w-full' alignItems='center' space={2}>
+                <BadgeInput badges={badges} onChange={setBadges} />
+                <Button onClick={handleSaveBadges}>
+                  <FormattedMessage id='save' defaultMessage='Save' />
+                </Button>
+              </HStack>
+            </div>
+          </ListItem>
+        </List>
+
+        <List>
+          <ListItem
+            label={<FormattedMessage id='account_moderation_modal.fields.deactivate' defaultMessage='Deactivate account' />}
+            onClick={handleDeactivate}
+          />
+
+          <ListItem
+            label={<FormattedMessage id='account_moderation_modal.fields.delete' defaultMessage='Delete account' />}
+            onClick={handleDelete}
+          />
+        </List>
+
+        <Text theme='subtle' size='xs'>
+          <FormattedMessage
+            id='account_moderation_modal.info.id'
+            defaultMessage='ID: {id}'
+            values={{ id: account.id }}
+          />
+        </Text>
+
+        {features.adminFE && (
+          <HStack justifyContent='center'>
+            <Button icon={require('@tabler/icons/external-link.svg')} size='sm' theme='secondary' onClick={handleAdminFE}>
+              <FormattedMessage id='account_moderation_modal.admin_fe' defaultMessage='Open in AdminFE' />
+            </Button>
+          </HStack>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default AccountModerationModal;
diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/badge-input.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/badge-input.tsx
new file mode 100644
index 000000000..63ef22fad
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/badge-input.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+
+import { TagInput } from 'soapbox/components/ui';
+import { badgeToTag, tagToBadge } from 'soapbox/utils/badges';
+
+const messages = defineMessages({
+  placeholder: { id: 'badge_input.placeholder', defaultMessage: 'Enter a badge…' },
+});
+
+interface IBadgeInput {
+  /** A badge is a tag that begins with `badge:` */
+  badges: string[],
+  /** Callback when badges change. */
+  onChange: (badges: string[]) => void,
+}
+
+/** Manages user badges. */
+const BadgeInput: React.FC<IBadgeInput> = ({ badges, onChange }) => {
+  const intl = useIntl();
+  const tags = badges.map(badgeToTag);
+
+  const handleTagsChange = (tags: string[]) => {
+    const badges = tags.map(tagToBadge);
+    onChange(badges);
+  };
+
+  return (
+    <TagInput
+      tags={tags}
+      onChange={handleTagsChange}
+      placeholder={intl.formatMessage(messages.placeholder)}
+    />
+  );
+};
+
+export default BadgeInput;
\ No newline at end of file
diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
new file mode 100644
index 000000000..30502d427
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import { defineMessages, MessageDescriptor, useIntl } from 'react-intl';
+
+import { setRole } from 'soapbox/actions/admin';
+import snackbar from 'soapbox/actions/snackbar';
+import { SelectDropdown } from 'soapbox/features/forms';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+/** Staff role. */
+type AccountRole = 'user' | 'moderator' | 'admin';
+
+/** Get the highest staff role associated with the account. */
+const getRole = (account: AccountEntity): AccountRole => {
+  if (account.admin) {
+    return 'admin';
+  } else if (account.moderator) {
+    return 'moderator';
+  } else {
+    return 'user';
+  }
+};
+
+const messages = defineMessages({
+  roleUser: { id: 'account_moderation_modal.roles.user', defaultMessage: 'User' },
+  roleModerator: { id: 'account_moderation_modal.roles.moderator', defaultMessage: 'Moderator' },
+  roleAdmin: { id: 'account_moderation_modal.roles.admin', defaultMessage: 'Admin' },
+  promotedToAdmin: { id: 'admin.users.actions.promote_to_admin_message', defaultMessage: '@{acct} was promoted to an admin' },
+  promotedToModerator: { id: 'admin.users.actions.promote_to_moderator_message', defaultMessage: '@{acct} was promoted to a moderator' },
+  demotedToModerator: { id: 'admin.users.actions.demote_to_moderator_message', defaultMessage: '@{acct} was demoted to a moderator' },
+  demotedToUser: { id: 'admin.users.actions.demote_to_user_message', defaultMessage: '@{acct} was demoted to a regular user' },
+});
+
+interface IStaffRolePicker {
+  /** Account whose role to change. */
+  account: AccountEntity,
+}
+
+/** Picker for setting the staff role of an account. */
+const StaffRolePicker: React.FC<IStaffRolePicker> = ({ account }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const roles: Record<AccountRole, string> = useMemo(() => ({
+    user: intl.formatMessage(messages.roleUser),
+    moderator: intl.formatMessage(messages.roleModerator),
+    admin: intl.formatMessage(messages.roleAdmin),
+  }), []);
+
+  const handleRoleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+    const role = e.target.value as AccountRole;
+
+    dispatch(setRole(account.id, role))
+      .then(() => {
+        let message: MessageDescriptor | undefined;
+
+        if (role === 'admin') {
+          message = messages.promotedToAdmin;
+        } else if (role === 'moderator' && account.admin) {
+          message = messages.demotedToModerator;
+        } else if (role === 'moderator') {
+          message = messages.promotedToModerator;
+        } else if (role === 'user') {
+          message = messages.demotedToUser;
+        }
+
+        if (message) {
+          dispatch(snackbar.success(intl.formatMessage(message, { acct: account.acct })));
+        }
+      })
+      .catch(() => {});
+  };
+
+  const accountRole = getRole(account);
+
+  return (
+    <SelectDropdown
+      items={roles}
+      defaultValue={accountRole}
+      onChange={handleRoleChange}
+    />
+  );
+};
+
+export default StaffRolePicker;
\ No newline at end of file
diff --git a/app/soapbox/features/ui/components/profile_info_panel.tsx b/app/soapbox/features/ui/components/profile_info_panel.tsx
index 2c0a9163b..c6c6d084e 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.tsx
+++ b/app/soapbox/features/ui/components/profile_info_panel.tsx
@@ -8,6 +8,8 @@ import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
 import { isLocal } from 'soapbox/utils/accounts';
+import { badgeToTag, getBadges as getAccountBadges } from 'soapbox/utils/badges';
+import { capitalize } from 'soapbox/utils/strings';
 
 import ProfileFamiliarFollowers from './profile_familiar_followers';
 import ProfileStats from './profile_stats';
@@ -52,7 +54,20 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
     }
   };
 
+  const getCustomBadges = (): React.ReactNode[] => {
+    const badges = getAccountBadges(account);
+
+    return badges.map(badge => (
+      <Badge
+        key={badge}
+        slug={badge}
+        title={capitalize(badgeToTag(badge))}
+      />
+    ));
+  };
+
   const getBadges = (): React.ReactNode[] => {
+    const custom = getCustomBadges();
     const staffBadge = getStaffBadge();
     const isPatron = account.getIn(['patron', 'is_patron']) === true;
 
@@ -66,11 +81,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
       badges.push(<Badge slug='patron' title='Patron' key='patron' />);
     }
 
-    if (account.donor) {
-      badges.push(<Badge slug='donor' title='Donor' key='donor' />);
-    }
-
-    return badges;
+    return [...badges, ...custom];
   };
 
   const renderBirthday = (): React.ReactNode => {
diff --git a/app/soapbox/features/ui/components/timeline.tsx b/app/soapbox/features/ui/components/timeline.tsx
index 53d1ad7f8..38c5a4341 100644
--- a/app/soapbox/features/ui/components/timeline.tsx
+++ b/app/soapbox/features/ui/components/timeline.tsx
@@ -25,7 +25,7 @@ const Timeline: React.FC<ITimeline> = ({
   ...rest
 }) => {
   const dispatch = useAppDispatch();
-  const getStatusIds = useCallback(makeGetStatusIds, [])();
+  const getStatusIds = useCallback(makeGetStatusIds(), []);
 
   const lastStatusId = useAppSelector(state => (state.timelines.get(timelineId)?.items || ImmutableOrderedSet()).last() as string | undefined);
   const statusIds = useAppSelector(state => getStatusIds(state, { type: timelineId }));
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index ba1cca62e..08668b662 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -38,30 +38,6 @@ export function ListTimeline() {
   return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline');
 }
 
-export function GroupTimeline() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline');
-}
-
-export function GroupMembers() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/members');
-}
-
-export function GroupRemovedAccounts() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/removed_accounts');
-}
-
-export function GroupCreate() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/create');
-}
-
-export function GroupEdit() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/edit');
-}
-
-export function Groups() {
-  return import(/* webpackChunkName: "features/groups/index" */'../../groups/index');
-}
-
 export function Lists() {
   return import(/* webpackChunkName: "features/lists" */'../../lists');
 }
@@ -130,6 +106,10 @@ export function ReportModal() {
   return import(/* webpackChunkName: "modals/report-modal/report-modal" */'../components/modals/report-modal/report-modal');
 }
 
+export function AccountModerationModal() {
+  return import(/* webpackChunkName: "modals/account-moderation-modal" */'../components/modals/account-moderation-modal/account-moderation-modal');
+}
+
 export function MediaGallery() {
   return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery');
 }
diff --git a/app/soapbox/features/ui/util/schedule_idle_task.js b/app/soapbox/features/ui/util/schedule_idle_task.js
deleted file mode 100644
index b04d4a8ee..000000000
--- a/app/soapbox/features/ui/util/schedule_idle_task.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// Wrapper to call requestIdleCallback() to schedule low-priority work.
-// See https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API
-// for a good breakdown of the concepts behind this.
-
-import Queue from 'tiny-queue';
-
-const taskQueue = new Queue();
-let runningRequestIdleCallback = false;
-
-function runTasks(deadline) {
-  while (taskQueue.length && deadline.timeRemaining() > 0) {
-    taskQueue.shift()();
-  }
-  if (taskQueue.length) {
-    requestIdleCallback(runTasks);
-  } else {
-    runningRequestIdleCallback = false;
-  }
-}
-
-function scheduleIdleTask(task) {
-  taskQueue.push(task);
-  if (!runningRequestIdleCallback) {
-    runningRequestIdleCallback = true;
-    requestIdleCallback(runTasks);
-  }
-}
-
-export default scheduleIdleTask;
diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index e5eb400b7..1d6b55ff6 100644
--- a/app/soapbox/features/video/index.js
+++ b/app/soapbox/features/video/index.js
@@ -497,7 +497,7 @@ class Video extends React.PureComponent {
   }
 
   render() {
-    const { src, inline, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio, blurhash } = this.props;
+    const { src, inline, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio, blurhash } = this.props;
     const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
     const progress = (currentTime / duration) * 100;
     const playerStyle = {};
@@ -614,8 +614,6 @@ class Video extends React.PureComponent {
 
             <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={this.toggleReveal}><Icon src={require('@tabler/icons/eye-off.svg')} /></button>}
-              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon src={require('@tabler/icons/maximize.svg')} /></button>}
-              {/* onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon src={require('@tabler/icons/x.svg')} /></button> */}
               <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon src={fullscreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')} /></button>
             </div>
           </div>
diff --git a/app/soapbox/hooks/__mocks__/resize-observer.ts b/app/soapbox/hooks/__mocks__/resize-observer.ts
new file mode 100644
index 000000000..c75e292ea
--- /dev/null
+++ b/app/soapbox/hooks/__mocks__/resize-observer.ts
@@ -0,0 +1,25 @@
+let listener: ((rect: any) => void) | undefined = undefined;
+const mockDisconnect = jest.fn();
+
+class ResizeObserver {
+
+  constructor(ls: any) {
+    listener = ls;
+  }
+
+  observe() {
+    // do nothing
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    mockDisconnect();
+  }
+
+}
+
+// eslint-disable-next-line compat/compat
+(window as any).ResizeObserver = ResizeObserver;
+
+export { ResizeObserver as default, listener, mockDisconnect };
\ No newline at end of file
diff --git a/app/soapbox/hooks/__tests__/useDimensions.test.ts b/app/soapbox/hooks/__tests__/useDimensions.test.ts
index 78524ad77..4e97fdef3 100644
--- a/app/soapbox/hooks/__tests__/useDimensions.test.ts
+++ b/app/soapbox/hooks/__tests__/useDimensions.test.ts
@@ -1,21 +1,13 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 
+import { listener, mockDisconnect } from '../__mocks__/resize-observer';
 import { useDimensions } from '../useDimensions';
 
-let listener: ((rect: any) => void) | undefined = undefined;
-
-(window as any).ResizeObserver = class ResizeObserver {
-
-  constructor(ls: any) {
-    listener = ls;
-  }
-
-  observe() {}
-  disconnect() {}
-
-};
-
 describe('useDimensions()', () => {
+  beforeEach(() => {
+    mockDisconnect.mockClear();
+  });
+
   it('defaults to 0', () => {
     const { result } = renderHook(() => useDimensions());
 
@@ -56,16 +48,6 @@ describe('useDimensions()', () => {
   });
 
   it('disconnects on unmount', () => {
-    const disconnect = jest.fn();
-    (window as any).ResizeObserver = class ResizeObserver {
-
-      observe() {}
-      disconnect() {
-        disconnect();
-      }
-
-    };
-
     const { result, unmount } = renderHook(() => useDimensions());
 
     act(() => {
@@ -73,8 +55,8 @@ describe('useDimensions()', () => {
       (result.current[1] as any)(div);
     });
 
-    expect(disconnect).toHaveBeenCalledTimes(0);
+    expect(mockDisconnect).toHaveBeenCalledTimes(0);
     unmount();
-    expect(disconnect).toHaveBeenCalledTimes(1);
+    expect(mockDisconnect).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/app/soapbox/hooks/useDimensions.ts b/app/soapbox/hooks/useDimensions.ts
index 2a265c4a6..bf7fc78b8 100644
--- a/app/soapbox/hooks/useDimensions.ts
+++ b/app/soapbox/hooks/useDimensions.ts
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
 
 type UseDimensionsRect = { width: number, height: number };
 type UseDimensionsResult = [Element | null, any, any]
@@ -14,7 +15,7 @@ const useDimensions = (): UseDimensionsResult => {
 
   const observer = useMemo(
     () =>
-      new (window as any).ResizeObserver((entries: any) => {
+      new ResizeObserver((entries: any) => {
         if (entries[0]) {
           const { width, height } = entries[0].contentRect;
           setRect({ width, height });
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index cded97f64..7ce350976 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -974,7 +974,7 @@
   "soapbox_config.single_user_mode_profile_label": "Main user handle",
   "soapbox_config.verified_can_edit_name_label": "Allow verified users to edit their own display name.",
   "status.actions.more": "More",
-  "status.admin_account": "Open moderation interface for @{name}",
+  "status.admin_account": "Moderate @{name}",
   "status.admin_status": "Open this post in the moderation interface",
   "status.block": "Block @{name}",
   "status.bookmark": "Bookmark",
diff --git a/app/soapbox/normalizers/account.ts b/app/soapbox/normalizers/account.ts
index 37f42ab8f..46d2a632f 100644
--- a/app/soapbox/normalizers/account.ts
+++ b/app/soapbox/normalizers/account.ts
@@ -56,7 +56,6 @@ export const AccountRecord = ImmutableRecord({
   admin: false,
   display_name_html: '',
   domain: '',
-  donor: false,
   moderator: false,
   note_emojified: '',
   note_plain: '',
@@ -155,9 +154,11 @@ const normalizeVerified = (account: ImmutableMap<string, any>) => {
   });
 };
 
-/** Get donor status from tags. */
+/** Upgrade legacy donor tag to a badge. */
 const normalizeDonor = (account: ImmutableMap<string, any>) => {
-  return account.set('donor', getTags(account).includes('donor'));
+  const tags = getTags(account);
+  const updated = tags.includes('donor') ? tags.push('badge:donor') : tags;
+  return account.setIn(['pleroma', 'tags'], updated);
 };
 
 /** Normalize Fedibird/Truth Social/Pleroma location */
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index a471401c5..0e6b5c280 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -175,6 +175,19 @@ const normalizeFooterLinks = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap
   return soapboxConfig.setIn(path, items);
 };
 
+/** Migrate legacy ads config. */
+const normalizeAdsAlgorithm = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
+  const interval = soapboxConfig.getIn(['extensions', 'ads', 'interval']);
+  const algorithm = soapboxConfig.getIn(['extensions', 'ads', 'algorithm']);
+
+  if (typeof interval === 'number' && !algorithm) {
+    const result = fromJS(['linear', { interval }]);
+    return soapboxConfig.setIn(['extensions', 'ads', 'algorithm'], result);
+  } else {
+    return soapboxConfig;
+  }
+};
+
 export const normalizeSoapboxConfig = (soapboxConfig: Record<string, any>) => {
   return SoapboxConfigRecord(
     ImmutableMap(fromJS(soapboxConfig)).withMutations(soapboxConfig => {
@@ -186,6 +199,7 @@ export const normalizeSoapboxConfig = (soapboxConfig: Record<string, any>) => {
       maybeAddMissingColors(soapboxConfig);
       normalizeCryptoAddresses(soapboxConfig);
       normalizeAds(soapboxConfig);
+      normalizeAdsAlgorithm(soapboxConfig);
     }),
   );
 };
diff --git a/app/soapbox/pages/group_page.js b/app/soapbox/pages/group_page.js
deleted file mode 100644
index c148c148c..000000000
--- a/app/soapbox/pages/group_page.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import { fetchGroup } from '../actions/groups';
-import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import GroupPanel from '../features/groups/timeline/components/panel';
-import HeaderContainer from '../features/groups/timeline/containers/header_container';
-import LinkFooter from '../features/ui/components/link_footer';
-import PromoPanel from '../features/ui/components/promo_panel';
-import WhoToFollowPanel from '../features/ui/components/who-to-follow-panel';
-
-const mapStateToProps = (state, { params: { id } }) => ({
-  group: state.getIn(['groups', id]),
-  relationships: state.getIn(['group_relationships', id]),
-});
-
-export default @connect(mapStateToProps)
-class GroupPage extends ImmutablePureComponent {
-
-    static propTypes = {
-      group: ImmutablePropTypes.map,
-      relationships: ImmutablePropTypes.map,
-      dispatch: PropTypes.func.isRequired,
-    };
-
-    componentDidMount() {
-      const { params: { id }, dispatch } = this.props;
-
-      dispatch(fetchGroup(id));
-    }
-
-    render() {
-      const { children, group, relationships } = this.props;
-
-      return (
-        <div className='page group'>
-          {group && <HeaderContainer groupId={group.get('id')} />}
-
-          <div className='page__columns'>
-            <div className='columns-area__panels'>
-              <div className='columns-area__panels__pane columns-area__panels__pane--left'>
-                <div className='columns-area__panels__pane__inner'>
-                  {group && relationships &&
-                  <GroupPanel
-                    group={group}
-                    relationships={relationships}
-                  />}
-
-                  <PromoPanel />
-                  <LinkFooter />
-                </div>
-              </div>
-
-              <div className='columns-area__panels__main'>
-                <div className='columns-area'>
-                  {children}
-                </div>
-              </div>
-
-              <div className='columns-area__panels__pane columns-area__panels__pane--right'>
-                <div className='columns-area__panels__pane__inner'>
-                  <GroupSidebarPanel />
-                  <WhoToFollowPanel />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-}
diff --git a/app/soapbox/pages/groups_page.js b/app/soapbox/pages/groups_page.js
deleted file mode 100644
index e11096abf..000000000
--- a/app/soapbox/pages/groups_page.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import LinkFooter from '../features/ui/components/link_footer';
-import PromoPanel from '../features/ui/components/promo_panel';
-import UserPanel from '../features/ui/components/user_panel';
-import WhoToFollowPanel from '../features/ui/components/who-to-follow-panel';
-
-const mapStateToProps = state => {
-  const me = state.get('me');
-  return {
-    account: state.getIn(['accounts', me]),
-  };
-};
-
-export default @connect(mapStateToProps)
-class GroupsPage extends ImmutablePureComponent {
-
-    static propTypes = {
-      account: ImmutablePropTypes.record,
-    };
-
-    render() {
-      const { children } = this.props;
-
-      return (
-        <div className='page'>
-          <div className='page__columns'>
-            <div className='columns-area__panels'>
-
-              <div className='columns-area__panels__pane columns-area__panels__pane--left'>
-                <div className='columns-area__panels__pane__inner'>
-                  <UserPanel />
-                  <PromoPanel />
-                  <LinkFooter />
-                </div>
-              </div>
-
-              <div className='columns-area__panels__main'>
-                <div className='columns-area'>
-                  {children}
-                </div>
-              </div>
-
-              <div className='columns-area__panels__pane columns-area__panels__pane--right'>
-                <div className='columns-area__panels__pane__inner'>
-                  <GroupSidebarPanel />
-                  <WhoToFollowPanel />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-}
diff --git a/app/soapbox/reducers/height_cache.js b/app/soapbox/reducers/height_cache.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/soapbox/reducers/search.ts b/app/soapbox/reducers/search.ts
index eb2c1ed8d..693a4a388 100644
--- a/app/soapbox/reducers/search.ts
+++ b/app/soapbox/reducers/search.ts
@@ -18,6 +18,7 @@ import {
   SEARCH_EXPAND_REQUEST,
   SEARCH_EXPAND_SUCCESS,
   SEARCH_ACCOUNT_SET,
+  SEARCH_RESULTS_CLEAR,
 } from '../actions/search';
 
 import type { AnyAction } from 'redux';
@@ -82,7 +83,7 @@ const paginateResults = (state: State, searchType: SearchFilter, results: APIEnt
         const data = results[searchType];
         // Hashtags are a list of maps. Others are IDs.
         if (searchType === 'hashtags') {
-          return (items as ImmutableOrderedSet<string>).concat(fromJS(data));
+          return (items as ImmutableOrderedSet<string>).concat((fromJS(data) as Record<string, any>).map(normalizeTag));
         } else {
           return (items as ImmutableOrderedSet<string>).concat(toIds(data));
         }
@@ -105,6 +106,13 @@ export default function search(state = ReducerRecord(), action: AnyAction) {
       return state.set('value', action.value);
     case SEARCH_CLEAR:
       return ReducerRecord();
+    case SEARCH_RESULTS_CLEAR:
+      return state.merge({
+        value: '',
+        results: ResultsRecord(),
+        submitted: false,
+        submittedValue: '',
+      });
     case SEARCH_SHOW:
       return state.set('hidden', false);
     case COMPOSE_REPLY:
@@ -123,7 +131,13 @@ export default function search(state = ReducerRecord(), action: AnyAction) {
     case SEARCH_EXPAND_SUCCESS:
       return paginateResults(state, action.searchType, action.results, action.searchTerm);
     case SEARCH_ACCOUNT_SET:
-      if (!action.accountId) return state.set('accountId', null);
+      if (!action.accountId) return state.merge({
+        results: ResultsRecord(),
+        submitted: false,
+        submittedValue: '',
+        filter: 'accounts',
+        accountId: null,
+      });
       return ReducerRecord({ accountId: action.accountId, filter: 'statuses' });
     default:
       return state;
diff --git a/app/soapbox/utils/__tests__/badges.test.ts b/app/soapbox/utils/__tests__/badges.test.ts
new file mode 100644
index 000000000..1f3349fcc
--- /dev/null
+++ b/app/soapbox/utils/__tests__/badges.test.ts
@@ -0,0 +1,43 @@
+import { normalizeAccount } from 'soapbox/normalizers';
+
+import {
+  tagToBadge,
+  badgeToTag,
+  filterBadges,
+  getTagDiff,
+  getBadges,
+} from '../badges';
+
+import type { Account } from 'soapbox/types/entities';
+
+test('tagToBadge', () => {
+  expect(tagToBadge('yolo')).toEqual('badge:yolo');
+});
+
+test('badgeToTag', () => {
+  expect(badgeToTag('badge:yolo')).toEqual('yolo');
+  expect(badgeToTag('badge:badge:')).toEqual('badge:');
+});
+
+test('filterBadges', () => {
+  const tags = ['one', 'badge:two', 'badge:three', 'four'];
+  const badges = ['badge:two', 'badge:three'];
+  expect(filterBadges(tags)).toEqual(badges);
+});
+
+test('getTagDiff', () => {
+  const oldTags = ['one', 'two', 'three'];
+  const newTags = ['three', 'four', 'five'];
+
+  const expected = {
+    added: ['four', 'five'],
+    removed: ['one', 'two'],
+  };
+
+  expect(getTagDiff(oldTags, newTags)).toEqual(expected);
+});
+
+test('getBadges', () => {
+  const account = normalizeAccount({ id: '1', pleroma: { tags: ['a', 'b', 'badge:c'] } }) as Account;
+  expect(getBadges(account)).toEqual(['badge:c']);
+});
\ No newline at end of file
diff --git a/app/soapbox/utils/accounts.ts b/app/soapbox/utils/accounts.ts
index b2ed45d39..3a1cadbe9 100644
--- a/app/soapbox/utils/accounts.ts
+++ b/app/soapbox/utils/accounts.ts
@@ -1,5 +1,3 @@
-import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
-
 import type { Account } from 'soapbox/types/entities';
 
 const getDomainFromURL = (account: Account): string => {
@@ -28,12 +26,6 @@ export const getAcct = (account: Account, displayFqn: boolean): string => (
   displayFqn === true ? account.fqn : account.acct
 );
 
-export const getFollowDifference = (state: ImmutableMap<string, any>, accountId: string, type: string): number => {
-  const items: any = state.getIn(['user_lists', type, accountId, 'items'], ImmutableOrderedSet());
-  const counter: number = Number(state.getIn(['accounts_counters', accountId, `${type}_count`], 0));
-  return Math.max(counter - items.size, 0);
-};
-
 export const isLocal = (account: Account): boolean => {
   const domain: string = account.acct.split('@')[1];
   return domain === undefined ? true : false;
diff --git a/app/soapbox/utils/badges.ts b/app/soapbox/utils/badges.ts
new file mode 100644
index 000000000..139537f6f
--- /dev/null
+++ b/app/soapbox/utils/badges.ts
@@ -0,0 +1,47 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+
+import type { Account } from 'soapbox/types/entities';
+
+/** Convert a plain tag into a badge. */
+const tagToBadge = (tag: string) => `badge:${tag}`;
+
+/** Convert a badge into a plain tag. */
+const badgeToTag = (badge: string) => badge.replace(/^badge:/, '');
+
+/** Difference between an old and new set of tags. */
+interface TagDiff {
+  /** New tags that were added. */
+  added: string[],
+  /** Old tags that were removed. */
+  removed: string[],
+}
+
+/** Returns the differences between two sets of tags. */
+const getTagDiff = (oldTags: string[], newTags: string[]): TagDiff => {
+  const o = ImmutableOrderedSet(oldTags);
+  const n = ImmutableOrderedSet(newTags);
+
+  return {
+    added: n.subtract(o).toArray(),
+    removed: o.subtract(n).toArray(),
+  };
+};
+
+/** Returns only tags which are badges. */
+const filterBadges = (tags: string[]): string[] => {
+  return tags.filter(tag => tag.startsWith('badge:'));
+};
+
+/** Get badges from an account. */
+const getBadges = (account: Account) => {
+  const tags = Array.from(account?.getIn(['pleroma', 'tags']) as Iterable<string> || []);
+  return filterBadges(tags);
+};
+
+export {
+  tagToBadge,
+  badgeToTag,
+  filterBadges,
+  getTagDiff,
+  getBadges,
+};
\ No newline at end of file
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 78908b04f..f220f5e67 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -142,6 +142,12 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     accountWebsite: v.software === TRUTHSOCIAL,
 
+    /**
+     * An additional moderator interface is available on the domain.
+     * @see /pleroma/admin
+     */
+    adminFE: v.software === PLEROMA,
+
     /**
      * Can display announcements set by admins.
      * @see GET /api/v1/announcements
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 9db26912a..9384c94f2 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -112,3 +112,20 @@ noscript {
 div[data-viewport-type="window"] {
   position: static !important;
 }
+
+// Instance HTML from the API.
+.instance-description {
+  a {
+    @apply underline;
+  }
+
+  b,
+  strong {
+    @apply font-bold;
+  }
+
+  i,
+  em {
+    @apply italic;
+  }
+}
diff --git a/package.json b/package.json
index 6c75a08d1..389bbb379 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "@types/react-swipeable-views": "^0.13.1",
     "@types/react-toggle": "^4.0.3",
     "@types/redux-mock-store": "^1.0.3",
+    "@types/seedrandom": "^3.0.2",
     "@types/semver": "^7.3.9",
     "@types/uuid": "^8.3.4",
     "array-includes": "^3.1.5",
@@ -181,8 +182,10 @@
     "redux-thunk": "^2.2.0",
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.20.3",
     "sass-loader": "^13.0.0",
+    "seedrandom": "^3.0.5",
     "semver": "^7.3.2",
     "stringz": "^2.0.0",
     "substring-trie": "^1.0.2",
diff --git a/yarn.lock b/yarn.lock
index 661d96352..69a7f05b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2841,6 +2841,11 @@
   dependencies:
     schema-utils "*"
 
+"@types/seedrandom@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/seedrandom/-/seedrandom-3.0.2.tgz#7f30db28221067a90b02e73ffd46b6685b18df1a"
+  integrity sha512-YPLqEOo0/X8JU3rdiq+RgUKtQhQtrppE766y7vMTu8dGML7TVtZNiiiaC/hhU9Zqw9UYopXxhuWWENclMVBwKQ==
+
 "@types/semver@^7.3.9":
   version "7.3.9"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.9.tgz#152c6c20a7688c30b967ec1841d31ace569863fc"
@@ -10461,6 +10466,11 @@ scroll-behavior@^0.9.1:
     dom-helpers "^3.4.0"
     invariant "^2.2.4"
 
+seedrandom@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"
+  integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"