diff --git a/.eslintrc.js b/.eslintrc.js
index bfe92311d4..c140fa5245 100644
Binary files a/.eslintrc.js and b/.eslintrc.js differ
diff --git a/app/soapbox/actions/__tests__/statuses-test.js b/app/soapbox/actions/__tests__/statuses-test.js
index 463b87437a..b001754015 100644
Binary files a/app/soapbox/actions/__tests__/statuses-test.js and b/app/soapbox/actions/__tests__/statuses-test.js differ
diff --git a/app/soapbox/api.ts b/app/soapbox/api.ts
index 34ed699f84..05d08b7688 100644
--- a/app/soapbox/api.ts
+++ b/app/soapbox/api.ts
@@ -11,8 +11,7 @@ import { createSelector } from 'reselect';
 
 import * as BuildConfig from 'soapbox/build_config';
 import { RootState } from 'soapbox/store';
-import { getAccessToken, getAppToken, parseBaseURL } from 'soapbox/utils/auth';
-import { isURL } from 'soapbox/utils/auth';
+import { getAccessToken, getAppToken, isURL, parseBaseURL } from 'soapbox/utils/auth';
 
 /**
  Parse Link headers, mostly for pagination.
diff --git a/app/soapbox/components/__tests__/quoted-status.test.tsx b/app/soapbox/components/__tests__/quoted-status.test.tsx
new file mode 100644
index 0000000000..208a913b2a
--- /dev/null
+++ b/app/soapbox/components/__tests__/quoted-status.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { render, screen, rootState } from '../../jest/test-helpers';
+import { normalizeStatus, normalizeAccount } from '../../normalizers';
+import QuotedStatus from '../quoted-status';
+
+describe('<QuotedStatus />', () => {
+  it('renders content', () => {
+    const account = normalizeAccount({
+      id: '1',
+      acct: 'alex',
+    });
+
+    const status = normalizeStatus({
+      id: '1',
+      account,
+      content: 'hello world',
+      contentHtml: 'hello world',
+    });
+
+    const state = rootState.setIn(['accounts', '1', account]);
+
+    render(<QuotedStatus status={status} />, null, state);
+    screen.getByText(/hello world/i);
+    expect(screen.getByTestId('quoted-status')).toHaveTextContent(/hello world/i);
+  });
+});
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 44b08a3df4..5e528d4be0 100644
Binary files a/app/soapbox/components/media_gallery.js and b/app/soapbox/components/media_gallery.js differ
diff --git a/app/soapbox/features/status/components/quoted_status.tsx b/app/soapbox/components/quoted-status.tsx
similarity index 85%
rename from app/soapbox/features/status/components/quoted_status.tsx
rename to app/soapbox/components/quoted-status.tsx
index bf8069aa8d..5d6eb526e2 100644
--- a/app/soapbox/features/status/components/quoted_status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -1,11 +1,13 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import StatusMedia from 'soapbox/components/status-media';
 import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
+import { useSettings } from 'soapbox/hooks';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -27,6 +29,11 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   const intl = useIntl();
   const history = useHistory();
 
+  const settings = useSettings();
+  const displayMedia = settings.get('displayMedia');
+
+  const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
+
   const handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!status) return;
     const account = status.account as AccountEntity;
@@ -44,6 +51,10 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
     }
   };
 
+  const handleToggleMediaVisibility = () => {
+    setShowMedia(!showMedia);
+  };
+
   const renderReplyMentions = () => {
     if (!status?.in_reply_to_id) {
       return null;
@@ -113,6 +124,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
   return (
     <Stack
+      data-testid='quoted-status'
       space={2}
       className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-slate-700 cursor-pointer', {
         'hover:bg-gray-50 dark:hover:bg-slate-700': !compose,
@@ -135,7 +147,12 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
         dangerouslySetInnerHTML={{ __html: status.contentHtml }}
       />
 
-      <StatusMedia status={status} />
+      <StatusMedia
+        status={status}
+        muted={compose}
+        showMedia={showMedia}
+        onToggleVisibility={handleToggleMediaVisibility}
+      />
     </Stack>
   );
 };
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx
index 7d47baa470..c53ec0b407 100644
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@@ -4,8 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
 
-import { logOut, switchAccount } from 'soapbox/actions/auth';
-import { fetchOwnAccounts } from 'soapbox/actions/auth';
+import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
 import { getSettings } from 'soapbox/actions/settings';
 import { closeSidebar } from 'soapbox/actions/sidebar';
 import Account from 'soapbox/components/account';
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 2b1325a60d..4389b1fc19 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -8,6 +8,7 @@ import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 import Icon from 'soapbox/components/icon';
 import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
@@ -50,16 +51,6 @@ export const textForScreenReader = (intl: IntlShape, status: StatusEntity, reblo
   return values.join(', ');
 };
 
-export const defaultMediaVisibility = (status: StatusEntity, displayMedia: string): boolean => {
-  if (!status) return false;
-
-  if (status.reblog && typeof status.reblog === 'object') {
-    status = status.reblog;
-  }
-
-  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
-};
-
 interface IStatus extends RouteComponentProps {
   id?: string,
   contextType?: string,
@@ -431,7 +422,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
           </div>
         );
       } else {
-        quote = <QuotedStatus statusId={status.quote} />;
+        quote = <QuotedStatus statusId={status.quote as string} />;
       }
     }
 
diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index f508526984..dbb78b8d74 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
+import { openModal } from 'soapbox/actions/modals';
 import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
 import StatusActionButton from 'soapbox/components/status-action-button';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
@@ -13,8 +14,6 @@ import { isUserTouching } from 'soapbox/is_mobile';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { openModal } from '../actions/modals';
-
 import type { History } from 'history';
 import type { AnyAction, Dispatch } from 'redux';
 import type { Menu } from 'soapbox/components/dropdown_menu';
diff --git a/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx b/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx
new file mode 100644
index 0000000000..5fe6ca9d69
--- /dev/null
+++ b/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx
@@ -0,0 +1,83 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { queryAllByRole, render, screen } from '../../../../jest/test-helpers';
+import Datepicker from '../datepicker';
+
+describe('<Datepicker />', () => {
+  it('defaults to the current date', () => {
+    const handler = jest.fn();
+    render(<Datepicker onChange={handler} />);
+    const today = new Date();
+
+    expect(screen.getByTestId('datepicker-month')).toHaveValue(String(today.getMonth()));
+    expect(screen.getByTestId('datepicker-day')).toHaveValue(String(today.getDate()));
+    expect(screen.getByTestId('datepicker-year')).toHaveValue(String(today.getFullYear()));
+  });
+
+  it('changes number of days based on selected month and year', async() => {
+    const handler = jest.fn();
+    render(<Datepicker onChange={handler} />);
+
+    await userEvent.selectOptions(
+      screen.getByTestId('datepicker-month'),
+      screen.getByRole('option', { name: 'February' }),
+    );
+
+    await userEvent.selectOptions(
+      screen.getByTestId('datepicker-year'),
+      screen.getByRole('option', { name: '2020' }),
+    );
+
+    let daySelect: HTMLElement;
+    daySelect = document.querySelector('[data-testid="datepicker-day"]');
+    expect(queryAllByRole(daySelect, 'option')).toHaveLength(29);
+
+    await userEvent.selectOptions(
+      screen.getByTestId('datepicker-year'),
+      screen.getByRole('option', { name: '2021' }),
+    );
+
+    daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
+    expect(queryAllByRole(daySelect, 'option')).toHaveLength(28);
+  });
+
+  it('ranges from the current year to 120 years ago', () => {
+    const handler = jest.fn();
+    render(<Datepicker onChange={handler} />);
+    const today = new Date();
+
+    const yearSelect = document.querySelector('[data-testid="datepicker-year"]') as HTMLElement;
+    expect(queryAllByRole(yearSelect, 'option')).toHaveLength(121);
+    expect(queryAllByRole(yearSelect, 'option')[0]).toHaveValue(String(today.getFullYear()));
+    expect(queryAllByRole(yearSelect, 'option')[120]).toHaveValue(String(today.getFullYear() - 120));
+  });
+
+  it('calls the onChange function when the inputs change', async() => {
+    const handler = jest.fn();
+    render(<Datepicker onChange={handler} />);
+
+    expect(handler.mock.calls.length).toEqual(1);
+
+    await userEvent.selectOptions(
+      screen.getByTestId('datepicker-month'),
+      screen.getByRole('option', { name: 'February' }),
+    );
+
+    expect(handler.mock.calls.length).toEqual(2);
+
+    await userEvent.selectOptions(
+      screen.getByTestId('datepicker-year'),
+      screen.getByRole('option', { name: '2020' }),
+    );
+
+    expect(handler.mock.calls.length).toEqual(3);
+
+    await userEvent.selectOptions(
+      screen.getByTestId('datepicker-day'),
+      screen.getByRole('option', { name: '5' }),
+    );
+
+    expect(handler.mock.calls.length).toEqual(4);
+  });
+});
diff --git a/app/soapbox/components/ui/datepicker/datepicker.tsx b/app/soapbox/components/ui/datepicker/datepicker.tsx
new file mode 100644
index 0000000000..3c3c9b8e25
--- /dev/null
+++ b/app/soapbox/components/ui/datepicker/datepicker.tsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import Select from '../select/select';
+import Stack from '../stack/stack';
+import Text from '../text/text';
+
+const getDaysInMonth = (month: number, year: number) => new Date(year, month + 1, 0).getDate();
+const currentYear = new Date().getFullYear();
+
+interface IDatepicker {
+  onChange(date: Date): void
+}
+
+/**
+ * Datepicker that allows a user to select month, day, and year.
+ */
+const Datepicker = ({ onChange }: IDatepicker) => {
+  const intl = useIntl();
+
+  const [month, setMonth] = useState<number>(new Date().getMonth());
+  const [day, setDay] = useState<number>(new Date().getDate());
+  const [year, setYear] = useState<number>(2022);
+
+  const numberOfDays = useMemo(() => {
+    return getDaysInMonth(month, year);
+  }, [month, year]);
+
+  useEffect(() => {
+    onChange(new Date(year, month, day));
+  }, [month, day, year]);
+
+  return (
+    <div className='grid grid-cols-1 gap-y-2 gap-x-2 sm:grid-cols-3'>
+      <div className='sm:col-span-1'>
+        <Stack>
+          <Text size='sm' weight='medium' theme='muted'>
+            <FormattedMessage id='datepicker.month' defaultMessage='Month' />
+          </Text>
+
+          <Select
+            value={month}
+            onChange={(event) => setMonth(Number(event.target.value))}
+            data-testid='datepicker-month'
+          >
+            {[...Array(12)].map((_, idx) => (
+              <option key={idx} value={idx}>
+                {intl.formatDate(new Date(year, idx, 1), { month: 'long' })}
+              </option>
+            ))}
+          </Select>
+        </Stack>
+      </div>
+
+      <div className='sm:col-span-1'>
+        <Stack>
+          <Text size='sm' weight='medium' theme='muted'>
+            <FormattedMessage id='datepicker.day' defaultMessage='Day' />
+          </Text>
+
+          <Select
+            value={day}
+            onChange={(event) => setDay(Number(event.target.value))}
+            data-testid='datepicker-day'
+          >
+            {[...Array(numberOfDays)].map((_, idx) => (
+              <option key={idx} value={idx + 1}>{idx + 1}</option>
+            ))}
+          </Select>
+        </Stack>
+      </div>
+
+      <div className='sm:col-span-1'>
+        <Stack>
+          <Text size='sm' weight='medium' theme='muted'>
+            <FormattedMessage id='datepicker.year' defaultMessage='Year' />
+          </Text>
+
+          <Select
+            value={year}
+            onChange={(event) => setYear(Number(event.target.value))}
+            data-testid='datepicker-year'
+          >
+            {[...Array(121)].map((_, idx) => (
+              <option key={idx} value={currentYear - idx}>{currentYear - idx}</option>
+            ))}
+          </Select>
+        </Stack>
+      </div>
+    </div>
+  );
+};
+
+export default Datepicker;
diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index 75517fc79d..ec0da73e4d 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -8,6 +8,8 @@ import Stack from '../stack/stack';
 interface IFormGroup {
   /** Input label message. */
   labelText?: React.ReactNode,
+  /** Input label tooltip message. */
+  labelTitle?: string,
   /** Input hint message. */
   hintText?: React.ReactNode,
   /** Input errors. */
@@ -16,7 +18,7 @@ interface IFormGroup {
 
 /** Input container with label. Renders the child. */
 const FormGroup: React.FC<IFormGroup> = (props) => {
-  const { children, errors = [], labelText, hintText } = props;
+  const { children, errors = [], labelText, labelTitle, hintText } = props;
   const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []);
   const inputChildren = React.Children.toArray(children);
   const hasError = errors?.length > 0;
@@ -41,6 +43,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
               htmlFor={formFieldId}
               data-testid='form-group-label'
               className='-mt-0.5 block text-sm font-medium text-gray-700 dark:text-gray-400'
+              title={labelTitle}
             >
               {labelText}
             </label>
@@ -74,6 +77,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
           htmlFor={formFieldId}
           data-testid='form-group-label'
           className='block text-sm font-medium text-gray-700 dark:text-gray-400'
+          title={labelTitle}
         >
           {labelText}
         </label>
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 24324ee02a..27acc184b2 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -4,6 +4,7 @@ export { Card, CardBody, CardHeader, CardTitle } from './card/card';
 export { default as Checkbox } from './checkbox/checkbox';
 export { default as Column } from './column/column';
 export { default as Counter } from './counter/counter';
+export { default as Datepicker } from './datepicker/datepicker';
 export { default as Emoji } from './emoji/emoji';
 export { default as EmojiSelector } from './emoji-selector/emoji-selector';
 export { default as FileInput } from './file-input/file-input';
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index 485b3238c6..f79d71ddd1 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -1,13 +1,17 @@
 import * as React from 'react';
 
+interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  children: Iterable<React.ReactNode>,
+}
+
 /** Multiple-select dropdown. */
-const Select = React.forwardRef<HTMLSelectElement>((props, ref) => {
+const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
   const { children, ...filteredProps } = props;
 
   return (
     <select
       ref={ref}
-      className='pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 sm:text-sm rounded-md'
+      className='w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:text-white sm:text-sm rounded-md disabled:opacity-50'
       {...filteredProps}
     >
       {children}
diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js
index a17fa85e13..18d06c0367 100644
Binary files a/app/soapbox/features/account_gallery/index.js and b/app/soapbox/features/account_gallery/index.js differ
diff --git a/app/soapbox/features/admin/components/latest_accounts_panel.tsx b/app/soapbox/features/admin/components/latest_accounts_panel.tsx
index 804744d5ed..b9eabcde6c 100644
--- a/app/soapbox/features/admin/components/latest_accounts_panel.tsx
+++ b/app/soapbox/features/admin/components/latest_accounts_panel.tsx
@@ -7,8 +7,7 @@ import { fetchUsers } from 'soapbox/actions/admin';
 import compareId from 'soapbox/compare_id';
 import { Widget } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
-import { useAppSelector } from 'soapbox/hooks';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
   title: { id: 'admin.latest_accounts_panel.title', defaultMessage: 'Latest Accounts' },
diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index d73b7208c8..6fa5418bc7 100644
Binary files a/app/soapbox/features/audio/index.js and b/app/soapbox/features/audio/index.js differ
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index ca72f41073..1522363815 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom';
+import { Link, Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
 import SiteLogo from 'soapbox/components/site-logo';
@@ -23,6 +23,7 @@ const messages = defineMessages({
 const AuthLayout = () => {
   const intl = useIntl();
   const history = useHistory();
+  const { search } = useLocation();
 
   const siteTitle = useAppSelector(state => state.instance.title);
   const soapboxConfig = useSoapboxConfig();
@@ -76,7 +77,7 @@ const AuthLayout = () => {
                     <Route path='/invite/:token' component={RegisterInvite} />
 
                     <Redirect from='/auth/password/new' to='/reset-password' />
-                    <Redirect from='/auth/password/edit' to='/edit-password' />
+                    <Redirect from='/auth/password/edit' to={`/edit-password${search}`} />
                   </Switch>
                 </CardBody>
               </Card>
diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index 7232af6e5b..74647c98c4 100644
Binary files a/app/soapbox/features/chats/components/chat_panes.js and b/app/soapbox/features/chats/components/chat_panes.js differ
diff --git a/app/soapbox/features/compose/components/search_results.tsx b/app/soapbox/features/compose/components/search_results.tsx
index 91e7ff2877..0b53ea026f 100644
--- a/app/soapbox/features/compose/components/search_results.tsx
+++ b/app/soapbox/features/compose/components/search_results.tsx
@@ -1,8 +1,6 @@
 import classNames from 'classnames';
-import React from 'react';
-import { useEffect } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { defineMessages } from 'react-intl';
+import React, { useEffect } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { expandSearch, setFilter } from 'soapbox/actions/search';
 import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
diff --git a/app/soapbox/features/compose/components/sensitive-button.tsx b/app/soapbox/features/compose/components/sensitive-button.tsx
new file mode 100644
index 0000000000..e1c7b48bad
--- /dev/null
+++ b/app/soapbox/features/compose/components/sensitive-button.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import { changeComposeSensitivity } from 'soapbox/actions/compose';
+import { FormGroup, Checkbox } from 'soapbox/components/ui';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
+  unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
+});
+
+/** Button to mark own media as sensitive. */
+const SensitiveButton: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const active = useAppSelector(state => state.compose.get('sensitive') === true);
+  const disabled = useAppSelector(state => state.compose.get('spoiler') === true);
+
+  const onClick = () => {
+    dispatch(changeComposeSensitivity());
+  };
+
+  return (
+    <div className='px-2.5 py-1'>
+      <FormGroup
+        labelText={<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />}
+        labelTitle={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+      >
+        <Checkbox
+          name='mark-sensitive'
+          checked={active}
+          onChange={onClick}
+          disabled={disabled}
+        />
+      </FormGroup>
+    </div>
+  );
+};
+
+export default SensitiveButton;
diff --git a/app/soapbox/features/compose/components/upload_form.tsx b/app/soapbox/features/compose/components/upload_form.tsx
index 00e66030c6..ae44d25619 100644
--- a/app/soapbox/features/compose/components/upload_form.tsx
+++ b/app/soapbox/features/compose/components/upload_form.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';
 
-// import SensitiveButtonContainer from '../containers/sensitive_button_container';
+import SensitiveButton from '../components/sensitive-button';
 import UploadProgress from '../components/upload-progress';
 import UploadContainer from '../containers/upload_container';
 
@@ -25,7 +25,7 @@ const UploadForm = () => {
         ))}
       </div>
 
-      {/* {!mediaIds.isEmpty() && <SensitiveButtonContainer />} */}
+      {!mediaIds.isEmpty() && <SensitiveButton />}
     </div>
   );
 };
diff --git a/app/soapbox/features/compose/containers/poll_form_container.js b/app/soapbox/features/compose/containers/poll_form_container.js
index a0b00709d2..04c3b61ee7 100644
Binary files a/app/soapbox/features/compose/containers/poll_form_container.js and b/app/soapbox/features/compose/containers/poll_form_container.js differ
diff --git a/app/soapbox/features/compose/containers/quoted_status_container.js b/app/soapbox/features/compose/containers/quoted_status_container.js
deleted file mode 100644
index c15fa1764b..0000000000
Binary files a/app/soapbox/features/compose/containers/quoted_status_container.js and /dev/null differ
diff --git a/app/soapbox/features/compose/containers/quoted_status_container.tsx b/app/soapbox/features/compose/containers/quoted_status_container.tsx
new file mode 100644
index 0000000000..923ee7baa0
--- /dev/null
+++ b/app/soapbox/features/compose/containers/quoted_status_container.tsx
@@ -0,0 +1,32 @@
+import React 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 status = useAppSelector(state => getStatus(state, { id: state.compose.get('quote') }));
+
+  const onCancel = () => {
+    dispatch(cancelQuoteCompose());
+  };
+
+  if (!status) {
+    return null;
+  }
+
+  return (
+    <QuotedStatus
+      status={status}
+      onCancel={onCancel}
+      compose
+    />
+  );
+};
+
+export default QuotedStatusContainer;
diff --git a/app/soapbox/features/compose/containers/sensitive_button_container.js b/app/soapbox/features/compose/containers/sensitive_button_container.js
deleted file mode 100644
index b28d3c1f7f..0000000000
Binary files a/app/soapbox/features/compose/containers/sensitive_button_container.js and /dev/null differ
diff --git a/app/soapbox/features/compose/containers/upload_container.js b/app/soapbox/features/compose/containers/upload_container.js
index 332f206eec..21b257fc8b 100644
Binary files a/app/soapbox/features/compose/containers/upload_container.js and b/app/soapbox/features/compose/containers/upload_container.js differ
diff --git a/app/soapbox/features/filters/index.js b/app/soapbox/features/filters/index.js
index 00e32d5f03..f3ba428995 100644
Binary files a/app/soapbox/features/filters/index.js and b/app/soapbox/features/filters/index.js differ
diff --git a/app/soapbox/features/groups/removed_accounts/index.js b/app/soapbox/features/groups/removed_accounts/index.js
index a6f0d990bb..5227e0af08 100644
Binary files a/app/soapbox/features/groups/removed_accounts/index.js and b/app/soapbox/features/groups/removed_accounts/index.js differ
diff --git a/app/soapbox/features/list_adder/index.tsx b/app/soapbox/features/list_adder/index.tsx
index 10d7065196..191c71b752 100644
--- a/app/soapbox/features/list_adder/index.tsx
+++ b/app/soapbox/features/list_adder/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
diff --git a/app/soapbox/features/list_editor/index.tsx b/app/soapbox/features/list_editor/index.tsx
index d495f4b2fa..c2a784adc2 100644
--- a/app/soapbox/features/list_editor/index.tsx
+++ b/app/soapbox/features/list_editor/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setupListEditor, resetListEditor } from 'soapbox/actions/lists';
diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index 1f3930c6cd..187c05218d 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -8,8 +8,7 @@ import { deleteList, fetchLists } from 'soapbox/actions/lists';
 import { openModal } from 'soapbox/actions/modals';
 import Icon from 'soapbox/components/icon';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { IconButton, Spinner } from 'soapbox/components/ui';
-import { CardHeader, CardTitle } from 'soapbox/components/ui';
+import { CardHeader, CardTitle, IconButton, Spinner } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import Column from '../ui/components/column';
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 49b1da3af9..26feb4b474 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
-import { defineMessages, FormattedMessage, IntlShape, MessageDescriptor } from 'react-intl';
-import { useIntl } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage, IntlShape, MessageDescriptor } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
diff --git a/app/soapbox/features/notifications/containers/column_settings_container.js b/app/soapbox/features/notifications/containers/column_settings_container.js
index d21733b18a..7e01f2fca7 100644
Binary files a/app/soapbox/features/notifications/containers/column_settings_container.js and b/app/soapbox/features/notifications/containers/column_settings_container.js differ
diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index 1387fd2cfc..640b3d5d2d 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/app/soapbox/features/status/components/detailed-status.tsx
@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl, WrappedComponentProps as IntlProps } from 'react-intl';
-import { FormattedDate } from 'react-intl';
+import { FormattedDate, FormattedMessage, injectIntl, WrappedComponentProps as IntlProps } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
 import StatusMedia from 'soapbox/components/status-media';
@@ -116,7 +115,7 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
           </div>
         );
       } else {
-        quote = <QuotedStatus statusId={status.quote} />;
+        quote = <QuotedStatus statusId={status.quote as string} />;
       }
     }
 
diff --git a/app/soapbox/features/status/containers/quoted_status_container.js b/app/soapbox/features/status/containers/quoted_status_container.js
deleted file mode 100644
index a375b25621..0000000000
Binary files a/app/soapbox/features/status/containers/quoted_status_container.js and /dev/null differ
diff --git a/app/soapbox/features/status/containers/quoted_status_container.tsx b/app/soapbox/features/status/containers/quoted_status_container.tsx
new file mode 100644
index 0000000000..f64ad2255e
--- /dev/null
+++ b/app/soapbox/features/status/containers/quoted_status_container.tsx
@@ -0,0 +1,28 @@
+import React 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 status = useAppSelector(state => getStatus(state, { id: statusId }));
+
+  if (!status) {
+    return null;
+  }
+
+  return (
+    <QuotedStatus
+      status={status}
+    />
+  );
+};
+
+export default QuotedStatusContainer;
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 39d768e9f0..7d569190c4 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -45,17 +45,19 @@ import {
   hideStatus,
   revealStatus,
   editStatus,
+  fetchStatusWithContext,
+  fetchNext,
 } from 'soapbox/actions/statuses';
-import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing_indicator';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { textForScreenReader, defaultMediaVisibility } from 'soapbox/components/status';
+import { textForScreenReader } from 'soapbox/components/status';
 import SubNavigation from 'soapbox/components/sub_navigation';
 import Tombstone from 'soapbox/components/tombstone';
 import { Column, Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
 import { makeGetStatus } from 'soapbox/selectors';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
 
diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index 2522b9f369..cb4181eaa3 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -1,5 +1,4 @@
 import { AxiosError } from 'axios';
-import { Set as ImmutableSet } from 'immutable';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/ui/components/pending_status.tsx b/app/soapbox/features/ui/components/pending_status.tsx
index f4b990fc6f..03853008cd 100644
--- a/app/soapbox/features/ui/components/pending_status.tsx
+++ b/app/soapbox/features/ui/components/pending_status.tsx
@@ -83,7 +83,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
             {status.poll && <PollPreview poll={status.poll} />}
 
-            {status.quote && <QuotedStatus statusId={status.quote} />}
+            {status.quote && <QuotedStatus statusId={status.quote as string} />}
           </div>
 
           {/* TODO */}
diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index f364cee68f..dd2d8a6fc5 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/app/soapbox/features/ui/components/profile-dropdown.tsx
@@ -4,8 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { logOut, switchAccount } from 'soapbox/actions/auth';
-import { fetchOwnAccounts } from 'soapbox/actions/auth';
+import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
 import Account from 'soapbox/components/account';
 import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
diff --git a/app/soapbox/features/ui/components/timeline.tsx b/app/soapbox/features/ui/components/timeline.tsx
index af3ff8e8c1..109fa7dcb0 100644
--- a/app/soapbox/features/ui/components/timeline.tsx
+++ b/app/soapbox/features/ui/components/timeline.tsx
@@ -3,8 +3,7 @@ import { debounce } from 'lodash';
 import React, { useCallback } from 'react';
 import { defineMessages } from 'react-intl';
 
-import { dequeueTimeline } from 'soapbox/actions/timelines';
-import { scrollTopTimeline } from 'soapbox/actions/timelines';
+import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines';
 import ScrollTopButton from 'soapbox/components/scroll-top-button';
 import StatusList, { IStatusList } from 'soapbox/components/status_list';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index c64e26095c..c1057950c5 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -5,7 +5,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { Switch, useHistory, matchPath, Redirect } from 'react-router-dom';
+import { Switch, useHistory, useLocation, matchPath, Redirect } from 'react-router-dom';
 
 import { fetchFollowRequests } from 'soapbox/actions/accounts';
 import { fetchReports, fetchUsers, fetchConfig } from 'soapbox/actions/admin';
@@ -29,13 +29,11 @@ import AdminPage from 'soapbox/pages/admin_page';
 import DefaultPage from 'soapbox/pages/default_page';
 // import GroupsPage from 'soapbox/pages/groups_page';
 // import GroupPage from 'soapbox/pages/group_page';
-import EmptyPage from 'soapbox/pages/default_page';
 import HomePage from 'soapbox/pages/home_page';
 import ProfilePage from 'soapbox/pages/profile_page';
 import RemoteInstancePage from 'soapbox/pages/remote_instance_page';
 import StatusPage from 'soapbox/pages/status_page';
-import { getAccessToken } from 'soapbox/utils/auth';
-import { getVapidKey } from 'soapbox/utils/auth';
+import { getAccessToken, getVapidKey } from 'soapbox/utils/auth';
 import { cacheCurrentUrl } from 'soapbox/utils/redirect';
 import { isStandalone } from 'soapbox/utils/state';
 // import GroupSidebarPanel from '../groups/sidebar_panel';
@@ -120,6 +118,8 @@ import { WrappedRoute } from './util/react_router_helpers';
 // Without this it ends up in ~8 very commonly used bundles.
 import 'soapbox/components/status';
 
+const EmptyPage = HomePage;
+
 const isMobile = (width: number): boolean => width <= 1190;
 
 const messages = defineMessages({
@@ -156,8 +156,8 @@ const keyMap = {
 };
 
 const SwitchingColumnsArea: React.FC = ({ children }) => {
-  const history = useHistory();
   const features = useFeatures();
+  const { search } = useLocation();
 
   const { authenticatedProfile, cryptoAddresses } = useSoapboxConfig();
   const hasCrypto = cryptoAddresses.size > 0;
@@ -232,7 +232,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <Redirect from='/settings/otp_authentication' to='/settings/mfa' />
       <Redirect from='/settings/applications' to='/developers' />
       <Redirect from='/auth/edit' to='/settings' />
-      <Redirect from='/auth/confirmation' to={`/email-confirmation${history.location.search}`} />
+      <Redirect from='/auth/confirmation' to={`/email-confirmation${search}`} />
       <Redirect from='/auth/reset_password' to='/reset-password' />
       <Redirect from='/auth/edit_password' to='/edit-password' />
       <Redirect from='/auth/sign_in' to='/login' />
@@ -247,7 +247,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <Redirect from='/auth/external' to='/login/external' />
       <Redirect from='/auth/mfa' to='/settings/mfa' />
       <Redirect from='/auth/password/new' to='/reset-password' />
-      <Redirect from='/auth/password/edit' to='/edit-password' />
+      <Redirect from='/auth/password/edit' to={`/edit-password${search}`} />
 
       <WrappedRoute path='/tags/:id' publicRoute page={DefaultPage} component={HashtagTimeline} content={children} />
 
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index 400f6b6c4a..8b76dce343 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -8,8 +8,7 @@ import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
 import { startOnboarding } from 'soapbox/actions/onboarding';
 import snackbar from 'soapbox/actions/snackbar';
-import { createAccount } from 'soapbox/actions/verification';
-import { removeStoredVerification } from 'soapbox/actions/verification';
+import { createAccount, removeStoredVerification } from 'soapbox/actions/verification';
 import { Button, Form, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { getRedirectUrl } from 'soapbox/utils/redirect';
diff --git a/app/soapbox/features/verification/steps/__tests__/age-verification.test.js b/app/soapbox/features/verification/steps/__tests__/age-verification.test.js
index 122df77bd4..7dd8353139 100644
Binary files a/app/soapbox/features/verification/steps/__tests__/age-verification.test.js and b/app/soapbox/features/verification/steps/__tests__/age-verification.test.js differ
diff --git a/app/soapbox/features/verification/steps/age-verification.js b/app/soapbox/features/verification/steps/age-verification.js
index caeed7704e..71b33772da 100644
Binary files a/app/soapbox/features/verification/steps/age-verification.js and b/app/soapbox/features/verification/steps/age-verification.js differ
diff --git a/app/soapbox/features/verification/steps/email-verification.js b/app/soapbox/features/verification/steps/email-verification.js
index fba2862c11..05e463db38 100644
Binary files a/app/soapbox/features/verification/steps/email-verification.js and b/app/soapbox/features/verification/steps/email-verification.js differ
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index e6267ac943..74957a487a 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -344,6 +344,9 @@
   "crypto_donate_panel.actions.view": "Click to see {count} {count, plural, one {wallet} other {wallets}}",
   "crypto_donate_panel.heading": "Donate Cryptocurrency",
   "crypto_donate_panel.intro.message": "{siteTitle} accepts cryptocurrency donations to fund our service. Thank you for your support!",
+  "datepicker.month": "Month",
+  "datepicker.day": "Day",
+  "datepicker.year": "Year",
   "datepicker.hint": "Scheduled to post at…",
   "datepicker.next_month": "Next month",
   "datepicker.next_year": "Next year",
diff --git a/app/soapbox/reducers/contexts.ts b/app/soapbox/reducers/contexts.ts
index bfc830c931..73cbd825ec 100644
--- a/app/soapbox/reducers/contexts.ts
+++ b/app/soapbox/reducers/contexts.ts
@@ -11,10 +11,10 @@ import {
   ACCOUNT_MUTE_SUCCESS,
 } from '../actions/accounts';
 import {
+  CONTEXT_FETCH_SUCCESS,
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
 } from '../actions/statuses';
-import { CONTEXT_FETCH_SUCCESS } from '../actions/statuses';
 import { TIMELINE_DELETE } from '../actions/timelines';
 
 import type { ReducerStatus } from './statuses';
diff --git a/app/soapbox/utils/__tests__/status-test.js b/app/soapbox/utils/__tests__/status-test.js
index 0dcb3e78a5..4556382de3 100644
Binary files a/app/soapbox/utils/__tests__/status-test.js and b/app/soapbox/utils/__tests__/status-test.js differ
diff --git a/app/soapbox/utils/status.ts b/app/soapbox/utils/status.ts
index b735fb75d9..439edfc020 100644
--- a/app/soapbox/utils/status.ts
+++ b/app/soapbox/utils/status.ts
@@ -2,6 +2,17 @@ import { isIntegerId } from 'soapbox/utils/numbers';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
+/** Get the initial visibility of media attachments from user settings. */
+export const defaultMediaVisibility = (status: StatusEntity | undefined, displayMedia: string): boolean => {
+  if (!status) return false;
+
+  if (status.reblog && typeof status.reblog === 'object') {
+    status = status.reblog;
+  }
+
+  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
+};
+
 /** Grab the first external link from a status. */
 export const getFirstExternalLink = (status: StatusEntity): HTMLAnchorElement | null => {
   try {
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index df6888ad53..0194f4a426 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -1,5 +1,6 @@
 select {
   @apply pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
 }
 
 .form-error::before,